一文带你了解前端三剑客之HTML（三）

3、HTML5 Audio(音频)

HTML5 提供了播放音频文件的标准。

互联网上的音频

直到现在，仍然不存在一项旨在网页上播放音频的

标准。今天，大多数音频是通过插件（比如 Flash）来播放的。然而，并非所有浏览器都拥有同样的插件。

HTML5 规定了在网页上嵌入音频元素的标准，即使用 audio> 元素。

（1）浏览器支持

Internet Explorer 9+, Firefox, Opera, Chrome, 和 Safari 都支持 audio> 元素.

注意: Internet Explorer 8 及更早IE版本不支持 audio> 元素.

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 属性供添加播放、暂停和音量控件。

在 与 之间你需要插入浏览器不支持的元素的提示文本 。audio>

（3）音频格式及浏览器支持

目前, 元素支持三种音频格式文件: MP3, Wav, 和 Ogg:

（4）音频格式的MIME类型

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">
    

email

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">
    

使用下面的属性来规定对数字类型的限定：

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见

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！