网页制造aiyiweb文章简介：本文次要引见html4 html1.0和1.1 以及html5的区别 整理引见html5特新性比如表单扩展，canvas，SVG等

伴随着 Chrome, Firefox 3.5, Opera, 和 Safar对html5的支持，html5曾经像一列暴走的列车接近我们了。这里是些好的建议协助你预备过渡到html5.

See what others have done（首先让我们看看其他人曾经做的吧）

开始预备html5的第一件事情就是先看下别人是使用它的。HTML 5 gallery 演示了一些使用html5的网站。

Now you do it（如今你可以开始了）

你可以先看看这些网站的文章，here（这里html5 预览） 和 elsewhere（和其他地方html5doctor）, 甚至 read the specification（读取html5详细说明）

但是上面当中文章没有一个能像使用新的元素那样让您领会掌握html5.

通过实际做，你可以知道什么可以任务，什么不可以任务。比如我在firefox3.5版本中发现类似article 和section的标签默认显示方式是display:inline模式,所以不得不强制设置它们为display:block模式才能像期望的效果显示。

下面是整理的一些 HTML 5, XHTML 1.0/1.1, 以及XHTML 5之间的一些关系或者结论吧。

我们所熟知和了解的HTML 4.0，它是基于SGML（standard Generalized markup language）规则手册的。

在SGML规则手册中，元素的书写并不区分大小写，你可以有选择的闭合标签，标签属性的书写也可以不用引号标记。

XHTML 1.0 和1.1是基于XML的，在xml规则手册中，所有的标签和属性必须用小写，标签必须闭合，而且所有的属性必须用引号括起来。

HTML5定义的标记言语不是基于上面任何一种规则手册，但是html5可以被写成要么是html方式，要么是xhtml方式。

如果你用html方式书写标签的话，你就可以不用区分大小写，而且标签可以不用闭合，属性不用引号，当中可以穿插一些xml的标签。比如：<img /><br />等。

但是如果你用xhtml书写标签的话就必须严厉遵照规格手册。

当前xml毕竟是个发展方向，所以我推荐大家使用xhtml5.

使用xhtml5的时候一定要记住在声明MIME 类型的时候，一定要用application/xhtml+xml 或者 text/xml。如果有语法错误会提示滴哈。

正则表达式

html5扩展了input元素，给它添加了一些新的属性，比如min max （次要针对数字类型），html5还提供了一些新的type类型（比如url, email, date, 和time）

如果这些属性不能满足你的需求，html5还提供应type为text的input一个pattern的属性，pattern的值就是和ECMAscript中的正则表达一样。

这写表单属性曾经在Safari and Chrome, 和 Opera中支持。如果你的浏览器不支持这些属性。你可以下载Google’s Web Forms 2 提供。

例子：

<p>
Enter a date: <input type="date" name="day"
required="required"
title="Use format yyyy-mm-dd" />
</p>

<p>
Enter a US or Canadian Postal Code:
<input type="text" name="postCode"
required="required"
pattern="([0-9]{5}(-[0-9]{4})?)|([0-9][A-Z][0-9]\s+[A-Z][0-9][A-Z])"
title="US: 99999-1234; Canadian: 0A1&#160;B2C" />
</p>

Static art with SVG

html5允许在文档对象中嵌入SVG (Scalable Vector Graphics)。
依据这里 我们可以知道svG嵌入曾经在Firefox, Safari, 和 Opera 中支持了。
如果你用的是firefox3.5可以点击 这里SVG 文件

这是一个复杂的SVG文件。这里还有个简单地 下面是个例子：

<svg xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 200 100"
width="200px" height="100px">

<circle cx="50" cy="50" r="30"
    style="stroke:none;