ＨＴＭＬ５新增标签

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值

• email
• 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">

兼容原则

• 优雅降级
• 渐进增强