本文已参与「掘力星计划」，赢取创作大礼包，挑战创作激励金。
为什么不要盲目使用<div>？
先看一个例子：
<div>
<div>这是一个xx</div>
<div>
xxxx
</div>
<div>
xxxx
</div>
<div>xxxx</div>
</div>
如果你看到一个这样的html页面结构，你能想到这是什么吗？
如果你接手了这个页面，那么进行维护的时候，可能工作感受不亚于理清一个缠在一起的耳机线...
那么接下来的这个页面结构呢？
<body>
<header>这是一个页面</header>
<aside>
广告位或者导航
</aside>
<main>
页面内容
</main>
<footer>这个页面是xxx写的</footer>
</body>
是不是能很自然的想到这样的网页结构？(不许说想不到😋)
通过这样的网页结构，需要修改哪一部分，只要对症下药就好，妈妈再也不用担心我头秃了。
这就是今天要说的语义化标签在开发中最直观的作用。它更加直观的表现出了网页结构。可能在一个人开发的时候害体现不太出来，但是当多人合作或者回看自己写的页面时，就很容易体现出这一特点。
除此之外，语义化标签的作用一共大体有这几大点：
- 优化了代码结构，在不看css的情况下，也能够呈现出很好的内容结构
- 爬虫依赖标签来确定关键字的权重，更多的语义化标签，帮助爬虫抓取更多的有效信息，也增加了页面权重
- 增加了无障碍阅读的体验，让每一部分都附有其意义
常见的语义化标签
<header>网页的页眉部分
<header>这是一个页面</header>
<main>网页的主要部分
<main>
页面内容
</main>
<footer>网页的页脚部分
<footer>页眉，这个页面是xxx写的</footer>
<aside>可用于侧边栏的广告，链接或者与附近内容相关的内容
<aside>
<h2>I社新作现已发售！</h2>
<p>
拉娜的奇妙洞窟冒险,内容来源:I社游戏-https://isheweiyi.com (滑稽)
</p>
</aside>
<nav> 标签定义导航链接的部分。
<nav>
<a>Home</a>
<a>Other</a>
<a>About</a>
</nav>
<article>定义页面独立的内容，其中可以嵌套<header>,<footer>,<sections>等
<article>
<header>小页面标题</header>
<main>内容</main>
</article>
<section>网页文档部分，长表单或者文章
<section>
<p>xxxx</p>
</section>
<figure>用于文档中的图像
<figure>
<p>黄浦江上的的卢浦大桥</p>
<img src="shanghai_lupu_bridge.jpg" width="350" height="234" />
</figure>
这些语义化标签，都可以在使用过程中代替<div>来更加有意义的描述一个网页结构
特殊标签
除了上述的语义化标签，这些特殊标签也可以一定程度的代替一味的<div>的使用。他们往往有独特的作用，可以给网页带来某些效果。
<b></b> 将字体变粗
If you can understand these words, you <b>understand</b> them
<big></big> 将字体变大一号（但是不会变粗）
If you can understand these words, you <big>understand</big> them
<wbr> 确定一个长字符串的切换行的位置：
<!--当页面宽度变化时会在wbr标签处换行-->
<p>abcde<wbr>fghigkl<wbr>mnpqrs<wbr>tuvwxyz</p>
<code>和<pre> code标签的一个功能是暗示浏览器code标签所包围的文本是计算机源代码，浏览器可以做出自己的 样式处理，pre标签则没有这项功能，但是pre标签可以保留文本中的空格和换行符，保留文本中的空格和换行符是计算机源代码显示 所必须的样式。 一般code和pre的嵌套使用为<pre><code>hrllo world</code></pre>
<!--尝试空格带来的影响（发现只有pre会保留空格）-->
<script type="text/javascript" src="loadxmldoc.js">
<br>
<code> <script type="text/javascript" src="loadxmldoc.js"></code>
<pre> <script type="text/javascript" src="loadxmldoc.js"></pre>
<meta>提供有关页面的元信息(meta-information)
<!--以上代码告诉IE浏览器，IE8/9及以后的版本都会以最高版本IE来渲染页面。 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--页面宽等于屏宽，缩放比等于1.0，防止出现横向滚动条-->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--定义网页编码为gb2312-->
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="keywords" content="HTML,ASP,PHP,SQL">
<picture> 设计多个图像来更好地填充浏览器视口
<!--在650px及以上，采用iamge1.jpg，650px-465px，采用image2.jpg...-->
<picture>
<source media="(min-width:650px)" srcset="/image1.jpg">
<source media="(min-width:465px)" srcset="/image2.jpg">
<img src="/image3.jpg" alt="Flowers" style="width:auto;">
</picture>
<progress>显示程序的下载进度
<progress value="45" max="100">
</progress>
<strong>强调内容
<p>To compare with other all you life is the <strong>source</strong> of life tragedy</p>
<em> 同样是标记重点，通常为斜体文字
<p>To compare with other all you life is the <em>source</em> of life tragedy</p>
这些特殊的标签，除了可以更加清晰的表述网页结构外，更有一些特殊的作用可以更加方便的表述网页。
如果你一下子记不住这些标签，可以收藏一下。每次需要优化页面结构的时候翻阅一下，说不定能帮上你哦😋
