h5 补白（1）
如果你经常使用互联网，可能知道有一种东西叫作Flash。
它是一种软件，用来制作网页游戏、动画，以及视频播放器。只要观看网络视频，基本都会用到它。
多年前，它是最热门的互联网技术之一。如果不安装Flash, 很多网站根本打不开。那时还流行用它制作动画，随便一个作品，就有几十万、上百万的浏览量。电视台甚至开辟栏目，播放网上流行的Flash 动画。各大互联网公司都有专的Flash工程师，还是属于那种比较抢手、收入较高的工程师。我记得那个时候,社会上也有大量的Flash培训班，它们的招生广告都写着保证就业。
后来，Flash 就不行了。2010年，乔布斯宣布，苹果手机不会使用Flash,因为影响手机性能。再后来，新的技术兴起，它就开始没落了。BBC发表一篇报道，名字就叫《Flash 还能活多久?》。话音刚落，一周后，这项技术的拥有者Adobe公司宣布，放弃Flash 这个名字，软件将重新定位，只用来制作动画。
我并不感叹Flash这项技术的没落，这也是很正常的事，而是感叹那些从事Flash开发的工程师，他们该怎么办呢?你在一个领域钻研多年，都成了专家，突然之间那个领域过时了，你的所学所长没人需要了，那将是怎样的处境?
当一种技术消亡的时候，与它相关的工作岗位也就消亡了。这种事情在技术行业特别多，因为技术的升级换代太快了。
——阮一峰《未来世界的幸存者》
没错，文章开头就是这么水文字才显得有水平。
假如前端面试是一场语文高考。那么html就是小学背过的古诗。考得少，但经常阴沟翻船。这不代表它不重要，正是因为它太基础了。毕竟恰饭的东西啊。
当人说起html，那是一个新手，2个钟头能够上手的东西。
当人说起"新时代的html"，就是html5。实际上h5这个名词已经被滥用。人们总是跟哪些花哨的页面联系起来。实际上大多数人知道h5这个名词时，早就不新了。
前端是一个应用型的知识体系，不要拿它跟基础职业比。比如学个c，java可能够用10年。而全面更新一次个人知识体系，只能用两三年。
一定要注重编程思维的培养，不要让机械业务编程充斥自己的所谓“工作经历”中。
1. H5的新特性
h5规范最初的目标就是取代过时的flash。
它包括如下新特性：
- 不再推荐过时的标签（
<font>/<center>/<s>） - 表单控件新标签的引入（
buton/calendar/date/time/email/search） - 语义化标签的引入，主要是布局相关：（
header/nav/aside/article/footer/section） - 视频/音频的api：（
audio/video） - 离线储存（sessionStorage/localStorage/本地数据库）
- Canvas画布api
- 其它api：svg，history
2. h5优缺点
优点如下：
- Canvas丰富了网页的内容，充分利用了客户端性能
- 多媒体api出色地替代了flash
- 语义化标签对seo友好。
- 离线储存，history api等等支持衍生了大量跨平台移动端应用：
缺点：
- 浏览器规范不统一。表现不尽相同。比如安卓和ios浏览器，uc和自带的浏览器，ie支持等等。
3. 一些规范
vscode输入html:5回车，就是一个标准的html。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
</body>
</html>标签可以大写。标签属性名可以大写，属性可以不带引号。
<p>这是一p</p>
<P>大写是可以的</P>
<p CLASS=class>我也是可以的</p>
<!--推荐-->
<p class="class">这是一个有类的p</p>此外h5规范不推荐使用自闭合格式。
4.语义化标签
h5引入：（header/nav/aside/article/footer/section）
良好的可读性，不但对人友好，对搜索引擎也友好。
语义化标签的兼容性：
你可以直接引入一个小命令cc:ie6：
html5shiv 是一个针对 IE 浏览器的 HTML5 JavaScript 补丁，目的是让 IE 识别并支持 HTML5 元素。
以下不只是注释，而且会在ie 8以下浏览器生效
<!--[if IE 8]>
<script src=”hhttps://cdn.bootcss.com/html5shiv/r29/html5.js”></script>
<![endif]-->当然你可以通过js自己定义一个：
document.createElement('header');5. 多媒体api
5.1 音频和视频
多媒体无非是两个：一个是音频，一个是视频。
先来看音频：
<audio controls src="/music/青鸟.mp3"></audio>就有了一个播放控件。
- controls：在页面里显示控件
autoplay="autoplay"：自动播放，但是谷歌现在不再支持。loop,可重复播放。
接下来看视频：
<video controls src="mov/1.mp4"></video>- autoplay依然不支持谷歌，但支持其它浏览器：加入
muted属性后谷歌可以静音播放。 - 不同浏览器对同一个格式/编码视频不一定全支持。
那就有了不同解决方法：
<video controls loop>
<source src="mov/xxx.mp4">
<source src="mov/xxx.ogg">
不好意思，我们实在支持不了你这破浏览器，请升级。
</video>5.2 实例：基于vue的自定义播放器
我会在另外一篇文章里阐述。
6. 表单
6.1 智能表单
以一个简单的智能表单为例子：
<form action="" method="get">
请输入邮箱：<input type="email" name="email" id="email" value=""><br>
请输入数字：<input type="number" name="number" id="number" value=""><br>
请输入url：<input type="url" name="url" id="url" value=""><br>
请输入滑块：<input type="range" name="range" id="range" value=""><br>
请输入颜色：<input type="color" name="color" id="color" value=""><br>
请输入时间：<input type="time" name="time" id="time" value=""><br>
请输入日历：<input type="date" name="date" id="date" value=""><br>
<input type="submit" value="提交"><br>
</form>出现结果，厉害了：
部分input还自带的正则校验功能
表单校验，正则表达式都免了。
所以，说起表单，不要只知道说什么button了。
6.2 智能表单常用属性
以下快速过一下常用属性
- autocomplete
input在现代浏览器首次获得焦点时，通常有个下拉选择菜单。比如：
通常这是很好的事情。假设有人硬是要你去掉设置autocomplete为off就好了：
<form autocomplete="off" action="" method="get">
...- novalidate
加载form之后，关闭校验（不只是关闭校验提示）
- autofocus
类text的input（以下简称文本框），可以加上autofocus
- placeholder
文本框的提示信息。
- required
必填字段。
- form
<form action="" method="get" id="aaa">
<!-- ... -->
<input type="submit" value="提交">
</form>
<input type="text" name='bbb' form="aa" >form作为一个表单元素的属性，设置为form标签的id之后，即便它在表单之外，也都能提交！
- list
观察以下实现：
<input id="myCar" list="cars" />
<datalist id="cars">
<option value="BMW">
<option value="Ford">
<option value="Volvo">
</datalist>
<datalist>标签定义选项列表。请与 input 元素配合使用该元素，来定义 input 可能的值。
datalist 及其选项不会被显示出来，它仅仅是合法的输入值列表。
7. h5中一些js-api
7.1 选择器
<div>
<p>这是div中的一个p</p>
</div>
<ul>
<li><p>这是ul-li中的一个p</p></li>
<li>这是一个li</li>
</ul>document.querySelector('div p') //选择的是div下第一个p
document.querySelectorAll('div p') //选择的是div下所有p跟jq类似。
7.2 类（classList）管理
- 添加类样式(add)
document.querySelector('#btn1').addEventListener('',function(e){
document.querySelector('#aaa').classList.add('text');
})- 移除类样式(remove)
document.querySelector('#btn2').addEventListener('',function(e){
document.querySelector('#aaa').classList.remove('text');
})- 切换类样式（toggle）
document.querySelector('#btn3').addEventListener('',function(e){
document.querySelector('#aaa').classList.toggle('text');
})- 是否包含一个class（contains）
返回的是一个布尔值
document.querySelector('#btn4').addEventListener('',function(e){
document.querySelector('#aaa').classList.contains('text');
})非常像jq。非常像jq。
8.自定义属性
所谓自定义属性，就是html中没有的。
<div id="aaa" data-id="aaa" data-name="djtao" data-user-sex="female">123</div>你固然可以用document.querySelector('#aaa').getAttribute('data-id')拿到data-id，同理还有setAttribute方法设置它的data-id。
不过那都是xhtml时代的旧方法了。作为"h5时代的新人"，应该这么写：
let data=document.querySelector('#aaa').dataset;
console.log(data)
/*
{
id:'aaa',
name:'djtao',
userSex:'female'
}
*/
data.name='dangjingtao'; // <div ... data-name="dangjingtao">
data.userAge='30';// <div ... data-user-age="30">非常轻松。
注意，data-user-sex属性变成了userSex
9.FIle-API
旧时代的前端只做一件傻事：写页面。但是在新时代，有了FileReader这个对象，他们至少能读取文件了，甚至还能创造文件。
9.1 文件读取
先看：
<input type="file" name="file1" id="file1"><br>
<div id="text"></div>我要求：这个文件上传控件，在上传之前能够读取html文件内容。
let f1=document.querySelector('#file1');
// 上传文件，出发时间
f1.addEventListener('change',(e)=>{
// 读取文件对象
let tar=e.currentTarget;
let file=tar.files[0]
// 创建文件读取对象。
let reader=new FileReader();
reader.readAsText(file);
//开始读取文件加载事件
reader.addEventListener('load',(_e)=>{
// console.log(_e.currentTarget.result)
let text=_e.currentTarget.result;
document.querySelector('#text').innerHTML=text;
})；
})；当你选择一个*.html文件在div#text中，就拿到了这个html文件的内容。
同理，你如果读取一个js，你还可以创建一个script标签，加载上去。
// ...
reader.addEventListener('load',(_e)=>{
// console.log(_e.currentTarget.result)
let text=_e.currentTarget.result;
const script=document.createElement('script');
script.innerText=text;
document.querySelector('body').appendChild(script);
})；等你选择一个js文件后，网页就会执行你选择的js代码了。同样还适合执行css文件。
FileReader提供的事件模型：
- abort 中断时触发
- error 报错时触发
- loadend 读取完成时触发，无论成功失败
- loadstart 读取开始时触发
- progress 读取中
上面用的是readAsText，实际上还支持多种读取方式。
- readAsBunaryString
- readAsDataURL
9.2 文件创建实例：
有个很常见的功能，就是图片上传前压缩并显示。原生怎么做？
我会在另外一篇文章里阐述。
10. 网络状态监测
window.avigator.onLine //布尔值，设备端是否联网
window.ononline=function(){
alert(`联网了`)
}
window.onoffline=function(){
alert('掉线了')
}腾讯云开发者
