一、html5概述
1.1 概述
HTML5 是 HTML 标准的最新演进版本。 这个术语代表了两个不同的概念：
① 它是一个新的 HTML 语言版本包含了新的元素，属性和行为
② 同时包含了一系列可以被用来让 Web 站点和应用更加多样化，功能更强大的技术
html5的改变：
● 语义：能够让你更恰当地描述你的内容是什么。
● 连通性：能够让你和服务器之间通过创新的新技术方法进行通信。
● 离线 & 存储：能够让网页在客户端本地存储数据以及更高效地离线运行。
● 多媒体：使 video 和 audio 成为了在所有 Web 中的一等公民。
● 2D/3D 绘图 & 效果：提供了一个更加分化范围的呈现选择。
● 性能 & 集成：提供了非常显著的性能优化和更有效的计算机硬件使用。
● 设备访问 Device Access：能够处理各种输入和输出设备。
● 样式设计: 让作者们来创作更加复杂的主题吧！
HTML5的改变，涵盖了CSS3和JS的一些新特性，这些东西统称HTML5技术。
我们之前学习的是HTML4.01（XHTML1.0）。2014年10月29日，万维网联盟泪流满面地宣布，经过几乎8年的艰辛努力，HTML5标准规范终于最终制定完成了，并已公开发布。
1.2 兼容性
官方HTML5浏览器性能评分：http://html5test.com/
满分555分，1个特性就是1分，一共555个新特性。
http://caniuse.com/ 可以检索任何一个HTML5新特性，在各个浏览器里面的兼容情况。
二、html5新的骨架和语义化标签
2.1 html5骨架
DTD：书写骨架第一步就是书写ＤＴＤ，
1 <!DOCTYPE html>这种DTD书写不要加5，因为表示书写网页对于不支持html5新特性的浏览器采用标准模式解析。就是对于不认识的属性或者标签，直接静默处理不报错，对于支持的html5新特性直接显示。
还需要设置字符集
1 <meta charset=”UTF-8”>HTML5骨架：
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <title>网页标题</title>
5 <meta charset="UTF-8">
6 </head>
7 <body>
8 网页主体部分
9 </body>
10 </html>2.2 新的特性
自封闭标签（单标签）不写关闭符号也是合法的。（可以使用）
1 <img src="images/0.jpg" alt=""> 所有的type属性不写也是合法的。必须要（可以使用）
1 <style></style>
2 <link href=””>
3 <script></script> 属性值不写双引号也是合法的。（别使用）
1 <img src=images/12.jpg alt=图片加载失败> 标签大小写都合法。（别使用）
1 <div class="box">文字</div>
2 <!-- 标签可以书写大写字母，不许同学们用 -->
3 <Div>文字</Div>
4 <DIV>文字</DIV>2.3 新的语义化标签
HTML就是负责页面语义的，HTML4.01中，div负责的任务太多，具体的语义没有拆分。
HTML5中，就是把div拆分为了更多的标签：
<header>头部
<nav>导航
<section>区域
<aside>侧边栏
<article>文章
<footer>底部这些标签都和div一样，是容器级标签，可以互相嵌套，放什么都行，放自己也行。都是block-level，标准流中是块级元素。
其他的语义化标签：
一组：figure和figcaption。一般用于图片的文字介绍。
4 <figure>
5 <figcaption>这是标题</figcaption>
6 <img src="images/c1.jpg" alt="">
7 </figure>time标签，时间语义化标签。是行内元素。
1 <p>我们上午课上时间是从<time>9点</time>开始</p>mark，有强调的语义。有背景色，为黄色。
4 同学们早点到校<mark>学习</mark>. 同学们早点到校学习
一组：details和summary。有总结含义的标签可展开。
1 <details>
2 <summary>我们每一阶段有考试</summary>
3 <p>html考试</p>
4 <p>js基础考试</p>
5 <p>js进阶考试</p>
6 </details>
三、表单
3.1 表单元素可以不书写在form标签内部
1 <form action="" id="biaodan"></form>
2 <input type="text" value="用户名" form="biaodan">3.2 label标签改变
1 <label>
2 请输入用户名：<input type="text">
3 </label>3.3 datalist
自动感应标签，输入匹配。
1 <p>
2 你学会技能：<input type="text" list="ganying">
3 <datalist id="ganying">
4 <option value="html">网页制作</option>
5 <option value="css">样式设置</option>
6 <option value="javascript">用户交互</option>
7 </datalist>
8 </p>
3.4 placeholder属性
占位符
用户名：`<input type="text" placeholder="请输入用户名">输入时默认清除3.5 autofocus
自动获取焦点属性
用户名：<input type="text" placeholder="请输入用户名" autofocus>3.6 required
必填项属性，提交时表单验证，没填则提交不了。
用户名：<input type="text" placeholder="请输入用户名" required>3.7输入控件
input标签更改type属性值表示不同的表单元素
电子邮箱：email
电话：tel
搜索框：search
网址:url
数字：number min:最小值 max:最大值
数字：<input type="number" min="1" max="50" value="25">3.8其他控件
拖拽条：range min:最小值 max:最大值
拖拽条：<input type="range" min="100" max="200" value="150">
日期：date
日期：<input type="date">颜色：color
颜色：<input type="color">四、html5插入视频和音频
4.1 html4视频
之前借助flash，链接外部视频地址
1 <embed src="//player.video.iqiyi.com/a147354accc0191887458cfddaf5ceac/0/0/v_19rqvdm9eo.swf-albumId=2133665100-tvId=2133665100-isPurchase=0-cnId=undefined" allowFullScreen="true" quality="high" width="480" height="350" align="middle" allowScriptAccess="always" type="application/x-shockwave-flash"></embed>4.2 html5插入视频
不需要借助flash插件 直接使用标签video
video具有属性
src:插入视频路径
controls:控制条
autoplay:自动播放
loop:循环播放
还可以通过source标签引入路径
方式一：
<!-- controls控制条 autoplay:自动播放 loop循环-->
<!-- <video src="video/1.mp4" controls autoplay loop></video> -->
方式二：
<!-- 还可以通过source引入视频-->
<video controls>
<source src="video/2.mp4">
</video>4.3 html5插入音频
audio标签具有属性
src:路径
controls:控制条
autoplay:自动播放
loop:循环播放
同样可以使用source引入路径
<!-- 如果不设置controls类似于背景音乐 -->
<audio src="audio/a0.ogg" autoplay loop></audio>
