什么是html5?
仅仅是狭义的概念。h5草案前身叫做web application 由WHATWG组织编写，在2007年提交到了w3c，w3c起名叫做HTML5。
广义上：新一代开发web富客户端应用程序整体解决方案
富客户端：很强交互和用户体验。
文档结构--文档样式--文档交互
html5=html+css+JavaScript 。
html5应用场景
1.极具表现力的网页
2.网页应用程序
pc端：icloud office365
app端：淘宝、京东、美团
wechat端：淘宝、京东、美团
3.开发本地应用
pc端：网易云音乐、有道词典
这个应用只是一个壳子，里面嵌套的是html5代码
4.简单的游戏(canvas)
html5多了啥？
1.新增的语义化标签
2.新增的样式
3.新增的接口(功能)
这里来介绍新增的html
语义化标签、属性、智能表单、网页多媒体、canvas 2d和3d绘图、svg（矢量图）
简单介绍新增的css
选择器 字体 文本 透明度 圆角 线性、径向渐变 背景 边框图片 盒子模型 过渡 动画
简单介绍新增的JavaScript api
基础的api：新的选择器 Element.classList 访问历史api 全屏api
网页存储： Application Cache localStorage sessionStorage WebSQL indexedDB
设备信息访问：网络状态 硬件访问 设备方向 地理围栏
拖放操作：网页内拖放 桌面拖入 桌面拖出
文件:文件系统api FileReader
网络访问：XMLHttpReques fetch webSocaket
多线程
桌面通知
我这里讲一下语义化标签
页面结构的划分
h5标签并不是要取代div，它只是有些部分增加了语义
<header></header> 页眉
主要用于页面的头部的信息介绍，也可用于板块头部
<hgroup></hgroup> 页面上的一个标题组合
一个标题和一个子标题，或者标语的组合
<hgroup>
<h1>妙味课堂</h1>
<h2>带您进入富有人情味的IT培训</h2>
</hgroup>
<nav></nav> 导航 （包含链接的的一个列表）
<nav><a href=“#”>链接</a><a href=“#”>链接</a></nav>
<nav>
<h2>妙味精品课程</h2>
<ul>
<li><a href=“#”>javascript</a></li>
<li><a href=“#”>html+css</a></li>
</ul>
</nav>
<nav>
<p><a href=“#”>妙味课堂</a></p>
<p><a href=“#”>妙味课堂</a></p>
</nav>
<footer></footer>页脚 页面的底部 或者 版块底部
<section> <section> 页面上的版块
用于划分页面上的不同区域,或者划分文章里不同的节
<article></ article > 用来在页面中表示一套结构完整且独立的内容部分
可以用来呈现论坛的一个帖子，杂志或报纸中的一篇文章，一篇博客，用户提交的评论内容，可互动的页面模块挂件等。
<aside></ aside> 元素标签可以包含与当前页面或主要内容相关的引用、侧边栏、广告、nav元素组，以及其他类似的有别与主要内容的部分
aside 的内容应该与 article 的内容相关。
被包含在<article>中作为主要内容的附属信息部分，其中的内容 以是与当前文章有关的引用、词汇列表等
<figure> < figure > 用于对元素进行组合。一般用于图片或视频
<figcaption> <figcaption> figure的子元素 用于对figure的内容 进行说明
<figure>
<img src=“miaov.png”/>(注意没有alt)
<figcaption> 妙味课堂 photo © 妙味趣学</figcaption>
</figure>
<time></time>用来表现时间或日期
<p> 我们在每天早上 <time>9:00</time> 开始营业。 </p>参数
<p> 我在 <time datetime="2008-02-14">情人节</time> 有个约会。 </p>
<datalist></datalist>选项列表。与 input 元素配合使用，来定义 input 可能的值。
<input type="text" list="valList" />
<datalist id="valList">
<option value="javascript">javascript</option>
<option value="html">html</option>
<option value="css">css</option>
</datalist>
<details></details>用于描述文档或文档某个部分的细节
该元素用于摘录引用等 应该与页面的主要内容区分开的其他内容
Open 属性默认展开
<summary></summary> details 元素的标题
<details>
<summary>妙味课堂</summary>
<p>国内将知名的IT培训机构</p>
</details>
<dialog></dialog>定义一段对话
<dialog>
<dt>老师</dt>
<dd>2+2 等于？</dd>
<dt>学生</dt>
<dd>4</dd>
<dt>老师</dt>
<dd>答对了！</dd>
</dialog>
<address></address> 定义文章 或页面作者的详细联系信息
<mark></mark> 需要标记的词或句子
<keygen>给表单添加一个公钥
<form action="http://www.baidu.com" method="get">
用户: <input type="text" name="usr_name" />
公钥: <keygen name="security" />
<input type="submit" />
</form>
<progress><progress>定义进度条
<progress max="100" value="76">
<span>76</span>%
</progress>
Forms新增
number : 只能包含数字的输入框
color : 颜色选择器
datetime : 显示完整日期
datetime-local : 显示完整日期，不含时区
time : 显示时间，不含时区
date : 显示日期
week : 显示周
month : 显示月
新的表单特性和函数
placeholder : 输入框提示信息
例子 : 微博的密码框提示
autocomplete : 是否保存用户输入值
默认为on，关闭提示选择off
autofocus : 指定表单获取输入焦点
required : 此项必填，不能为空
Pattern : 正则验证 pattern="\d{1,5}“
Formaction 在submit里定义提交地址
引入js文件解决h5兼容问题
