🌵 一、什么是HTML语义化
HTML5中新添加了部分语义化标签，这样我们就可以根据网页内容的结构来选择合适的语义标签，不再是千篇一律的<div>和<span>。
这样做可以：
1️⃣ 页面结构清晰，页面在丢失CSS样式时，仍能够清晰的展现 出页面的基本结构。
2️⃣ 代码规范易于维护，在团队开发中更有利。
3️⃣ 便于浏览器解析，有利于SEO。
🌵 二、HTML语义化标签主要有哪些
| 标签 | 语义 |
|---|---|
| <header> | 定义部分区域的页眉(头部) |
| <nav> | 定义含有多个超链接的导航栏区域 |
| <main> | 定义主要内容区域 |
| <section> | 定义某个专题组 |
| <article> | 定义与外层元素有关的文章，可能是论坛帖子、博客、评论… |
| <aside> | 侧边栏 |
| <figure> | 定义独立的流内容(图像、图标、照片、代码等，删除后不会对文档流产生影响) |
| <figcaption> | 置于<figure>元素的第一个或者最后一个元素的位置,用于对figure的内容进行说明 |
| <footer> | 定义部分区域的页脚(底部包含版权数据或者联系方式等) |
| <dialog> | 定义一段对话 |
| <address> | 定义页面或者作者的联系地址 |
| <mark> | 定义标记 |
| … | (待补充部分) |
🌵 三、HTML语义化在低版本浏览器兼容解决方案
语义化是在H5中明确的规范，IE8及更早IE版本无法在这些元素中渲染CSS效果，有些工作中可能会涉及到兼容的问题。
目前的解决方案有：
JavaScript添加自定义标签
1
document.createElement("nav");
引入html5shiv.js —— 针对IE浏览器的HTML5 JavaScript补丁，目的是让IE识别并支持HTML5元素
1
<script src="html5shiv.js"></script>