HTML5之语义元素

在HTML5之前，我们都是通过div加上属性来区分导航、内容以及页脚等，比如<div  class="nav"></div>表示导航、<div class="container"></div>表示内容区域、<div class="footer"></div>表示页脚。

上面这种方式虽然可以用来区分一个网页的各个部分，但是有一个缺点：网页的各个区域都用div标签来表示，太单调了！试想一下，如果要你做一个非常复杂的网页，而且你把网页的所有部分都用div来表示，那将会导致整个网页的HTML代码全部都是div标签。可能你当时写出来并且按照你预料的结果显示出来了，但是如果你以后要添加一些新内容进去，你就会发现问题了。当你回去再看这些代码的时候，绝对会头晕眼花，因为你看到的是一大堆div标签，你可能要找半天才能找到你要添加新内容的地方，再说过了这么久你也不可能还记得清清楚楚。用一句专业的话来说就是语义不清晰，会给后期维护带来很大的麻烦。

为了避免以后再这种情况，你应该使用HTML5提供的新语义元素来划分整个网页的区域。HTML5 提供了定义页面不同部分的新语义元素有：

1. <article>

2. <aside>

3. <details>

4.  <figcaption>

5. <figure>

6. <footer>

7. <header>

8.  <main>

9.  <mark>

10.  <nav>

11.  <section>

12.  <summary>

13.  <time>

关于这些新语义元素的简单用法可以参考W3school教程中的HTML5 语义元素，我觉得多实践才会理解得更深刻，所以多敲敲代码吧！