文章导读：AI 辅助学习前端，包含入门、进阶、高级部分前端系列内容，当前是 HTML 的部分，公众号会持续更新，适合零基础的朋友，已有前端工作经验的可以不看，也可以当作基础知识回顾。
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 中语义化标签的内容，这些内容在面试中也可能被问到，在平时写页面时留意下每个标签对应的含义，用在正确的位置才能发挥语义化标签最大的作用。
希望每一个初学者都能成为一个优秀的前端开发工程师，加油。
最后啰嗦一句，好记性不如烂笔头，希望大家在学习的过程中养成做笔记的习惯，形成自己的知识体系。
![[Android]Jetpack Compose状态管理](http://pic.xiahunao.cn/[Android]Jetpack Compose状态管理)
![[可达鸭四月月赛——入门赛第六场(周六) T4]原初数题解](http://pic.xiahunao.cn/[可达鸭四月月赛——入门赛第六场(周六) T4]原初数题解)