html5 学习第三天
HTML5 Video(视频)
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">您的浏览器不支持Video标签。
</video>
<video> 元素提供了 播放、暂停和音量控件来控制视频。
同时 <video> 元素也提供了 width 和 height 属性控制视频的尺寸.如果设置的高度和宽度，所需的视频空间会在页面加载时保留。如果没有设置这些属性，浏览器不知道大小的视频，浏览器就不能再加载时保留特定的空间，页面就会根据原始视频的大小而改变。
<video> 与</video> 标签之间插入的内容是提供给不支持 video 元素的浏览器显示的。
<video> 元素支持多个 <source> 元素. <source> 元素可以链接不同的视频文件。浏览器将使用第一个可识别的格式：
视频格式与浏览器的支持
当前， <video> 元素支持三种视频格式： MP4, WebM, 和 Ogg:
MP4 = 带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件
WebM = 带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件
Ogg = 带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件
视频格式
格式 MIME-type
MP4 video/mp4
WebM video/webm
Ogg video/ogg
HTML5 Audio
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">您的浏览器不支持 audio 元素。
</audio>
control 属性供添加播放、暂停和音量控件。
在<audio> 与 </audio> 之间你需要插入浏览器不支持的<audio>元素的提示文本 。
<audio> 元素允许使用多个 <source> 元素. <source> 元素可以链接不同的音频文件，浏览器将使用第一个支持的音频文件
音频格式及浏览器支持
目前, <audio>元素支持三种音频格式文件: MP3, Wav, 和 Ogg:
音频格式的MIME类型
Format MIME-type
MP3 audio/mpeg
Ogg audio/ogg
Wav audio/wav
HTML5 新的 Input 类型
HTML5 拥有多个新的表单输入类型。这些新特性提供了更好的输入控制和验证。
Input 类型: color
color 类型用在input字段主要用于选取颜色，如下所示：
选择你喜欢的颜色: <input type="color" name="favcolor">
Input 类型: date
date 类型允许你从一个日期选择器选择一个日期。
生日: <input type="date" name="bday">
Input 类型: datetime
datetime 类型允许你选择一个日期（UTC 时间）。
生日 (日期和时间): <input type="datetime" name="bdaytime">
Input 类型: datetime-local
datetime-local 类型允许你选择一个日期和时间 (无时区).
生日 (日期和时间): <input type="datetime-local" name="bdaytime">
Input 类型: email
email 类型用于应该包含 e-mail 地址的输入域。
E-mail: <input type="email" name="email">
Input 类型: month
month 类型允许你选择一个月份。
生日 (月和年): <input type="month" name="bdaymonth">
Input 类型: number
number 类型用于应该包含数值的输入域。您还能够设定对所接受的数字的限定：
数量 ( 1 到 5 之间 ): <input type="number" name="quantity" min="1" max="5">
Input 类型: range
range 类型用于应该包含一定范围内数字值的输入域。range 类型显示为滑动条。
<input type="range" name="points" min="1" max="10">
Input 类型: search
search 类型用于搜索域，比如站点搜索或 Google 搜索。
Search Google: <input type="search" name="googlesearch">
Input 类型: tel
电话号码: <input type="tel" name="usrtel">
Input 类型: time
time 类型允许你选择一个时间。
选择时间: <input type="time" name="usr_time">
Input 类型: url
url 类型用于应该包含 URL 地址的输入域。在提交表单时，会自动验证 url 域的值。
添加您的主页: <input type="url" name="homepage">
Input 类型: week
week 类型允许你选择周和年。
选择周: <input type="week" name="week_year">
HTML5 表单元素
HTML5 有以下新的表单元素:
<datalist>
<keygen>
<output>
HTML5 <datalist> 元素
<datalist> 元素规定输入域的选项列表。<datalist> 属性规定 form 或 input 域应该拥有自动完成功能。当用户在自动完成域中开始输入时，浏览器应该在该域中显示填写的选项：使用 <input> 元素的列表属性与 <datalist> 元素绑定.
<input list="browsers">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
HTML5 <keygen> 元素
<keygen> 元素的作用是提供一种验证用户的可靠方法。<keygen>标签规定用于表单的密钥对生成器字段。当提交表单时，会生成两个键，一个是私钥，一个公钥。私钥（private key）存储于客户端，公钥（public key）则被发送到服务器。公钥可用于之后验证用户的客户端证书（client certificate）。
<form action="demo_keygen.asp" method="get">
用户名: <input type="text" name="usr_name">
加密: <keygen name="security">
<input type="submit">
</form>
HTML5 <output> 元素
<output> 元素用于不同类型的输出，比如计算或脚本输出：
<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0
<input type="range" id="a" value="50">100 +
<input type="number" id="b" value="50">=<
output name="x" for="a b"></output>
</form>
HTML5 表单属性
<form> / <input> autocomplete 属性
autocomplete 属性规定 form 或 input 域应该拥有自动完成功能。当用户在自动完成域中开始输入时，浏览器应该在该域中显示填写的选项。提示: autocomplete 属性有可能在 form元素中是开启的，而在input元素中是关闭的。注意: autocomplete 适用于标签，以及以下类型的，标签：text, search, url, telephone, email, password, datepickers, range 以及 color。
<form action="demo-form.php" autocomplete="on">
First name:<input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
E-mail: <input type="email" name="email" autocomplete="off"><br>
<input type="submit">
</form>
<form> novalidate 属性
novalidate 属性是一个 boolean(布尔) 属性.novalidate 属性规定在提交表单时不应该验证 form 或 input 域。
<form action="demo-form.php" novalidate>
E-mail: <input type="email" name="user_email">
<input type="submit">
</form>
<input> autofocus 属性
autofocus 属性是一个 boolean 属性.autofocus 属性规定在页面加载时，域自动地获得焦点。
First name:<input type="text" name="fname" autofocus>
<input> form 属性
form 属性规定输入域所属的一个或多个表单。
提示:如需引用一个以上的表单，请使用空格分隔的列表
<form action="demo-form.php" id="form1">
First name: <input type="text" name="fname"><br>
<input type="submit" value="提交">
</form>
Last name: <input type="text" name="lname" form="form1">
<input> formaction 属性
The formaction 属性用于描述表单提交的URL地址.The formaction 属性会覆盖<form> 元素中的action属性.
注意: The formaction 属性用于 type="submit" 和 type="image"
<form action="demo-form.php">
First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
<input type="submit" value="提交"><br>
<input type="submit" formaction="demo-admin.php" value="提交">
</form>
<input> formenctype 属性
formenctype 属性描述了表单提交到服务器的数据编码 (只对form表单中 method="post" 表单)formenctype 属性覆盖 form 元素的 enctype 属性。主要: 该属性与 type="submit" 和 type="image" 配合使用。
<form action="demo-post_enctype.php" method="post">
First name: <input type="text" name="fname"><br>
<input type="submit" value="提交">
<input type="submit" formenctype="multipart/form-data" value="以 Multipart/form-data 提交">
</form>
<input> formmethod 属性
formmethod 属性定义了表单提交的方式。formmethod 属性覆盖了 <form> 元素的 method 属性。
注意: 该属性可以与 type="submit" 和 type="image" 配合使用
<form action="demo-form.php" method="get">
First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
<input type="submit" value="提交">
<input type="submit" formmethod="post" formaction="demo-post.php" value="使用 POST 提交">
</form>
<input> formnovalidate 属性
novalidate 属性是一个 boolean 属性.novalidate属性描述了 <input> 元素在表单提交时无需被验证。formnovalidate 属性会覆盖 <form> 元素的novalidate属性.注意: formnovalidate 属性与type="submit一起使用。
<form action="demo-form.php">
E-mail: <input type="email" name="userid"><br>
<input type="submit" value="提交"><br>
<input type="submit" formnovalidate value="不验证提交">
</form>
<input> formtarget 属性
formtarget 属性指定一个名称或一个关键字来指明表单提交数据接收后的展示。The formtarget 属性覆盖 <form>元素的target属性.注意: formtarget 属性与type="submit" 和 type="image"配合使用.
<form action="demo-form.php">
First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
<input type="submit" value="正常提交">
<input type="submit" formtarget="_blank"
value="提交到一个新的页面上">
</form>
<input> height 和 width 属性
height 和 width 属性规定用于 image 类型的 <input> 标签的图像高度和宽度。
注意: height 和 width 属性只适用于 image 类型的标签。
提示:图像通常会同时指定高度和宽度属性。如果图像设置高度和宽度，图像所需的空间 在加载页时会被保留。如果没有这些属性， 浏览器不知道图像的大小，并不能预留 适当的空间。图片在加载过程中会使页面布局效果改变 （尽管图片已加载）。
<input type="image" src="img_submit.gif" alt="Submit" width="48" height="48">
<input> list 属性
list 属性规定输入域的 datalist。datalist 是输入域的选项列表。
<input list="browsers">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
<input> min 和 max 属性
min、max 和 step 属性用于为包含数字或日期的 input 类型规定限定（约束）。
注意: min、max 和 step 属性适用于以下类型的 标签：date pickers、number 以及 range。
Enter a date before 1980-01-01:
<input type="date" name="bday" max="1979-12-31">
Enter a date after 2000-01-01:
<input type="date" name="bday" min="2000-01-02">
Quantity (between 1 and 5):
<input type="number" name="quantity" min="1" max="5">
<input> multiple 属性
multiple 属性是一个 boolean 属性.multiple 属性规定<input> 元素中可选择多个值。注意: multiple 属性适用于以下类型的 标签：email 和 file:
Select images: <input type="file" name="img" multiple>
<input> pattern 属性
pattern 属性描述了一个正则表达式用于验证 <input> 元素的值。注意:pattern 属性适用于以下类型的标签: text, search, url, tel, email, 和 password.提示： 是用来全局 title 属性描述了模式.
Country code: <input type="text" name="country_code" pattern="[A-Za-z]{3}" title="Three letter country code">
<input> placeholder 属性
placeholder 属性提供一种提示（hint），描述输入域所期待的值。简短的提示在用户输入值前会显示在输入域上。注意: placeholder 属性适用于以下类型的标签：text, search, url, telephone, email 以及 password。
<input type="text" name="fname" placeholder="First name">
<input> required 属性
required 属性是一个 boolean 属性.required 属性规定必须在提交之前填写输入域（不能为空）。
注意:required 属性适用于以下类型的标签：text, search, url, telephone, email, password, date pickers, number, checkbox, radio 以及 file。
Username: <input type="text" name="usrname" required>
<input> step 属性
step 属性为输入域规定合法的数字间隔。如果 step="3"，则合法的数是 -3,0,3,6 等
提示： step 属性可以与 max 和 min 属性创建一个区域值.
注意: step 属性与以下type类型一起使用: number, range, date, datetime, datetime-local, month, time 和 week.
<input type="number" name="points" step="3">
