从DIV到语义标记

Div+CSS模式

      div+css 是一种网页的布局方法，这一种网页布局方法有别于传统的HTML网页设计语言中的表格（table）定位方式，可实现网页页面内容与表现相分离。传统的网页结构以表格为基础，而现在绝大多数的网页采用div块标记作为网页的主要结构.div可以更灵活、更简洁的设计网页结构.

HTML5语言标记

      相比与div，语义标记是更新颖的”规范”,即用有意义的标记代替无意义的div标签，使html代码更有可读性，并且为未来潜在的搜索引擎优化做准备。Html5主张网页结构与修饰分开，让html代码只处理页面结构。目前这种规范并没有得到广泛的应用，但是不久的将来，语义标记的设计方法一定会成为主流.

为什么要做这个转变

1.     从代码的可读性上考虑，完全用div来划分网页的区块不利于其他web开发人员快速理解网页结构，div的意义是被隐藏的，要理解div内部代码的含义不得不去阅读其中的内容，而对于过度的div嵌套来说，要理解其含义更加困难.而使用语义标记则会使得页面结构依然清晰分明.(这个问题可以用注释和规范命名的类名来弥补)。

2.     有利于搜索引擎屏幕阅读器捕获重要信息,这是最重要的一点.如果你给页面指明了明确的划分，什么是页首和页尾，什么是图片什么是介绍，就会有利于搜索引擎快速的筛选信息.因为，语义标记是一种规范，所以搜索引擎就会利用这些标记对信息更好的筛选和呈现，那么更好的语义划分更有可能被搜索引擎频繁挑选。比如百度图片就是搜索图片的caption标记来快速筛选出来的，如果你的图片除了img之外什么也不规范的说明，就很有可能不会被百度的图片搜索引擎搜索出来了.语义标记有利于SEO.

如何做这个转变

              要想让网页的结构更清晰，需要使用HTML5中新的语言元素。这些元素可以为它们标注的内容赋予额外的含义。这些语言标记并没有任何内置的样式，使用它们不必担心对页面造成影响。你完全可以把它们当做div，只是名字不一样.

           为了保证兼容性，让不支持html新标记的浏览器把不认识的标记当做块标记(默认是inline),需要显示在样式表中添加规则:

           header, footer,article, figure, aside, hgroup, nav, section, summary{

                 display:block;

}

还有专门为IE添加建立标签元素的脚步

<!—[if itIE 9]>

      <scriptsrc="http://html5shiv.googlecode.com/svn/trunk/html5.js">

<![endif]-->

标签	描述
<article>	定义完整的内容块
<aside>	定义页面内容之外的内容。(附注)
<audio>	定义声音内容。
<button>	定义按钮。
<canvas>	定义图形。
<caption>	定义表格标题。
<cite>	定义引用。
<code>	定义计算机代码文本。
<details>	定义元素的细节。
<figcaption>	定义 figure 元素的标题。
<figure>	定义媒介内容的分组，以及它们的标题。
<footer>	定义 section 或 page 的页脚。
<h1> to <h6>	定义标题 1 到标题 6。
<header>	定义 section 或 page 的页眉。
<hgroup>	对标题和副标题进行组合
<link>	定义资源引用。
<map>	定义图像映射。
<mark>	定义有记号的文本。
<menu>	定义菜单列表。
<nav>	定义导航链接。
<output>	定义输出的一些类型。
<progress>	定义任何类型的任务的进度。
<script>	定义脚本。
<section>	定义 section。
<select>	定义可选列表。
<small>	将旁注 (side comments) 呈现为小型文本。
<source>	定义媒介源。
<span>	定义文档中的 section。
<strong>	定义强调文本。
<style>	定义样式定义。
<sub>	定义下标文本。
<summary>	定义 details 元素的标题。
<sup>	定义上标文本。
<time>	定义日期/时间。
<title>	定义文档的标题。
<ul>	定义无序列表。
<var>	定义变量。
<video>	定义视频。