3、HTML5 Audio(音频)
HTML5 提供了播放音频文件的标准。
互联网上的音频
直到现在,仍然不存在一项旨在网页上播放音频的
标准。今天,大多数音频是通过插件(比如 Flash)来播放的。然而,并非所有浏览器都拥有同样的插件。
HTML5 规定了在网页上嵌入音频元素的标准,即使用 元素。
(1)浏览器支持
Internet Explorer 9+, Firefox, Opera, Chrome, 和 Safari 都支持 元素.
注意: Internet Explorer 8 及更早IE版本不支持 元素.
2)Audio使用
如需在 HTML5 中播放音频,你需要使用以下代码:
实例
<audio controls> <source src="horse.ogg" type="audio/ogg"> <source src="horse.mp3" type="audio/mpeg"> 您的浏览器不支持 audio 元素。 </audio> <audio> 元素允许使用多个 <source> 元素. <source> 元素可以链接不同的音频文件,浏览器将使用第一个支持的音频文件
control 属性供添加播放、暂停和音量控件。
在 与 之间你需要插入浏览器不支持的元素的提示文本 。
(3)音频格式及浏览器支持
目前, 元素支持三种音频格式文件: MP3, Wav, 和 Ogg:
浏览器 | MP3 | Wav | Ogg |
Internet Explorer 9+ | YES | NO | NO |
Chrome 6+ | YES | YES | YES |
Firefox 3.6+ | YES | YES | YES |
Safari 5+ | YES | YES | NO |
Opera 10+ | YES | YES | YES |
(4)音频格式的MIME类型
Format | MIME-type |
MP3 | audio/mpeg |
Ogg | audio/ogg |
Wav | audio/wav |
5)HTML5 Audio 标签
标签 | 描述 |
定义了声音内容 | |
规定了多媒体资源, 可以是多个,在 与 标签中使用 |
4、HTML5 新的 Input 类型
HTML5 拥有多个新的表单输入类型。这些新特性提供了更好的输入控制和验证。
本章全面介绍这些新的输入类型:
color
选择你喜欢的颜色: <input type="color" name="favcolor">
date
生日: <input type="date" name="bday">
datetime
生日 (日期和时间): <input type="datetime" name="bdaytime">
datetime-local
生日 (日期和时间): <input type="datetime-local" name="bdaytime">
E-mail: <input type="email" name="email">
month
生日 (月和年): <input type="month" name="bdaymonth">
number
数量 ( 1 到 5 之间 ): <input type="number" name="quantity" min="1" max="5">
使用下面的属性来规定对数字类型的限定:
属性 | 描述 |
disabled | 规定输入字段是禁用的 |
max | 规定允许的最大值 |
maxlength | 规定输入字段的最大字符长度 |
min | 规定允许的最小值 |
pattern | 规定用于验证输入字段的模式 |
readonly | 规定输入字段的值无法修改 |
required | 规定输入字段的值是必需的 |
size | 规定输入字段中的可见字符数 |
step | 规定输入字段的合法数字间隔 |
value | 规定输入字段的默认值 |
range
<input type="range" name="points" min="1" max="10">
请使用下面的属性来规定对数字类型的限定:
- max - 规定允许的最大值
- min - 规定允许的最小值
- step - 规定合法的数字间隔
- value - 规定默认值
search
Search Google: <input type="search" name="googlesearch">
tel
电话号码: <input type="tel" name="usrtel">
time
选择时间: <input type="time" name="usr_time">
url
添加您的主页: <input type="url" name="homepage">
week
选择周: <input type="week" name="week_year">
5、HTML5 新的表单属性
HTML5 的 和 标签添加了几个新属性.
新属性:
- autocomplete
自动提示以前输入过的内容 - autofocus
autofocus 属性是一个 boolean 属性.
autofocus 属性规定在页面加载时,域自动地获得焦点。
First name:<input type="text" name="fname" autofocus>
height 与 width
height 和 width 属性规定用于 image 类型的 标签的图像高度和宽度。
注意: height 和 width 属性只适用于 image 类型的 标签。
<input type="image" src="img_submit.gif" alt="Submit" width="48" height="48">
min 与 max
min、max 和 step 属性用于为包含数字或日期的 input 类型规定限定(约束)
注意: Internet Explorer 9及更早 IE 版本,Firefox 不支持 input 标签的 max 和 min 属性。
<input type="number" name="quantity" min="1" max="5">
pattern (regexp)
pattern 属性描述了一个正则表达式用于验证 元素的值。
Country code: <input type="text" name="country_code" pattern="[A-Za-z]{3}" title="Three letter country code">
placeholder
placeholder 属性提供一种提示(hint),描述输入域所期待的值。
简短的提示在用户输入值前会显示在输入域上
<input type="text" name="fname" placeholder="First name">
required
注意: Internet Explorer 9及更早 IE 版本,或 Safari 不支持 input 标签的 required 属性。
required 属性是一个 boolean 属性.
required 属性规定必须在提交之前填写输入域(不能为空)。
Username: <input type="text" name="usrname" required>
新属性:
autocomplete
autocomplete 属性规定 form 或 input 域应该拥有自动完成功能。
当用户在自动完成域中开始输入时,浏览器应该在该域中显示填写的选项。
novalidate
novalidate 属性是一个 boolean(布尔) 属性.
novalidate 属性规定在提交表单时不应该验证 form 或 input 域。
观众老爷们,咱们下期CSS见