html5的新特性和语义化标签

MDN文档

1. 新特性
   HTML5是HTML最新的修订版本，2014年10月由万维网联盟（W3C）完成标准制定。
   HTML5的设计目的是为了在移动设备上支持多媒体。
   用于绘画的 canvas 元素
   用于多媒体回放的video和audio元素
   对本地离线存储的更好的支持
   新的特殊内容元素，比如 article、footer、header、nav、section
   新的表单控件，比如 calendar、date、time、email、url、search
2. 语义化标签是什么
   • <article>定义页面独立的内容区域
   • <aside>定义页面的侧边栏内容
   • <dbi>设置一段文本，脱离其父元素的文本方向
   • <command>定义命令按钮，比如单选、复选框
   • <details>用于描述文档或文档的某个部分的细节
   • <dialog>定义对话框，比如提示框
   • <summary>标签包含details元素的标题
   • <figure>规定独立的流内容（图像、图表、照片）
   • <figcaption>figure元素的标题
   • <footer>定义section或document的页脚
   • <header>定义文档的头部区域
   • <mark>定义带有记号的文本
   • <meter>定义度量衡。仅用于已知最大值和最小值的度量衡
   • <nav>定义导航链接的部分
   • <progress>定义任何类型的任务的进度
   • <ruby>定义ruby注释
   • <rt>定义字符的解释或发音
   • <rp>在ruby注释中使用，定义不支持ruby元素的浏览器所显示的内容
   • <section>定义文档中的节
   • <time>定义日期或时间
   • <wbr>规定在文本中的何处适合添加换行符

3. 为什么有语义化标签
   在很久很久以前，前端开发者们设计网页布局时，使用的是table布局。将每一块的内容都是当作单元格处理。所有页面都相当于一个大表格。
   但是，这样的布局不够灵活，而且table元素有很多问题，比如margin失效。
   这时，CSS出现了，人们开始使用它设置页面样式。同时DIV元素在配合CSS上的优势也被人们发现。这时候大家都开始使用DIV+CSS开发前端页面。
   但是，这样还是有问题：div的语义不明。

   <div>
   <div>标题</div>
   <div>内容</div>
   </div>

   看着上面的例子，我们来讲个故事：有一天小明出门，看到一棵树，树上什么也没有，小明觉得这棵树很碍事，反正也没果子留着没什么用，就砍掉了。结果这棵树是王母娘娘的蟠桃树，三千年才开花，三千年结果，三千年成熟，小明一个凡人，自然不懂这棵树的价值，酿成大祸。
   于是呢，管理蟠桃园的人就在每棵蟠桃树上挂了个牌子，上书“蟠桃树”三个大字，经过这样的处理后，下次经过蟠桃树的小明就不会随手砍树了。不过这就有了一个问题，蟠桃树跟别的树比起来，除了多块牌子并没有什么区别。蟠桃树就抱怨了，我本来是一棵高贵的神树，怎么能跟一般的树一样？
   于是，王母娘娘请来擅长园艺的神仙，对蟠桃树进行修剪，从本质上就对蟠桃树进行了区分。这样从远处一看，就能分辨出蟠桃树和一般的树。

   使用div标签也是一样的道理，开发者们分不清这个div与那个div之间的作用与区别，自然很容易误删节点。意识到这个问题后，人们开始使用节点的某一属性标记div节点，比如class属性：

   <div class="container">
   <div class="header">
   <div class="article">
   </div>
   </div>
   </div>
   

   但是，这样又让人觉得CSS和HTML的耦合性太高。原本文档结构是你HTML负责的，凭什么要我CSS来帮你？HTML也很委屈，我本来设计缺陷没有办法，要怪就怪设计我的人吧。
   所幸，标准制定者也知道这个缺点，于是提出来这些语义化标签，解放了CSS，降低了耦合度，从本质上就对这些标签进行了区分。