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

 

你可能感兴趣的:(html5)