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 关于日期选择器的示例代码的运行结果
版权声明:51Testing软件测试网获得人民邮电出版社和作者授权连载本书部分章节。
任何个人或单位未获得明确的书面许可,不得对本文内容复制、转载或进行镜像,否则将追究法律责任。