本篇为HTML语义化的案例分析，为实践笔记
1. 什么是语义化
语义化是指在HTML编写过程中，使用合适的标签来明确描述页面内容和结构，并表达出各个元素之间的关系。通过使用语义化标签，可以使得网页的结构更加清晰、代码更易于理解和维护。
2. 实际网页的语义化标签
下面以某个实际网页为例，对比其语义化标签和非语义化标签的差异。我们选择了"百度首页"作为示例。
因为现在的百度首页非常繁杂，因此，我们将部分内容隐去。仅保留较为关键的代码
非语义化标签示例：
<!DOCTYPE html>
<html>
<head>
<title>百度</title>
</head>
<body>
<div id="header">
<h1>百度</h1>
<ul>
<li><a href="#">新闻</a></li>
<li><a href="#">图片</a></li>
<li><a href="#">视频</a></li>
</ul>
</div>
<div id="main">
<div class="section">
<h2>热门搜索</h2>
<ul>
<li><a href="#">张艺兴</a></li>
<li><a href="#">杨紫</a></li>
<li><a href="#">吴亦凡</a></li>
</ul>
</div>
</div>
<div id="footer">
<p>版权信息 © 2023 百度</p>
</div>
</body>
</html>
在这个示例中，我们可以看到使用了大量的<div>标签，并且没有使用对应的语义化标签来描述页面结构和内容。
语义化标签示例：
<!DOCTYPE html>
<html>
<head>
<title>百度</title>
</head>
<body>
<header>
<h1>百度</h1>
<nav>
<ul>
<li><a href="#">新闻</a></li>
<li><a href="#">图片</a></li>
<li><a href="#">视频</a></li>
</ul>
</nav>
</header>
<main>
<section>
<h2>热门搜索</h2>
<ul>
<li><a href="#">张艺兴</a></li>
<li><a href="#">杨紫</a></li>
<li><a href="#">吴亦凡</a></li>
</ul>
</section>
</main>
<footer>
<p>版权信息 © 2023 百度</p>
</footer>
</body>
</html>
这个示例中，我们使用了HTML5的语义化标签来代替非语义化的<div>标签。例如，用<header>代替<div id="header">，用<nav>代替<ul>等。这样更清晰地表达了页面的结构和内容关系。
3. 语义化的好处
语义化标签的使用有以下好处：
- 可读性更好：合适的语义化标签可以使代码更易于阅读和理解，开发者能够更快速地获取网页的结构和内容信息。
- 提升可访问性：语义化标签有助于辅助技术（如屏幕阅读器）更好地解析和呈现网页内容，提高网页的可访问性。
- 改善SEO优化：搜索引擎对于语义化标签有更好的理解能力，能够更准确地抓取、索引和展示网页内容，提高网站在搜索结果中的排名。
- 维护和更新更方便：语义化标签使得网页结构更加清晰，当需要进行维护和更新时，开发者可以更快速地定位和修改特定部分的代码，提高开发效率。
- 跨平台兼容性更好：语义化标签有助于确保网页在不同浏览器和设备上的表现一致性，提供更好的跨平台兼容性。
综上所述，语义化标签在HTML编写中具有重要的意义，通过使用合适的标签能够提高代码的可读性、可访问性、SEO优化以及开发和维护的效率。这些优势使得语义化成为编写高质量网页的重要实践之一。
4. 语义化标签总结
以下是一些常用的语义化标签和它们所代表的含义：
<header>：表示页面或者区块的头部，通常包含网站的标题、Logo、导航等主要内容。<nav>：表示页面的导航栏，用于包含网站的主要导航链接。<main>：表示页面的主要内容区域，通常包含页面的核心内容。<article>：表示一个独立的、完整的文章或新闻内容。<section>：表示文档中的一个独立部分，通常具有相关的主题或内容，可以内嵌其他的语义化标签。<aside>：表示页面的侧边栏或者附属内容，通常包含与主要内容相关但是不是核心的信息。<footer>：表示页面或者区块的底部，通常包含版权信息、联系方式等次要内容。<figure>：表示一个独立的图像、插图、照片、代码示例等与文本相关的内容，通常会伴随着一个<figcaption>标签来提供图像的描述信息。<figcaption>：表示与<figure>标签配合使用的图像描述信息，通常出现在<figure>内部。<time>：表示日期或时间信息，可以用于标记具体的日期、时间、时间范围等。<mark>：表示需要突出显示的文本，通常会以明显的方式高亮显示。<blockquote>：表示一个长的引用内容，通常用于引用其他来源或者长篇文章中的引用部分。<cite>：表示对引用内容作者的引用。<address>：表示联系信息，通常用于提供作者的联系方式。
