HTML5

发表于 | 分类于

HTML5

HTML5概念

HTML5+CSS3+javascript API

HTML5并不仅仅是作为HTML标记语言的一个最新版本， 更重要的是它制定了web应用开发的一系列标准，成为第一个将web作为应用开发平台的HTML语言。

HTML5定义了一系列新元素，如新语义标签、多媒体标 签等，可以帮助开发者开发更加丰富的应用，同时有令人眼花缭乱的css 3，还提供了一些Javascript API，如地理定位、重力感应、硬件访问等，可以在浏览器内实现类原生应用，制作webApp，甚至结合Canvas我们可开发网页游戏。

我们日常讨论的H5其实指的是一个泛称，它是由HTML5+CSS3+javascript 等技术组合而成的一个应用开发平台。

HTML5的历史

WHATWG:Web Hypertext Application Technology Working。WHATWG成立的原因是W3C意图放弃HTML，而力图发展XML技术。

思考：问什么HTML5在2008年就发布草案了，到2014年才火起来？

因为移动端的推动，HTML在老的浏览器上兼容性很严重，并且HTML5很多新特性其实就是为移动端而出现的，可以说HTML5是为移动端而生的 。

HTML5常用语义化标签

  • header 表示header里面包裹的东西是网站的头部区域
  • nav 表示nav里面包裹的东西是网站的导航
  • section 表示里面包裹的东西是网页的某一个模块
  • footer 表示footer标签里面包裹的东西是网页的页脚
  • aside 表示aside标签里面包裹的东西是网页的侧边栏
  • article 表示article标签里面包裹的东西是网页的文章页

兼容性处理：

IE678不识别这个标签

  • document.createElement("header"); 创建这个一个标签即可
  • 创建的标签默认是行内样式。
  • 还需给标签加一个display:block的属性。

使用html5shiv.js

我们每次都要去创建标签，并且还需要设置display：block属性，非常麻烦，因此我们可以引入一个第三方js文件，这个js文件的功能就是创建元素和设置display属性。

1
2
3
4
5
6
7
8
9
<!--[if lte IE 8]>
    <script src="js/html5shiv.min.js"></script>
<![endif]-->

<!-- lte小于等于；lt小于； -->

<!--[if lt IE 8]>
    <script src="js/html5shiv.min.js"></script>
<![endif]-->

当ie浏览器的版本小于等于8的时候，才会引入html5shiv.js；

css骇客：命令：cc:ie6

如何获取：github.com

H5新增的Api

类名操作

  • classList 是一个集合，会存储某个元素上所有的类名，使用classList来替代className操作class类
  • node.classList.add("classname"); 添加类
  • node.classList.remove("classname"); 移除类
  • node.classList.toggle("classname"); 切换类
  • node.classList.contains("classname"); 判断类

自定义属性操作

  • 给每个标签自定义属性以data-开头；
  • H5新增了dataset（类似于classList）对象来存储所有data-开头自定义属性；
  • 通过dataset来操作标签自定义属性；操作时data-省略，自动添加或者读取；
  • 在HTML标签中不分大小写；
    • data-backgroundColor，JS或者jQuery只能识别backgroundcolor；
    • 如果要有多个单词想要使用驼峰命名法，使用-分割，data-background-color，JS或者jQuery识别为backgroundColor；
  • jQuery中提供了data()方法；一个参数获取，两个参数设置自定义属性；

网络状态

navigator.onLine

在移动端，我们经常需要检测设置是在线还是离线，HTML5为此定义了一个navigator.onLine属性，这个属性用于检测设备是否联网。navigator.onLine 在不同浏览器中有细微的差别。

  • 返回值是布尔类型
  • 返回true表示有网络连接，可能是互联网也可能是局域网；
  • 返回false表示一定没有网络连接；

监听网络事件

  • online 从无网络切换到有网络状态时触发；
  • offline 从有网络切换到无网络状态时触发；

地理位置

在HTML规范中，增加了获取用户地理信息的API，这样使得我们可以基于用户位置开发互联网应用，即基于位置服务LBS(Location Base Service)；

H5提供的获取地理位置信息并不是特别的精确，会一定的误差，如果需要非常精确的定位，还是需要使用安卓或者ios，访问基于操作系统的方法。

隐私：HTML5规范提供了一套保护用户隐私的机制。必须先得到用户明确许可，才能获取用户的位置信息。在获取地理位置之前，会询问用户，只有在获得许可之后，才能获取到用户的位置信息。

苹果浏览器对webkit定位权限进行了修改，所有定位请求的页面必须是https协议的。

