一.HTML5 简介
1.什么是HTML5
- HTML5是新一代的 HTML 标准,2014年10月由万维网联盟( W3C)完成标准制定。
- 官网地址:
- HTML5在狭义上是指新—代的 HTML 标准,在广义上是指:整个前端。
2.HTML5的优势
- 针对JavaScript,新增了很多可操作的接口。
- 新增了一些语义化标签、全局属性。
- 新增了多媒体标签,可以很好的替代flash。
- 更加侧重语义化,对于SEO更友好。
- 可移植性好,可以大量应用在移动设备上。
二.HTML5新增语义化标签
1.布局标签
- header:整个页面或部分区域的头部
- footer:整个页面或部分区域的底部
- nav:导航
- article:文章、帖子、杂志、新闻、博客、评论等。
-
- artical里面可以有多个section 。
- section强调的是分段或分块,如果你想将一块内容分成几段的时候,可使用section元素。
- article 比 section更强调独立性,一块内容如果比较独立、比较完整,应该使用article元素。
- section:页面中的某段文字,或文章中的某段文字(里面文字通常里面会包含标题)。
- aside:侧边栏
2.状态标签
- meter标签:定义已知范围内的标量测量。也被称为 gauge(尺度),双标签,例如:电量、磁盘用量等。
-
- high属性:规定高值
- low属性:规定低值
- max属性:规定最大值
- min属性:规定最小值
- optimum属性:规定最优值
- value属性:规定当前值
- progress标签:显示某个任务完成的进度的指示器,一般用于表示进度条,双标签,例如:工作完成进度等。
3.列表标签
<input type="text" list="mydata">
<datalist id="mydata">
<option value="周冬雨">周冬雨</option>
<option value="周杰伦">周杰伦</option>
<option value="温兆伦">温兆伦</option>
<option value="马冬梅">马冬梅</option>
</ datalist>
- details:用于展示问题和答案,或对专有名词进行解释
- summary:写在details 的里面,用于指定问题或专有名词
<details>
<summary>如何走上人生巅峰?</ summary>
<p>—步一步走呗</p>
</details>
4.文本标签
5.表单控件属性
- paceholder:提示文字(注意:不是默认值, value是默认值),适用于文字输入类的表单控件。
- required:表示该输入项必填,适用于除按钮外其他表单控件。
- autofocus:自动获取焦点,适用于所有表单控件。
- autocomplete:自动完成,可以设置为on或off,适用于文字输入类的表单控件。注意:密码输入框、多行输入框不可用。
- pattern:填写正则表达式,适用于文本输入类表单控件。注意:多行输入不可用,且空的输入框不会验证,往往与required配合。
- novalidate:form标签新增属性,如果给form标签设置了该属性,表单提交的时候不再进行验证。
6.type新增属性值
- email:邮箱类型的输入框,表单提交时会验证格式,输入为空则不验证格式。
- url:url类型的输入框,表单提交时会验证格式,输入为空则不验证格式。
- number:数字类型的输入框,表单提交时会验证格式,输入为空则不验证格式。
- search:搜索类型的输入框,表单提交时不会验证格式。
- tel:电话类型的输入框,表单提交时不会验证格式,在移动端使用时,会唤起数字键盘。
- range:范围选择框,默认值为50,表单提交时不会验证格式。
- color:颜色选择框,默认值为黑色,表单提交时不会验证格式。
- date:日期选择框,默认值为空,表单提交时不会验证格式。
- month:月份选择框,默认值为空,表单提交时不会验证格式。
- week:周选择框,默认值为空,表单提交时不会验证格式。
- time:时间选择框,默认值为空,表单提交时不会验证格式。
- datetime-local:日期+时间选择框,默认值为空,表单提交时不会验证格式。
7.视频标签:Video
- src:URL地址、视频地址
- width:像素值、设置视频播放器的宽度
- height:像素值、设置视频播放器的高度
- controls:向用户显示视频控件(比如播放/暂停按钮)
- muted:视频静音
- autoplay:视频自动播放
- loop:循环播放
- poster:URL地址、视频封面
- preload:视频预加载,如果使用autoplay ,则忽略该属性。
-
- none :不预加载视频。
- metadata:仅预先获取视频的元数据(例如长度)。
- auto:下载整个视频文件,即使用户不希望使用它。
8.音频标签:audio
- src:URL地址、音频地址
- controls:向用户显示音频控件(比如播放/暂停按钮)
- muted:音频静音
- autoplay:音频自动播放
- loop:循环播放
- preload:音频预加载,如果使用autoplay ,则忽略该属性。
-
- none :不预加载音频。
- metadata:仅预先获取音频的元数据(例如长度)。
- auto:下载整个音频文件,即使用户不希望使用它。
9.新增全局属性
- contenteditable(ture or false):表示元素是否可被用户编辑
- draggable(ture or false):表示元素可以被拖动
- hidden:隐藏元素
- spellcheck(ture or false):规定是否对元素进行拼写和语法检查
- contextmenu:规定元素的上下文菜单,在用户鼠标右键点击元素时显示。
- data-*:用于存储页面的私有定制数据。
三.兼容性处理
1.添加元信息,让浏览器处于最优渲染模式。
<!--设置IE总是使用最新的文档模式进行渲染-->
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<!--优先使用webkit ( Chromium )内核进行渲染,针对360等壳浏览器-->
<meta name="renderer" content="webkit">
2.使用html5shiv让低版本浏览器认识H5的语义化标签。
<!--[if lt ie 9]>
<script src=" ../sources/js/htm15shiv.js"></script>< ! [endif]-->