HTML 语义化是什么？
- HTML 语义化是指使用 HTML 标签来正确地表示文档的结构和内容的方式。通过使用正确的标签和元素，可以使网页的结构更加清晰、易于理解，并且对搜索引擎和辅助技术（如屏幕阅读器）更友好。
- CSS 命名的语义化指的是在给 CSS 类名、选择器和 ID 命名时，使用具有语义的名称来描述元素的用途和功能。这样的命名方式可以使代码更具可读性、可维护性和可拓展性。
为什么需要语义化？
- 有利于搜索引擎优化（SEO）：搜索引擎依赖于网页的结构和语义来识别和理解网页内容。使用语义化的 HTML 标签可以提高网页在搜索引擎结果的排名，从而提高页面的 SEO（搜索引擎优化）。
- 可读性和可维护性：使用语义化的代码可以增强代码的可读性和可维护性，有利于开发人员理解和维护代码。同时，遵循 W3C 标准的团队可以遵循相同的标准，减少差异化，提高团队的效率和协调能力。
- 提高可访问性：语义化可以提高网页的可访问性，让页面更容易被搜索引擎、辅助技术（如屏幕阅读器）解析和理解，让更多的人能访问和理解网页。
- 可间接提升网页的性能：在传统的 HTML 代码中，有时候会存在一些重复的标签和属性，导致代码冗余。使用语义化的 HTML 代码，可以减少这种冗余，让代码更加简洁和高效。
- 面向未来的 HTML ，浏览器在未来可能提供更丰富的支持。
一些常用的语义化标签及使用场景
布局相关的语义化标签：
<header>标签：用于定义文档或一个节的头部区域。通常包含网页的标题、导航栏、logo 或其他相关信息；作用是为页面提供附加的信息或功能，以帮助用户更好地理解或导航网页内容。适用于表示网页或一个节的顶部区域。<aside>标签：用于定义与页面内容相关但可以被视为独立于主要内容的部分。它通常用于侧边栏、广告、导航链接、附加信息或其他类似的内容。<section>标签：用于表页面中的一个独立部分，具有明确的主题或目的。例如文章、评论、产品列表、产品规格及描述等。一个页面可以包含多个不同主题的 section ；并且这个标签可以包含标题、段落、列表、表格等其他HTML元素。<nav>标签：用于表示导航菜单，包括主导航、子导航、面包屑导航等。这个标签通常包含链接（<a>标签）来指向其他页面或网站的部分。<footer>标签：用于表示文档的页脚，通常包含版权信息、联系方式、法律声明等内容。它通常出现在页面的底部，并且只应该出现一次。<main>标签：用于表示页面中的主要内容区域，是所有主要内容（包括头部、尾部和侧边栏）的容器。每个<main>元素都应该包含独特的内容，这部分内容在页面上是唯一的，且对整个页面来说是重要的。<main>标签不能包含在页面其它区块元素中，通常是<body>的子标签，或者是全局<div>的子标签。<address>标签：用于表示联系信息，通常包含地址、电子邮件地址、电话号码等。这个标签通常用于定义页面或其部分内容的作者或拥有者的联系信息。
举个栗子🌰：
xml
<body>
<!-- 页面的头部 -->
<header>
<h1>欢迎来到我的网站</h1>
<p>这是网站的标题，用于展示网站的核心信息。</p>
</header>
<!-- 导航菜单 -->
<nav>
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">关于我们</a></li>
<li><a href="#">产品</a></li>
<li><a href="#">联系我们</a></li>
</ul>
</nav>
<!-- 主要内容区域 -->
<main>
<!-- 第一个内容区块 -->
<section></section>
<!-- 第二个内容区块 -->
<section>
<aside></aside>
<aside></aside>
</section>
</main>
<!-- 联系信息 -->
<address>
<p><strong>联系信息：</strong></p>
<p>电话：(123) 456-7890</p>
<p><a href="mailto:[email protected]">[email protected]</a></p>
</address>
<!-- 页面的底部 -->
<footer>
© 2023 My Website. All rights reserved. | 设计：北冥有锅
</footer>
</body>文本相关语义化标签：
figure 和 figcaption、del 和 ins
<figure>标签：用于处理带有某些嵌入式内容的一组图，照片，代码清单等。表示独立的内容单元，它可以包含任何与主内容相关的附加内容，包括但不限于：文本内容、媒体文件、交互式内容等。使用<figure>标签时应当注意内容的独立性和相关性，确保它与主内容是相关的，并且不依赖于主内容而存在。<figcaption>标签：<figcaption>标签是<figure>元素的一部分，并且它是可选的。它应该包含在<figure>标签内部，作为其第一个或最后一个子元素。一个<figure>标签中只能有一个<figcaption>标签。<del> & <ins>标签：
<del>用作已删除内容的标签。浏览器通常通过在已删除的文本上打一行删除线来呈现它。
<ins>用于表示HTML文档中新添加的文本。它通常在文本上带有下划线。
<ins>与<del>一起使用时更有用，他们都可以使用CSS属性进行更改。
<ins>与<del>的特定属性：
cite:URL => 它指定资源的URL，该URL解释更改或删除文本的原因。
datetime:YYYYMMDD || HH:MM:SS => 它指定更改或删除文本的日期和时间。
举个栗子🌰：
xml
<figure>
<img src="example.jpg" alt="Example Image">
<figcaption>
<del cite="https://example.com/original-source" datetime="2023-06-01">原始图片描述：这是一张示例图片。</del>
<ins cite="https://example.com/updated-source" datetime="2023-06-05">更新后的图片描述：这是一张示例图片，经过了修改。</ins>
</figcaption>
</figure>strong 和 em
<strong>标签：表示重要或强调的文本。它用于告诉搜索引擎和辅助技术（如屏幕阅读器）该文本具有重要语义，应当被特别处理。在视觉上可能被加粗，但<strong>标签的真正目的是提供语义上的强调，而不是改变文本的外观。<em>标签：表示强调的文本。它告诉搜索引擎和辅助技术（如屏幕阅读器）该文本具有强调的语义，应当被特别处理。<em>标签在视觉上可能被斜体显示，但真正目的是提供语义上的强调，而不是改变文本的外观。
举个栗子🌰：
css
<article>
<header><strong>文章标题</strong></header>
<section><em>文章内容</em></section>
</article>sub 和 sup
<sub>标签：用于定义下标文本。<sub>中的文本呈现的基线较低，并且字体比周围的文本字体小。<sup>标签：用于定义上标文本。<sup>标签中的文本以较高的基线出现，并且字体比周围的文本字体小。
举个栗子🌰：
xml
<p>H<sub>2</sub>O是水的化学式。</p>
<p>x<sup>2</sup>表示x的平方。</p> 自我思考
1. 是不是有了语义化标签我们就再也不使用 <div> 标签了？
语义化标签是为了更好地描述网页内容的含义和结构，使搜索引擎和辅助技术能够更好地理解和解析网页。虽然语义化标签可以帮助我们更好地组织和布局网页，但仍然可能需要使用<div>标签来创建自定义的结构和样式。
<div>标签是一个通用的容器标签，可以用于任何目的，包括创建网页布局和组织内容。要合理使用语义化标签和<div>标签，并根据具体情况选择最适合的标签来标记网页内容。
2.<strong>和<b>、以及<em>和<i>之间的主要区别？
<strong> 元素用于表示重要性或强调文本，而 <b> 元素仅用于粗体显示。
<em> 元素用于强调文本，而 <i> 元素仅用于斜体显示。
<strong> 元素和 <em> 元素具有更强的语义含义，而 <b> 元素和 <i> 元素仅用于视觉效果。
3.有可以实现首行缩进的语义化标签吗？
目前HTML中没有专门的语义化标签用于实现文章段落首行缩进。通常，首行缩进是通过CSS样式来实现的。
然而，HTML5引入了一些语义化标签，如<article>、<section>等，这些标签可以用于表示内容的不同部分，并增加可访问性和语义化。虽然这些标签本身不提供首行缩进的功能，但你可以结合CSS样式来实现该效果。
css
<article>
<p style="text-indent: 2em;">这是第一段文本，首行将被缩进两个字符的宽度。</p>
<p style="text-indent: 2em;">这是第二段文本，同样实现了首行缩进。</p>
</article>小结
- 本文主要总结了什么是语义化标签和语义化标签的优势，以及一些常用的文本相关、布局相关的语义化标签元素。
- 以上内容主要来于自己的对网上各种资料的一些学习总结，如果有什么错误或者不足之处，感谢欢迎各位大佬指导。
- 如果本文对你有帮助，麻烦帮忙👍点赞支持下吧！~