HTML是什么？
是HTML + CSS + JavaScript + API 的增量式学习
Web增强与垄断
1：WebApp——Html5新增了离线存储、更丰富的表单、js线程、socket、标准扩展的embed、css3......
2:流媒体与多媒体引擎——Audio、Video、Canvas、webgl等等.....
3:搜索引擎和无障碍领域
移动互联网时代
1：跨平台——HTML5是唯一一个通吃PC、Mac、iPhone、Android等主流平台的跨平台语言
2：快速迭代——互联网产品大多免费、且有网络效应、后入者抢夺用户的难度非常大
3：减低成本——HTML5开发比原生APP开发成本低一倍
4：导流入口多——HTML5应用倒流入口非常容易
5 ：分发效率高
Web 改变趋势
1：Native APP【开发成本高】 ——> WebApp【性能问题】 ——> Hybird APP
2：PC ——> 移动 ——> 智慧互联
3：AR、VR 、智能硬件
4：视频变局、在线教育、泛娱乐
本次学习大致掌握内容
1、标签变化【DTD、新增的标签、删除的标签、重定义标签】
2、页面布局【新的页面布局、区别和意义】
3、属性变化【Input 、表单属性、链接属性、其他属性】
4、HTML5展望【简述API、简述Canvas、移动端应用】
目前支持HTML5的浏览器有：IE9、Firefox 、Opera 、Safari 、 Chrome
HTML <!DOCTYPE>标签
定义和用法：<!DOCTYPE>声明必须是HTML 文档的第一行，位于<html>标签之前，不是html标签，指示web 浏览器关于使用哪个HTML 版本进行编写的指令
HTML5 没有引用DTD，那什么是DTD呢？
文档类型定义（DTD）
1、DTD可以定义合法的XML文档构建模块，它使用一系列合法的元素来定义文档的结构
2、在HTML中，DTD规定了标记语言的规则，这样浏览器才能正确的呈现内容
3、HTML5不基于SGML，所以不需要引用DTD
一：新增的标签【结构标签、多媒体标签、Web应用标签、其他标签】
结构标签（块状元素）【10个】
<article> 标记定义一篇文章
<header> 标记定义一个页面或一个区域的头部
<nav> 标记定义导航链接
<section> 标记定义一个区域
<aside> 标记定义页面内容部分的侧边栏
<hgroup> 标记定义文件中一个区块的相关信息
<figure> 标记定义一组媒体内容以及他们的标题
<figcaption> 标记定义figure 元素的标题
<footer> 标记定义一个页面或一个区域的底部
<dialog> 标记定义一个对话框（会话框）类似微信
<body>
<header>
<div>LOGO</div>
<nav>
<a href="#">首页</a>
<a href="#">介绍</a>
<a href="#">案列</a>
<a href="#">关于</a>
</nav>
</header>
<section>
<hgroup>
<h1>标题</h1>
<h2>副标题</h2>
<h4>简介</h4>
</hgroup>
<aside>
<a href="#">第一部分</a>
<a href="#">第二部分</a>
<a href="#">第三部分</a>
</aside>
<article>
<p>文章存放内容</p>
</article>
</section>
<section>
<figure>
<figcaption>媒体的标题</figcaption>
</figure>
</section>
<section>
<dialog>
<dt>张三</dt>
<dd>李四</dd>
</dialog>
<dialog>
<dt>张三</dt>
<dd>李四</dd>
</dialog>
</section>
<footer>
我是底部
</footer>
</body>补充：
1：header/section/aside/article/footer 优先级别最高、写在外层
2：header/section/footer > aside/article/figure/hgroup/nav > div/ figcaption【优先级别】
二：多媒体标签
<video> 标记定义一个视频
<audio> 标记定义音频内容
<source> 标记定义媒体资源
<canvas> 标记定义图片
<embed> 标记定义外部的可交互的内容或插件，比如flash
标签的意义：多媒体标签的出现意味着富媒体的发展以及支持不使用插件的情况下即可操作媒体文件，极大地提升了用户体验
<!-- <audio src="#" autoplay='autoplay' loop='-1' controls='controls'>您的浏览器该退休了，建议换一个哦~</audio> -->
<!-- source type 是定义文件的类型、转码 autoplay='autoplay' loop='-1' controls='controls'【自动播放、不循环、添加播放控制器】-->
<audio>
<source src="#" type="audio/mpeg">
</audio> <!-- 视频的属性会多一个宽高、同样type 是视频转码 -->
<video controls='controls' width="1024" height="768">
<source src="#" type="video/mp4">
</video> <!-- 像插入flash 这样的 -->
<embed src="./demo.swf" width="1024" height="768"></embed>三：Web应用标签
状态标签：
<meter> 定义已知范围或分数值内的标量测量。也被称为 gauge（尺度）。
例子：磁盘用量、查询结果的相关性，等等。
注释：<meter> 标签不应用于指示进度（在进度条中）。如果标记进度条，请使用 <progress> 标签。
【兼容浏览器： Chrome、Opera】
<progress> 标签定义运行中的进度（进程)
【兼容浏览器： Chrome、Opera、Firefox】
<!-- 6个属性，
form：规定 <meter> 元素所属的一个或多个表单。
value：必需。规定度量的当前值。
min：规定范围的最小值。
max:-规定范围的最大值。
low:规定被视作低的值的范围。
high:规定被视作高的值的范围。
optimum:规定度量的优化值。 -->
<meter value="100" min="50" max="200" low="0" high="250" optimun='100'></meter>
<meter value="0.8">80%</meter>
<!-- 2个属性：
max：定义完成的值。
value：定义进程的当前值。
当只有max值时，可以在浏览器中看见这个这个进度条在来回加载-->
<progress value="40" max="100"></progress>
列表标签
<datalist> 为input标记定义一个下拉列表，配合option 【兼容浏览器： Firefox、Opera】
<details> 标记定义一个元素的详细内容，配合 summary 【兼容浏览器： Chrome】
<!-- datalist 与 input 元素配合使用该元素，来定义 input 可能的值
datalist 及其选项不会被显示出来，它仅仅是合法的输入值列表
请使用 input 元素的 list 属性来绑定 datalist。 -->
<input placeholder="请输入您喜欢的运动" list="love">
<datalist id="love">
<option value="游泳">游泳</option>
<option value="乒乓球">乒乓球</option>
<option value="爬山">爬山</option>
</datalist>
<!-- 标签用于描述文档或文档某个部分的细节。
与 <summary> 标签 配合使用可以为 details 定义标题。标题是可见的，用户点击标题时，会显示出 details。
1个属性值：open，定义 details 是否可见。 当open='open'，即刷新的时候也是可见的-->
<details open='open'>
<summary>请点击左侧打开详情</summary>
<p>哈哈，打开后就可以看到我</p>
</details>
其他标签
注释标签
<ruby> 标签定义注释或音标,（中文注音或字符),将 <ruby> 标签与 <rt> 和 <rp> 标签一起使用
<rt> 标签定义对ruby 的注释内容文本
<rp> 告诉那些不支持ruby元素的浏览器如何去显示
<!-- IE 9+、Firefox、Opera、Chrome 和 Safari 支持 <ruby> 标签。
注释：IE 8 或更早版本的 IE 浏览器不支持 <ruby> 标签。 -->
<ruby>
汉<rp>(</rp><rt>Han</rt><rp>)</rp>
字<rp>(</rp><rt>Zi</rt><rp>)</rp>
</ruby>
其他标签
<mark> 标记定义 有标记的文本（黄色是选中状态）
<output> 标记定义一些输出类型，计算表单结果配合 oninput 事件
<keygen> 标记定义表单里一个生成的键值（加密信息传送）
<time> 标记定义一个日期/时间，目前所有主流浏览器都不支持
<p>周六一天，过得很充实，<mark>今天很开心</mark></p>
<!-- 元素的属性
for: 定义输出域相关的一个或多个元素。
form：定义输入字段所属的一个或多个表单
name：定义对象的唯一名称。（表单提交时使用）
type 属性为 number 表示数值型
type 属性为 range 表示范围-->
<form oninput="x.value = parseInt(a.value)+parseInt(b.value)">
0<input type="range" id="a" value="0">100
+<input type="number" id="b" value="50">
=<output name="x" for="a b"></output>
</form>
四：删除的标签
五：重定义标签