相关方法：

  • navigator.geolocation.getCurrentPosition(successCallback, errorCallback) 获取当前的地理位置信息
  • navigator.geolocation.watchPosition(successCallback, errorCallback) 重复的获取当前的地理位置信息
  • successCallback 回调函数：获取成功后会调用,并返回一个position对象，里面包含了地理位置信息
  • errorCallback 回调函数：获取失败了会调用，并返回error对象，里面包含了错误信息。
1
2
3
4
5
6
7
8
9
10
navigator.geolocation.getCurrentPosition(function(position){
  // 定位成功会调用该方法
  // position.coords.latitude 纬度
  // position.coords.longitude 经度
  // position.coords.accuracy 精度
  // position.coords.altitude 海拔高度
}, function(error){
  // 定位失败会调用该方法
  // error 是错误信息
});

百度地图

仅仅获取到经纬度对于用户来说意义并不大，因为用户也不知道经度和纬度表示的是地球上的哪一个地方，因为我们可以结合百度地图，准确的将用户的位置显示出来。

百度地图官网：http://lbsyun.baidu.com/

  1. 在开发中，找到javascript API
  2. 直接查看示例demo
  3. 复制相应的代码，替换掉秘钥就行，秘钥只需创建一个新的应用就可以了。

Web存储

cookie

  1. 存储大小：4K
  2. 默认浏览器关闭时清除存储的信息；max-age:可以设置失效时间，单位是秒；
  3. 每次请求都会自动带上cookie；

sessionStorage

  1. 存储大小：5M
  2. 浏览器关闭时清除存储的信息；
  3. 需要手动访问；

localStorage

  1. 存储大小：5M
  2. 永久有效，除非手动删除；
  3. 需要手动访问；

sessionStorage / localStorage 方法

  • 以键值对方式存储，值为json字符串（可以是数组或者对象）；
  • setItem(key, value) 设置存储内容，键值对
  • getItem(key) 通过键读取存储内容
  • removeItem(key) 删除键值为key的存储内容
  • clear() 清空所有存储内容，包括别人存储的
  • key(n) 以索引值来获取存储到本地缓存的键；

自定义播放器案例

全屏切换Api

全屏切换Api有兼容性问题，需要加前缀；

1
2
3
4
5
6
7
8
9
10
11
12
13
// 设置video全屏
video.requestFullScreen()
div.webkitRequestFullScreen();
div.mozRequestFullScreen();

// 实例
btn.addEventListener("click", function () {
   if("webkitRequestFullScreen" in video){
    video.webkitRequestFullScreen();
  }else {
    video.mozRequestFullScreen();
  }
});

video / audio相关方法

  • video.load() 重新加载
  • video.play() 开始播放
  • video.pause() 暂停播放

video / audio相关属性

  • currentTime 当前时间
  • duration 总长时间
  • timeupdate 播放进度更改时触发
  • volume 控制音量

滑块

<input type="range" min="0" max="100" value="100"> 滑块

input事件

当input改变时，可以通过input.value来操作相关属性；

当 <input>、<select>或 <textarea> 元素的值更改时，DOM input 事件会同步触发。对于 type=checkbox 或 type=radio 的 input 元素，当每次切换控件（通过触摸、鼠标或键盘）时（HTML5规范），input 事件都应该触发，但从历史来看，情况并非如此。请依赖浏览器兼容性，或者使用 change 事件，而不是使用这几种元素的类型。

此外，当 contenteditable 编辑器的内容被更改时，input事件也会触发。在这种情况下，事件目标是被编辑的主元素。当有两个或多个具有 contenteditable 为真的元素时，“被编辑的主元素”是指最近的其父级不可编辑的祖先元素。同样，它也会在 designMode 编辑器的根元素上触发。

文件读取

通过FileReader对象我们可以读取本地存储的文件（用户通过input:file上传的文件），可以使用 File 对象来指定所要读取的文件或数据。其中File对象可以是来自用户在一个<input>元素上选择文件后返回的 FileList 对象，也可以来自由拖放操作生成的 DataTransfer

files对于file类型的input框，在这个DOM对象中，存在一个files属性，这个属性是FileList对象，是一个伪数组，里面存储着上传的所有文件，当input框指定了multiple属性之后，就可以上传多个文件了。

也就是说，通过files这个属性，我们就可以获取到所有上传的文件。

File对象中包含了文件的最后修改时间、文件名、文件类型等信息。

FileReader对象

FileReader是一个HTML5新增的对象，用于读取文件（必须通过input:file上传）。

1
2
3
4
5
6
7
8
9
//创建一个fileReader对象
var fr = new FileReader;
//读取文件的两个方法
readAsText() // 以文本的方式读取文件 ,文本文件
readAsDataURL() // 以DataURL形式读取文件，图片，视频
//文件读取完成事件：
fr.onload = function(){}
//当文件读取完成，可以通过result属性获取结果
fr.result

案例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
var file = document.getElementById("file");
var box = document.getElementById("box");

