文档介绍：解读 HTML5:建议、技巧和技术
标签: HTML, html5, 向后兼容
Design
想总结一下HTML5 的支持列表,写了许久,无果。在众多文章中,这篇文章涉及到了我想到的,以及没想到的。遂做粗略的翻译,因个人英文水平一般,本文FYI。原文请看:HTML5 Unleashed: Tips, Tricks and Techniques。
=====
现今我们能用 HTML5 吗,能用它做些什么呢,是否真的是 Flash 杀手?想必你也注意到了这些日渐增长且常被问起的类似问题,被讨论着,甚至被回答过。在我看来,你必须自己回答这些基本的问题。
这篇文章的本意是想帮你通过一些基本指南的学****以轻松学****代码模板。一旦你熟悉了这些基本,并想更进一学****你还将会找到更多提供了建议、技巧和技术的有用资源。
HTML 5 特性
官方详细的文档是寻找 HTML5 特性的最好地方,当然你还可以轻松通过 W3Schools 来学****HTML5 标签。我们将会在文章中涉及到以下的特性:
语义化标记
Form 表单增强功能
视频/ 音频
画布(Canvas)
可编辑内容
拖放
稳健的数据存储
检测浏览器支持
在你开始尝试 HTML5之前,需要知道各主流浏览器的支持状况。这些有用的资源,将可以帮助你向着正轨走:
何时能用
网页设计师的浏览器支持列表
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>
简单代码示例:
<!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 新增的一些新标签除了不仅仅是更具语义的<div> 标签的替代品,并不提供额外的功能。这些都是新增的标签:<article>、<section>、<aside>、<hgroup>、<header>,<footer>、<nav>、<time>、<mark>、<figure> 和 <figcaption>。
这些标签被除了IE 外的所有现代浏览器(Firefox 3+、Safari +、Chrome 2+、and Opera +)支持。Javascript (tagName) 的方法,让你可以用来创建新的 HTML5 标签。代替自己创建这些元素,你还可以用HTML5 Enabling Script 或 IE Print Protector —这些脚本将帮助 IE 正常处理 HTML5 元素的渲染。
你可能会想到添加 CSS Reset 到这些新元素上。这里是一些可以用在你以 HTML5 为基础的项目的CSS Reset:
HTML5 Reset CSS
Reset5
简单代码示例: 兼容 I