新增语义化标签
-
header:整个页面或部分区域的头部
-
footer:整个页面，或者部分区域的底部
-
nav:导航
-
article:文章、帖子、杂志、博客、评论等
-
section:页面中的某段文字或者文章中的某段文字
-
aside:侧边栏
-
main:文档的主要内容,（WHATWG没有语义,IE不支持）
-
hgroup:包裹连续的标题,如文章主标题、副标题的组合(W3C删除)
artical里面可以有多个section
section强调的是分段或分块，如果想将一块内容分成几块的时候，可以使用section
article比section更强调独立性,一块内容如果比较独立、完整，使用article
新增状态标签
meter
定义已知范围内的标量测量，例如电量、磁盘用量等等
<!-- 场景一 -->
<meter max="100" min="0" value="66" low="10" high="80"></meter>
<!--
max:规定最大值
min:规定最小值
value:规定当前值
low:规定低值
high:规定高值
类似手机电量，最高100，最低0，当前剩余66的电，进度填充66，10~80区间正常显示，低于low值显示警告颜色，高于high值显示警告颜色
-->
<!-- 场景二 -->
<meter max="100" min="0" value="66" low="10" high="20" optimum="90"></meter>
<!--
optimum:规定最优值
类似手机电量显示，低于low显示红色，low~high区间显示黄色，high以上显示绿色
-->
progress
显示某个任务完成的进度，一般用于表示进度条
<progress max="100" value="30"></progress>
<!--
max:目标值
value:当前值
相当于是一个进度条，按百分比填充
-->
新增列表标签
datalist
一般用于搜索框的关键字提示
<form action="#">
<!-- 使用list关联id为mydata的datalist -->
<input type="text" list="mydata">
<button>搜索</button>
<!-- 给datalist设置ID为mydata-->
<datalist id="mydata">
<option value="test1">test1</option>
<option value="test2">test2</option>
<option value="test3">test3</option>
<option value="test4">test4</option>
</datalist>
</form>
<!--
鼠标点击输入框
默认显示test1~test4
如果输入test，类似模糊搜索4个都显示
如果输入1，只显示test1
-->
details
用于展示问题和答案，或对专有名词进行解释
<details>
<summary>这是一个收起的文章</summary>
<p>文章内容</p>
</details>
<!-- details必须和summary一起使用
details相当于是一个标题说明，summary是对该说明的具体内容，默认是收起状态，点击箭头展开状态
-->
新增文本标签
ruby
一般用于汉字注音
<!-- ruby 和rt配合使用，rt是对文字的注音 -->
<ruby>
<span>一二三四</span>
<rt>yi er san si</rt>
</ruby>
mark
一般用于文字标记，比如我使用关键字搜索，页面呈现出来相关关键字的结果，关键字可以特殊标注
<p>一<mark>二</mark>三四</p>
新增表单控件属性
placeholder
提示文字，适用于文字输入类的表单控件
<!-- 输入框文本的占位属性，鼠标点击输入框后消失-->
<form action="">
账号: <input type="text" name="account" placeholder="请输入账号">
密码: <input type="password" name="password" placeholder="请输入密码">
其他: <textarea name="other" placeholder="输入内容" ></textarea>
</form>
required
设置选项为必填项，不设置的话提交的时候会弹出对应提示，可以用在除了buuton外任意表单控件
账号: <input type="text" name="account" placeholder="请输入账号" required>
密码: <input type="password" name="password" placeholder="请输入密码" required>
autofocus
自动获取焦点,适用于所有表单控件,默认是没有默认选中某个输入框或者内容,该属性可以打开表单的时候默认获取焦点,一个表单只有一个控件可以获取焦点
账号: <input type="text" name="account" placeholder="请输入账号" required autofocus>
密码: <input type="password" name="password" placeholder="请输入密码" required>
autocomplete
自动完成,可以用在正常的文本输入上，根据历史输入记录提示补全,密码输入框和多行输入框不使用
账号: <input type="text" name="account" placeholder="请输入账号" required autofocus autocomplete="on">
<!--
属性值
on:开启
off:关闭
-->
pattren
用正则表达式控制输入规则，适用于文本输入类控件,
账号: <input type="text"
name="account" placeholder="请输入账号"
required autofocus autocomplete="on"
pattern="\w{6}
>
<!--
\w 匹配数字字母下划线，且是六位，如果不满足匹配规则，弹出提示
且要有required属性，如果不是必填项，为空可以提交
-->
input新增type属性值
<!-- 必须输入邮箱格式-->
<input type="email" name="email">
<!-- 必须输入URL格式-->
<input type="url" required name="url">
<!-- 输入框自带上下箭头，可以递增、递减 step每次步进的数量-最大值-最小值 -->
<input type="number" required name="number" step="2" max="32" min="12">
<!-- 搜索 ，自带清除搜索内容按钮-->
<input type="search" name="keyword">
<!-- 电话，移动端上掉期数字输入键盘 -->
<input type="tel" name="tel">
<!-- 范围,可拖动范围进度条，最大值、最小值、默认值-->
<input type="range" name="range" max="100" min="10" value="22">
<!-- 颜色选择器，默认黑色，点击调起颜色选择框-->
<input type="color" name="color">
<!-- 日期选择框 年月日 -->
<input type="date" name="date">
<!-- 日期选择框-月 -->
<input type="month" name="month">
<!-- 日期选择框-周 -->
<input type="week" name="week">
<!-- 时间选择框-->
<input type="time" name="time">
<!-- 日期选择器 YYYY-mm-dd HH:mm:ss-->
<input type="datetime-local" name="time2">
<!-- 表单不进行验证，表单中的任何条目校验规则失效-->
<form action="" novalidate>
多媒体标签
视频标签
<!-- 视频标签 -->
<!-- controls 视频播放控件-->
<!-- muted 默认静音状态 -->
<!-- autoplay 是否自动播放，常规必须是静音状态才可以，如果媒体参与度满足条件,有声音也会自动播放-->
<!-- loop 循环播放-->
<video src="./小电影.mp4" controls muted autoplay loop></video>
<!-- 视频封面，不自动播放的情况下展示，默认第一帧-->
<video src="./小电影.mp4" controls muted loop poster></video>
<!-- 视频封面，指定图片-->
<video src="./小电影.mp4" controls poster="./images/seckill.png"></video>
<!-- 视频预加载，auto:浏览器根据网速等自动预加载整个文件，none：不预加载 metadata:加载基本信息，例如视频长度 -->
<video src="./小电影.mp4" controls preload="auto"></video>
音频标签
<!-- 音频标签-->
<!-- controls 音频控件 -->
<!-- autoplay 自动播放-->
<!-- muted 静音 -->
<!-- loop 循环播放-->
<!-- preload 预加载-->
<audio src="./小曲.mp3" controls autoplay muted loop preload="auto"></audio>
新增全局属性
<!-- contenteditable,是否可编辑 -->
<div contenteditable="true">Lorem ipsum dolor sit amet.</div>
<!-- 是否可拖动-->
<div draggable="true">Lorem ipsum dolor sit amet.</div>
<!-- 隐藏元素 -->
<div hidden></div>
<!-- 拼写检查 需要浏览器支持检查设置-->
<div spellcheck="true"></div>
<!-- 设置元素的上下文菜单-鼠标右键点击元素时显示的右键菜单 -->
<div oncontextmenu=""></div>
<!-- 存储页面的私有定制数据-->
<div data-*></div>
兼容性处理
部分浏览器不支持h5,例如ie8,判断版本小于ie9 引入兼容的js文件，否则不引入
<![if lt ie 9] -->
<script src="./html5shiv.js"></script>
<![endif] -->
让ie浏览器处于最优的渲染模式
<meta http-equiv="X-UA-Compatible" content="IE=edge">
针对一些国产的双核浏览器，优先使用webkit内核渲染网页
<meta name="render" content="webkit">