使用 HTML5 正确合理的重构你的网页

标签： 开源程序 HTML5 | 发表时间：2013-07-15 18:19 | 作者：于江水
出处：http://blog.wpjam.com

HTML5 是下一代 Web 开发标准，到现在的2012年， HTML5 规范编写完成了，虽然计划到2022年，浏览器将会完全支持整个 HTML5 ，但是现在经过浏览器厂商的努力，现代浏览器已经可以支持一部分 HTML5 的新功能。此外，在 QQ空间、百度等网站，都已经使用 HTML5 进行了重构。浏览器也在不断的升级，将会对 HTML5 有一个更好的支持。

我们为什么要使用 HTML5

HTML5 的语法更简单精炼，语义性更强，便于编写代码和理解别人编写的代码。搜索引擎也在不断的提升自己对 HTML5 页面的抓取、提取信息技术，语义性的增强，也便于搜索引擎的理解，对 SEO 也有一定的意义。

我们要如何使用 HTML5 重构网页

HTML5 中增加了大量的新标签。这些标签大体可以分为两类：1， 功能性标签。2， 语义性标签。

功能性标签：就是类似canvas、video 等标签，它是 HTML5 新创造出来的，用于实现一些新功能用的。这类新增标签，用于某些新功能的，这些新功能往往需要浏览器配合实现，所以在早期的浏览器中，功能不会得到支持。

语义性标签：就是类似 header、footer、nav 等等标签。它们类似 div，没有什么新增的功能，但是语义性增强了。例如，使用 header 括起来的内容，就会被认为是头部相关，页面中使用 nav 括起来的有序列表（ol）或者无序列表（ul），就会被认为是这个网站（或者网页）的导航。这类标签同样是新增的，在早期浏览器中不会被支持，但是这与功能性的标签不同，由于它的本质和 div 类似，所以可以通过一段 JavaScript 代码来进行 hack 从而让早期浏览器支持。这点我们将会在文章后面介绍到。

我们要重构 HTML5 页面，就是使用 HTML5 的新标签和相关的新用法，针对原来的用法进行相应的替换。而本文的内容，就是介绍重构网页比较常用的 HTML5 语义性标签的用法，以及如何合理正确的使用这些标签来替换之前网页的相应标签。这里，我以一个博客网站作为案例。

本文要用的 HTML5 标签

更简洁的 DOCTYPE 文档声明

在 XHTML 或者 HTML4 中，有多少人能记住并手写出来最顶端的 DOCTYPE 声明？那么长，那么复杂的 DOCTYPE 声明，只能靠复制。而在 HTML5 中，DOCTYPE 只有四个字母 “html”。

XHTML：

  
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

HTML5 ：

  
<!DOCTYPE html>

更简洁的文档编码声明

同样的，在 XHTML 和 HTML4 中，要声明文档编码需要使用 meta 标签，写很多东西。在 HTML5 中，meta 标签直接添加了一个 charset 属性，用来描述文档编码。

XHTML：

  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

HTML5 ：

  
<meta charset="UTF-8" />

从这两个，或许你就已经感受到了 HTML5 的魅力， HTML5 写起来非常简洁高效，让人爱不释手。

网页相关资源的引入

使用 link 标签引入 CSS ，使用 script 标签引入 JavaScript。这些和以前一样没有变化。

网站的头部区域

网站的头部区域，通常放置网站的标题、副标题、头部广告、网站介绍、网站导航等等。在之前的 XHTML 或者 HTML4 中，通常写一个 id=“header” 的 div 来实现。但是由于使用频率太高，于是 HTML5 中，新增了一个 header 标签，用于表示头部区域。

XHTML：

  
<div id="header" ></div>

HTML5：

  
<header></header>

网站的标题和描述

正确的并且有 SEO 功效的网站标题区域（LOGO）写法应该是这样的：

使用 h1 来标记网站的标题，使用 h2 来标记网站的副标题、描述等。

