前记：在前端的学习一开始就了解到 HTML 语义化相关内容，也告诉自己要写出这样的 HTML 代码，但是在实际工作中还是会陷入简单的使用 div + css 去堆砌 HTML 结构和样式当中。特意写这个文章提醒自己，牢记合理使用语义化标签。
什么是语义化？
HTML（超文本标记语言），是用来结构化 Web 网页及其内容的标记语言，主要功能是定义网页内容和结构。所以简单有效的使页面具有清晰的结构和含义非常重要，而语义化的标签使用能很好的做到这一点。
HTML 标签的语义化：
- 使用正确的标签做正确的事情
- 页面内容结构化
语义化有什么用？
- 便于浏览器、搜索引擎解析，有利于 SEO
- 在没有 CSS 的基础上也有基础的结构和样式展示
- 让维护工作变更加的清晰简单
常用的语义化标签有哪些？
1. 结构相关
<article>标签 可以使用在网页中的独立或可复用的结构，可以在展示文章、文档、博客和评论等独立的内容时使用。
<article>
<h1>我是文章标题</h1>
<article>
<h2>我是标题</h2>
<p>我是内容</p>
</article>
</article>
<header>标签 用于展示介绍性内容，可以包含标题元素、Logo、搜索框等内容。<main>标签 用于展示 body 或内容的主体部分，可以包含文档的中心主题或运用的主要功能等内容。标签包裹的内容应该是独一无二的，无实际结构作用(没有自带样式)，仅提供信息。<footer>标签 用于展示根节点元素的页脚，可以包含作者、版权信息、网站信息等内容。<nav>标签 用于展示导航链接，展示菜单、目录、索引等可使用。<section>标签 展示包含在 HTML文档中的独立部分内容，例如文章大纲等信息。<h1>,<h2>,<h3>,<h4>,<h5>,<h5>标签 展示六个不同的级别的标题，其中<h1>级别最高，<h6>级别最低。<address>标签 展示某个人或组织的联系信息等。
2. 内容相关
<blockquote>标签 代表其中的文字是引用内容。通常在渲染时，这部分的内容会有一定的缩进。<ul>,<ol>等列表标签 展示有序列表或者无序列表。<p>标签 展示段落。<table>等表格标签 展示表格。<a>标签 插入各种超链接。<audio>标签 插入音频内容。<video>标签 插入视频。<img>标签 插入图片。<button>标签 展示功能按钮。<input>等表单标签 展示表单内容，实现表单各种功能，如输入、提交、展示等。
注：该文章标签只讨论语义化标签的简单使用场景，不讨论具体标签用法
