1.html:超文本标记语言。它是一种标识性的语言，非编程语言，不能使用逻辑运算。通过标签将网络上的文本格式进行统一，使用分散网络资源链接为一个逻辑整体，属于标记语言。
超文本：就是指页面内可以包含图片，链接，甚至音乐，视频等非文字元素；一般使用超链接进行关联，是一种组织信息的方法
标记：标签，用<>包裹的具有一定含义的内容
2.浏览器的内核
Trident内核：代表产品IE，又被称为IE内核，是微软开发的一种排版引擎。使用Trident渲染引擎的浏览器有：IE，遨游，世界之窗浏览器，腾讯TT等等
Gecko内核：代表产品Mozilla FirefoxGecko是一套开源的，C++编写的排版引擎。使用它最著名的浏览器有Firefox,Netscape 6至9.
webkit内核：代表产品有Safari,主要用于Mas OS系统，使用它的浏览器有Safari和谷歌浏览器Chrome.
presto内核：代表产品OperaPresto是由Opera Software开发的浏览器排版引擎，它是世界公认最快的渲染速度引擎
Blink内核：由Google和Opera Software开发的浏览器排版引擎，2013年4月发布，现在Chrome和Opera内核是Blink
3.前端的开发工具：DCloud HBuilder/Subilme test 3/VScode/webstorm
4.HTML文档结构：meta:元，主要用来对应的设置
stylesheet是样式表的意 body里面用于大量的标签 ！：表示声明的意思
<!DOCTYPE html>这一行代码的意思是：下面的文档标签将以html5的规范去解析
用link生成网站的图标
link:favicon
5.标签：
<div>：用来布局的，没有具体含义，可以解释层
<hx>:标题的意思，从一级到六级，一级标题最大，六级最小，会自动加粗，有默认字号
<p>:表示段落，相当于一个回车
<br>是一个单标签，放在一段文字的结尾用于换行
<hr>是一个分割线，一般用于装饰作用，单标签
<hr width="80%" align="center" color="red" height="2px"/>(align是对齐的意思，center表示居中的意思,px表示像素的意思）
<a>表示超链接，实现链接跳转 <a href="网址" title="提示语"（或者打开自己的网站，若不跳转target="_blank,如果跳转target="_self"）>名称</a>
跳转的话可以值网址也可以是文件文档
img：用来加载外部图片、图像 src:用来设定加载的图片或图像的路径 alt:当图片加载不成功时，将显示其内容
基本格式为：<img src"图片地址" title="移动鼠标时显示的内容" alt=" ">
span:作用与div一样，都是用来布局的，不同是div会独占一行，而span不会,用于行内布局
ul/ol:列表，前者是无序列表，后者是有序的，他们的列表内容都用的是li标签
ul>li{li$}*3快速生成3个ul和li嵌套
复制的快捷键是ctrl+D
快捷键br*5
一定要写注释，经典的VS注释
标签属性：1.通常由属性名=属性值组成。<p title="段落" class="content"id="content">这是一个测试段落</p>
2.其附加信息的作用
3.不是所用的标签都有属性，比如br
文本格式化标签：就是通过标签来美化文本外观
b和strong:都有加粗的作用，但strong除了加粗还有强调作用，注：强调主要用于SEO时，便于提取关键字，且都是行级标签（不会自动换行）
i和em:使文字倾斜，em具有强调作用，如果只是简单的倾斜效果，用i标签就可以，比如添加图标签等（行级标签）
<i>文字倾斜</i> <em>文字倾斜且强调</em>
pre:预格式化文本：保留换行和空格及宽度,文字的字号会小一号（块状标签（在浏览器中会独占一行））
<pre> </pre>
small和big:分别让文字缩小一号或放大一号（行级标签（不会独占一行，且不会识别宽高）），p标签是正常的文字大小。big在HTML5中淘汰了，但并没有删除，在开发中尽量不要使用 注：浏览器支持的最小字号为12px字，如果要显示比12px还小文字效果，需要做处理
sub和sup:设置文本为下标和上标 ，用来调整文本正常显示的基线，且文字会自动小一号
<p>X1+X2=Y</p>
<p>下标：X<sub>1</sub>+X<sub>2</sub>=Y</p>
<p>上标：X<sup>2</sup>+Y<sup>2</sup>=Z</p>
HTML中的实意转换：
<p> aa bb</p>,起到增加空格的作用
<p>1×2=2</p> <:小于号（<） >:大于号（>） &:与号（&）  :空格 ©:版权 ×:乘号（x） ÷:除号（/）
块级元素（相当于执行了display:block操作）：1.独占一行 2.宽度和高度是可控的，如果每没有设置其高度，将默认铺满整行 3.其内可以包含块级和行级元素
行级元素（相当执行了display:inline;操作）： 1.不会独占一行，与相邻的行政元素占同一行，直到行占满。会自动掉到下一行 2.宽度和高度是不可控的 3.其内只有包含行级元素 （同是块级标签是可以改变行宽和行高，但行级标签不受影响）
行级的格式：<p style="width:300px;height:50px;background:gray;">p</p>
块级标签转行级标签
<p style="width:300px;height:50px;background:gray;display:inline;">块级标签转行级标签</p>
行级标签转块级标签
<span style="width:300px;height:50px;background:gray;display:block;">行级标签转为块级标签</span>
W3C:专门负责统一web相关的各项标准，由结构表现和形式组成
1.行级元素不能放在块级元素中
2.块级元素不能放在<p>里面
3.块级元素和块级元素并列，内嵌元素和内嵌元素并列
<q> </q>用于加双引号 table[border=1]>caption{学生信息表}+tr>th*3(用于生成一个宽为1的表格
项目开发时，项目中文件或目录名不能出现汉字和空格之类的其他符号，文件和目录名一般以字母或下划线开头---，其后可以出现数字和文件名
目录名：taobaopro images/img/pic video music file web/sites....
文件名：index.html(首页） product.html(产品页） order.html(订单页）new_details.html(新闻详细页）
标签由标签名、标签属性和文本内容三部分组成（注意单标签没有文本内容）
标签属性是对便签的一种描述方式
标签属性分为通用属性、自有属性和自定义属性
通用属性：所有便签都具有的属性
通用属性有：
id:用来给标签取一个唯一的名称 <p id ="p1">段落1</p> <p id="p2">段落2</p>
class:用来给标签取一个类名 <div class="test">div</div> <p class="test">p</p>（一组标签）
style:用来设置该标签的行内样式 <p style="color:red;width:200px;border:lpx solid #00f;">这是一个测试</p>
title:当鼠标移到该标签，所显示的提示内容 <p title="您好">HOW are you?</p>(鼠标移上去的显示的是在title中的
自定义属性：通常用来传值或用于图片懒加载等方面
格式：date-* <img date-src="图片名" alt="提示文本"/> <p date-id="goodsid">....</p>
表格 table主要用于呈现格式化数据。表格是由行和列组成的
<table>
<tr>行
<td></td>列
<td></td>
....
</tr>
</table> table>tr*2>td{内容}*3 align是居中的意思 <table border="1" width="400" cellspacing ="0" cellpadding="10" align="center">
border：表格边框，默认单位是像素 width:表格宽度，默认单位是像素 align:表格对齐方式（left（默认）/center/right）cellpaddng:单元格文本与边框的距离 cellspacing:单元格边框间距
HTML 表单中有两种类型的单元格：表头单元格 - 包含表头信息（由 th 元素创建）标准单元格 - 包含数据（由 td 元素创建）。th 元素内部的文本通常会呈现为居中的粗体文本，而 td 元素内的文本通常是左对齐的普通文本 th:title head
跨行/跨列属性主要用来绘制复杂表格 rowspan:跨行 colspan:跨列
Emmet语法：table【border=1 width=500 align=center】>tr*3>tha{内容区$$}*3 $$代表的是01 02.....
对于表格的合并可以用rowspan="2" 居中：align="center" 上下的靠边：valign="top"/bottom/middle(垂直对齐）
完整表格：caption（标题），thead(表头）tbody(表体）（属于同户级的）
绘制一个学生信息表：table[border=1 width=600 align=center]>(caption{学生信息表}+（thead>tr>th*4）+(tbody>tr*3>td*4)+(tfoot>tr>td[colspan=1])
form表单标签是所有标签最核心标签之一。他是用来实现前后端交互的一个重要标签
常用属性：
name:表单名称
action:表单数据提交的地方（通常是一个后台文件名（.jsp/.php/.asp/.aspx/.py等），或网址。如果是#，表示提交到当前文件下
method:前端提交数据到后端的方法，主要有：get和post，默认的是get(区别在于get会将你提交的内容暴露在地址栏中，而post 不会出现这种情况
<form name="stuInfo" action="test.php" method="get">
<input type="test" name="userName" placeholder="请输入您的姓名">
<input type="submit">
</form>
表单元素分为：
input类 textarea类 select类 button类
1.input：主要用来输入，选择或发出指令(根据type进行分类）
<input type="test"/>:定义供文本输入的单行输入字段
<input type="password"/>:定义密码字段
<input type="sudmit"/>:定义提交表单数据至表单处理程序的按钮
<input type="image"/>:定义图片提交按钮
<input type="radio"/>:定义单选按钮{check{boolean}:属性为选中状态，true为选中，false为未选中
<input type="checkbox"/>:定义复选框
{check{boolean}:属性为选中状态，true为选中，false为未选中
<input type="button"/>:定义普通按钮
<input type="reset"/>:定义重置按钮
<input type="file"/>:定义文件框
test:单行文本输入框 type="test"可以不写，默认值
属性：placeholder(提示）/name(命名）/minlength和maxlength(最少输入的字符个数）/disabled（失效）/readonly（只读）用于激活但是不能输入 想控制输入的字符个数可以用minlength和maxlength
格式如下：<input type="test" name="test" placeholder="请输入一个数字" vale="100" minlength="3" maxlength="6">
vale(默认值）/pattern(正则匹配）
2.密码框
password
属性和test一样 radio:单选钮，通常是两项以上。常用属性有：name(必须要有）/value/checked(选中）/disabled（失效）/readonly（只读）
checkbox:复选框，可以用来选择0项，1项或多项（常用属性和radio一样）
file:文件上传按钮
button:通常用它去调用脚本代码（常用属性有：value(按钮的标题）/disabled(失效））
imag:图片按钮，用法和button一样。有一个特殊的属性；src(用来加载提示图片，用它替换了value)
submit:提交按钮，用来将表单数据提交到后台
常用属性：value(按钮的标题）/disabled(失效）
reset:重置按钮，将表单所有组件输入的内容全部清空，还原为初始状态（input类）
常用属性有：value(按钮的标题）/disabled(
textarea类
文本域（也可以叫多行文本框），主要用于大批量的内容
常用属性：name/id/cols（列数）/rows（行数）/placeholder/minlength/maxlength/required(必须输入）
select类
下拉列表框，默认用于单项选择，用option呈现每个选项
multiple属性：表示可以多选，这时的下拉列表框编程人能够
size:最多显示的行数
button类
普通按钮：具有提交功能，可以单独使用，不写在form元素中，如果写在form中，有提交功能
<botton id="btnok">确认</button>(这里的button主要用来调用js代码）
<form action="test.aspx">
<input type="test" name="info">
<button>提交</button>(这里的button的功能与input中的submut按钮的功能一样
</form>
表单的通用属性：
name属性：规定输入字段名称
value属性：规定输入字段的初始值
readonly属性：规定输入字段为只读
disabled属性：规定输入字段是禁用的
iframe:框架集，是用来将多个网页文件合成一个文件
常见属性：
name:框架名
src：引入外部html文件
scrolling：滚动条（yes/no/auto）
width:宽度（%/px）
height：高度(%/px)
fameborder：是否有边框（1/0）
marginheiht:框架顶部和底端的距离（%/px)
marginwidth:框架离左右的距离（%/px）
科普：banner基于网站的角度来讲，它主要的是页面中的横幅广告，banner广告主要存在于网站的首页导航顶端，也可以是内容咨询页的顶端，亦或是网站页面底部。
注意：在实际开发中，尽量减少iframe,因为它破坏了前进和后退功能，且不利于SEO（搜索引擎优化）
//////当用户在浏览器输入网址后，浏览器与服务器建立了一个连接，浏览器给 Web 服务器发送了一个 HTTP 请求，服务器接收并解析请求后，返回响应。HTTP 响应中包含状态代码和返回资源的内容（响应正文）。
200 ：成功。
400 ：客户端请求有语法错误，服务器端不能理解。
401 ：该请求可能未经过授权。
403 ：服务器端收到该请求，但是拒绝为它提供服务，可能是没有权限等等。
404 ：该资源没找到。
500 ：服务器端发生了一个不可预知的错误。
503 ：服务器端当前还不能处理客户端的这个请求，可能过段时间之后才能恢复正常。
p和div两个块级元素的区分：
语义：
<div>：这是一个通用的容器元素，没有特定的语义含义。它通常用于布局和样式化，或者作为其他具有特定语义的元素（如<article>、<section>等）的容器。
<p>：这是一个段落元素，表示一个文本段落。浏览器通常会在每个<p>元素前后添加一些空白（margin)
使用场景：
<div>：由于其通用性，<div>通常用于构建页面的布局和结构。它常常与CSS一起使用，以定义元素的样式和位置。
<p>：通常用于定义文档中的段落，以区分不同段落的内容。虽然也可以用<div>来代替<p>，但为了保持HTML的语义化和可访问性，最好使用<p>来表示段落。
妈的<p>是有默认的上下边距的一般采用margin=0进行消除，效果是非常明显的
可嵌套的内容:
<div>：可以包含任何其他HTML元素。
<p>：通常只包含文本或其他块级元素（如<ul>、<ol>、<li>等）。如果需要在段落中包含其他块级元素，这些元素通常需要放在<div>或<span>等其他容器内。
<div>和<span>之间的区别
<div>可以包含其他块级元素和行内元素，甚至可以嵌套另一个<div>。
<span>只能包含其他行内元素或文字内容。
常见的块级元素:div,p,h1-h6,ul,ol,li,table,form
常见的行内元素:span,a,img,strong,em,input,label等
块级元素就是填充整行，行内元素就是对整行中的特定部分
块级元素可以调整宽高内外边距等属性
行级元素的高宽是由内容决定的
对于它们之间的转换：
<a>标签在默认的情况下是行内元素，但如果给a标签设置display:block;属性，它就会变成块级元素
css:层叠样式表，用来美化网页的，做到结构（HTML）和（CSS）分离
css语法有三部分组成：选择器，属性，属性值
h1{
color；red;//其中h1是选择器，color为属性 red为值
}
CSS 语法结构为：选择器{属性：值;属性：值;...}
选择器：通常是你需要设置样式的 HTML 元素。
属性：是你需要设置的样式属性，比如宽高，颜色，大小等。
属性值：你需要设置的样式属性的具体值，比如宽高具体是多少 px，颜色具体是什么颜色。
颜色值：
在网页中的颜色设置是非常重要，有字体颜色，背景颜色，边框颜色等，设置颜色的方法也有很多：
1.英文命名颜色
p{
color：pink;
}
2.RGB颜色（由 Red、Green、Blue 三种颜色的比例来配色，简称 RGB。）
p{
color:rgb(30%,20%,40%);
}
3.十六进制颜色
现在较为普遍的颜色使用法，其原理其实也是 RGB 设置，但是其每一项的值由 0~255 变成了十六进制 00-ff。
p{
color:#00eeff;
}
长度值
px 像素（Pixel）。相对长度单位，像素 px 是相对于显示器屏幕分辨率而言的。
特点：
IE 无法调整那些使用 px 作为单位的字体大小。
国外的大部分网站能够调整的原因在于其使用了 em 或 rem 作为字体单位。
2.em
就是本元素给定字体的 font-size 值，如果元素的 font-size 为 14px，那么 1em=14px。如果 font-size 为 18px，那么 1em=18px。
p{
font-size:14px;
line-height:2em;
}/*在这里的line-height行高被设置成了14*2=28px*/
3.百分比
p{////weigtht加粗
font-size:14px;（字体大小）
line-height:120%;(行高）
}/*行高为：14*1.2=16.8*/
CSS 样式类型分为三种：内联式、内嵌式、外链式。
内联式（行内式）
通过标签的style 属性来设置元素的样式，语法格式为：
<标签名 style="属性1:属性值1; 属性2:属性值2; ..."> 内容 </标签名>
eg:<p style="color:blue;">哈喽，要保持微笑哦。</p>
缺点：只能操作某一个标签，没有实现样式和结构相分离。
内嵌式（内部样式表）
css引用方式：行间样式，内部样式，外部样式，导入外部样式。
行间样式：直接在标签上书写样式
内部样式：在文件的内部书写样式。
<style> 样式内容</style>
外部样式：1.先创建一个css文件；2.再用link标签引入这个文件
导入外部样式：1.先创建一个css文件2.在style标签中用import导入这个样式文件
外部样式：1.先创建一个CSS文件2.再用link引入这个文件
导入外部样式文件：1.先创建一个CSS文件；2.在style标签中用import导入这个样式文件。（主要用）
CSS的选择器：
<style>*{red}</style>(但是此种方法的耗时较长）
标签选择器：用来匹配对应的标签
类选择器：用来选择class命名的标签(是用class进行定义的)
派出选择器：根据上下文来确定选择的标签
对选择器进行分组
让多个选择器(元素)具有相同的样式，一般用于设置公共样式
选择器的继承 子元素可以继承父元素
样式权重
！important(10000)>内联（1000)>id选择器（100）>类，伪选择器（10)>标签原则器（1）（可以用权重来提升外链式的优先级）
css字体
1.font-size:字号
属性值
eg.p{font-size:20px;} p{font-size:100%;}
2.font-family；字体
eg:p{font-family:Courier,"Courier New",monospace;} 逗号并列用于字体样式的备选
3.font-style:文字样式
normal//italic:斜体//oblique:倾斜的字体
eg: p{ font-style:normal;}
p{ font-style:italic;}
p{ font-style:oblique;}
4.font-weight:文字加粗
属性值：
normal:默认值，正常字体
bold:粗体 bolder:比bold粗
lighter:比normal细。
{100-900}：定义由粗到细的字符。400等同于normal,而700等同于bold.
p{font-weight:normal;}
p{font-weight:bold;}
p{font-weight:600;}
5.line-height:行高(设置文本文字的行高。即字体最低端与字体内部顶端之间的距离
属性值：normal:默认值，默认行高 {number+px}:指定行高为长度像素 {number}:指定行高为字体大小的倍数
p{line-height:normal;}
p{line-height:24px;}
p{line-height:1.5;}
6.color:文字的颜色
name:颜色名称指定color
rgb:指定颜色为RGB值
{颜色16进制:指定颜色为16进制}
p{color:red;}
p{color:rgb(100,14,200);}
p{color:#345678;}
7.text-decoration:文字修饰
属性：normal:默认值，无修饰值。 underline:下划线。 line-through:贯穿线、overline:上划线
p{ text-decoration:underline;}
p{test-decoration:line-through;}
p{ test-decoration:overline;}
8.text-align:文本对齐方式
left:默认值，左对齐
center:居中对齐
right:右对齐。
p{ text-align:left;}
p{test-align:center;}
p{ text-align:right;}
9.test-transform:字母大小写
none:默认值（无转换发生）
capitalize:将每个单词的第一个字母转换成大写
uppercase:转换成大写
lowercase:转换成小写
p{text-transform:capitalize;}
p{text-transform:uppercase;}
p{test-tranform:lowercase;}
10.text-index:文本缩进
{number+px}:首行缩进number像素
{number+em}:首行缩进number字符//一个文字距离
p{text-indent:24px;}
p{text-indent:2em;}//两个文字距离
CSS背景（background-color）
1.background-color:设置对象的背景颜色
属性：
transparent:默认值（背景色透明）
{color}:指定颜色
eg:div{background-color:#666666;}
div{background-color:red;}
2.background-image(设置对象的背景图像）
属性值：
none:默认值（无背景图）
url({url}):使用绝对或相对url地址背景图像
eg:div{background-image:none;}
div{background-image:url('../image/pic.png')}
3.background-repea(设置对象的背景图像铺排方式）
（repeat/no-repeat/repeat-x/repeat-y）
4.background-position:设置对象的背景图像位置
属性值：{x-number|top|center|bottom} {y-number|left|center|right}：控制背景图片在元素的位置：x轴，y轴。其铺排方式为no-repeat.
5.backgroud-attachment:设置对象的背景图像滚动位置
属性：
scroll:默认值。背景图像会随着页面其余部分的滚动而滚动
fixed:当页面的其余部分滚动时，背景图像不会移动
eg: body{
background-image:url('.../image/pic.png');
background-repeat:no-repeat;
background-attachment:fixed;
}
当时写的时候, 是边看视频边记的, 感觉写的挺详细的, 但是有点乱....
感谢大家的点赞和关注，你们的支持是我创作的动力！
HTML/CSS基础
一只鱼^_2025-07-05 18:30