前言
前端的世界中，总是不可避免地会遇到前端三剑客——HTML，CSS和Javascript。若用某种动物的身体（比如孔雀）来类比一个网页的话，那么HTML文件就是它的骨架，是基本结构；CSS是它的皮肤、肌肉和羽毛，让它看起来更美观；如果只有美丽的身形的话，显然是不够的，那最多只能算得上一件雕塑品。于是，便有了Javascript（跟Java没啥关系）。Javascript就是让它动起来，实现一系列的交互，使网页具有更强大的功能，满足日益增长的各类业务需求。这便是前端三剑客的关系。今天，我们就来聊一聊三剑客中最年长的那位——HTML
HTML（HyperText Markup Language），又称“超文本标记语言”，制作了网页的基本骨架。HTML目前已发展到HTML5版本，引入了许多新的语义化标签，使得网页结构更加清晰、易于理解和维护。本文将详细探讨 HTML5 标签的分类及其各自的作用。
HTML5 标签的分类
HTML5具有多种多样的标签来控制内容的显示位置和颜色、大小等等，可按两种方式分类，一种是按布局的需要来分类，另一种方式是按照功能需求来分类。
1. 按布局分类
1.1 乖巧的宝宝——行内元素
行内元素通常用于包裹文本或其他行内元素，它们不会独占一行，宽度和高度由内容决定。常见的行内元素包括：
<a>（HTML最重要的标签） ：超链接，用于创建链接到其他页面或资源的锚点。（就是那种点击一下就会跳转到别的地方的链接）<span>：用于包裹文本或行内元素，通常用于样式化（比如设置颜色）或脚本操作。<strong>：表示强调文本，通常以加粗显示。
行内元素的乖巧特性：
👁显示方式
- 不独占一行（真是个不霸道的乖宝宝）：行内元素不会自动换行，它们会与其他行内元素或文本在同一行上显示，直到该行空间用尽才会换行。
📏尺寸控制
- 宽度和高度由内容决定：行内元素的宽度和高度通常由其包含的内容决定，无法直接通过CSS设置固定的宽度和高度。
- 不支持设置上下外边距：行内元素无法设置上下的外边距（margin），但可以设置左右的外边距。
- 内边距和边框：可以设置左右的内边距（padding）和上下左右的边框（border），但设置的上下内边距和边框不会影响行内元素与其他元素之间的垂直间距。
📦包含内容
- 只能包含文本或其他行内元素：行内元素不能包含块级元素，只能包含其他行内元素或文本内容。
举个栗子🌰
<p>
第一段
</p>
<p> //<p>表示分段
这<i>是</i><strong>一个</strong> //<i>是斜体标签，让其中内容表现为斜体字；<strong>表示加重，也就是粗体字
<span style="color:red;width:80px;height:180px">红色</span> //这里设置了“红色”两个字的颜色和宽度、高度
的<a href="https://baidu.com/">百度页面</a> //前面提到过的<a>标签，用于定义超链接，“百度页面”四个字就是一个超链接，点击一下就会跳转到百度
</p>
运行一下：
呐呐，代码中用到的分段、斜体、加粗、超链接还有设置颜色这几个功能都实现了，但是，大家发现了什么不对劲的地方吗？还有什么东西我们写了但是没有展现出来？
啊哈，细心的宝宝肯定发现了，怎么“红色”这两个字只有颜色设置成功了，而大小却没有向我们设置的那样展现呢？我们不是把这俩字的宽度设置为80个像素，高度设置为180个像素么？可这里显示出来的明显没有那么高、那么宽啊
嘶......怎么回事呢？哦，原来行内元素通常不能自己随意设置高度和宽度啊！也就是说，我们不能指定它们多高、多宽。那它们的尺寸由什么决定呢？当然是由行内元素本身的内容决定啦！嘻嘻~
不过呢，行内元素也有些特例，例如img和input等，它们也是行内元素，却能设置宽高，因为它们是替换元素，由内在尺寸。如果不设置宽高，就会以默认宽高显示，当然，我们也可以用width和height来控制它们的大小，或者在插入图片之前先改变图片本身的大小。
1.2 块级元素
块级元素独占一行，通常用于构建页面的布局结构。常见的块级元素包括：
<div>：通用容器，用于包裹其他元素。<p>：段落标签，用于包裹文本段落。<h1>到<h6>：标题标签，用于定义不同级别的标题。<ul>和<ol>：无序列表和有序列表，用于创建列表项
块级元素的核心特性：
🗺️布局特性
- 独占一行：块级元素在页面中会独占一行，其后的元素会另起一行显示。
- 宽度默认为父元素宽度：块级元素的宽度默认是其父元素内容区域的100%，即自动填充父元素的可用宽度。
- 可设置尺寸和边距：块级元素可以设置宽度、高度、内外边距等属性，以控制其在页面中的大小和位置。
📦包含特性
- 可包含其他元素：块级元素可以作为容器，包含其他块级元素、行内元素以及文本内容。
👁显示特性
- 竖直方向排列：块级元素会按照从上到下的顺序垂直排列，形成页面的基本结构。
举个栗子🌰
<div>
<h1>标题</h1>
<p>这是一个段落。</p>
<ul>
<li>列表项 1</li>
<li>列表项 2</li>
</ul>
</div>
运行一下：
2. 按功能分类
2.1 重点来了——语义化标签
-
什么是语义化标签？
语义化标签是指那些具有明确含义的HTML元素，它们不仅定义了内容的外观，还清晰地描述了内容的角色和意义。在HTML5之前，开发者大量使用
<div>和<span>这类无意义的容器，导致代码可读性和可维护性差。
HTML5 引入了许多新的语义化标签，使得网页结构更加清晰，便于理解和维护。常见的语义化标签包括：
<header>：定义页面的头部，通常包含网站的标题和导航栏。<footer>：定义页面的底部，通常包含版权信息、联系方式等。<main>：定义页面的主要内容，每个页面应该只有一个 main 标签。<section>：定义文档中的一个独立部分，通常包含一个标题。<article>：定义独立的内容块，如博客文章、新闻等。<aside>：定义与主要内容相关的附加信息，如侧边栏。
🔪实战一下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=s, initial-scale=1.0">
<title>Document</title>
<style>
.header,
.nav,
.main,
.footer {
border-radius: 10px;
background-color: green;
margin-bottom: 10px;
color: white;
min-height: 50px;
text-align: center;
}
.main {
display: flex;
}
.article {
flex: 1;
margin-right: 10px;
background-color: pink;
}
.aside {
width: 30%;
background-color: red;
}
</style>
</head>
<body>
<!-- 头部标签 -->
<header class="header">
header
</header>
<!-- 导航标签 -->
<nav class="nav">nav</nav>
<!-- 主要内容标签 -->
<main class="main">
<!-- 文章标签 -->
<article class="article">
<h1 class="title">什么是html5语义化标签</h1>
<ul>
<li>标签语义化有助于构架良好的HTML结构，有利于搜索引擎的建立索引、抓取。简单来说，试想在H1标签中匹配到的关键词和在div中匹配到的关键词搜索引擎会吧那个结果放在前面。</li>
<li>有利于不同设备的解析（屏幕阅读器，盲人阅读器等）满是div的页面这些设备如何区分那些是主要内容优先阅读？</li>
<li>有利于构建清晰的机构，有利于团队的开发、维护。</li>
</ul>
<!-- 新区快 -->
<section class="section">
comments
</section>
</article>
<!-- 侧边栏标签 -->
<aside class="aside">
aside
</aside>
</main>
<!-- 底部标签 -->
<footer class="footer">
footer
</footer>
</body>
</html>
运行一下：
咋样，看着舒服多了吧。结构感一下子就有了，层次分明，你就说带不带派吧😍🦶
这些语义化标签比传统的div 标签更好理解html的结构（写个html满屏div看的人头晕，分都分不清哪个块是什么以及在哪里）
更好维护，爬虫更好，更利于搜索引擎优化，不仅让自己人看得更明白，浏览器也能看得更明白。搜索引擎可以更好地抓取和索引使用语义化标签的网页。例如， <h1> 标签中的关键词比 <div> 标签中的关键词更容易被搜索引擎识别和优先展示。
（PS：前端大佬们调试网页的时候都会给元素加临时的背景色，边界一目了然，你也去试试吧~）
2.2 表格标签
表格标签用于创建和展示表格数据。常见的表格标签包括：
<table>：定义表格。<tr>：定义表格行。<td>：定义表格单元格。<th>：定义表格标题单元格。
举个栗子🌰
<table border="1">
<tr>
<th>姓名</th>
<th>年龄</th>
</tr>
<tr>
<td>张三</td>
<td>25</td>
</tr>
<tr>
<td>李四</td>
<td>30</td>
</tr>
</table>
运行一下：
2.3 表单标签
表单标签用于收集用户输入的数据。常见的表单标签包括：
<form>：定义表单，用于包裹表单元素。<input>：定义输入字段，可以是文本、密码、单选按钮、复选框等。<textarea>：定义多行文本输入框。<button>：定义按钮，用于提交表单或执行其他操作
举个栗子🌰
<form action="/submit" method="post">
<label for="name">姓名：</label>
<input type="text" id="name" name="name">
<label for="email">邮箱：</label>
<input type="email" id="email" name="email">
<button type="submit">提交</button>
</form>
运行一下：
HTML5新增表单元素和属性
<input type="email">：用于输入电子邮件地址，自动验证格式。<input type="date">：日期选择器，提供日历界面。- placeholder：提供输入框的提示文本。
- required：设置输入框为必填项。
✅总结
HTML5 标签的分类及其作用使得网页开发更加高效和规范。通过合理使用语义化标签、表单标签和表格标签，开发者可以创建出结构清晰、易于维护且对搜索引擎友好的网页。这些是HTML在大厂面试中常考的一些点，希望能帮到大家，能让大家读完后对HTML5的标签分类及新特性有全新的认识。
