前端随心记---------HTML5+CSS系列8.0
HTML5新增标签（二）
HTML5新增的其他元素
mark
高亮显示文字，典型应用搜索结果中高亮显示搜素关键字。
写法： <mark></mark>
source 标签
标签为媒介元素（比如 <video> 和 <audio>）定义媒介资源。
video
定义视频，比如电影片段或其他视频流；
写法： <video src=”” ></video>
ogg 文件，适用于Firefox、Opera 以及 Chrome 浏览器。
当前， <video> 元素支持三种视频格式： .MP4, .WebM, 和 .ogg:
可设置属性：
src ：视频的路径
Width: 视频播放器的宽度
height： 视频播放器的高度
autoplay：autoplay ; 表示立刻播放
controls：controls;显示播放控制组键
loop：loop; 反复播放；布尔值，如果设置了就会重复播放否则不会；
muted：muted ; 处于静音状态
poster; 指定视频数据载入时显示的图片
preload: auto / metadata / none ;表示预先载入视频
取值none不预先载入；auto一旦页面加载就会开始加载视频，默认值；
metadata 页面加载后仅加载元数据，和默认有点类似；
（主流浏览器都不支持，除了IE；）
兼容浏览器的写法：
<video width=”200”height=”200”controls=”controls”>
<source src="movie.mp4" type="video/mp4"></source>
<source src="movie.ogg" type="video/ogg"></source>
（还可以加载其他格式）
您的浏览器不支持 video 标签。
</video>
注：<source> 定义多种媒体类型，例如<video>、<audio>中的文件类型
audio
定义音频，比如音乐或其他音频流
写法：
<audio src=“ ”> </audio>
Safari 浏览器，音频文件必须是 MP3 或 Wav 类型 mpeg。
兼容浏览器写法：
<audio controls=”controls”>
<source src="horse.mp3" type="audio/mpeg">
<source src="horse.ogg" type="audio/ogg">
<embed height="50" width="100" src="horse.mp3">
</audio>
新增表单标签以及属性
Html表单一直都是web的核心技术之一，html5为表单添加了新的js功能和结构上更加自由的写法，极大的提高了开发效率，xhtml中需要放在form中，而html5中表单元素可以放在页面任何位置；
新增表单类型元素：
email 邮箱
url 网址
number 数值
range 范围数值
date 日期
search 搜索
color 颜色
1、 email： 邮箱类型的文本框验证
应用：
<input name=”email1” type=”email” required />
2、 url : 输入URL地址的文本框
应用：
<input name=”url1” type="url" required />
3、 color ： 用来选取颜色。
应用：
<input name=”color1” type="color" required />
4、 number： 用来输入数字的文本框。
属性：min ：允许的最小值
max： 允许的最大值
step： 规定的间隔值
value：默认值
应用：
<input name=”number1” type="number" value="20" minn="10" max="100" step="5" required />
5、 range： 用来只允话输入一段范围内数值的文本框
属性： min 最小值
max 最大值
step 拖动的步幅间隔值
value：默认值
应用：
<input name="range1" type="range" value="25" min="0" max="100" step="5" />
6、 search : 用于搜索域，显示为常规的文本框，除了火狐浏览器其他都会在输入框里显示一个取消搜索的符号
应用：
<input name=”search1” type="search" />
7、 date : 提供多个选取日期和时间的新输入类型
属性：
·date - 选取日、月、年
·month - 选取月、年
·week - 选取周和年
·time - 选取时间（小时和分钟）
.datetime - 选取时间、日、月、年（UTC世界标准时间）
·datetime-local - 选取时间、日、月、年（本地时间）
8、 output ：用于不同类型的输出，比如计算或脚本输出，显 示计算结果
注：必须从属于某个表单。即，必须将它书写在表单内部，或对它添加form属性。
应用：
第一种： <form oninput="out.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="out" for="a b"> "120" </output> </form> 第二种： <form oninput="cun.value=num1.valueAsNumber + num2.valueAsNumber"> <input type="number" value="30" id="num1"> + <input type="number" value="20" id="num2"/> = <output name="cun" for="num1 num2"> 50 </output> </form>
对新元素样式的使用：
注意，跟 input 标签设置样式一样，但是要设置标签中局部的样式不能实现。如改变日历的背景色，颜色框的按钮效果，等，这些都不可以实现。
9、 form ：可以通过id 匹配所属表单,可以实现表单元素放在表单之外；
应用：
<form id=”myform”></form> <input type=”text” form=”myform” />
表单验证
HTML5增加了大量在提交时对表单及表单元素内容有效性验证的功能。
自动验证
1） required
可以应用在大多数输入元素上（除了隐藏元素和图片），在提交时如果元素内容为空白，则不允许提交，同时显示提示文字。
2） pattern
将属性值设为某个格式的正则表达式，在提交时会检查其内容是否符合给定格式。
例：
<input pattern = “[0-9][A-Z]{3}” title="输入内容：一个数与三个大写字母" placeholder=‘输入内容：一个数与三个大写字母’>
1:用户名验证规则 : 用户名长度为6~12并且由字母组成
pattern="[A-z]{6,12}"
2:密码验证规则 : 密码必须是数组与字母组合
pattern="[A-Za-z].*[0-9]|[0-9].*[A-Za-z]"
3） placeholder属性：
文本框处于未输入状态时文本框中显示的输入提示。
4） autofocus属性：给文本框、选择框、或者按钮控件加上该属性，当打开页面时，该控件自动获得焦点，一个页面只能有一个。
5） autocomplete属性：输入富足和所用的自动完成功能，是一个节省输入时间，同时也十分方便的功能。只有三种：on/off/""。on可显示指定候补输入的数据列表，使用datalist元素与list属性提供候补输入的数据列表，自动完成时，可以将该datalist元素中的数据作为候补输入的数据在文本框中显示：
<input type="text" name="greeting" autocomplete="on" list ="greeting">
6)Novalidate属性 取消验证 可以对form表单添加novalidate属性，即使form表单中的input添加了required，也将不进行验证
在 Safari 和 Internet Explorer 9 及之前的版本中不支持 novalidate 属性。
