文章导读：AI 辅助学习前端，包含入门、进阶、高级部分前端系列内容，当前是 HTML 的部分，瑶琴会持续更新，适合零基础的朋友，已有前端工作经验的可以不看，也可以当作基础知识回顾。
HTML5 中新增的语义化标签能够更准确地描述文档的结构和内容。这些元素有助于提高页面的可读性、可访问性，并且在搜索引擎优化方面也很有帮助。
先来看看 html5 中新增的语义元素
1.<header> ：定义文档或区块的页眉，通常包含标题、标志、导航等。这有助于标识内容的起始部分。
2.<nav> ：表示导航部分，用于包含页面的主要导航链接。这有助于标识和区分页面中的导航菜单。
3.<main> ：表示页面的主要内容部分，每个页面只应有一个
元素。这有助于指示页面的核心内容。
4.<article> ：表示可以独立存在或重复使用的独立内容块，如博客文章、新闻文章等。
5.<section> ：表示一个独立的区块，可以包含一组相关的内容。它可以用于组织页面的结构。
6.<aside> ：表示页面的侧边内容，通常是与页面主要内容相关但可以独立存在的内容。
7.<footer> ：定义文档或区块的页脚，通常包含版权信息、联系方式等。
8.<figure> 和 <figcaption> ：<figure> 用于表示独立的内容块，如图片、图表、代码示例等，而 <figcaption> 用于为这些内容块添加标题或说明。
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Figure and Figcaption Example</title>
</head>
<body>
<figure>
<img src="image.jpg" alt="A beautiful landscape">
<figcaption>A beautiful landscape</figcaption>
</figure>
<figure>
<code>
function add(a, b) {
return a + b;
}
</code>
<figcaption>Example code for adding two numbers</figcaption>
</figure>
</body>
</html>
9.<.mark> ：用于突出显示文本，常用于搜索结果中的关键字高亮。
10.<time> ：用于表示日期和时间，有助于机器和搜索引擎更好地理解日期信息。
11.<progress> ：表示任务的进度，如文件上传、加载等。
12.<meter> ：表示一个已知范围内的标量值或分数。
13.<details> 和 <summary> ：<details> 标签用于包裹一个可折叠的内容块。用户可以点击折叠内容块的摘要部分（由 summary> 提供），以展开或折叠内容。 <summary> 标签用于定义 <details> 元素的摘要或标题。它通常是一个用户点击的按钮或标题，以提示用户折叠内容的主题
代码示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Details and Summary Example</title>
</head>
<body>
<details>
<summary>About Us</summary>
<p>We are a company that specializes in web development and design.</p>
</details>
<details>
<summary>Services</summary>
<ul>
<li>Web Design</li>
<li>Front-end Development</li>
<li>Back-end Development</li>
</ul>
</details>
<details>
<summary>Contact</summary>
<p>If you have any questions, feel free to reach out to us.</p>
</details>
</body>
</html>
下面是一个基本的示例，包含上面列出的所有语义化标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML5 Semantic Elements Example</title>
</head>
<body>
<header>
<h1>My Website</h1>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>
<main>
<section>
<h2>About Us</h2>
<p>This is the about section of our website.</p>
</section>
<section>
<h2>Services</h2>
<p>We offer a variety of services to our clients.</p>
</section>
</main>
<aside>
<h3>Related Links</h3>
<ul>
<li><a href="#">Learn More</a></li>
<li><a href="#">FAQs</a></li>
</ul>
</aside>
<footer>
<p>© 2023 My Website. All rights reserved.</p>
</footer>
</body>
</html>
以上就是 HTML5 中语义化标签的内容，这些内容在面试中也可能被问到，在平时写页面时留意下每个标签对应的含义，用在正确的位置才能发挥语义化标签最大的作用。
希望每一个初学者都能成为一个优秀的前端开发工程师，加油。
最后啰嗦一句，好记性不如烂笔头，希望大家在学习的过程中养成做笔记的习惯，形成自己的知识体系。
