c# 浏览器demo html5_【新书连载09】软件测试专项技术—HTML5

2.1.6  HTML5

1．HTML5简介

HTML是WWW上用于描述网页内容及数据的主要标记语言，现在的HTML5是此标记语言的最新版本。它包括新功能，对现有功能的改进以及基于脚本的API。HTML5兼容以前的所有版本，兼容所有旧版浏览器并可恰当地处理错误。

HTML5的重要特性有以下几个：

• 具有用于绘画的canvas元素。

• 具有用于媒体回放的video和audio元素。

• 具有新的表单控件，如calendar、date、time、email、url、search。

• 对本地离线存储有更好的支持。

• 具有新的特殊内容元素，如article、footer、header、nav、section。

• 接下来，针对其中常用的特性讲解一下HTML5的应用。

2．HTML5中的声明

声明不是HTML标签，它是告诉Web浏览器页面使用哪个HTML版本进行编写的指令。声明必须是HTML文档的第一行，位于标签之前。习惯上，一般都向HTML文档中添加声明，这样浏览器才能获知文档类型。

对比HTML 4.01 的声明和HTML5中的声明，能立即明白升级到HTML5的好处。

以下是HTML 4.01中声明的写法，这是其中一种写法，共有3种写法。

HTML5的写法只有一种，它简洁又明了。

3．对视频的支持

video和audio元素用于实现对视频与音频的支持。以前，大多数视频是通过插件(如Flash)来显示的。然而，并非所有浏览器都支持这个插件，因此就需要使用和标签。为了能正确播放视频，必须给很多参数赋值，这就会使媒体中的标签变得非常复杂。而在HTML5里面，只需要使用以下的

Your browser does not support the video tag.

关于 图2-40  关于

4．对音频的支持

关于音频的示例代码如下

Your browser does not support the audio element.

关于音频的示例代码的运行结果如图2-41所示。 图2-41  关于音频的示例代码的运行结果

5．HTML5中的画布

HTML5中的canvas元素使用JavaScript在网页上绘制图像。画布是一个矩形区域，可以控制每一个像素。Canvas元素拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

需要注意的是，canvas元素本身是没有绘图能力的，所有的绘制工作必须在JavaScript内部完成。因此，要使用canvas元素，必须同时有一段JavaScript语言。

关于画布的示例代码如下

1 

2 

3 

4

5 

6

7 

8  var c=document.getElementById("demo");

9  var cxt=c.getContext("2d");

10 cxt.fillStyle="black";

11 cxt.fillRect(0,0,400,300);

12

13

14

15

运行结果如图2-42所示。

代码解析如下。

(1)使用画布的第一步是在页面添加一个canvas元素。第5行代码用于在页面中添加canvas元素。注意，标签必须位于

(5)第9行代码用于创建上下文对象。getContext("2d")对象是HTML5的内置对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

(6)第10行和第11行代码用于在画布中画一个400×300的矩形，位置从坐标(0，0)开始，并且把矩形涂成黑色。

6．HTML5中的表单

HTML5中的表单引入了新的表单元素、输入类型、属性和其他功能。其中的一些功能可能已经在HTML的表单中实现了，但原来的实现方式是需要通过JavaScript来完成的，现在使用的HTML5表单，只需要在标签中设置属性就能完成，大大方便了网页的开发。

1)输入类型--email

email类型用于包含email地址的输入框。在提交表单时，系统会自动验证 email字段的值。主要验证有没有@符号。如果使用iOS设备来访问，那么当输入光标位于email的输入框中时，iOS会在弹出的输入法窗口中显示一个@符号，以便用户输入。

在本示例中需要分别编写客户端代码和服务器端代码。

客户端代码如下。

姓名

邮箱

服务器端代码如下

Welcome

Your email address is:

运行结果如图2-43所示。若在email框中输入了非法的email字段，页面会出现提醒信息。

图2-43  关于email格式的提醒信息

对比之前PHP语言中的表单内容，虽然页面上"邮箱"部分都是文本的输入字段，但背后的逻辑是不一样的。两者的代码仅相差一个单词，原始的HTML如果需要对email格式进行校验，就必须另外写JavaScript代码来实现。而在HTML5中，仅用type="email"就可以方便地实现校验，如图2-44所示。

图2-44  在HTML5中可以方便地实现校验

2)输入类型--URL

URL类型用于包含URL地址的输入框。在提交表单时，系统会自动验证URL字段的值。主要验证网址前面有没有http://之类的符号。如果使用iOS设备来访问，那么当输入光标位于URL的输入框中时，iOS 会在弹出的输入法窗口中显示一个正斜杠(/)或者.com，以便用户输入。

在本示例中需要分别编写客户端代码和服务器端代码。

客户端代码如下。

姓名

主页

服务器端代码如下。

Welcome

Your homepage is:

关于URL的示例代码的运行结果如图2-45所示。

图2-45  关于URL的示例代码的运行结果

提交后的效果如图2-46所示。

若输入了不符合要求的网址(如缺少"http://")，则在提交时会给出提示信息，如图2-47所示。

3)输入类型--number

number类型用于包含数值的输入框。number类型还能够对所接受的数字进行限定(见图2-48)。

图2-48  使用number类型限定数字

示例代码如下。在本示例中仅用客户端代码就可演示效果。如果需要提交，可自行编写服务器端代码。

1 

2 

3 

4

5 

6 

7 

8 

9

10

11

代码解析如下。

从第6行代码可知，输入框的类型是number，最小值是0，最大值是10，递增的步长为3。也就是说，这个输入框只能接受0、3、6、9这4个数值。在输入框默认打开时存在的数值是6。

因为本示例中没有编写服务器代码，所以如果填入了0、3、6、9等符合规则的数字，单击"提交"按钮后，就会在界面上的输入框中出现6，这和刚打开时是一样的，代表已经提交成功。如果填写了不符合规范的数字(如2、4、8、10)，就会出现不同的提示(见图2-49)。建议分别尝试输入不同的测试数据。

图2-49  其他不同提示 ……

扫码/点击阅读原文立即查看本章完整内容

戳