如果网站使用图片作为 LOGO ，也要使用这种方法，但是为了版面，需要使用文本隐藏技术，将这些文字隐藏。之后，再使用 img 标签引入 LOGO 图片，然后添加 img 的 alt 属性为网站名称，并且为图像添加一个链接，链接到网站首页。

在 HTML5 中，新增了一个 hgroup 标签，用于对标题以及子标题进行分组。我们可以使用 hgroup 元素包裹网站标题（h1)和网站副标题（h2）。

XHTML：

  
<h1>我爱水煮鱼</h1>
<h2>人人都爱 WordPress</h2>

HTML5：

  
<hgroup>
  <h1>我爱水煮鱼</h1>
  <h2>人人都爱 WordPress</h2>
</hgroup>

使用 article 表示文字的一个摘要

HTML5 新增 article 标签，来表示文档、页面或者独立的、完整的、可以独自被外部引用的内容。例如博客里面的一篇文章、一个文章摘要、一篇论坛帖子等等独立的内容。

所以，对于博客来说，我们要使用 article 来标记博客文章摘要列表。需要注意的是，article 元素通常要有自己的标题（通常为h1或h2），一般放在 header 标签里面。还应该有 aside （稍后说），来描述这篇文章摘要相关的信息（例如文章发布时间、文章作者、文章标签、分类目录等等）。当然还要有主体内容，尽可能的还要有 footer （稍后说），来表示底部相关信息。这些元素共同构成一个完整的 article 。

XHTML：

  
<div id="entry">
  <h1>使用 HTML5 正确合理的重构你的网页</h1>
  <div id="entry-meta">作者：潜行者m 时间：2012-9-27</div>
  <div id="entry-content"><p>这篇文章写了如何使用 HTML5 重构你的网页等等等等等等等等等</p></div>
</div>

HTML5 ：

  
<article>
  <header>
    <h1>使用 HTML5 正确合理的重构你的网页</h1>
  </header>
  <aside id="entry-meta">作者:潜行者m 时间:<time datetime="2012-9-27">2012-9-27</time></aside>
  <div id="entry-content"><p>这篇文章写了如何使用 HTML5 重构你的网页等等等等等等等等等</P></div>
</article>

使用 aside 标签描述文章或网站的相关信息

在文字摘要的周围，我们通常要使用一些信息来描述这篇文字，例如作者是谁，文字写于什么时间，文字的相关标签或者分类目录是什么。这些属于文章的附属信息。我们可以使用 aside 标签来标记他们。标记之后，表示属于这个 article 的相关描述信息。此外,aside 也用于边栏功能。

XHTML：

  
<div id="sidebar">这里是边栏</div>

HTML5：

  
<aside>这里是边栏</aside>

使用 time 标签来标记文章发布时间

标记文字的发布时间，可以让机器、搜索引擎等理解这篇文章是什么时间发表的。之前的话，可能要以抓取时间为发布时间或者从文章中抓取类似“本文发表于XX”的文字进行分析。

XHTML：

  
<div id="meta">本文写于 2012-9-27</div>

HTML5：

  
<aside>本文写于 <time datetime="2012-9-27">2012-9-27</time></aside>
<aside>本文写于 <time datetime="2012-9-27" pubdate="pubdate">2012-9-27</time></aside>

这个 time 标签还有一个 pubdate 属性需要特别注意一下，在上面，我给出了两种写法，第二中多了一个 pubdate 属性。增加这个属性，主要是为了标记正确发布时间，防止出现以下情况。

  
<h1>关于9月28日停电公告</h1>
<aside>发布日期:<time datetime="2012-9-27" pubdate="pubdate">2012年9月27日</time></aside>

用 pubdate 规定正确的发布时间，但是需要注意，在 W3C 标准中，并没有 pubdate 这个属性，这个属性是由 mozilla 他们自己规定的。所以添加 pubdate 属性之后，无法通过 W3C 的 HTML5 验证。

使用 nav 标签标记网站导航

nav 标签通常用于以下场合：网站导航条、侧边栏导航条、页内导航、前页后页翻页等。但是，普遍认为的是，一个页面上最好只用一个 nav 标签，用它来标记最重要的导航条（一般就是网站的导航条）。这样，可以让搜索引擎等快速定位，避免误导。通常配合 ul 或 ol 列表标签一块使用。

