HTML5

兼容HTML5的浏览器
IE9+（trident）、谷歌（chrome-blink）、火狐（firefox-gecko）、欧朋（opera-presto）、苹果（safari-webkit）

HTML5特点
增加了新特性：语义特性√，本地存储特性，设备兼容特性，连接特性，网页多媒体特性√，三维、图形及特效特性√，性能与集成特性，CSS3特性√

新标签

1、header 双
<header>标签定义文档的页眉，通常是一些引导和导航信息。
<header> 标签不能被放在 <footer>、<address> 或者另一个 <header> 元素内部
它不局限于写在网页头部，也可以写在网页内容里面。

2、nav 双
导航栏标签

3、main 双
在一个文档中，不能出现一个以上的 <main> 元素。 <main> 元素不能是以下元素的后代：<article>、<aside>、<footer>、<header> 或 <nav>。

4、article 双
比section具有更明确的语义，它代表一个独立的、完整的相关内容块，可独立于页面其它内容使用
article可以嵌套article

5、section 双
<section> 标签定义了文档的章节，本意是区块

6、aside 双
用来装载非正文的内容，可以删除，例如广告，成组的链接，侧边栏等等

7、footer 双
眉脚一般会包含作者姓名、文档版权信息、使用条款链接、联系信息等，可以写在内容里

8、hgroup 双
<hgroup>标签用于对网页或区段（section）的标题进行组合

9、figure>figcaption 双
<figure>用于对元素进行组合。一般用于图片，文字组合
<figcaption>是 figure的子元素，用于对figure的内容进行说明
例如 图文组合
<figure>
<img src="路径" alt="" >
<figcaption>这是一个图片</figcaption>
</figure>

10、time 双
属性 datetime=“时间”
例如 我每天都是<time>6点</time>起床
<time datetime="2018-11-11">光棍节</time>，我发了很多红包

11、datalist 双
与<input>配合,实现类似于拥有输入功能的下拉列表。<input> 元素的 list 属性来绑定 <datalist> 元素的id
例如 <input type="text" list="名字">
<datalist id="名字">
<option>

12、detalis 双
属性 open=“open”（打开）
用于描述文档或文档某个部分的细节
<summary> 可以为<details>定义标题。标题可见，用户点击标题时，会显示出 details中的内容。任何形式的内容都能被放在 <details> 标签里边。
open属性,规定 details中内容是否默认可见。<details open="open">
例如
<details >
<summary>望庐山瀑布 --Laotian</summary>
<p>飞流直下三千尺，疑是银河落九天。</p>
</details>

13、mark 双（给文字涂色）
定义带有记号的文本，在需要突出显示文本时使用 <mark> 标签

14、progress 双
属性 max=“最大值”
value=“当前值”
定义进度条

15、meter 双
度量尺
属性 max=“最大值”
value=“当前值”

16、ruby 双
注释标签 配合 rt 双 使用
例如 <ruby>嫑<rt>biao</rt></ruby>

17、output 双
<output> 标记定义一些输出类型,计算表单结果配合oninput事件
例如 自定义公式
<form oninput="res.value=no1.value*no2.value">
<input type="text" name="no1">
<input type="text" name="no2">
<output name="res"></output>
</form>
注意 加法不行（加号在js里是字符串拼接）

18、语义化标签兼容IE8-6
可以引用一个js插件解决HTML5语义化标签在IE6-8不兼容问题
<script src="路径"></script>

表单新输入类型（type）

1、color（颜色选择器）
语法 <input type="color">
打开一个调色板

2、email
语法 <input type="email">
email 输入类型用于应该包含电邮地址的输入字段。当提交表单时，会自动地对 email 字段的值进行验证（正则表达式）

3、number
语法 <input type="number">
只能输入数字（ios不弹出数字键盘，与Android不同）

4、tel
语法 <input type="tel">
输入电话号码（ios与Android都弹出数字键盘）

5、url
语法 <input type="url">
只能输入网址

6、results
语法 <input type="results">
搜索

7、range
语法 <input type="range">
特定范围内的数值选择器，属性 min、max、step( 步数 )、value

8、日期和时间
date 日、月、年
month 月、年
week 周、年
time 时间（时、分）
datetime 时间、日、月、年（UTC时间）
datetime-local 时间、日、月、年（本地时间）

表单新属性

1、placeholder（占位符）

2、autofocus（获取焦点）

3、required（验证条件，必填项）

4、pattern（正则表达式）
输入的内容必须匹配到指定正则
例如： pattern="\d{3}"（三位数字）html写法

网页中的视频

一、插入视频两种方式
1、<video src="路径"></video>
2、<video>
<source src="路径" type="video/ogg" >
</video>(type必加属性)

二、video属性
1、宽高 width height
2、自动播放 autoplay + 静音 muted
3、播放控件 controls
4、播放前的图片 poster="路径"
5、重复播放 loop

三、支持的视频格式
ogg、webM、MP4

网页中的音频
语法 <audio src="路径"></audio>
以上属性通用