新增语义化标签
-
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">
