前段时间公司培训了几次HTML5,虽然我还没有实际应用过,但看着好像很厉害的样子!下面总结一下初步的学习收获。

一、更改的标签

HTML5的DOCTYPE标记和以前不一样了。现在只需要一个“<!DOCTYPE html>”就完成了。文字编码和以往类似,写在meta标签里。如果要让屏幕阅读器等设备知道网站所采用的语言,就在html标记后面加个lang属性,比如“<html lang="en">”。一个最简单的结构如下:

<!DOCTYPE html>
<meta charset="UTF-8" />
<html lang="en">
    <head>
        <title>Fuck with HTML5</title>
    </head>
    <body>
    </body>
</html>

如果要引入CSS和Javascript,也和以前稍有不同,HTML5是这样引用的:

<link rel="stylesheet" href="styles.css" />
<script data-original="scripts.js"></script>

注意,script标记不再有language和type了,style也没有type了。

二、新的标签

HTML5提供了非常语义化的新标签,这些都是根据以往网页设计的经验,提取出的最常用的部分。比如header, footer, nav, aside,section,article以及其他很多新的标签,他们为搜索引擎减轻了很多负担,让网页的内容能够被更准确的解析。这个意义很重要,尤其是对于机器和机器之间的通讯,html5的确优化了许多。下面我们来看看一些最常用的新标签:

首先,布局常用的有:

<header>:表示页面的头部,也就是以前我们喜欢写的<div id=”header”>,里面常常有logo和导航栏。不过在html5中,header标记也可以作为一小块内容的头部。也就是,可以重复多次。

<footer>:尾部,没啥特别的

<nav>:导航栏。

<aside>:边栏,现在的网站通常都是多列布局的,起辅助作用的边栏就是aside。

<section>:表示一块区域。它的概念是具有相互关联的,可以被划分为一组信息的区域。

<article>:表示一篇文章。

在网站中,尤其是搜索结果的页面,通常需要高亮显示关键词,现在做这件事很方便,只要用HTML5的mark标记。比如:

<p>今天我读完了<mark>ASP.NET</mark>高级编程</p>

对于图片,HTML5也有新的方式去描述:

<figure>
    <img data-original="图片文件" alt="描述 " />
    <figcaption>图片的标题</figcaption>
</figure>

在处理时间和日期的显示上,我们有了新的time标签:

<time datetime="2012-04-23">2012年4月23日</time>

其他标签不一一列举了,读者可以去查阅Oreilly的书。

三、处理表单

对表单的优化,是HTML5最让我感到实用的改进。尤其是在验证用户输入上,HTML5定义了许多常用的数据类型,客户端验证将由浏览器自己完成,不用再自己去写javascript了。

比如,定义一个文本框,让用户输入email,并且我们要验证email格式是否正确,可以这样写:

<input type="email" name="email">

很简单,这样浏览器根据type=”email”就知道要用email地址的规则去验证用户的输入。

其他类似的type属性有:url,tel,datetime,date,time,number,甚至是color等等。其中datetime可以弹出日历,以前这件事得用jquery UI来做。Number则可以像winform那样具有上下两个小箭头。部分标签也可以设置最小值、最大值。比如:

<input type="number" name="quantity" min="2" max="20">

四、原生的音频、视频

HTML5的又一大牛逼之处在于它内置了对音频、视频的定义。以往我们都是用flash或Silverlight等三方插件来做播放器的。现在可以用原生的了。

音频标记是:

<audio data-original="music.ogg" controls></audio>

视频标记是:

<video data-original="video.ogv" controls></video>

但是,目前各大浏览器对媒体格式的支持都不统一。比如mp4格式,火狐就不能直接识别的,但safari可以。

为了兼容不同的浏览器,我们可能需要准备一个视频的多种格式。然后代码这样写:

<video controls>
    <source data-original="video.mp4" />
    <source data-original="video.ogv" />
    Your device does not support HTML5 video.
</video>

如果浏览器不支持mp4,它就会选择ogv格式。

五、Canvas绘图

我们以前制作图表,都是通过后台程序生成静态图片然后放到网页上实现的。如果稍微高级一点,恐怕就要客户端装插件了。现在HTML5的Canvas绘图,能够直接在页面上绘制图表。它使用的是<canvas>标记。

比如我们要在页面上画一个黄色的三角(这个例子取自http://www.williammalone.com/articles/html5-canvas-example/#subTitle1):

首先,在页面上定义一个canvas标记:

<canvas id="canvasId" width="165px" height="145px"></canvas>

然后在JavaScript中找到这个canvas的context:

var context = document.getElementById("canvasId").getContext("2d");

接下来,就可以绘制三角形了:

var width = 125;  // Triangle Width
var height = 105; // Triangle Height
var padding = 20;

// Draw a path
context.beginPath();
context.moveTo(padding + width/2, padding);        // Top Corner
context.lineTo(padding + width, height + padding); // Bottom Right
context.lineTo(padding, height + padding);         // Bottom Left
context.closePath();

// Fill the path
context.fillStyle = "#ffc821";
context.fill();