html5 补充 视频，音频,表单
视频和音频
在html5中提供了一个video标签。它允许开发者直接将视频嵌入网页，不需要任何第三方插件（比如 Adobe公司的Flash）就能播放。
video
<video src="xx.mp4" controls></video>
视频格式
**目前 html5支持三种视频格式mp4, webM, ogg **
video 属性
- autoplay
布尔值， 指定后，视频会马上自动开始播放，不会停下来等着数据载入结束
height width
指定播放器的的长宽
loop
重复播放，如果出现该属性，则当媒介文件完成播放后再次开始播放。
muted
默认静音播放
poster
为视频指定海报图像
preload
指定预先加载方式，三个可选值 - none 默认值，不加载任何东西
metadata 预先加载元数据
auto 预先加载整个视频
兼容浏览器
目前， 浏览器对这三种格式的支持并不统一， 所有我们可以这么写
<video controls="">
<source src="xx.mp4">
<source src="xx.webm">
<soucre src="xx.ogv"></soucre>
<p>对不起, 您的浏览器不支持video标签</p>
</video>
浏览器会播放支持的第一个视频格式来播放
上面的写法有个问题：对于每个source元素,浏览器会加载所有视频文件的元数据,查看能不能播放这个视频, 这个工程可能很耗费时间
我们可以指定source的type属性来告诉浏览器该视频的视频格式,浏览器根据这个来判断是否能够播放
<video controls="">
<source src="xx.mp4" type="video/mp4; codecs='avc1.42E01E, mp41.40.2'">
<source src="xx.webm" type="video/webm; codecs='vp8, vorbis'">
<source src="xx.ogv" type="video/ogg; codecs='theora, vorbis'">
<p>对不起, 您的浏览器不支持video标签</p>
</video>
audio例子
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
*{ margin:0; padding:0;}
#ul1{ width:1000px; height:30px;}
#ul1 li{ list-style:none; width:100px; height:30px; background:red; color:white; border:1px #000 solid; float:left; line-height:30px; text-align:center;}
</style>
<script>
window.onload = function(){
var aLi = document.getElementsByTagName('li');
var oA = document.getElementById('a1');
for(var i=0;i<aLi.length;i++){
aLi[i].onmouseover = function(){
//this.getAttribute('au');
oA.src = 'http://s8.qhimg.com/share/audio/piano1/'+this.getAttribute('au')+'4.mp3';
oA.play();
};
}
};
</script>
</head>
<body>
<ul id="ul1">
<li au="a">11111</li>
<li au="b">22222</li>
<li au="c">33333</li>
<li au="d">44444</li>
<li au="e">55555</li>
<li au="f">66666</li>
<li au="g">77777</li>
</ul>
<audio id="a1"></audio>
</body>
</html>
html5 表单
新增input类型
新增表单元素
html5表单验证
新增表单属性
新增的input类型
input原有的type属性值
text(普通文本, 默认值)
password(密码框)
radio(单选按钮)
checkbox(多选按钮)
file(文件上传组件)
button(普通按钮)
submit(提交按钮)
hidden(隐藏文本域)
input新增的type属性值
search(搜索框)
email(邮件输入框)
url(url地址输入框)
tel(电话号码输入框)
number(数字输入框)
range(滑动条)
date(日期选择)
month(月份选择)
week(周选择)
time(时间选择)
datetime-local(日期选择)
datetime(包含时区)
color(颜色选择)
示例
search
<input type="search">
新增表单元素
datalist
datalist
<input type="text" list="browers">
<datalist id="browers">
<option value="chrome"></option>
<option value="firfox"></option>
<option value="ie"></option>
</datalist>
表单验证
表单验证是指,在用户提交表单之前,确保用户输入是数据是合法的
验证输入类型
验证必填字段
验证字符长度
验证数值范围
验证日期和时间范围
步长
正则表达式
验证输入类型
<form action="success.html" method="post">
<h2>验证输入类型</h2>
<label for="">
数字:
<input type="number">
</label>
<label for="">
邮箱:
<input type="email">
</label>
<label for="">
网址:
<input type="url">
</label>
<input type="submit">
</form>
验证必填字段
<form action="success.html" method="post">
<h2>验证必填字段</h2>
<label for="">
数字:
<input type="number" required="">
</label>
<label for="">
邮箱:
<input type="email" required="">
</label>
<label for="">
网址:
<input type="url" required="">
</label>
<input type="submit">
</form>
验证字符长度
<form action="success.html" method="post">
<h2>验证字符长度</h2>
<label for="">
密码:
<input type="password" required="" minlength="6" maxlength="10">
</label>
<input type="submit">
</form>
验证数值范围
<form action="success.html" method="post">
<h2>验证数值范围</h2>
<label for="">
订购数量:
<input type="number" required="" min="6" max="10">
</label>
<input type="submit">
</form>
验证日期和时间范围
<form action="success.html" method="post">
<h2>验证日期和时间范围</h2>
<label for="">
送货日期:
<input type="date" required="" min="2016-04-01" max="2016-05-01">
</label>
<label for="">
送货时间:
<input type="time" required="" min="08:00" max="18:00">
</label>
<input type="submit">
</form>
步长
<form action="success.html" method="post">
<h2>步长</h2>
<label for="">
订购数量:
<input type="number" step="10">
</label>
<input type="submit">
</form>
正则表达式
<form action="success.html" method="post">
<h2>正则表达式</h2>
<label for="">
编号:
<input type="text" pattern="[0-4]{3}">
</label>
<input type="submit">
</form>
禁用表单验证
html5提供的表单验证还是很简陋, 通常不能达到我们的实际需求, 很多时候我们还是需要使用javascript来完成表单验证, 那么我们就需要禁用html5表单验证,以免产生冲突
<form action="success.html" method="post" novalidate>
新增的表单属性
placeholder //输入前的提示信息
autofocus//自动获取焦点
autocomplete//提交成功过的信息，可以自己补全
multiple//可以选择多个
示例
placeholder
<input type="text" placeholder="请输入用户名">
autofocus
<input type="text" autofocus>
会在页面加载时自动获取焦点
一个页面只能有一个autofocus属性的定义
autocomplete
<form action="success.html" method="get" autocomplete="on">
<h2>autocomplete</h2>
<label for="">
用户名:
<input type="text" name="username" placeholder="请输入用户名">
</label>
<input type="submit">
</form>
multiple
两种用法
基本用用
<select name="" id="" multiple>
<option value="">option1</option>
<option value="">option2</option>
<option value="">option3</option>
</select>
type=file
<input type="file" multiple>
