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 样板,你可以拿来使用。

 

posted @ 2012-11-28 22:28  H5Boy  阅读(1406)  评论(0编辑  收藏  举报