-What is HTML5
定义
HTML5 ≈ HTML↑ + CSS↑ + JavaScript API↑
广义上：新一代开发Web富客户端应用程序整体解决方案
Structure → Style → Interactive
全包了！！！
HTML5 的应用场景
极具表现力的网页
案例非常多
网页应用程序
PC端：iCloud、百度脑图、Office 365···
APP端：淘宝、京东、美团···
WeChat端：淘宝、京东、美团···
混合式本地应用
PC端：网易云音乐、有道词典···
APP端：淘宝、京东、美团···
简单的游戏
-HTML5 到底多了点啥？
https://www.w3.org/TR/2014/WD-html5-diff-20140918/
HTML
JavaScript API
CSS
HTML标签：更具有语义化的标签
就让HTML代码符合内容的结构化，标签语义化
以前我们可能是这样的：
以后我们一定是这样的：
-语义化标签
为什么要有语义化标签？
能够便于开发者阅读和写出更优雅的代码，代码如诗
同时让浏览器或是网络爬虫可以很好地解析，从而更好分析其中的内容
更好地搜索引擎优化
切记
HTML的职责是描述一块内容是什么（或其意义）
而不是它长的什么样子，它的外观应该由CSS来决定。
应用程序标签
DataList(数据列表)
Progress(进度条)
Meter(数值显示器)
Menu(右键菜单)
View Demo
View Demo
应用程序功能标签
DataList
NoAutoComplate
Right Menu（Firefox Only）
Details（Opera, Chrome, and in Safari 6）
HTML 5
This slide deck teaches you everything you need to know about HTML 5.
Meter
A+
Progress
在不同操作系统上展示的样式不同
修改进度条样式，参考链接
☆语义化标签 学习目标
掌握语义化标签的重要性
可以正确使用语义化标签
-属性
链接关系
rel
...
old posts
tutorial
license
wannabe
games posts
...
用来描述指定链接与当前文档的关系，便于机器理解文档结构
常见的链接关系表
结构数据标记 *
https://developers.google.com/structured-data/testing-tool/
我叫汪磊。
我养了一条叫
旺财的
金毛犬。
很高级的东西，只有Google支持
ARIA 属性 (了解）
Accessible Rich Internet Application (无障碍富互联网应用程序)
主要针对于屏幕阅读设备(e.g. NVDA)，更快更好地理解网页
不仅仅是为了盲人用户，更多语义化
WAI-ARIA无障碍网页应用属性完全展示
ARIA让视障人士更了解你的页面
自定义属性 data-*
通过DOM存储与DOM对象强相关的数据
- 张三
- 李四
- 王二
更语义化的标签
-
张三
-
李四
-
王二
☆新属性 学习目标
了解而已，以后在国内普及开过后，迅速上手
-智能表单
新的表单类型
新的表单类型
虚拟键盘适配
☆智能表单 学习目标
网页开发过程中可以针对需求使用特定的智能表单类型
-网页多媒体
在此之前需要依赖于第三方插件（e.g. flash）
音频
视频
视频相关属性
兼容方案：
https://html5media.info/
字幕：
http://www.w3schools.com/tags/tag_track.asp
多媒体案例完整源码
多媒体
☆多媒体 学习目标
掌握网页多媒体的意义
对Video标签和Audio标签熟练使用
了解字幕标签
-SVG
可缩放矢量图形是基于可扩展标记语言（标准通用标记语言的子集），用于描述二维矢量图形的一种图形格式。它由万维网联盟制定，是一个开放标准。
Scalable Vector Graphics 可缩放矢量图形
基于可扩展标记语言
优势：体积小，质量高，效果好，可控程度高
扩展连接： HTML5中的SVG ** SVG **
使用 SVG File 的方式
使用