HTML5—软件测试专项技术(9)

发表于:2020-4-29 13:50

字体: | 上一篇 | 下一篇 | 我要投稿

 作者:51Testing教研团队    来源:51Testing软件测试网原创

分享:
  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中的<!DOCTYPE>声明
  <!DOCTYPE>声明不是HTML标签,它是告诉Web浏览器页面使用哪个HTML版本进行编写的指令。<!DOCTYPE>声明必须是HTML文档的第一行,位于<html>标签之前。习惯上,一般都向HTML文档中添加<!DOCTYPE>声明,这样浏览器才能获知文档类型。
  对比HTML 4.01 的<!DOCTYPE>声明和HTML5中的声明,能立即明白升级到HTML5的好处。
  以下是HTML 4.01中<!DOCTYPE>声明的写法,这是其中一种写法,共有3种写法。
  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "***w3***/TR/html4/ strict.dtd">
  HTML5的写法只有一种,它简洁又明了。
  <!DOCTYPE HTML>
  3.对视频的支持
  video和audio元素用于实现对视频与音频的支持。以前,大多数视频是通过插件(如Flash)来显示的。然而,并非所有浏览器都支持这个插件,因此就需要使用<embed>和<object>标签。为了能正确播放视频,必须给很多参数赋值,这就会使媒体中的标签变得非常复杂。而在HTML5里面,只需要使用以下的<video>标签。
<!DOCTYPE HTML>
<html>
<body>
<video width="320" height="240" controls="controls">
<source src="haha.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</body>
</html>
  关于<video>标签的示例代码的运行结果如图2-40所示。
  
图2-40  关于<video>标签的示例代码的运行结果
  4.对音频的支持
  关于音频的示例代码如下。
<!DOCTYPE HTML>
<html>
<body>
<audio controls="controls">
<source src="chun.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
</body>
</html>
  关于音频的示例代码的运行结果如图2-41所示。
  
图2-41  关于音频的示例代码的运行结果
  5.HTML5中的画布
  HTML5中的canvas元素使用JavaScript在网页上绘制图像。画布是一个矩形区域,可以控制每一个像素。Canvas元素拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
  需要注意的是,canvas元素本身是没有绘图能力的,所有的绘制工作必须在JavaScript内部完成。因此,要使用canvas元素,必须同时有一段JavaScript语言。
  关于画布的示例代码如下。
1  <!DOCTYPE HTML>
2  <html>
3  <body>
4
5  <canvas id="demo" width="500" height="400"></canvas>
6
7  <script type="text/javascript">
8  var c=document.getElementById("demo");
9  var cxt=c.getContext("2d");
10 cxt.fillStyle="black";
11 cxt.fillRect(0,0,400,300);
12 </script>
13
14 </body>
15 </html>
  运行结果如图2-42所示。
  代码解析如下。
  (1)使用画布的第一步是在页面添加一个canvas元素。第5行代码用于在页面中添加canvas元素。注意,<canvas>标签必须位于<script>标签之前。
  (2)在<canvas>标签中width="500"和height="400"属性代表画布的大小。
  
图2-42  运行结果--黑色幕布
  (3)在<canvas>标签中,还有一个id属性。它用<script>标签中的getElementById("demo")语句来获取canvas元素。由于画布是没有默认样式的,因此除非用CSS添加一个边框,否则眼睛是看不到它的位置的。
  (4)要在画布中绘制一个图形,第二步就是编写一段<script>代码。在<script> </script>标签中的代码用于画图。
  (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会在弹出的输入法窗口中显示一个@符号,以便用户输入。
  在本示例中需要分别编写客户端代码和服务器端代码。
  客户端代码如下。
<!DOCTYPE HTML>
<html>
<body>
<form action="welcome.php" method="post">
姓名<input type="text" name="name"><br>
邮箱<input type="email" name="email"><br>
<input type="submit">
</form>
</body>
</html>
  服务器端代码如下。
<html>
<body>
Welcome
<?php echo $_POST["name"]; ?>
<br>
Your email address is:
<?php echo $_POST["email"]; ?>
</body>
</html>
  运行结果如图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,以便用户输入。
  在本示例中需要分别编写客户端代码和服务器端代码。
  客户端代码如下。
<!DOCTYPE HTML>
<html>
<body>
<form action="welcome.php" method="post">
姓名<input type="text" name="name"><br>
主页<input type="url" name="url"><br>
<input type="submit">
</form>
</body>
</html>
  服务器端代码如下。
<html>
<body>
Welcome
<?php echo $_POST["name"]; ?>
<br>
Your homepage is:
<?php echo $_POST["url"]; ?>
</body>
</html>
  关于URL的示例代码的运行结果如图2-45所示。
  
图2-45  关于URL的示例代码的运行结果
  提交后的效果如图2-46所示。
  若输入了不符合要求的网址(如缺少"http://"),则在提交时会给出提示信息,如图2-47所示。
  
  3)输入类型--number
  number类型用于包含数值的输入框。number类型还能够对所接受的数字进行限定(见图2-48)。
  
