一、HTML5概述
表格布局：表格应该存放数据，而不是划分网页结构的。
- html5 并不仅仅等于 html的next version
- css的升级，jsapi的升级，html的升级
- 广义：新一代开发富客户端（很强交互性和体验）应用程序整体解决方案
structure + style + interactive 结构 样式 交互。全包了。 - 应用场景：
- 极具表现力的网页
- 功能非常多的
pc端：iCloud、office365..
app端：淘宝、京东..
weChat端：淘宝、京东..
混合式本地应用：网易云、有道词典... 淘宝、京东..
简单的游戏：canvas
二、html5多的东西
- html的变化
-
新标签
更语义化的标签、应用程序标签
-
新属性
链接关系描述、结构数据标记、ARIA、自定义属性
-
智能表单
新的表单类型、虚拟键盘适配
-
网页多媒体
视频、音频、字幕
-
SVG
-
canvas
2D、3D
- JavaScriptAPI
- 核心平台提升
- 网页存储
- 设备信息访问
- 拖放操作
- 文件
- 网络访问（移动端多）
- 多线程
- 桌面通知
-
css
尽量用英文去命名（将不会的单词加入单词本）
三、语义化标签
- 让HTML代码符合页面的结构化、标签语义化
例如让类名变成标签名：
<div class="nav"> - <nav> //导航
header、footer、section、article、aside等等 - div就是定义一个好无语义的块
- 为啥要有语义化标签？
- 便于开发者阅读，写出更优雅的代码
- 让浏览器或者爬虫更好解析，从而更好分析其中内容
- 更好的搜索引擎化
html的职责是描述一块内容是什么，长什么样子应该由css决定
四、应用程序标签
- DataList(数据列表)
- Progress(进度条)
- Meter(数值显示器)
Menu(右键菜单)Details(明细)- View Demo
<!-- 要有一个载体input 不常用！！-->
<input list="input_list" type="text">
<datalist id="input_list">
<option value="夹心"></option>
<option value="饼干"></option>
</datalist>
</input>
<!-- 状态指示器 -->
<progress value="" max=""></progress>
<!-- 进度条 -->
<progress value="75" max="100"></progress>
<!-- 展示一个数值 （允许的最高值最低值 -->
<meter min="0" max="100" low="40" high="90" optimum="100" value="50">
a+
</meter>
- 链接关系
<link rel="prev" href="01 应用程序标签.html">
<body>
<!-- 通过链接关系属性声明 连入的链接和当前文档之间的关系 -->
<a href="01 应用程序标签.html" rel="prev">上一页</a>
<a href="#">下一页</a>
</body>
常见的链接关系表
alternate 文档的可选版本（例如打印页、翻译页或镜像）
start 集合中的第一个文档
next 集合中的下一个文档
prev 集合中的前一个文档
stylesheet 文档的外部样式表
contents 文档目录
index 文档索引
glossary 文档中所用字词的术语表或解释
copyright 包含版权信息的文档
chapter 文档的章
section 文档的节
subsection 文档的子段
appendix 文档附录
help 帮助文档
bookmark 相关文档
nofollow 用于指定 Google 搜索引擎不要跟踪链接
licence 一般用于文献，表示许可证的含义
tag 标签集合
friend 友情链接
五、新属性
- 兼容性问题：无法兼容H5的浏览器会默认解析为相应的div
或者在script脚本中声明：document.createElement("header");
google开发一个html5shiv.js，把h5所有新标签都放在里面 （if IE 执行那个js） - 结构数据标记* 很少公司使用
- ARIA 属性*
无障碍 富互联网应用程序 - 自定义属性（很重要）: data-xxx
一般都是给a做点击事件，li不应该作为交互事件
小tip：在控制台输入：document.body 回车
document.body.contentEditable = "true" 回车
或者网址中输入：data:text/html,<html contenteditable>
就可以在网页中编辑文字
小案例：设置自定义属性&动态将文本添加到li中
var list = document.getElementById("list");
for(var id in data){
var item = data[id];
var listElement = document.createElement("li");
// listElement.innerHTML = item.name;
listElement.appendChild(document.createTextNode(item.name));
listElement.setAttribute("data-age",item.age);
listElement.setAttribute("data-name",item.name);
list.appendChild(listElement);//放循环里，变量本地化，jq必须要这样。
//可以把多个事件赋到一个元素上
// 而把click赋值给元素只能添加一个事件
listElement.addEventListener('click',function(){
console.log("age:"+this.dataset['age']);
console.log("name:"+this.dataset['name']);
console.log(this.getAttribute("data-age"));
// /访问的两种形式
});
}
六、智能表单
- 新的表单类型（移动端）
<input type="text" required>
<input type="email" value="some@email.com">
<input type="date" min="2010-08-14" max="2011-08-14" value="2010-08-14">
<input type="range" min="0" max="50" value="10">
<input type="search" results="10" placeholder="Search...">
<input type="tel" placeholder="(555) 555-5555"
pattern="^\(?\d{3}\)?[-\s]\d{3}[-\s]\d{4}.*?$">
<input type="color" placeholder="e.g. #bbbbbb">
<input type="number" step="1" min="-5" max="10" value="0">
- 主要用来做移动端虚拟键盘的适配
<input type="text" name="txt_text" id="txt_text">
<input type="number" name="txt_number" id="txt_number">
<input type="email" name="txt_email" id="txt_email">
<input type="tel" name="txt_tel" id="txt_tel">
<input type="url" name="txt_url" id="txt_url">
七、网络多媒体
在此之前依赖于e.g.falsh插件
- 音频
<audio controls="controls">
<source src="img/music.mp3" type="audio/mpeg"/>
</audio>
- 视频
<video controls="controls">
<!-- 不同浏览器支持格式不一样 -->
<source src="fun.ogg" type="video/ogg" />
<source src="fun.mp4" type="video/mp4" />
<!-- 当浏览器不兼容video标签，就会将他以div方式解析,如果支持，这下面的文字就没有意义了 -->
SHIT 你的浏览器不支持！
</video>
兼容版本：
<video controls="controls" poster="toy.png" autoplay="autoplay"> <!-- 海报和自动播放 -->
<source src="fun.ogg" type="video/ogg">
<source src="fun.mp4" type="video/mp4">
<object type="application/x-shockwave-flash" data="http://static.youku.com/v1.0.0557/v/swf/loader.swf" width="100%" height="100%" id="movie_player">
<param name="allowFullScreen" value="true">
<param name="allowscriptaccess" value="always">
<param name="allowFullScreenInteractive" value="true">
<param name="flashvars" value="VideoIDS=XMTMwNDAzNzM4NA==&ShowId=0&category=85&Cp=0&ev=1&Light=on&THX=off&unCookie=0&frame=0&pvid=1439005764768c9QpaT&uepflag=1&Tid=0&isAutoPlay=true&Version=/v1.0.1080&show_ce=0&winType=interior&Type=Folder&Fid=25977506&Pt=0&Ob=1&plchid=z&openScanCode=1&scanCodeText="限时" 扫码免广告&embedid=AjMyNjAwOTM0NgJ3d3cueW91a3UuY29tAi8=&vext=bc%3D%26pid%3D1439005764768c9QpaT%26unCookie%3D0%26frame%3D0%26type%3D1%26fob%3D1%26fpo%3D0%26svt%3D0%26emb%3DAjMyNjAwOTM0NgJ3d3cueW91a3UuY29tAi8%3D%26dn%3D%E7%BD%91%E9%A1%B5%26hwc%3D1%26mtype%3Doth&pageStartTime=1439005764766">
<param name="movie" value="http://static.youku.com/v1.0.0557/v/swf/loader.swf">
<div class="player_html5">
<div class="picture" style="height:100%">
<div style="line-height:460px;"><span style="font-size:18px">您还没有安装flash播放器,请点击<a href="http://www.adobe.com/go/getflash" target="_blank">这里</a>安装</span></div>
</div>
</div>
</object>
</video>
html5media组件，IE7以上视频全部兼容
-
属性
image.png
- 字幕
没啥人用。
<video id="clip" controls>
<source src="fun.mp4" type="video/mp4" />
<track label="English subtitles" kind="subtitles"
srclang="en" src="video-subtitles-en.vtt" default />
</video>
八、SVG
可缩放矢量图形Scalable Vector Graphics
- 矢量图：路径，线条，放大不会失真，基于可扩展标记语言，XML（在放大的时候会去填充线条）
位图：每个像素点一个颜色去堆积 - 优点：优势：体积小，质量高，效果好，可控程度高
颜色可以通过css调整 - 使用方式（引用）
使用
<embed> 标签
<object> 标签
<iframe> 标签：留下来的，缺点：不能通过自己的css控制，svg实际上也是一个文档
Ajax方式加载
QQ图片20180331184353.png
!important 加载css行内样式后可以提高优先级
网友评论