H5布局标签
- header，表示页面头部
- footer，表示页面底部
- nav，表示导航栏
- article，文章、帖子、评论、新闻、杂志
- section，文字段落
- aside，侧边栏
H5状态标签
meter
<span>Power: </span>
<meter min="0" max="100" low="20" high="80" value="90" optimum="90"></meter>
progress
<span>Progress: </span>
<progress max="100" value="20"></progress>
H5列表标签
datalist
<form action="#">
<input type="text" list="mydata">
</form>
<datalist id="mydata">
<option value="123">123</option>
<option value="234">234</option>
<option value="345">345</option>
</datalist>
details/summary
<details>
<summary>Summary</summary>
<p>Step 1</p>
<p>Step 2</p>
</details>
H5文本标签
ruby/rt
<ruby>
<span>魑魅魍魉</span>
<rt>chi mei wang liang</rt>
</ruby>
mark
<p>
Search Results: <mark>Bing</mark> is a search engine.
</p>
H5表单控件属性
- placeholder，提示语
- required，必填项，提交表单时校验
- autofocus，自动获取焦点
- pattern，正则表达式，控件的值需要符号正则表达式
input type属性
<!-- 电子邮箱，会校验 -->
<input type="email">
<!-- URL，会校验 -->
<input type="url">
<!-- 数字，会校验 -->
<input type="number" min="0" max="100" step="2">
<!-- 搜索，不校验 -->
<input type="search">
<!-- 电话号码，移动端弹出拨号键盘 -->
<input type="tel">
<!-- 滑块 -->
<input type="range" min="0" max="100" value="0">
<!-- 取色器 -->
<input type="color">
<!-- 日历/日期/时间 -->
<input type="date">
<input type="month">
<input type="week">
<input type="time">
<input type="datetime-local">
H5视频标签
<video src="" <!-- 视频源 -->
poster="" <!-- 封面 -->
controls <!-- 控制面板 -->
muted <!-- 静音 -->
autoplay <!-- 自动播放 -->
loop <!-- 循环 -->
preload="auto"> <!-- 预加载：none 无 metadata 原数据 auto 自动 -->
</video>
H5音频标签
<audio src=""
controls
muted
autoplay
loop
preload="auto">
</audio>
H5全局属性
- contenteditable，内容可编辑
- draggable，可拖拽
- hidden，隐藏，类似 display: none
- spellcheck，拼写检查
- contextmenu，鼠标右键菜单
- data-*，自定义属性
H5兼容性处理
针对于IE浏览器，当版本低于IE9时，引入html5shiv.js
<!--[if lt ie 9]>
<script src="html5shiv.js"></script>
<![endif]-->
使 IE 浏览器以 Edge 渲染
<!-- 兼容性设置，当使用 ie 浏览器时，以 edge 浏览器渲染 -->
<meta http-equiv="X-UA-Compatible" content="ie=edge">
针对双核浏览器，优先使用 webkit (chromuim) 内核渲染
<meta name="render" content="webkit">
