ＨＴＭＬ５新增标签
H5新增标签
结构标签 （双）
- header 头面 页面头部 section的头部
- footer 页脚
- nav 导航
- aside 侧边栏
- main 主体内容
- section 小节
- article 文章
- details 结合summary使用 属性open
- summary 为details元素定义可见的标题
- dialog 对话框 属性 open
文本标签
-
mark 标记带有记号的文本
-
time 时间
-
meter 度量 温度/电量/容量
- 属性 max/min/value/low/high/optimum值为数字
-
progress 进度 完成了多少
- 属性 max/value
-
wbr 单词内换行 单
-
ruby 汉语拼音
<ruby>同志<rt>tongzhi</rt></ruby> -
rt 汉语拼音
图像
- figure 独立文档流 如文章插图
- figcaption figure的标题
- canvas 画布
列表标签 兼容性差
- menu
- menuitem
- command
多媒体标签
-
video
- src
- width
- height
- controls
- autoplay
- muted
- loop
- poster
- preload
-
audio
- src
- controls 控制
- autoplay 自动播放
- loop 循环
- muted 让音频静音
- preload 页面打开时就加载
- poster 规定音频下载是显示的图像，或者用户点击播放按钮前显示的图像
-
source 单
-
src
-
type 指定音视频的 MIME类型
音频 mp3 MIME:audio/mpeg Ogg MIME: audio/ogg wav MIME:audio/wav 视频 MP4 video/mp4 webm video/webm ogg video/ogg
-
MIME类
图片
- .jpg image/jpeg
- jpeg image/jpeg
- .gif image/gif
- .png image/png
文本类
- .html text/html
- .css text/css
可执行文件
.exe application/
表单
-
keygen 加密 是提供一种验证用户的可靠方法
-
datalist
请使用 input 元素的 list 属性来绑定 datalist。 <input type="text" id="text" name="mr" autocomplete="off" list="test"/> <datalist id="test" style="display:none"> <option value="aa">aaaaaa</option> <option value="aa">aaaaaa</option> <option value="aa">aaaaaa</option> <option value="aa">aaaaaa</option> <option value="aa">aaaaaa</option> </datalist> -
output 定义不同类型的输出 for/form/name
H5智能表单
input 新增 type值
- url 必须输入URL地址（加http://）
- number 输入数字
- min
- max
- step 指定跳跃范围
- value 默认值
- range 取值范围 min/max/step/value
- tel 电话号
- search 效果和text一样 专用于搜索框 属性results
- color 调出取色面板
- date 选取日月年
- month
- week
- time
- datetime-lcoal
Form元素 新增的 属性
- autocomplete 值 off/on 规定form应该拥有自动完成功能
- novalidate 不进行验证
表单控件新增的属性
- pattern input/textarea
- multiple 规定input属性克选择多个值 email/file
- placeholder 提示文字有别于value input/textarea
- autofocus 自动获取聚焦
- autocomplete 自动完成 off/of
- required 必填项目，不填不能提交
提交按钮 新增属性
- formaction
- formmethod
- formtarget
- formectype
- formautocomplte
- formnovalidate
H5新增全局属性
- contenteditalbe 是否可编辑 true/false
- contextmenu 规定元素的上下文菜单
- spellcheck 是否语法检查 true/false
- draggable 是否拖动 true/false
<element draggable="true|false|auto">
- dropzone 规定在拖动被拖动数据时是否进行复制、移动或链接
<element dropzone="copy|move|link">
- translate 是否翻译 yes/no
- hidden 隐藏 不需要值
- data-* 用于存储页面或应用次序的私有定制数据
条件注释
基础运算符
- lt 小于
- gt 大于
- lte 小于等于
- gte 大于等于
- ！ 不等于
HTML5兼容性解决方案
用法
<!--[if 运算符 IE 版本]>
<![endif]-->
<!--[if IE 8]> 仅IE8可见 <![endif]-->
<!--[if gt IE 8]>仅IE 8以上可见<![endif]—>
-
使用html5shiv.js 让IE9以下浏览器识别html5标签
- `<!--[if lt IE 9]>
<![endif]-->`
-
开启IE的兼容模式
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
-
壳浏览器优先使用webkit内核
<meta name="renderer" content="webkit">
兼容原则
- 优雅降级
- 渐进增强
