HTML5 新元素标签系列:最简版 HTML5
我们不讨论为什么我们现在就可以用 HTML5 而不是等到2022,这篇文章将给你提供一系列 HTML样板,你现在就可以把他们应用在你的项目中。
五秒内开始用 HTML5
是你页面的标志符合 HTML5 一个超级简单的方法就是将 DOCTYPE ——不管它现在是什么——改为<!DOCTYPE html>。 就是这么简单,不需要再做其他的事。
Google 已经这么做了,看一下他们的主页,都只用了一行:<!doctype html><head><title>HTML 5 - Google Search</title><script>...
但想不到的是,Google的搜索结构页面并不符合标准,因为他们用了一些无效的标签如<font>还有一些其他的错误,但还算好。通过使用正确的DOCTYPE,他们仍然利用上了HTML解析规则(比如说在<script>没有类型属性)。
HTML5 最简版
如果你希望快速做出原型或者做个实验,而不需要太多样式的话,你或许对以下的微缩版 HTML 5 文件感兴趣:
<!DOCTYPE html> <title>Small HTML 5</title> <p>Hello world</p>
这也是完全符合 HTML5 规范的。
(有趣的是,当拿掉<title>标签后,对于这一文件是否还符合规范却有不同的观点)。
考虑HTML 5 完整性和兼容性
最后更完整的样板需要指出字符集。没有这个的话,有些字符可能不会正常显示(以前我花费了大量时间试图搞清楚原因)
我们同样还包含了 HTML5 shiv ,这样的话我们就能在 IE 中给元素添加样式。注意,你必须在 <head> 元素里包含这段脚本(代码中绿色部分)。
最后,我们添加了一些 CSS 样式,是块元素能显示为块,因为这并不是许多浏览器的默认行为。
那么,下面就是这个了——一个有效完整的 HTML5文件样板:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>HTML 5 complete</title> <!--[if IE]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> <style> article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } </style> </head> <body> <p>Hello World</p> </body> </html>
如果你想使用 HTML5做一些实验,默认的 JS Bin模板是一个 HTML5 样板,你可以拿来使用。