HTML5正渐行渐近

飘零雾雨 2010-07-28 05:46:25

转载请注明出处：css探索之旅；本文地址：HTML5正渐行渐近

　　如果你关注HTML5，且你是个web前端开发人员，那你就能感受到HTML5给业界带来的热力和激烈讨论，犹如在炎炎夏日点起一堆熊熊大火。

　　随着各大浏览器商纷纷宣布对HTML5的支持，并迅速对自家产品进行升级，更是将HTML5推上了峰尖浪头。

　　那么HTML5究竟有何魅力？又该怎样开始HTML5呢？

　　HTML5的吸引力在于新增了很多新标签，实现了很多新特性。如直接用video标签播放视频文件，用audio播放音频文件，用canvas 绘制图形图像和制作动画，新的表单控件，对本地离线存储的更好的支持等等，这些新特性应该基于HTML、CSS、DOM以及JavaScript。

　　同时HTML5更注重语义化，如xhtml般抛弃了一些无语义，完全用于表现的标签；也将一些原来无语义的标签赋予新的语义；并新增了一些细化语义的标签如header,section,footer,article,nav等等。

　　本文将更多着墨于如何开始HTML5开发上，至于HTML5的介绍及新标签、新特性，大家可以到网上搜索HTML5的相关文章，已然很是详细。

　　起：

　　HTML5 仍处于不断完善之中。然而，大部分现代浏览器已经具备了对某些HTML5新特性的支持，且IE9也将支持某些HTML5 特性。HTML5将成为 HTML、XHTML 以及 HTML DOM 的新标准。

　　承：

　　作为新的HTML标准，HTML5没有XHTML所规定的那么严格。比如在XHTML中，所有的标记必须闭合，所有的标记和属性必须小写，而在HTML5中，这些仍沿用了HTML4的做法，允许不闭合，允许出现大写标记或属性。

　　之前，从HTML4过渡到XHTML的一个非常大的变化，就是规范了HTML的写法，使得广大前端开发人员的代码风格都统一起来。现在如今HTML5虽然没有继续这个规范，但还是推荐大家在写HTML5的时候遵循之前XHTML的标准。

　　转：

　　HTML5简化了一些无关紧要的声明，用于减小HTML的文件大小和让开发人员书写起来更简单。如：

1. DTD文档类型定义：

XHTML：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

HTML5：

<!DOCTYPE html>

通过XHTML与HTML5对比，你会看到HTML5的DTD变得简洁多了，并且之后的迭代版本都将使用这个DTD声明。

2. 命名空间：

XHTML：

<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-cn">

HTML5：

<html lang="zh-cn">

HTML5简化了命名空间声明，将不再需要HTML代码中定义命名空间。

3. 编码：

XHTML：

<meta http-equiv="content-type" content="text/html; charset=utf-8" />

HTML5：

<meta charset="utf-8" />

HTML5简化编码声明。

4. type属性：

XHTML：

<style type="text/css"></style>
<script type="text/javascript"></script>

HTML5：

<style></style>
<script></script>

HTML5简化了style标签和script的type属性。

　　还有一些其它的简化，感兴趣的可以自己去找找。

　　HTML5新增了一些标签，如：

1. 头部：

XHTML：

<div id="header"></div>

HTML5：

<header></header>

2. 底部：

XHTML：

<div id="footer"></div>

HTML5：

<footer></footer>

3. 导航：

XHTML：

<div id="nav"></div>

HTML5：

<nav></nav>

　　还有诸如<article>、<figure>、<section>、<time>、<aside>等等。

　　合：

　　看完上面这些，我们发现，开始一个HTML5页面是非常的简单的，甚至比之前HTML4和XHTML简单。

　　简单的HTML5示例页面：

　　<!DOCTYPE html>
　　<html lang="zh-cn">
　　<head>
　　<meta charset="utf-8" />
　　<title>HTML5 Examples Page</title>
　　<style>
　　
　　</style>
　　</head>
　　<body>
　　<article>
　　　　<header>标题</header>
　　　　<section>正文</section>
　　　　<footer>文章相关信息</footer>
　　</article>
　　<script>
　　
　　</script>
　　</body>
　　</html>

　　至此，我们已经创建了一个简单的HTML5页面，更多有趣且强大的东西正在等待着，赶紧去体验HTML5的魅力吧。

...全文