解读 HTML5：建议、技巧和技术

最新推荐文章于 2025-08-24 16:57:08 发布

转载最新推荐文章于 2025-08-24 16:57:08 发布 · 45 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/wqj0405/archive/2010/09/03/1816721.html

本文介绍了HTML5的主要新特性，包括语义化标记、表单增强功能、多媒体支持等，并探讨了如何检测浏览器对HTML5的支持情况。同时，文中还列举了一些废弃的标签和重要的变更点。

作者: sofish 发布时间: 2010-09-02 20:20 阅读: 121 次原文链接全屏阅读　 [收藏]

编辑点评：无论你想简单了解，还是深入学习HTML5。这篇文章将会有助于您进一步了解和学习HTML5。

　　现今我们能用 HTML5 吗，能用它做些什么呢，是否真的是 Flash 杀手？想必你也注意到了这些日渐增长且常被问起的类似问题，被讨论着，甚至被回答过。在我看来，你必须自己回答这些基本的问题。

　　这篇文章的本意是想帮你通过一些基本指南的学习，以轻松学习代码模板。一旦你熟悉了这些基本，并想更进一学习，你还将会找到更多提供了建议、技巧和技术的有用资源。

　　HTML 5 特性

　　官方详细的文档是寻找 HTML5 特性的最好地方，当然你还可以轻松通过 W3Schools 来学习HTML5 标签。我们将会在文章中涉及到以下的特性：

语义化标记
Form 表单增强功能
视频/音频
画布（Canvas）
可编辑内容
拖放
稳健的数据存储

　　检测浏览器支持

　　在你开始尝试 HTML5之前，需要知道各主流浏览器的支持状况。这些有用的资源，将可以帮助你向着正轨走：

　　你还可以运行 Javascript（用Javascript 检测浏览器特性）来检测 HTML5 特性的支持。你还应该用用Modernizr：一个非常不错的检测 HTML5/CSS3 本地支持的 Javascript 库。如果你选择用 Mootools可以使用MooModernizr (MooTools port of Modernizr)。

　　你可能也会想留意不断变化的"浏览器市场份额分享"—这些信息对于你决定用何种解决或折衷的方法将会是非常必要的。

　　值得注意的变更点

　　除了新的特征，你还应该记下这些重要的变更点：

简洁的 DOCTYPE HTML5 只需一个简洁的文档类型：<!DOCTYPE html>。它有意不使用版本，因此文档将会适用所有版本的HTML。
简单易记的语言标签你并不需要在<html> 中使用xmlns 或xml:lang 标记。<html lang="en"> 将对 HTML5 有效。
简单易记的编码类型你现在可以在 meta 标签中使用"charset"：<meta charset="utf-8″/>
不需要闭合标签在 HTML5 中，空标签（如：br、img 和 input ）并不需要闭合标签。
废弃的标签下面这些标签并不被 HTML5 支持：
<acronym>、<applet>、<basefont>、<big>、
<center>、<dir>、<font>、<frame>、<frameset>、
<noframes>、<s>、<strike>、<tt>、<u> 和<xmp>

　　简单代码示例:

1 <! doctype html >
2 < html lang ="en" >
3 < head >
4 < meta charset ="utf-8" />
5 < title > HTML5 Document </ title >
6 </ head >
7 < body >
8
9 </ body >
10 </ html >

你可以使用HTML5 Validator 或 W3C Markup Validation Service 来测试你的 HTML5 文档。

　　语义化标记

　　HTML5 新增的一些新标签除了不仅仅是更具语义的<div> 标签的替代品，并不提供额外的功能。这些都是新增的标签：<article>、<section>、<aside>、<hgroup>、<header>,<footer>、<nav>、<time>、<mark>、<figure> 和 <figcaption>。
　　这些标签被除了IE 外的所有现代浏览器（Firefox 3+、Safari 3.1+、Chrome 2+、and Opera 9.6+）支持。Javascript 提供了document.createElement(tagName)的方法，让你可以用来创建新的 HTML5 标签。代替自己创建这些元素，你还可以用HTML5 Enabling Script 或 IE Print Protector —这些脚本将帮助 IE 正常处理 HTML5 元素的渲染。
你可能会想到添加 CSS Reset 到这些新元素上。这里是一些可以用在你以 HTML5 为基础的项目的CSS Reset：

