一.HTML5 简介
1.什么是HTML5
- HTML5是新一代的 HTML 标准，2014年10月由万维网联盟( W3C）完成标准制定。
- 官网地址:
-
- w3c提供:HTML Standard
- WHATWG提供: HTML Standard
- 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标签：显示某个任务完成的进度的指示器，一般用于表示进度条，双标签，例如:工作完成进度等。
-
- max属性：规定目标值
- value属性：规定当前值
3.列表标签
-
datalist：用于搜索框的关键字提示
<datalist id="mydata"> <option value="周冬雨">周冬雨</option> <option value="周杰伦">周杰伦</option> <option value="温兆伦">温兆伦</option> <option value="马冬梅">马冬梅</option> </ datalist> -
details：用于展示问题和答案，或对专有名词进行解释
-
summary：写在details 的里面，用于指定问题或专有名词
如何走上人生巅峰?</ summary>
---步一步走呗
4.文本标签
- ruby标签：文本注音
-
- tr标签：注音标签，写在ruby里面
- mark标签：标记
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]-->