H5在2014年正式推出,相较于H4性能得到进一步提升。
H5的浏览器兼容问题:支持Html5的浏览器包括Firefox(火狐浏览器),IE9及其更高版本,Chrome(谷歌浏览器),Safari,Opera等;国内的 遨游浏览器(Maxthon),以及基于IE或Chromium(Chrome的工程版或称实验版)所推出的360浏览器、搜狗浏览器、QQ浏览器、猎豹 浏览器等国产浏览器同样具备支持HTML5的能力。
总结来说就是IE9以下的版本是不兼容H5的样式的。
H5语法:
1、学习H4的时候文件后缀名总是写.html,在H5中后缀名也可以写成.htm了。
2、DOCTYPE声明 <!DOCTYPE html>
3、指定字符集编码 <meta charset="UTF-8">
4、不允许写结束标记的元素:br、col、embed、hr、img、input、link、meta
5、可以省略结束标记的元素:li、dt、dd、p、option、colgroup、thead、tbody、tfoot、tr、td、th
6、可以省略全部标记的元素:html、head、body、colgroup、tbody
7、省略引号。属性值可以使用双引号,也可以使用单引号
H5新增语义化标签
section元素 表示页面中的一个内容区块 div
header元素 表示页面中一个内容区块或整个页面的标题
nav元素 表示页面中导航链接部分
article元素 表示一块与上下文无关的独立的内容
aside元素 在article之外的,与article内容相关的辅助信息
footer元素 表示页面中一个内容区块或整个页面的脚注
figure元素 表示一段独立的流内容,使用figcaption元素为其添加标题(第一个或最后一个子元素的位置)
main元素 表示页面中的主要的内容
hgroup:标题组
Mark 高亮
兼容低版本浏览器: <script src=“html5.js”></script>
视频标签video、音频标签audio
src属性,后跟音频或者视频的路径。
poster属性,只有视频标签可以用,表示视频未加载的时候显示的图片。
智能表单
Type=“email” 限制用户必须输入email类型
Type=“number” 限制用户必须输入数字类型
Type=“url” 限制用户必须输入url类型
Type=“range” 产生一个滑动条表单
Type=“search” 产生一个搜索意义的表单
Type=“color” 生成一个颜色选择的表单
Type=“time” 限制用户必须输入时间类型
Type=“date” 限制用户必须输入时间类型
Type=“month” 限制用户必须输入月类型
Type=“week” 限制用户必须输入周类型
Type=“datetime-local” 选取本地时间
email类型:专门用来输入email地址的文本框,如果该文本框中内容不是email地址格式的,则不允许提交。但它不检查email地址是否存在。提交时可以为空,除非加上了required属性。
url类型:专门用来输入URL地址的文本框。如果该文本框中内容不是URL地址格式的,则不允许提交。
Number类型:专门用来输入数字的文本框。在提交时会检查其中的内容是否为数字,具有min、max、step的属性。
例:<input name=“number1” type=“number” value=“25” min=“10” max=“100” step=“5” />——间隔是5,最小数值是10,最大数值是100。5.10.15.20.25
range类型:是用来只允许输入一段范围内数值的文本框,它具有min属性与max属性,及step属性,可以指定每次拖动的步幅。
例: <input name=“range1” type=“range” value=“25” min=“0” max=“100” step=“5” />
H5新增属性
placeholder属性:文本框处于未输入状态时文本框中显示的输入提示。
autofocus属性:给文本框、选择框、或者按钮控件加上该属性,当打开页面时,该控件自动获得焦点,一个页面只能有一个。
autocomplete属性:输入富足和所用的自动完成功能,是一个节省输入时间,同时也十分方便的功能。属性值:on/off。on可是显示指定候补输入的数据列表,使用datalist元素与list属性提供候补输入的数据列表,自动完成时,可以将该datalist元素中的数据作为候补输入的数据在文本框中显示:
<input type="text" autocomplete="on" list ="greeting">
novalidate属性:取消验证 可以对form表单添加novalidate属性,即使form表单中的input添加了required,也将不进行验证partten
Multiple属性:可以输入一个或多个值,每个值之间用逗号分开
pattern属性:用于验证表单输入的内容,通常HTML5的type属性,比如email、tel、number、data类、url等,已经自带了简单的数据格式验证功能了,加上pattern后,前端部分的验证更加简单高效了。
iframe属性:引入外部的资源。不建议使用,因为会造成浏览器的阻塞。