图2-48  使用number类型限定数字
  示例代码如下。在本示例中仅用客户端代码就可演示效果。如果需要提交,可自行编写服务器端代码。
1  <!DOCTYPE HTML>
2  <html>
3  <body>
4
5  <form>
6  <input type="number" name="points" min="0" max="10" step="3" value="6" />
7  <input type="submit" />
8  </form>
9
10 </body>
11 </html>
  代码解析如下。
  从第6行代码可知,输入框的类型是number,最小值是0,最大值是10,递增的步长为3。也就是说,这个输入框只能接受0、3、6、9这4个数值。在输入框默认打开时存在的数值是6。
  因为本示例中没有编写服务器代码,所以如果填入了0、3、6、9等符合规则的数字,单击"提交"按钮后,就会在界面上的输入框中出现6,这和刚打开时是一样的,代表已经提交成功。如果填写了不符合规范的数字(如2、4、8、10),就会出现不同的提示(见图2-49)。建议分别尝试输入不同的测试数据。
  
图2-49  其他不同提示
  4)输入类型--range滑块
  range类型用于一定范围内数字值的输入域。具体显示为滑块,它在使用时还能够对所接受的数字进行限定。
  示例代码如下。
1  <!DOCTYPE HTML>
2  <html>
3  <body>
4
5  <form>
6  Points: <input id="rangeField" type="range"
7  name="rangeField" min="1" max="10" />
8  </form>
9
10 <input class="btn btn-primary" type="button" value="单击查看Range的值"
11 onclick="alert(document.getElementById('rangeField').value);">
12
13 </body>
14 </html>
  代码解析如下。
  在第6~7行代码中,type="range"代表输入框的类型是滑块。min="1"和max="10"分别表示滑块的最小值为1,最大值为10。如果不指定范围,则默认滑块的长度就是100。
  关于滑块的示例代码的运行结果如图2-50所示。
  
图2-50  关于滑块的示例代码的运行结果
  5)输入类型--日期选择器
  HTML5拥有多个可选取日期和时间的新输入类型:
  ●date--选取日、月、年;
  ●month--选取月、年;
  ●week--选取周和年;
  ●time--选取时间(小时和分钟);
  ●datetime--选取时间、日、月、年(UTC 时间);
  ●datetime-local--选取时间、日、月、年(本地时间)。
  示例代码如下。
<!DOCTYPE HTML>
<html>
<body>
<form>
Date: <input type="date" name="user_date" />
</form>
</body>
</html>
  关于日期选择器的示例代码的运行结果如图2-51所示。
  
图2-51  关于日期选择器的示例代码的运行结果

查看《软件测试专项技术--基于Web、移动应用和微信》全部连载内容>>
版权声明:51Testing软件测试网获得人民邮电出版社和作者授权连载本书部分章节。
任何个人或单位未获得明确的书面许可,不得对本文内容复制、转载或进行镜像,否则将追究法律责任。
《2023软件测试行业现状调查报告》独家发布~

关注51Testing

联系我们

快捷面板 站点地图 联系我们 广告服务 关于我们 站长统计 发展历程

法律顾问:上海兰迪律师事务所 项棋律师
版权所有 上海博为峰软件技术股份有限公司 Copyright©51testing.com 2003-2024
投诉及意见反馈:webmaster@51testing.com; 业务联系:service@51testing.com 021-64471599-8017

沪ICP备05003035号

沪公网安备 31010102002173号