HTML 5 特性
官方详细的文档是寻找
HTML5 特性的最好地方，当然你还可以轻松通过 W3Schools 来学习
HTML5 标签。我们将会在文章中涉及到以下的特性：
• 语义化标记
• Form 表单增强功能
• 视频 / 音频
• 画布（Canvas）
• 可编辑内容
• 拖放
• 稳健的数据存储
检测浏览器支持
在你开始尝试
HTML5之前，需要知道各主流浏览器的支持状况。这些有用的资源，将可以帮助你向着正轨走：
• 何时能用
• 网页设计师的浏览器支持列表
•
HTML5 测试
• 布局引擎对比
你还可以运行
Javascript（用
Javascript 检测浏览器特性）来检测
HTML5 特性的支持。你还应该用用Modernizr： 一个非常不错的检测
HTML5/CSS3 本地支持的
Javascript 库。如果你选择用 Mootools可以使用MooModernizr (MooTools port of Modernizr)。
你可能也会想留意不断变化的"浏览器市场份额分享" — 这些信息对于你决定用何种解决或折衷的方法将会是非常必要的。
值得注意的变更点
除了新的特征，你还应该记下这些重要的变更点：
• 简洁的 DOCTYPE
HTML5 只需一个简洁的文档类型：。它有意不使用版本，因此文档将会适用所有版本的
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>
简单代码示例:
<!doctype
html>
<
html lang="en">
<head>
<meta charset="utf-8" />
<title>
HTML5 Document</title>
</head>
<body>
</body>
</
html>
你可以使用
HTML5 Validator 或 W3C Markup Validation Service 来测试你的
HTML5 文档。
语义化标记
HTML5 新增的一些新标签除了不仅仅是更具语义的 标签的替代品，并不提供额外的功能。这些都是新增的标签：、、、、<header>,、、、、 和 。
这些标签被除了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：
•
HTML5 Reset CSS
• Reset
5
简单代码示例: 兼容 IE 的
HTML5 页面布局
<
html lang="en">
<head>
<meta charset="utf-8" />
<title>
HTML5 Semantic Markup Demo: Cross Browser</title>
<link rel="stylesheet" href="
html5reset.css" type="text/css" />
<link rel="stylesheet" href="
html5semanticmarkup.css" type="text/css" />
<!--[if lt IE 9]>
[removed][removed]
<![endif]-->
</head>
<body>
<header>
Page Header
Page Sub Heading
</header>
Home
Projects
Portfolio
Profile
Contact
<header>
Article Heading
May
5th, 2010
</header>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<header>
Section Heading
</header>
Ut sapien enim, porttitor id feugiat non, ultrices non odio.
Section Footer: Pellentesque volutpat, leo nec auctor euismod
<header>
Section Heading
</header>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
FigCaption: Club, Heart, Spade and Diamond
Ut sapien enim, porttitor id feugiat non, ultrices non odio
Section Footer: Pellentesque volutpat, leo nec auctor euismod est.
Article Footer
<header>
Siderbar Heading
</header>
Ut sapien enim, porttitor id feugiat non, ultrices non odio.
Page Footer
</body>
</
html>
注意：没有一个 div 标签，id 或 class 属性被使用到 — 简洁、小巧和更语义化的标记 (View Demo)。你仍可以用
HTML5 Validator 或 W3C Markup Validation Service 来检测你的
HTML5 文档。
扫一扫
588
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