XHTML：

  
<div id="nav">
  <ul>
    <li>首页</li>
    <li>推荐阅读</li>
    <li>优惠码</li>
  </ul>
</div>

HTML5：

  
<nav>
  <ul>
    <li>首页</li>
    <li>推荐阅读</li>
    <li>优惠码</li>
  </ul>
</nav>

使用 footer 标签标记网站底部

网站底部通常用来说明网站信息的版权、网站所有者、备案等等信息。

XHTML：

  
<div id="footer">© Copyright 2012 我爱水煮鱼 保留所有权利 </div>

HTML5：

  <footer>© Copyright 2012 我爱水煮鱼 保留所有权利 </footer>

不要乱用 section 标签

section 的语义为“部分”，通常对网站或页面上的内容，进行分开。个人认为这是一个比较鸡肋的属性，本身它的功能和 div 标签类似，同时又和 article 标签的功能类似。本人之前在博客中写过一篇关于区分 section 和 article 元素的文章： article 元素与 section 元素区别详解。从那次写文章到现在的6个月的学习，我感觉 section 标签的用法越来越难以把握，所以如果你无法确定应该使用什么标签，请使用 div ，不要一味的乱用 section 。

HTML5 没有抛弃 div 标签

有人认为， HTML5 中新增的那么多语义性的标签，随便一个都比 div 更有语义性。那么我就不用 div 了，全部给成 HTML5 新增的标签。这是大错特错的。W3C 并没有规定 HTML5 废除了 div 标签。实际上 div 标签，仍然用于全局的布局。在你无法非常有把握使用什么 HTML5 标签的时候，请使用 div 标签！

HTML5 重构的一个比较好的例子

结构清晰合理的、使用 HTML5 重构过的网站有很多，这里只拿出几个比较好的比较典型的例子来分析。这里以 “我爱水煮鱼” 博客作为例子（地址：http://blog.wpjam.com/）。你可以随时打开，然后右键“查看源代码”来观看详细的代码。此外， “潜行者m”博客也采用了比较规范的写法，也可以借鉴。

使用 HTML5 正确合理的重构你的网页

兼容早期的浏览器

早期的浏览器中，由于没有这些新增标签，所以无法解析网页中的样式。但是新增标签，实质上与 div 性质类似，所以就有人使用了一段 JavaScript 代码，创建与新增标签中名称相同的对象。这样，浏览器就可以将 CSS 和标签结合解析，看到实际效果。这段代码就是 HTML5 Shiv，更详细的使用说明，请看这里： 使用 HTML5 Shiv 让 IE 支持 HTML5 。

由于 HTML5 比较新的技术，对此的介绍和教程还比较少，所以本文难免出现一些不准确的地方，请高手评论赐教！想学习 HTML5 的朋友，这里也推荐了一些学习书籍： HTML5 和 CSS3 书籍推荐。

>>>继续阅读 使用 HTML5 正确合理的重构你的网页的全文 ...

© 我爱水煮鱼 / RSS 订阅 / 长期承接 WordPress 项目 / 主机域名优惠码 / 新浪微博

相关日志

相关 [html5 正确 重构] 推荐：

使用 HTML5 正确合理的重构你的网页

- - 我爱水煮鱼
HTML5 是下一代 Web 开发标准，到现在的2012年， HTML5 规范编写完成了，虽然计划到2022年，浏览器将会完全支持整个 HTML5 ，但是现在经过浏览器厂商的努力，现代浏览器已经可以支持一部分 HTML5 的新功能. 此外，在 QQ空间、百度等网站，都已经使用 HTML5 进行了重构.

HTML5重构互联网：浏览器将部分替代操作系统

- sunseesiu - cnBeta.COM
如日中天的苹果公司一直是下一代WEB语言HTML5最坚定的支持者，如今正面临新的强劲挑战者. 6月有国外媒体称，社交网站Facebook正在秘密开发基于下一代Web语言HTML5的应用项目，以摆脱苹果公司APP Store对Facebook在移动领域的束缚.

