语义化标签
HTML语义化标签是HTML5引入的一个重要特性
常见的语义化标签：
<header>, <nav>, <main>, <article>, <section>, <aside>, <footer>
布局如下
底层实现逻辑&&好处
语义化标签其实底层实现逻辑和一般的标签是一样的，是一个js类。但是也有一些细微的差别
浏览器搜索层面
首先，语义化标签在浏览器搜索层面做出了卓越提升，有更好的可访问性，更好的seo效果以及更佳的浏览器兼容性，设备适配性。我们来一个个看他是如何做到的。
更好的可访问性：ARIA对象
ARIA (Accessible Rich Internet Applications，友好访问应用) 在es5中被加入到语义化标签的编程中，语义化标签何一般标签的一个很大的区别是它是有内置的默认ARIA角色的，这导致他能在内部对ARIA角色进行设置(一般的div需要手动），从而完成和屏幕阅读器的交互，通过ARIA文档的支持，达到提升可访问性的效果。
PS：ARIA使用方法：和role属性搭配使用，role用于设置非标准的tag的实际作用非标准的标签的实际作用，帮辅助工具辨识你这个标签干嘛的，ARIA就是辅助role来描述这个标签在可视化的情境中的具体信息。
更好的SEO效果
要理解他是如何实现的，我们就要先知道搜索引擎是如何进行爬虫的。
这是一个模拟爬虫思路的类，我们能看见浏览器的爬虫是提取页面结构和内容，从而分析处页面主要干嘛的。
<!-- 使用语义化标签 -->
<article><header><h1>文章标题</h1><time datetime="2024-01-20">发布时间</time></header><section><p>重要内容</p></section>
</article><!-- 搜索引擎直接理解：
{type: 'article',title: '文章标题',publishTime: '2024-01-20',mainContent: '重要内容',importance: 0.9
}
--><!-- 使用div -->
<div class="article"><div class="header"><div class="title">文章标题</div><div class="time">发布时间</div></div><div class="content"><div class="text">重要内容</div></div>
</div><!-- 搜索引擎需要额外分析：
{type: '需要分析class判断类型',title: '需要分析层级判断是否是标题',publishTime: '需要分析上下文判断是否是时间',mainContent: '需要分析位置判断重要性',importance: '需要综合判断'
}
-->由于浏览器的支持，搜索引擎能直接从语义化标签里面“提取”关键内容，少了分析这一步。除此之外，语义化标签能提供明确的内容结构，指示内容的类型和关系，所以对于浏览器，使用语义化标签的对象结构更加清晰，内容更加相关，更加重要，因此可以取得更高的SEO优先级。
更好的浏览器兼容性
他基本从这几方面实现更好的浏览器兼容性：
1.标准化行为 语义化标签在各个浏览器中有统一的默认行为俄日div可能需要处理额外的兼容性，比如给其添加class等
2.默认样式统一 无需重置默认样式，需要的css hac更少，并且能保证跨浏览器保持一致
3.降级处理 虽然html5标签时新提出的，但是他也提供成熟的降级处理方案，让旧版浏览器也支持，维护成本更低
作为HTML5标准的一部分，他有统一的实现标准和广泛的浏览器支持。
更好的设备适配性
浏览器会给语义化标签添加一些默认样式，比如说对于header：
header {display: block;margin: 0; /* 清除边距 */width: 100%; /* 默认占满容器 */
}其实改动并不多，不过可以这么说，他比一般的标签提供了一个更好的基础，让我们在实现响应式布局时更方便。
程序员编码方面
这些好处就很显而易见了。总结一下无外乎下面几点
代码更易读
结构更清晰
维护更方便
样式复用性更好
：消息队列)
