一、标题标签
**使用场景：**文章的标题、新闻的标题等等
代码示例：
<h1>我是1级标题</h1><h2>我是2级标题</h2><h3>我是3级标题</h3><h4>我是4级标题</h4><h5>我是5级标题</h5><h6>我是6级标题</h6>
语义解释：1~6级标题，重要程度依次递减
特点:
文字都有加粗文字都有变大，并且从h1 → h6文字逐渐减小独占一行
二、段落标签
**使用场景：**用于分段显示的时候
代码示例：
<p>我是段落标签！！！</p>
语义解释：表示一段内容。
特点：
段落之间存在间隙独占一行
三、换行标签
使用场景：让文字强制换行显示
代码示例：
<br>
语义解释：从当前行换到下一行
特点：
单标签让文字强制换行
四、水平分割线标签
使用场景：新闻布局中分割不同的主题内容、导航分割等。
代码示例：
<hr>
语义解释：分割不同的主题内容。
特点：
单标签在页面中显示一条水平线
五、文本格式化标签
使用场景：需要让文字加粗、下划线、倾斜、删除线等效果
代码示例：
<!-- 第一组 --><b>加粗</b><u>下划线</u><i>倾斜</i><s>删除线</s><!-- 第二组：推荐使用，语义更加强烈 --><strong>加粗</strong><ins>下划线</ins><em>倾斜</em><del>删除线</del>
语义解释：突出重要性的强调语境
标签语义化概念：简单来说就是见名思意。后面类名的命名也是这样的。方便程序员开发过程中的维护。
六、图片标签
使用场景：：在网页中显示图片
代码示例：
<img src="" alt="" titile="" width="">
特点：
单标签img标签需要展示对应的效果，需要借助标签的属性进行设置！
属性解释：src：目标图片的路径alt：替换文本，当图片加载失败的时候显示的内容，方便用户知道此处是关于什么的图片。title：图片的提示文字，当鼠标放到图片上是显示的提示文字。width：图片在页面中显示的宽度height：一般设置宽度即可，设置宽度后，img会自动根据宽高比例进行缩放，图片不会变形，如果设置宽和高，图片可能会变形。
路径的介绍：相对路径：从当前的文件开始寻找自己所需要的文件。绝对路径：从盘符名开始、寻找所需要的资源。
相对路径-同级目录：当前文件和目标文件在同一目录中
<img src="目标图片.gif">或<img src="./目标图片.gif">
相对路径-下级目录：
目标文件在下级目录中
<img src="images/目标图片.gif">
相对路径-上级目录：
目标文件在上级目录中
<img src="../images/目标图片.gif">
七、音频标签
使用场景：需要在页面中播放一段音乐的时候
代码示例：
<audio src="./music.mp3" controls autoplay loop></audio>
特点：
音频标签目前支持三种格式：MP3、Wav、Ogg
属性：src：路径controls：播放的控件autoplay：自动播放（部分浏览器不支持）loop：循环播放
八、视频标签
使用场景：需要在页面中播放一段视频的时候
代码示例：
<video src="./video.mp4" controls autoplay muted loop></video>
特点：
视频标签目前支持三种格式：MP4 、WebM 、Ogg
属性：
src：路径controls：播放的控件autoplay：自动播放（部分浏览器不支持）——》在谷歌浏览器中写muted- - 可以完成静音的自动播放loop：循环播放
九、链接标签
使用场景：点击之后，从一个页面跳转到另一个页面
代码示例：
<a href="/" target="_blank">点击之后去百度网页</a>
特点：
双标签，内部可以包裹内容如果需要a标签点击之后去指定页面，需要设置a标签的href属性外部链接： 点击之后去百度网页内部链接： 目标网页
属性：_self：(默认值) 在当前窗口中进行跳转，原网页会被覆盖_blank：在新窗口中进行跳转，原网页保留
显示特点：a标签默认文字有下划线a标签从未点击过，默认文字显示蓝色a标签点击过之后，文字显示为紫色（清除浏览器历史记录可恢复蓝色）
空连接：点击之后回到网页顶部
<a href="#"></a>
十、列表标签
**使用场景：**在网页中按照行展示关联性的内容，如：新闻列表、排行榜、账单等
**特点：**按照行的方式，整齐显示内容
**分类：**无序列表、有序列表、自定义列表
1、无序列表
**使用场景：**在网页中表示一组无顺序之分的列表。
显示特点：
列表的每一项前默认显示圆点标识
注意点
ul标签中只允许包含li标签li标签可以包含任意内容
代码示例:
<ul><li>榴莲</li><li>香蕉</li><li>苹果</li><li>哈密瓜</li><li>火龙果</li></ul>
2、有序列表
**使用场景：**在网页中表示一组有顺序之分的列表。
显示特点：
列表的每一项前默认显示序号标识
注意点
ol标签中只允许包含li标签li标签可以包含任意内容
代码示例:
<ol><li>小姐姐</li><li>小帅哥</li><li>小可爱</li></ol>
3、自定义列表
**使用场景：**在网页的底部导航中通常会使用自定义列表实现。
显示特点：
dd前会默认显示缩进效果
注意点
dl标签中只允许包含dt/dd标签dt/dd标签可以包含任意内容
代码示例:
<dl><dt>帮助中心</dt><dd>账户管理</dd><dd>购物指南</dd><dd>订单操作</dd></dl>
十一、表格标签
**使用场景：**在网页中以行+列的单元格的方式整齐展示和数据。
注意嵌套关系:
标签的嵌套关系：table > tr > td
<table><tr><td>姓名</td><td>成绩</td><td>评语</td></tr><tr><td>小哥哥</td><td>1000</td><td>小哥哥真帅气</td></tr></table>
table标签：表格整体tr标签：表格每行td标签：对于主题的每一项内容
表格属性：
border属性：给表格添加边框width属性：表格整体的宽度height属性：表格整体的高度
th、caption标签：在表格中表示整体大标题caption标签书写在table标签内部th标签书写在tr标签内部（用于替换td标签）
<table border="1" width="300" height="300"><caption><h3>学生成绩单</h3></caption><tr><th>姓名</th><th>成绩</th><th>评语</th></tr><tr><td>小哥哥</td><td>1000</td><td>小哥哥真帅气</td></tr></table>
完整的表格结构：（了解）
<!-- thead：表示表格的头部 --><!-- tbody：表示表格的主体 --><!-- tfoot：表示表格的底部 --><table border="1" width="300" height="300"><caption><h3>学生成绩单</h3></caption><!-- 表格的头部 --><thead><tr><th>姓名</th><th>成绩</th><th>评语</th></tr></thead><!-- 表格的身体 --><tbody><tr><td>小哥哥</td><td>1000</td><td>小哥哥真帅气</td></tr></tbody><!-- 表格的底部 --><tfoot><tr><td>总结</td><td>优秀少年</td><td>优秀少年</td></tr></tfoot></table>
**表格的合并：**将水平或垂直多个单元格合并成一个单元格
跨行合并（rowspan）跨列合并（colspan）
<table border="1" width="300" height="300"><caption><h3>学生成绩单</h3></caption><!-- 表格的头部 --><thead><tr><th>姓名</th><th>成绩</th><th>评语</th></tr></thead><!-- 表格的身体 --><tbody><tr><td>小哥哥</td><!-- 保留 --><td rowspan="2">100分</td><td>小哥哥真帅气</td></tr></tbody><!-- 表格的底部 --><tfoot><tr><td>总结</td><!-- 保留 --><td colspan="2">优秀少年</td><!-- 删除 --><!-- <td>优秀少年</td> --></tr></tfoot></table>
十二、表单标签
1、input系列
**使用场景：**在网页中显示收集用户信息的表单效果，如：登录页、注册页等。
代码示例：
<input type="text" />
type的值及解释：
代码示例：
<form><!-- 1、文本框：text（type属性的默认值） -->昵称：<input type="text" placeholder="请输入您的昵称"><br><br><!-- 2、密码框：password -->密码：<input type="password" placeholder="请输入您的密码"><br><br><!-- 3、单选框：radio -->性别：<input type="radio" name="sex" checked>男<input type="radio" name="sex">女<br><br><!-- 4、多选框：checkbox -->爱好：<input type="checkbox" checked>敲代码<input type="checkbox" checked>熬夜<input type="checkbox">掉头发<br><br><!-- 5、文件选择：file --><input type="file" multiple><br><br><!-- 按钮 --><!-- 1、submit：提交按钮 --><input type="submit"><!-- 2、reset：重置按钮 --><input type="reset"><!-- 3、button：普通按钮 --><input type="button" value="普通按钮"></form>
value属性和name属性作用介绍：
value属性：用户输入的内容，提交之后会发送给后端服务器name属性：当前控件的含义，提交之后可以告诉后端发送过去的数据是什么含义后端接收到数据的格式是：name的属性值 = value的属性值
2、下拉菜单
使用场景：在网页中提供多个选择项的下拉菜单表单控件
标签组成：
select标签：下拉菜单的整体option标签：下拉菜单的每一项
常见属性：selected：下拉菜单的默认选
代码示例：
<!-- 下拉菜单 --><!-- select：表示下拉菜单的整体 --><!-- option：表示下拉菜单的每一项 -->所在城市：<select><option>上海</option><option selected>北京</option><option>广州</option><option>深圳</option></select>
3、textarea文本域标签
**使用场景：**在网页中提供可输入多行文本的表单控件。
常见属性：
cols：规定了文本域内可见宽度rows：规定了文本域内可见行数
注意点：右下角可以拖拽改变大小实际开发时针对于样式效果推荐用CSS设置
代码示例：
<textarea cols="60" rows="30"></textarea>
4、label标签
使用场景：常用于绑定内容与表单标签的关系
使用方法①：使用label标签把内容（如：文本）包裹起来在表单标签上添加id属性在label标签的for属性中设置对应的id属性值使用方法②：直接使用label标签把内容（如：文本）和表单标签一起包裹起来需要把label标签的for属性删除即可
代码示例：
<!-- 第一种 --><input type="checkbox" id="one"><label for="one">敲代码</label><!-- 第二种 --><label><input type="checkbox">熬夜</label>
十三、没有语义的布局标签-div和span
使用场景：实际开发网页时会大量频繁的使用到div和span这两个没语义的布局标签
div标签：一行只显示一个（独占一行）span标签：一行可以显示多个
代码示例：
<!-- 没有语义的布局标签 --><div>我是一个div</div><div>我是一个div</div><div>我是一个div</div><span>我是一个span</span><span>我是一个span</span><span>我是一个span</span>
十四、有语义的布局标签
<!-- 有语义的布局标签 --><header>网页的头部</header><nav>网页的导航</nav><footer>网页的底部</footer><aside>网页的侧边栏</aside><section>网页的区块</section><article>网页的文章</article>