HTML5 logo 发布

- Greyby - 酷壳 - CoolShell.cn
2011年1月19日，W3C发布了HTML5的log，打开W3C的页面，下在的图片印入眼前. 我的第一感觉，就像是看到了小时候看的八一电影制片产的电影. 这分明是号召全世界的无产Web程序员们团结起来，不畏艰难，不怕牺牲，一定要把HTML5的革命事业进行到底. 所以，请各位Web程序员不但在你们的HTML5的网页上加上下面的徽章（关于各个徽章的含义，请参看这里）.

html5 canvas入门

- - Marshal's Blog
可以把canvas看做div，不过，它的长和宽不能通过css来定义，要使用标签属性：. 或者javascript对象属性设置：. 使用canvas，只有一种操作方式，使用javascript. 获得canvas对象的上下文对象，该对象是操作canvas的主要对象：. 使用canvas画最简单的线， 点击运行示例，结果看起来是这样：.

HTML5新特性

- - CSDN博客推荐文章
 通过fillStyle和strokeStyle 属性可以轻松的设置矩形的填充和线条. 颜色值使用方法和CSS 一样：十六进制数、rgb()、rgba() 和 hsla. 通过 fillRect可以绘制带填充的矩形. 使用 strokeRect 可以绘制只有边框没有填充的矩形. 如果想清除部分 canvas可以使用clearRect.

【转载】HTML5 Messaging

- - HTML5研究小组
HTML5 的Message API能够让HTML5页面之间传递消息，甚至这些页面可以不在同一样域名下. 为了让消息能从一个页面发送到另一个页面，主动发送消息的页面必须拥有另一个页面的窗口引用. 然后发送 页面针对接受页调用 postMessage() 方法. postMessage() 方法中 origin 参数的值必须与页面所在的iframe的域名相匹配.

Adobe、标准和HTML5 -HTML5 and CSS3 开发

- - HTML5研究小组
“[提供商之间的]最激烈的竞争将与 标准密切相关. 大部分聪明人的眼睛将紧盯着技术标准. 但在计算机行业，新标准既可能是无限财富的源泉，也可能导致企业帝国的毁灭. 尽管存在着如此多的风险，标准仍然点燃了无限激情”. —The Economist, 1993年2月23日. 在编写这段有关标准化的话时，计算领域的主要争议是Unix是否是一个可行的操作系统（以及是否为IBM、DEC和HP的更多专用操作系统带来了挑战），以及哪个视窗平台（SUN/AT&T还是IBM/DEC/HP）将成为标准.

HTML5漫谈（4）–HTML5应用平台:PhoneGAP

- - HTML5研究小组
(  程宝平 chengbp @gmail.com）. http://phonegap.com）按官方说法，是HTML5移动应用平台，它包括两部分：. 1)       应用开发框架：采用Web/HTML5技术编写应用，支持设备能力（如GPS、重力感应等）调用；支持能力插件灵活扩展. 图1 PhoneGAP支持设备能力API列表.

HTML5新特性之CSS+HTML5实例

- - CSDN博客Web前端推荐文章
1、新的DOCTYPE和字符集. HTML5的一项准则就是化繁为简，Web页面的DOCTYPE被极大的简化. HTML5引入了很多新的标签，根据内容和类型的不同，被分为7大类. 语义化标签可以简化HTML页面设计，并且将来搜索引擎在抓取和索引网页的时候，也会利用这些元素的优势. HTML5的宗旨之一就是存在即合理.

HTML5设计原理

- jessie - 蓝色理想
Jeremy Keith在 Fronteers 2010 上的主题演讲 下载PPT（PDF） 观看视频 今天我想跟大家谈一谈HTML5的设计. 主要分两个方面：一方面，当然了，就是HTML5. 我可以站在这儿只讲HTML5，但我并不打算这样做，因为如果你想了解HTML5的话，你可以Google，可以看书，甚至可以看规范.