视频标签
<video src = "视频文件路径" controls></video>
属性：
| 属性 | 功能 |
| src | 视频路径 |
| controls | 显示播放的控件 |
| autoplay | 自动播放(谷歌浏览器中需配合muted实现静音播放) |
| loop | 循环播放 |
注意：HTML目前只支持三种视频格式：mp4、webm、ogg
例如：
<body> <video src="https://f.video.weibocdn.com/u0/PMKZle78gx07Z4EAHw3S010412046cfg0E020.mp4?label=mp4_1080p&template=1920x1080.25.0&media_id=4811757949222933&tp=8x8A3El:YTkl0eM8&us=0&ori=1&bf=2&ot=h&ps=3lckmu&uid=3ZoTIp&ab=,8143-g0,8013-g0,3601-g29,7598-g0&Expires=1663178348&ssig=gopQw3ve0G&KID=unistore,video" controls> </video> </body>
浏览器显示效果：
超链接
又称a标签、锚链接
点击之后，从当前页面跳转到另一个页面
<a href = "跳转的网页地址">超链接</a>
例如：
<a href="https://www.baidu.com">跳转到百度</a>
如果不设置跳转，则可以把链接路径设置为#(空链接)
属性：target
| 取值 | 效果 |
| _self | 默认值，在当前窗口中跳转(覆盖原网页) |
| _blank | 在新窗口中跳转(保留原网页) |
例如：
<body> <a href="https://blog.csdn.net/huawuque404" target="_blank">一个超链接</a> </body>
浏览器显示效果：
列表
无序列表
在网页中表示一组无顺序之分的列表
标签组成：
| 标签名 | 说明 |
| ul | 表示无序列表的整体，用于包裹li标签 |
| li | 表示无序标签的每一项，用于包含每一行的内容 |
列表的每一项前默认显示圆点标识
注意：
- ul标签中只允许包含li标签
- li标签可以包含任何内容
有序列表
在网页中表示一组有顺序之分的列表
标签组成：
| 标签名 | 说明 |
| ol | 表示有序列表的整体，用于包裹li标签 |
| li | 表示有序标签的每一项，用于包含每一行的内容 |
列表的每一项前默认显示序号标识
注意：
- ol标签中只允许包含li标签
- li标签可以包含任何内容
自定义列表
| 标签名 | 说明 |
| dl | 表示自定义列表的整体，用于包裹dt/dd标签 |
| dt | 表示自定义列表的主题 |
| dd | 表示自定义列表的针对主题的每一项内容 |
dd前会默认显示缩进效果
注意：
- dl标签中只允许包含dt/dd标签
- dt/dd标签可以包含任意内容
例如：
<body> <ul> <li>有序列表</li> <li>有序列表</li> <li>有序列表</li> </ul> <ol> <li>无序列表</li> <li>无序列表</li> <li>无序列表</li> </ol> <dl>自定义列表的整体 <dt>自定义列表的主题1 <dd>自定义列表</dd> <dd>自定义列表</dd> <dd>自定义列表</dd> </dt> <dt>自定义列表的主题2 <dd>自定义列表</dd> <dd>自定义列表</dd> <dd>自定义列表</dd> </dt> </dl> </body>
浏览器显示效果：
表格
使用
在网页中以行+列的单元格的方式整齐展示数据
标签：
| 标签名 | 说明 |
| table | 表格整体，可用于包裹多个tr |
| tr | 表格每行，可用于包裹td |
| td | 表格单元格，可用于包裹内容 |
标签的嵌套关系：table>tr>td
属性：
| 属性名 | 属性值 | 效果 |
| border | 数字 | 边框宽度 |
| width | 数字 | 表格宽度 |
| height | 数字 | 表格高度 |
注意：实际开发时针对于样式效果推荐使用CSS设置
术语解释:
“CSS”
级联样式表 Cascading Style Sheet
例如：
<body> <table border="5"> <!-- 第一行 --> <tr> <td>第一行</td> <td>单元格1</td> <td>单元格2</td> </tr> <!-- 第二行 --> <tr> <td>第二行</td> <td>单元格1</td> <td>单元格2</td> </tr> </table> </body>
浏览器显示效果：
表格标题和表头单元
在表格中表示整体大标题和一列小标题
标签：
| 标签名 | 名称 | 说明 |
| caption | 表格大标题 | 表示表格整体大标题，默认在表格整体顶部居中位置显示 |
| th | 表头单元格 | 表示一列小标题，通常用于表格第一行，默认内部文字加粗并居中显示 |
注意：
- caption标签书写在table标签内部
- th标签书写在tr标签内部(用于替换td标签)
例如：
<body> <table border="2"> <caption>工资表</caption> <tr> <th>员工</th> <th>工资</th> </tr> <tr> <td>花无缺</td> <td>花有缺</td> </tr> <tr> <td>50k</td> <td>60k</td> </tr> </table> </body>
浏览器显示效果：
结构标签
让表格的内容结构分组，突出表格的不同部分，使语义更清晰，利于浏览器的解析与开发人员的维护
| 标签 | 名称 |
| thead | 表格头部 |
| tbody | 表格主体 |
| tfoot | 表格底部 |
注意：
- 表格结构标签内部用于包裹tr标签
- 表格的结构标签可以省略
例如：
<body> <table border="1"> <thead> <tr> <th>月份</th> <th>入账</th> </tr> </thead> <tbody> <tr> <td>一月</td> <td>200</td> </tr> <tr> <td>五月</td> <td>80</td> </tr> </tbody> <tfoot> <tr> <td>三月</td> <td>180</td> </tr> </tfoot> </table> </body>
浏览器显示效果：
合并单元格
将水平或垂直的多个单元格合并成一个单元格
合并单元格步骤：
- 明确合并哪几个单元格
- 通过左上原则，确定保留谁，删除谁
- 上下合并->只保留最上的，删除其他
- 左右合并->只保留最左的，删除其他
- 给保留的单元格进行设置：跨行合并或跨列合并
| 属性名 | 属性值 | 说明 |
| rowspan | 合并单元格的个数 | 跨行合并，将多行的单元格垂直合并 |
| colspan | 合并单元格的个数 | 跨列合并，将多列的单元格水平合并 |
注意：
同一个结构标签中的单元格才能合并，部门跨结构合并(不能跨thead，tbody，tfoot)
例如：
<body> <table border="1"> <thead> <tr> <th colspan="3">嘿嘿</th> </tr> </thead> <tbody> <tr> <td>一月</td> <td>200</td> <td>14点</td> </tr> <tr> <td>五月</td> <td>80</td> <td>4点</td> </tr> </tbody> <tfoot> <tr> <td>三月</td> <td>180</td> <td>5点</td> </tr> </tfoot> </table> <br> <table border="1"> <thead> <tr> <th>月份</th> <th>入账</th> <th>时间</th> <th rowspan="3">性别</th> </tr> </thead> <tbody> <tr> <td>一月</td> <td>200</td> <td>14点</td> </tr> <tr> <td>五月</td> <td>80</td> <td>4点</td> </tr> </tbody> <tfoot> <tr> <td>三月</td> <td>180</td> <td>5点</td> </tr> </tfoot> </table> </body>
浏览器显示效果：
表单
HTML表单用于搜集不同类型的用户输入
HTML 表单表示文档中的一个区域，此区域包含交互控件，将用户收集到的信息发送到 Web 服务器。
应用场景
登录、注册、搜索、评论
from标签
from标签用来定义HTML表单
例如：
<body> <form action=""> 用户名: <input type="text" name="用户名"><br> 密码: <input type="text" name="密码"> </form> </body>
浏览器显示效果：
form标签结合input标签可以产生各种作用的表单
input标签
input标签可以根据 type 属性值的不同，展示不同的效果
type属性
| 标签名 | type属性值 | 说明 |
| input | text | 文本框，用于输入单行文本 |
| input | password | 密码框，用于输入密码 |
| input | radio | 单选框，用于多选一 |
| input | checkbox | 多选框，用于多选多 |
| input | file | 文件选择，用于上传文件 |
| input | submit | 提交按钮，用于提交 |
| input | reset | 重置按钮，用于重置 |
| input | button | 普通按钮，默认无功能，之后配合js添加功能 |
| input | placeholder | 占位符，提示用户输入内容 |
| input | name | 分组，有相同属性的单选框为一组，一组同时只能有一个被选中 |
| input | checked | 默认选中 |
| input | multiple | 多文件选择 |
按钮-input
在网页中显示不同功能的按钮表单控件
属性：
| 标签名 | type属性值 | 说明 |
| input | submit | 提交按钮，点击之后提交数据给后端服务器 |
| input | reset | 重置按钮，点击之后恢复表单默认值 |
| input | button | 普通按钮，默认无功能，之后配合js添加功能 |
注意：
- 如果需要实现以上按钮功能，需要配合form标签使用
- form使用方法：用form标签把表单标签一起包裹起来即可
- 按钮更改字体使用value属性
按钮-button
在网页中显示用户点击的按钮
type属性值
| 标签名 | type属性值 | 说明 |
| button | submit | 提交按钮，点击之后提交数据给后端服务器 |
| button | reset | 重置按钮，点击之后恢复表单默认值 |
| button | button | 普通按钮，默认无功能，之后配合js添加功能 |
注意：
- 谷歌浏览器中button默认是提交按钮
- button标签是双标签，更便于包裹其他内容：文字、图片等
例如：
<body> <form action=""> 用户名: <input type="text" name="用户名" placeholder="请输入你的用户名"><br> 密码: <input type="password" name="密码" placeholder="请输入你的密码"> </form> <!-- 上传文件 --> <form action=""> 上传文件:<input type="file" name="file"><br> 文件多选：<input type="file" name="file" multiple><br> <input type="reset"> </form> <!-- 单选框 --> <form action=""> <input type="radio" checked>男 <input type="radio">女 </form> <!-- 多选框 --> <form action=""> <input type="checkbox">初中 <input type="checkbox">高中 <input type="checkbox" checked>大学<br> <input type="submit"> </form> <form action=""> <input type="button">按钮 <button>按钮</button> </form> </body>
浏览器显示效果：
Action 属性
action 属性定义在提交表单时执行的动作
向服务器提交表单的通常做法是使用提交按钮。
通常，表单会被提交到 web 服务器上的网页。
如果省略 action 属性，则 action 会被设置为当前页面。
Name 属性
如果要正确地被提交，每个输入字段必须设置一个 name 属性。
select下拉菜单标签
标签组成：
- select标签：下拉菜单的整体
- option标签：下拉菜单的每一项
常见属性：
selected：下拉菜单的默认选中
例如：
<body> <form action=""> <select name="" id=""> <option value="hh">贵阳</option> <option value="hh">昆明</option> <option value="hh">深圳</option> </select> </form> </body>
浏览器显示效果：
textarea文本域标签
在网页中提供可输入多行文本的表单控件
常见属性：
- cols：规定了文本域可见的宽度
- rows：规定了文本域可见的行数
注意：
- 右下角可以拖拽改变大小
- 实际开发时针对样式效果使用CSS设置
例如：
<body> <textarea rows="10" cols="30"> 我是一个文本框。 </textarea> </body>
浏览器显示效果：
datalist标签
datalist 元素为 input 元素规定预定义选项列表。
用户会在他们输入数据时看到预定义选项的下拉列表。
input 元素的 list 属性必须引用 datalist 元素的 id 属性。
例如：
<body> <form action=""> <input list="browsers"> <datalist id="browsers"> <option value="Internet Explorer"> <option value="Firefox"> <option value="Chrome"> <option value="Opera"> <option value="Safari"> </datalist> </form> <body>
浏览器显示效果：
label标签
<label> 标签为 input 元素定义标注（标记）。
label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。
<label> 标签的 for 属性应当与相关元素的 id 属性相同。
常用于绑定内容与表单标签的关系
使用方法1：
- 使用label标签把内容（如：文本）包裹起来
- 在表单标签上添加id属性
- 在label标签的for属性中设置对应的id属性值
使用方法2：
- 直接使用label标签把内容（如文本）和表单标签一起包裹起来
- 需要把label标签的for属性删除即可
例如：
<body> <p>点击其中一个文本标签选中选项：</p> <form action=""> <label for="male">花无缺是帅哥</label> <input type="radio" name="sex" id="male" value="male"><br> <label for="female">花无缺是大帅哥</label> <input type="radio" name="sex" id="female" value="female"><br><br> <input type="submit" value="提交"> </form> </body>
浏览器显示效果：
语义化标签
没有语义的布局标签
div标签：一行只显示一个（独占一行）
span标签：一行可以显示多个
有语义的布局标签
在HTML5中，推出的一些有语义的局部标签供开发者使用
标签：
| 标签名 | 语义 |
| header | 网页头部 |
| nav | 网页导航 |
| footer | 网页底部 |
| aside | 网页侧边栏 |
| section | 网页区块 |
| artcie | 网页文章 |
注意：
以上标签显示特点和div一致，但是比div多了不同的语义
字符实体
在 HTML 中，某些字符是预留的。
在 HTML 中不能使用小于号（<）和大于号（>），这是因为浏览器会误认为它们是标签。
如果希望正确地显示预留字符，我们必须在 HTML 源代码中使用字符实体（character entities）
结构：&英文
常用字符实体
| 显示结果 | 描述 | 实体名称 |
| 空格 | | |
| < | 小于号 | < |
| > | 大于号 | > |
| & | 和号 | & |
| " | 引号 | " |
| ’ | 撇号 | ' |
| ¢ | 分(cent) | ¢ |
| ￡ | 镑(pound) | £ |
| € | 欧元(euro) | € |
| ￥ | 元(yen) | ¥ |
| § | 小节 | § |
| © | 版权 | © |
总结
哇塞，历时多天，终于肝完了这份2万字的HTML笔记！笔记包含了HTML的大部分知识点！第一次在CSDN上发布博客，过程还是挺艰难的，反复修改，查阅各种资料，力求完美，每一个知识点都有对应的代码示例，对新手非常的友好！看在我这么认真的份上，各位读者大大给个三连好吗？谢谢！
点赞👍
收藏⭐
留言📝
加关注✅
！！！
咱们下次见！我会继续更新好文分享给大家！