　　简单代码示例: 兼容 IE 的 HTML5 页面布局

1 <! doctype html >
2 < html lang ="en" >
3 < head >
4 < meta charset ="utf-8" />
5 < title > HTML5 Semantic Markup Demo: Cross Browser </ title >
6 < link rel ="stylesheet" href ="html5reset.css" type ="text/css" />
7 < link rel ="stylesheet" href ="html5semanticmarkup.css" type ="text/css" />
8 
11 </ head >
12 < body >
13 < header >
14 < hgroup >
15 < h1 > Page Header </ h1 >
16 < h2 > Page Sub Heading </ h2 >
17 </ hgroup >
18 </ header >
19 < nav >
20 < ul >
21 < li >< a href ="#" > Home </ a ></ li >
22 < li >< a href ="#" > Projects </ a ></ li >
23 < li >< a href ="#" > Portfolio </ a ></ li >
24 < li >< a href ="#" > Profile </ a ></ li >
25 < li >< a href ="#" > Contact </ a ></ li >
26 </ ul >
27 </ nav >
28 < article >
29 < header >
30 < h1 > Article Heading </ h1 >
31 < time datetime ="2010-05-05" pubdate > May 5th, 2010 </ time >
32 </ header >
33 < p > Lorem ipsum dolor sit amet, consectetur adipiscing elit. </ p >
34 < section >
35 < header >
36 < h1 > Section Heading </ h1 >
37 </ header >
38 < p > Ut sapien enim, porttitor id feugiat non, ultrices non odio. </ p >
39 < footer >
40 < p > Section Footer: Pellentesque volutpat, leo nec auctor euismod </ p >
41 </ footer >
42 </ section >
43 < section >
44 < header >
45 < h1 > Section Heading </ h1 >
46 </ header >
47 < p > Lorem ipsum dolor sit amet, consectetur adipiscing elit. </ p >
48 < figure >
49 < img src ="item-1.png" alt ="Club" >
50 < img src ="item-2.png" alt ="Heart" >
51 < img src ="item-3.png" alt ="Spade" >
52 < img src ="item-4.png" alt ="Diamond" >
53 < figcaption > FigCaption: Club, Heart, Spade and Diamond </ figcaption >
54 </ figure >
55 < p > Ut sapien enim, porttitor id feugiat non, ultrices non odio </ p >
56 < footer >
57 < p > Section Footer: Pellentesque volutpat, leo nec auctor euismod est. </ p >
58 </ footer >
59 </ section >
60 < footer >
61 Article Footer
62 </ footer >
63 </ article >
64 < aside >
65 < header >
66 < h1 > Siderbar Heading </ h1 >
67 </ header >
68 < p > Ut sapien enim, porttitor id feugiat non, ultrices non odio. </ p >
69 </ aside >
70 < footer >
71 Page Footer
72 </ footer >
73 </ body >
74 </ html >

注意：没有一个 div标签，id 或 class 属性被使用到—简洁、小巧和更语义化的标记(View Demo)。你仍可以用 HTML5 Validator 或 W3C Markup Validation Service 来检测你的 HTML5 文档。

注意：这个示例在 IE6 下并未正常显示。这只是因为我使用 CSS child combinators 来避免使用额外的 class。你可以在 IE6 下用自己的 CSS ，像其他浏览器一样处理 HTML5 标记。

原文请看：HTML5 Unleashed: Tips, Tricks and Techniques。

转载于:https://www.cnblogs.com/wqj0405/archive/2010/09/03/1816721.html