file.addEventListener("change", function () {
  console.dir(file);

  //files:里面存储了所有上传的文件
  //这个data就是我们上传的那个文件
  var data = file.files[0]
  //1. 创建一个文件读取器
  var fr = new FileReader();
  //2. 让文件读取器读取整个文件
  fr.readAsDataURL(data);
  //3. 等待文件读取完
  //onload：文件读取完成后，就会触发
  fr.onload = function () {
      var img = document.createElement("img");
      img.src = fr.result;
      box.innerHTML = "";
      box.appendChild(img);
  }
});

H5新增数组方法

forEach

forEach()方法；遍历数组；参数是一个函数；

  • 函数有三个形参
  • element` 接收数组中每个值
  • index` 接收数组中的下标
  • array` 接收当前数组
1
2
3
4
5
6
7
8
//遍历数组["张飞","关羽","赵云","马超"]
var arr = ["张飞","关羽","赵云","马超"];
//第一个参数：element，数组的每一项元素
//第二个参数：index，数组的下标
//第三个参数：array，正在遍历的数组
arr.forEach(function(element, index, array){
  console.log(element, index, array);
});

map

map()方法；遍历数组并返回函数执行后的值到新数组中，参数是一个函数；

  • 函数有三个形参
  • element` 接收数组中每个值
  • index` 接收数组中的下标
  • array` 接收当前数组
  • 返回一个新数组，函数中执行后的每个值都存到这个新数组中；
1
2
3
4
5
6
7
8
9
10
//遍历数组，求每一项的平方存在于一个数组中
var arr = [1,2,3,4,5];
//第一个参数：element，数组的每一项元素
//第二个参数：index，数组的下标
//第三个参数：array，正在遍历的数组
//返回值：一个新数组，每个元素都是回调函数的结果。
var newArray = arr.map(function(element, index, array){
  return element * element;
});
console.log(newArray);//[1,4,9,16,25]

filter

filter()方法；遍历数组，判断是否满足函数中的条件，返回满足条件的值到新数组中，参数是一个函数；

  • 函数有三个形参
  • element` 接收数组中每个值
  • index` 接收数组中的下标
  • array` 接收当前数组
  • 返回一个新数组，函数执行结果返回值是布尔类型，如果是true则将值存到这个新数组中；
1
2
3
4
5
6
7
8
9
10
11
12
13
14
//遍历数组，将数组中工资超过5000的值删除[1000, 5000, 20000, 3000, 10000, 800, 1500]
var arr = [1000, 5000, 20000, 3000, 10000, 800, 1500];
//第一个参数：element，数组的每一项元素
//第二个参数：index，数组的下标
//第三个参数：array，正在遍历的数组
//返回值：一个新数组，存储了所有返回true的元素
var newArray = arr.filter(function(element, index, array){
  if(element > 5000) {
    return false;
  }else {
    return true;
  }
});
console.log(newArray);//[1000, 5000, 3000, 800, 1500]

some

some()方法；遍历数组，判断是否满足函数中的条件，如果都是false则返回false，只要有一个true则返回true，参数是一个函数；

  • 函数有三个形参
  • element` 接收数组中每个值
  • index` 接收数组中的下标
  • array` 接收当前数组
  • 返回值一个布尔类型的值
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
//遍历数组，判断数组是否包含奇数，[2,4,6,8,10,9]
var arr = [2,4,6,8,10,21];
//第一个参数：element，数组的每一项元素
//第二个参数：index，数组的下标
//第三个参数：array，正在遍历的数组
//返回值：布尔类型的值，只要有一个回调函数返回true，就返回true
var flag = arr.some(function(element, index, array){
  console.log(element, index, array);
  if(element %2 == 1){
    return true;
  }else {
    return false;
  }
});
console.log(flag);//true

every

every()方法；遍历数组，判断是否满足函数中的条件，如果都是true则返回true，只要有一个false则返回false，参数是一个函数；

  • 函数有三个形参
  • element 接收数组中每个值
  • index 接收数组中的下标
  • array 接收当前数组
  • 返回值一个布尔类型的值
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
//遍历数组，判断数组是否都是偶数，[2,4,6,8,10,9]
var arr = [2,4,6,8,10,21];
//第一个参数：element，数组的每一项元素
//第二个参数：index，数组的下标
//第三个参数：array，正在遍历的数组
//返回值：布尔类型的值，只有当所有的元素返回true，才返回true，否则返回false。
var flag = arr.every(function(element, index, array){
  console.log(element, index, array);
  if(element %2 == 0){
    return true;
  }else {
    return false;
  }
});
console.log(flag);//false

#

分享到： 收藏夹 复制网址 邮件 微信 QQ空间 腾讯微博 豆瓣 一键分享 更多