HTML知识总结
1.web标准
1.1 定义
web标准是由W3C组织和其他标准化组织制定的一系列标准的集合
1.2 web标准的优点（为什么需要web标准）：
（1）让不同的开发人员写出的页面更标准，更统一
（2）让web的发展前景更广阔
（3）更容易被搜寻引擎搜索
（4）降低网站流量费用
（5）使网站更容易维护
（6）提高页面浏览速度
1.3 web标准的构成（主要包含结构、表现、行为）
（1）结构
作用：用于对网页元素进行整理和分类，现阶段主要学习的是HTML
（2）表现
作用：用于设置网页元素的版式、颜色、大小等外观样式，主要指的是CSS
（3）行为
说明：行为是指网页模型的定义以及交互的编写，现阶段主要学的是JavaScript
小结：Web标准提出的最佳体验方案：结构、样式、行为相分离
简单理解：结构写到HTML文件中，表现写到CSS文件中，行为写到JavaScript文件中
2 什么是HTML
2.1 HTML指的是超文本标记语言
2.2 超文本的含义：
① 可以加入图片、声音、动画、多媒体等内容（超越了文本限制）
② 可以从一个文件跳转到另一个文件，与世界各地主机的文件连接（超级链接文本）
2.3 作用
用来描述网页的一种语言
2.4 注意事项
HTML不是一种编程语言，而是一种标记语言。标记语言是一套标记标签（重点是标签）
3 常用浏览器内核
3.1 浏览器内核
即为浏览器的渲染引擎
3.2 作用
负责读取网页内容，整理讯息，计算机网页的显示方式并显示页面
3.3 分类
① IE浏览器，其内核为：Trident 备注：常见相同内核的浏览器为IE浏览器，猎豹安全浏览器，360极速浏览器，百度浏览器
② firefox浏览器，其内核为：Gecko 备注：常见使用该内核的浏览器为：火狐浏览器
③ Safari浏览器，其内核为：Webkit,备注：它是苹果浏览器的内核
④ Chrome/Opera，其内核为：Blink 备注：它是谷歌浏览器或Opera浏览器的内核，Blink其实是WebKit的分支
4 标签
4.1 标签语义
每个标签都有自身的含义，比如footer，从标签名就能看出来一般作用于底部
4.2 单标签
只有一个标签，没有标签内容
4.3 双标签
成对出现的标签
4.4 常用标签
4.4.1 标题标签（h1~h6，双标签）
（1）标签语义
作为标题使用，并且依据重要性递减
（2）特点
① 加了标题的文字会变得加粗，字号也会变大
② 一个标题独占一行（块级元素）
4.4.2 段落标签（p标签，双标签）
（1）标签语义：将文档分段
（2）特点：每个段落之间会有一定的段间隔，例如word文档里的单倍行距
4.4.3 换行标签（br标签，单标签）
（1）标签语义：强制换行
（2）特点：只是简单的开始新的一行，跟段落标签不一样
4.4.4 文本格式化标签
（1）使用场景：网页中有时需要为文字设置粗体、斜体或下划线等效果，这时就需要用到文本格式化标签，使文字以特殊的方式显示
（2）标签语义：突出重要性，比普通文字更重要
（3）分类
a. strong标签或者b标签（都是双标签）
-
语义：加粗
-
说明: 更推荐使用strong标签，语义更强烈 （粗体的英文：bold）
b. em标签或者i标签（都是双标签）
- 语义：倾斜
- 说明：更推荐使用em标签，语义更强烈 （斜体的英文：italic）
c. del标签或者s标签（都是双标签）
- 语义：删除线
- 说明：更推荐使用del标签，语义更强烈（删除：delete）
d. ins标签或者u标签（都是双标签）
- 语义：下划线
- 说明：更推荐使用ins标签，语义更强烈（下划线：underline）
4.4.5 div和span
（1）作用：他们没有语义，就是一个盒子，用来装内容
（2）特点
① div标签用来布局，为块级元素，一行只能放一个div，是个大盒子
② span标签用来布局，为内联元素，一行可放多个span，是个小盒子
（3）说明
① div是division的缩写，表示分割、分区
② span意为跨度、跨距
4.4.6 特殊字符
| 特殊字符 | 描述 | 字符的代码 |
|---|---|---|
| 空格符 |  +‘;’ | |
| < | 小于号 | <+‘;’ |
| > | 大于号 | >+‘;’ |
| & | 和号 | &+‘;’ |
| ￥ | 人民币 | ¥+‘;’ |
| © | 版权 | ©+‘;’ |
| ® | 注册商标 | ®+‘;’ |
| ° | 摄氏度 | °+‘;’ |
| ± | 正负号 | ±+‘;’ |
| × | 乘号 | ×+‘;’ |
| ÷ | 除号 | ÷+‘;’ |
| ² | 平方2（上标2） | ²+‘;’ |
| ³ | 立方3（上标3） | ³+‘;’ |
4.4.7 注释标签
<!-- --!>可单行注释，也可多行注释
4.4.8 表格标签
（1）表头单元格标签（th标签）
a.作用域（位置）：一般表头单元格位于表格的第一行或第一列
b.特点：表头单元格中的文本内容加粗居中显示
c.说明：th标签为双标签，且th标签表示HTML表格的表头部分（table head的缩写）
（2）表格相关属性
a.说明：在实际开发中，表格相关属性的标签我们并不常用，后面通过CSS来设置
b.分类
| 属性名 | 属性值 | 描述 |
|---|---|---|
| align | left、center、right | 规定表格相对周围元素的对齐方式 |
| border | 1 或 “” | 规定单元格是否拥有边框，默认为"",表示没有边框 |
| cellpadding | 像素值 | 规定边沿与其内容之间的空白，默认1像素 |
| cellspacing | 像素值 | 规定单元格之间的空白，默认2像素 |
| width | 像素值或百分比 | 规定表格的宽度 |
（3）表格结构标签
a.使用场景：因为表格可能很长，为了更好的表示表格的语义，可以将表格分割成表格头部和表格主体两大部分
b.分类
① 标签表示表格的头部区域
② 标签表示表格的主体区域
c.作用：更好的分清表格结构
（4）合并单元格
a.合并单元格方式
① 跨行合并：rowspan=“合并单元格的个数”
② 跨列合并：colspan=“合并单元格的个数”
b.目标单元格
① 跨行：最上侧单元格为目标单元格，写合并代码
② 跨列：最左侧单元格为目标单元格，写合并代码
c.合并单元格的步骤
① 先确定是跨行还是跨列合并
② 找到目标单元格，写上合并方式=合并单元格数量。如：
<td colspan="2"></td>
③ 删除多余的单元格
（4）作用
① 用于展示数据、显示数据
② 可以让数据显示的非常的规整，可读性非常好
（5）注意：表格不是用来布局页面的，而是用来展示数据的
（6）基本语法
① <table></table>是用于定义表格的标签
② <tr></tr>标签是用于定义表格中的行，必须嵌套在<table></table>标签中
③ <td></td>标签用于定义表格中的单元格，必须嵌套在<tr></tr>标签中
④ 字母td指表格数据（table data），即数据单元格的内容
4.4.9 列表标签
（1）作用：用于页面布局
（2）特点
a.整齐、整洁、有序
b.作为布局会更加自由和方便
（3）分类
① 有序列表（理解即可）
a.理解：有排列顺序的列表，其各个列表项会按照一定的顺序排列定义
b.使用的标签：ol,列表项会使用li标签定义
c.特点：列表排序默认以数字来显示（是否可以自定义排列顺序？可以，其属性为HTML5新增，具体可查阅文献）
d.基本语法格式
i.<ol></ol>中只能嵌套<li></li>,直接在<ol></ol>标签中输入其他标签或者文字的做法是不被允许的。
ii.<li>与</li>之间相当于一个容器，可以容纳所有元素。
iii.有序列表会带有自己样式属性，但在实际使用时，我们会通过CSS来设置
示例：
<ol>
<li><a href='#'>关于</a></li>
<li><a href='#'>管理团队</a></li>
<li><a href='#'>工作机会</a></li>
<li><a href='#'>客户服务</a></li>
<li><a href='#'>帮助</a></li>
</ol>
② 无序列表（重要）
a.使用的标签：ul,列表项会用li标签定义
b.特点：一般会以项目符号呈现列表项
c.基本语法格式
i. 无序列表的各个列表项之间没有顺序级别之分，是并列的
ii. <ul></ul>中只能嵌套<li></li>,直接在<ul></ul>标签中输入其他标签或者文字的做法是不被允许的。
iii <li>与</li>之间相当于一个容器，可以容纳所有元素
iiii 无序列表会带有自己的样式属性，但在实际使用时，我们会使用CSS来设置
示例：
<ul>
<li><a href='#'>关于</a></li>
<li><a href='#'>管理团队</a></li>
<li><a href='#'>工作机会</a></li>
<li><a href='#'>客户服务</a></li>
<li><a href='#'>帮助</a></li>
</ul>
③ 自定义列表
a.使用场景：常用语对术语或名词进行解释和描述
b.特点：定义列表的列表项前没有任何项目符号
c.相关标签
- i) <dl>标签用于定义描述列表（或定义列表）
- ii) <dt>标签用于定义项目/名字
- iii) <dd>标签用于描述每一个项目/名字
- iiii) **这三者需联合使用**
d.基本语法格式
- i) <dl></dl>里面只能包含<dt>和<dd>
- ii) <dt>和<dd>个数没有限制，经常是一个<dt>对应多个<dd>
- iii) 示例
<dl>
<dt>关于学成网</dt>
<dd><a href='#'>关于</a></dd>
<dd><a href='#'>管理团队</a></dd>
<dd><a href='#'>工作机会</a></dd>
<dd><a href='#'>客户服务</a></dd>
<dd><a href='#'>帮助</a></dd>
</dl>
(4) 列表总结
| 标签名 | 定义 | 说明 |
|---|---|---|
| ul | 无序列表 | 里面只能包含li，没有顺序，使用较多。li里面可以包含任意标签 |
| ol | 有序列表 | ol里面只能包含li，有顺序，使用相对较少。li里面可以包含任意标签 |
| dl | 自定义列表 | dl里面只能包含dt和dd。dt和dd里面可以放任意标签 |
d.注意点
- i) 学会什么时候使用无序列表，什么使用用自定义列表
- ii) 无序列表和自定义列表代码怎么写
- iii) 列表布局
4.4.10 图像标签
（1）使用标签：img标签
（2）作用：定义HTML页面中的图像
（3）使用方法：<img src=‘‘图像URL’’ />
（4）说明：img单词image的缩写，意为图像
（5）属性（简单理解就是属于这个图像标签的特性）
| 属性名 | 属性值 | 说明 | 作用 |
|---|---|---|---|
| src | 图片路径 | 必需属性 | 指定图像文件的路径和文件名 |
| alt | 文本 | 替换文本 | 当图像无法正常显示时，会显示alt属性中的文字作为补充 |
| title | 文本 | 提示文本 | 当鼠标放到图像上时，会显示title属性里的文字 |
| border | 像素 | 设置图像的边框粗细 | |
| width | 像素 | 设置图像的宽度 | |
| height | 像素 | 设置图像的高度 |
a.1 相关路径说明
i) 目录文件夹和根目录
ii) 绝对路径: 是指目录下的绝对位置，直接到达目标位置，通常是从盘符开始的路径。如：“D:\web\img\logo.gif"或完整的网络地址"http://www.itcast.cn/images/logo.gif”
iii) 相对路径
① 说明：以引用文件所在位置为参考基础，而建立出的目录路径。（简单来说，就是图片相对与HTML页面的位置）
② 分类
i.同一级路径，无符号，表示引用的图像文件与当前HTML页面在同一个文件路径下，eg
<img src="baidu.gif" />
ii.下一级路径，符号为"/",表示引用的图像文件位于当前HTML文件的下一个（或几个）文件夹里，如：
<img src="images/baidu.gif" />
iii.上一级路径，符号为"…/",表示引用的图像文件位于当前HTML页面的上一个（或几个）文件夹里，如：
<img src="../baidu.gif" />
③ 小结
相对路径是从代码所在的这个文件出发，去寻找目标文件的，而我们这里所说的上一级、下一级和同一级就是图片相对于HTML页面的位置
（6）属性注意点
- ① 图像标签可以拥有多个属性，书写时必须写在标签名的后面
- ② 属性之间不分先后顺序，标签名与属性、属性与属性之间均以空格分开
- ③ 属性采取键值对的格式，即key = "value"格式，属性=“属性值”
（7）重要掌握点
① 请说出图像标签哪个属性是必须要写的？
② 请说出图像标签中alt和title属性区别？
4.4.11 链接标签
（1）语法格式
<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>
（2）属性
① 属性名：href, 作用：用于指定链接目标的url地址，（必须属性）当标签应用为href属性时，她就具有了超链接的功能
② 属性名：target, 作用：用于指定链接页面的打开方式，其中_self为默认值（表示不弹出新页面，在当前页面跳转到指定页面），_blank为在新窗口中打开指定页面方式
（3）说明
单词anchor的缩写，意为：锚
（4）链接分类
① 外部链接：例如
<a href="http://www.baidu.com">百度</a>
② 内部链接：网站内部页面之间的相互链接，直接链接内部页面名称即可，例如
<a href="index.html">首页</a>
③ 空链接：如果当时没有确定链接目标时
< a href="#">首页</a>
④ 下载链接：如果href里面地址是一个文件或者压缩包，会下载这个文件
⑤ 网页元素链接：在网页中的各种元素，如文本、图像、表格、音频、视频等都可以添加超链接
（5）页面不跳转的方法（使其指向空或不返回任何内容）
① 应用场景：适用于当页面出现链接点击，但是有其他的用途（计时，显示其他盒子等），阻止a标签的默认行为
② 使用方法
a.方法1：
<a href="javascript:void(0);">点击此无反应JavaScript:void(0)</a>
b.方法2：
<a href="javascript:;">点击此无反应javascript:</a>
c.方法3：利用标签事件onclick，阻止其默认行为。如：
<a href="" onclick="return false;">return false;</a>
d.方法4：利用标签事件onclick，阻止其默认行为。如：
<a href="#" onclick="return false;">return false;</a>
注意：此方法中只用一个"#"是不可以的，因为#包含了一个位置信息，默认的锚是#top，也就是网页的上端。
e.标签事件中οnclick="return false;"是指onclick事件时原本的行为
f.说明：javascript中void是一个操作符，该操作符指定要计算一个表达式但是不返回值
f.i 用法格式
- 1)javascript:void (expression)
- 2)javascript:void expression
f.ii 备注
使用void操作符指定超链接，表达式会被计算但是不会在当前文档处装入任何内容，所以，javascript:void(0)仅仅表示一个死链接。
4.4.12 表单标签
（1）目的（为什么需要表单标签）
收集用户信息
（2）使用场景：需要跟用户进行交互时以及收集用户资料时
（3）表单的组成
① 表单域
a.定义：是一个包含表单元素的区域
b.使用的标签：
b.i form的作用
- i.form标签用于定义表单域，以实现用户信息的收集和传递
- ii.form会把它范围内的表单元素信息提交给服务器
c.语法格式
<form action="url地址" method="提交方式" name="表单域名称">
各种表单元素
</form>
d.常用属性
| 属性 | 属性值 | 作用 |
|---|---|---|
| action | url地址 | 用于指定接收并处理表单数据的服务器程序的url地址。 |
| method | get/post | 用于设置表单数据的提交方式，其取值为get或post。 |
| name | 名称 | 用于指定表单的名称，以区分同一个页面中的多个表单域。 |
② 表单控件
a.定义：在表单域中可以定义各种表单元素，这些表单元素就是允许用户在表单中输入或者选择的内容控件。
b.常用表单控件
-
input输入表单元素
i.说明：英文中，input是输入；而在表单元素中，标签用于收集用户信息
ii.语法格式：
<input type="属性值" />iii.注意点：
1)input为单标签
2)type属性设置不同属性值用来指定不同的控件类型
iiii.相关属性
属性值 描述 button 定义可点击按钮（多数情况下，用于通过javascript启动脚本） CheckBox 定义复选框 file 定义输入字段和“浏览”按钮，供文件上传 hidden 定义隐藏的输入字段 image 定义图像形式的提交按钮 password 定义密码字段。该字段中的字符被掩码显示 radio 定义单选按钮 reset 定义重置按钮。重置按钮会清除表单中的所有数据 submit 定义提交按钮。提交按钮会把表单数据发送到服务器 text 定义单行的输入字段，用户可在其中输入文本，默认宽度为20个字符 iiiii.input标签的其他属性（主要属性为type）
属性 属性值 描述 name 由用户自定义 定义input元素的名称 value 由用户自定义 规定input元素的值 checked checked 规定此input元素首次加载时应当被选中 maxlength 正整数 规定输入字段中字符的最大长度 iiiiii.注意事项
-
name属性
i) 定义：当前input表单的名字即为name
ii) 作用：主要用于区别不同表单
iii) 注意：name属性后面的值，为自定义属性
iiii) 特点：是每个表单元素都有的属性值，主要给后台人员使用
iiiii) 要求：如果是单选框或者复选框，则两者的name属性必须一致
-
value属性
i) 定义：当前input表单的值即为该表单的value
ii) 特点：是每个表单元素都有的属性值，主要给后台人员使用
-
checked属性
i) checked属性的主要作用为一打开页面，就默认选中某个表单元素
ii) 主要针对于单选按钮和复选框
-
如何让input表单元素展示不同的形态？比如单选按钮或复选框
答案：使用type属性，type属性可以让input表单元素设置不同的形态
-
-
label标签
a.定义：为input表单元素定义标注（标签）
b.作用：用于绑定一个表单元素，当用户点击
c.语法格式
<label for="sex">男<label> <input type="radio" name="sex" id="sex" />d.核心：
-
select下拉表单元素
a.定义：用来定义下拉列表
b.应用场景：当有多个选项让用户选择，且想要节省页面空间时，就可以使用select标签控件定义下拉列表
c.语法格式
<select> <option>选项1</option> <option>选项2</option> <option>选项3</option> …… </select>d.注意事项
i) 中至少包含一对
ii) 在中定义selected = "selected"时，当前项即为默认选中项
-
textarea文本域元素
a.语法格式
<textarea rows="3" cols="20">文本内容</textarea>b.注意事项
i) 通过标签可以轻松地创建多行文本输入框
ii) cols=“每行中的字符数” ，rows=“现实的行数”，我们在实际开发中不会使用，都是使用CSS来改变大小
c.使用场景：当用户输入内容较多的情况下，可以使用标签
d.定义：用于定义多行文本输入的控件
e.作用：可以输入更多的文字，该控件常见于留言板，评论
③ 提示信息
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-bWdnP1Ot-1671872012792)(D:\Desktop\3.png)]
注意：HTML不区分大小写，但一般用小写
b.应用场景：当有多个选项让用户选择，且想要节省页面空间时，就可以使用select标签控件定义下拉列表
c.语法格式
<select>
<option>选项1</option>
<option>选项2</option>
<option>选项3</option>
……
</select>
d.注意事项
i) 中至少包含一对
ii) 在中定义selected = "selected"时，当前项即为默认选中项
-
textarea文本域元素
a.语法格式
<textarea rows="3" cols="20">文本内容</textarea>b.注意事项
i) 通过标签可以轻松地创建多行文本输入框
ii) cols=“每行中的字符数” ，rows=“现实的行数”，我们在实际开发中不会使用，都是使用CSS来改变大小
c.使用场景：当用户输入内容较多的情况下，可以使用标签
d.定义：用于定义多行文本输入的控件
e.作用：可以输入更多的文字，该控件常见于留言板，评论
③ 组成元素
注意：HTML不区分大小写，但一般用小写
扫一扫
2042
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
