HTML5语义化
什么是语义化
语义化是指用合适的标签表达页面内容的含义和结构，而不仅仅用样式来呈现，其好处有：
- 使页面结构更清晰，便于阅读和维护
- 有利于SEO，提高网站的排名和流量
- 增强网页的可访问性，方便屏幕阅读器等设备解析
- 遵循W3C标准，提高网页的兼容性
而假如仅仅用<div>等标签，配合样式去呈现，视觉效果可能可以做到相似，而在这些方面都会有缺陷。
HTML5中的语义化标签
HTML5引入了许多新的语义化标签，可以更好地描述网页，常见的HTML5语义化标签有：
<header>- 定义文档的头部区域，通常包含标题、导航、logo等内容<nav>- 定义文档的导航区域，通常包含一组链接<article>- 定义文档的一个完整的独立内容，通常包含一个标题和一些正文，可以是文章、博客等<section>- 定义文档的一个通用独立章节，通常包含一个标题和一些内容<aside>- 定义文档的一个次要的或附属的内容，通常与主内容相关，但不是必需的，可以是侧边栏、广告、注释等<footer>- 定义文档的底部区域，通常包含作者、版权、联系信息等内容
HTML5语义化标签的使用示例
下面是一个使用HTML5语义化标签来表示一个简单网页结构的示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML5语义化示例</title>
</head>
<body>
<header>
<h1>HTML5语义化示例</h1>
<nav>
<a href="#">首页</a>
<a href="#">关于</a>
<a href="#">联系</a>
</nav>
</header>
<main>
<article>
<h1>FFT快速傅立叶变换</h1>
<p>众所周知（），FFT凭借如下公式得以实现...</p>
<section>
<h2>单位根的计算</h2>
<p>在FFT中，对于下标不同的单位根，可以不用重复计算。此处单位根...</p>
</section>
<section>
<h2>系数最终位置的确定</h2>
<p>在FFT中，把多项式系数依据奇偶次幂分开进行分治。递归版的FFT中，在...</p>
</section>
<section>
<h2>蝴蝶变换</h2>
<p>在一般的FFT中，我们这样从底部进行迭代...</p>
</section>
<section>
<h2>FFT的应用</h2>
<ul>
<li>大数乘法</li>
<li>图像处理</li>
<li>信号分析</li>
</ul>
</section>
</article>
</main>
<footer>
<p>作者：kusurin</p>
<p>来源：掘金</p>
</footer>
</body>
</html>
这个页面的结构大致如下：
<header>标签在头部包含了页面的标题和导航栏<nav><main>标签包含了页面的主要内容，表示页面的核心部分<article>标签包含了一个独立的文章，表示页面的主题内容<section>标签包含了文章的不同章节，表示文章的逻辑结构<p>标签表示文章的段落
<h1>和<h2>标签表示文章的标题和副标题，解释文章的层次关系<ul>和<li>标签表示文章的列表<footer>标签在尾部包含了页面的作者和来源
