第5章HTML5的新增标签 本章学习目标 了解HTML5新增标签的作用 掌握使用audio和video标签的方法 本章介绍几个HTML5的新增标签，体会HTML5新增标签给网页设计带来的便利。 5.1输入类型number 随着浏览器的发展，结合以往网页开发时的需求，HTML5引入了新的标签，这会降低我们开发网页的难度。查看网页https://www.w3school.com.cn/html/html_form_input_types.asp，可以看到HTML5引入的新的输入类型，这里仅简单介绍几个。这些输入类型，有的相当于网页中JavaScript的作用，对输入数据按要求进行了验证，但不需要用户自己书写JavaScript了。 输入类型number用于应该包含数字值的输入字段，能够对数字做出限制。在提交表单时，浏览器会自动验证 number 域的值。输入类型number适用的浏览器如表5.1所示。只有高版本的浏览器才支持HTML5新引入的标签。 表5.1输入类型number适用的浏览器 IEFirefoxOperaChrome NO4.09.010.0 【例51】输入类型number示例。 ch5_01.html内容如下： 01<!DOCTYPE html> 02<html> 03<head> 04<meta charset="utf-8"/> 05<title>输入类型number</title> 06</head> 07<body> 08<form action="https://www.w3school.com.cn/example/html5/demo_form.asp"> 09数量(1到5之间)： 10<input type="number" name="quantity" min="1" max="5"> 11<input type="submit"> 12</form> 13</body> 14</html> 运行上述代码后出现如图5.1所示界面。 图5.1number输入类型验证 (1) 输入一个范围1～5的数字3，提交可以得到如图5.2所示的界面。 图5.2正确输入数据时的响应 (2) 输入非数字时，例如tiankong，提交可以得到如图5.3所示的界面。 图5.3输入字母时的验证 (3) 修改form的action=“#”，输入一个不是1～5的数字6，提交可以得到如图5.4所示的界面，说明验证是由浏览器完成的。 图5.4输入6时的验证 5.2输入类型email email类型用于应该包含email地址的输入域。在提交表单时，浏览器会自动验证email域的值，验证的格式为带有@的字符串。用法参见例52。 【例52】输入类型email示例。 ch5_02.html内容如下： 01<!DOCTYPE html> 02<html> 03<head> 04<meta charset="utf-8" /> 05<title>输入类型email</title> 06</head> 07<body> 08<form action="#"> 09E-mail: <input type="email" name="user_email" /> 10<input type="submit"> 11</form> 12</body> 13</html> 输入一个email值58700865.qq.com，单击提交后响应如图5.5所示，提示我们输入的字符串不是电子邮件地址的格式，因为不含有@符号。 图5.5输入类型email格式不对时的验证 5.3输入类型url url类型用于应该包含 URL 地址的输入域。在提交表单时，浏览器会自动验证url域的值，输入类型要符合url格式。 用法参见例53。 【例53】输入类型url示例。 ch5_03.html内容如下： 01<!DOCTYPE html> 02<html> 03<head> 04<meta charset="utf-8" /> 05<title>输入类型url</title> 06</head> 07<body> 08<form action="#"> 09Homepage: <input type="url" name="user_url" /><br /> 10<input type="submit"> 11</form> 12</body> 13</html> 运行上述代码后出现如图5.6所示界面，因未带有协议名，不符合url格式，故有提示。 图5.6输入类型url格式不对时的验证 5.4输入类型date 输入类型date用于应该包含日期的输入字段。若浏览器支持，日期选择器会出现在输入字段中。借助于图形输入可以规范日期输入格式，确保日期符合要求。 用法参见例54。 【例54】输入类型date示例。 ch5_04.html内容如下： 01<!DOCTYPE html> 02<html> 03<head> 04<meta charset="utf-8" /> 05<title>输入类型date</title> 06</head> 07<body> 08<form action="#"> 09生日<input type="date" name="bdaytime"> 10<input type="submit"> 11</form> 12</body> 13</html> 运行上述代码后出现如图5.7所示界面。在我们输入日期时，会出现日期提示选择窗口，能保证我们的输入符合日期格式的要求，例如月份不能大于12。注意在不同的浏览器里显示可能会略有不同。 图5.7输入类型date验证 5.5表单属性autocomplete 表单属性autocomplete适用于<form>标签和以下类型的 <input> 标签： text、search、url、telephone、email、password、datepickers、range以及color。当用户在自动完成域中开始输入时，浏览器应该在该域中显示填写的选项。 编码示例如下。 【例55】表单属性autocomplete示例。 ch5_05.html内容如下： 01<!DOCTYPE html> 02<html> 03<head> 04<meta charset="utf-8" /> 05<title>表单属性autocomplete</title> 06</head> 07<body> 08<form action="#" method="get" autocomplete="on"> 09First name:<input type="text" name="fname" /><br /> 10Last name: <input type="text" name="lname" /><br /> 11E-mail: <input type="email" name="email" autocomplete="off" /><br /> 12</form> 13</body> 14</html> 运行上述代码，首次输入测试信息后，出现如图5.8所示的界面。 图5.8表单属性autocomplete的验证 按F5键刷新页面后，出现如图5.9所示界面。因form表单设置了autocomplete="on"，浏览器应该在该域中显示填写的选项，所以第一个、第二个文本框会留下上次输入的结果。但email输入设置了autocomplete="off"，所以不会留下上次输入。 图5.9自动显示填写的选项 5.6音频audio 直到现在，仍然不存在一项关于在网页上播放音频的标准。今天，大多数音频是通过插件(例如Flash)来播放的。然而，并非所有浏览器都拥有同样的插件。HTML5规定了一种通过audio元素来包含音频的标准方法。audio元素能够播放声音文件或者音频流。当前，audio元素支持Ogg Vorbis、MP3、WAV三种音频格式。大多数高版本的浏览器都支持这三种音频格式。<audio>标签用于定义声音，例如音乐或其他音频流。<audio>标签是HTML 5的新标签，其常用属性如表5.2所示。 表5.2<audio>标签的常用属性 属性值描述 autoplayautoplay音频在就绪后马上播放 controlscontrols向用户显示控件，例如播放按钮 looploop每当音频结束时重新开始播放 preloadpreload音频在页面加载时进行加载，并预备播放。如果使用autoplay，则忽略该属性 srcurl要播放的音频的URL 【例56】audio标签示例。 ch5_06.html内容如下： 01<!DOCTYPE html> 02<html> 03<head> 04<meta charset="utf-8"> 05<title>audio标签</title> 06</head> 07<body> 08<audio src="./i/test.mp3" controls="controls"> 09<audio src="./i/test.m4a" controls="controls"> 10Your browser does not support the audio element. 11</audio> 12</body> 13</html> 运行上述代码后出现如图5.10所示的界面。 图5.10audio标签示例 audio元素允许多个source 元素。source 元素可以链接不同的音频文件，浏览器将使用第一个可识别的格式。例56使用第一个mp3文件，适用于Firefox、Opera以及Chrome浏览器。当素材音频文件不符合要求时，可以使用格式转换器进行转换，如图5.11所示，可以把手机录音的m4a文件转换为mp3文件。 图5.11mp3音频转换 5.7视频video 今天，大多数视频是通过插件(例如Flash)来显示的。然而，并非所有浏览器都拥有同样的插件。HTML5规定了一种通过video元素来包含视频的标准方法。当前，video元素支持Ogg、MPEG 4、WebM三种视频格式。 Ogg： 带有Theora视频编码和Vorbis音频编码的视频文件。 MPEG4： 带有H.264视频编码和AAC音频编码的视频文件。 WebM： 带有VP8视频编码和Vorbis音频编码的视频文件。 <video>标签用于定义视频，例如电影片段或其他视频流。<video>标签是HTML5的新标签，其常用属性如表5.3所示。 表5.3<video> 标签的常用属性 属性值描述 autoplayautoplay如果出现该属性，则视频在就绪后马上播放 controlscontrols如果出现该属性，则向用户显示控件，例如播放按钮 heightpixels设置视频播放器的高度 looploop如果出现该属性，则当媒介文件完成播放后再次开始播放 preloadpreload如果出现该属性，则视频在页面加载时进行加载，并预备播放。如果使用autoplay，则忽略该属性 srcurl要播放的视频的URL widthpixels设置视频播放器的宽度 HTML5 <video>元素同样拥有方法、属性和事件，其中方法用于播放、暂停以及加载等，属性(例如时长、音量等)可以被读取或设置。 【例57】video标签示例。 ch5_07.html内容如下： 01<!DOCTYPE html> 02<html> 03<head> 04<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 05<title>video标签使用</title> 06</head> 07<body> 08<video width="320" height="240" controls="controls"> 09<source src="IPAddress.wmv" type="video/wav"> 10<source src="IPAddress_H264.mp4" type="video/mp4"> 11Your browser does not support the video tag. 12</video> 13</body> 14</html> controls属性供添加播放、暂停和音量控件，包含宽度和高度属性。video元素允许多个source元素，source元素可以链接不同的视频文件，浏览器将使用第一个可识别的格式。例57中IPAddress.wmv不被识别，所以会使用IPAddress_H264.mp4。ch5_07.html的运行效果如图5.12所示。 图5.12video运行示例 注意这里需要是H.264视频编码和AAC音频编码的MPEG4文件，如果不是则无法播放。示例文件夹给出了一个不是H.264视频编码的IPAddress.mp4，可以尝试去播放它观察效果。当素材视频文件不符合要求时，可以使用格式转换器进行转换，如图5.13所示。单击“高级”，会出现MP4编码格式选择界面，如图5.14所示。可以把手机录制的MP4文件转换为符合要求的格式。 图5.13转换mp4 图5.14mp4格式选择 这里仅介绍上述几个HTML5标签，目前HTML5在实际系统使用中还需要考虑兼容性的问题。随着时间推移，浏览器会支持越来越多的HTML5标签，开发网页也会容易些。 习题5 一、问答题 1. 列举几个HTML5的新增标签。 2. 简述HTML5的新特性。 二、 操作题 1. 使用<audio>标签在网页上实现音频播放。 2. 使用<video>标签在网页上实现视频播放。