本文目录

• 1.语义化新标签
• 2.常见新标签
• 3.表单常用新属性
• 4.获取元素
• 5.类名操作
• 6.自定义属性
• 7.全屏方法
• 8.多媒体
• 9.地理定位
• 10.本地存储
• 11.历史管理
• 12.文件读取
• 13.网络状态

1.语义化新标签

• header：定义文档的页眉 头部
• nav：定义导航链接的部分
• footer：定义文档或节的页脚 底部
• article：定义文章。
• section：定义文档中的节（section、区段）
• aside：定义其所处内容之外的内容 侧边

<header> 语义 :定义页面的头部 页眉</header>
<nav> 语义 :定义导航栏 </nav>
<footer> 语义: 定义 页面底部 页脚</footer>
<article> 语义: 定义文章</article>
<section> 语义： 定义区域</section>
<aside> 语义： 定义其所处内容之外的内容 侧边</aside>

2.常见新标签

canvas标签

HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。
画布是一个矩形区域

<canvas id="myCanvas" width="200" height="100"></canvas>

大多数 Canvas 绘图 API 都没有定义在 <canvas> 元素本身上，而是定义在通过画布的 getContext() 方法获得的一个“绘图环境”对象上。
绘制一个简单的矩形

<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.fillStyle="#FF0000";
cxt.fillRect(0,0,150,75);
</script>

canvas是h5一个重量级新标签，后面会专门开设文章详解canvas。

<audio>和<video>

<audio>定义音频内容 用法：

<audio controls="controls" loop="loop" preload="auto"> 
  <source src="horse.mp3" type="audio/mpeg"> 
  您的浏览器不支持 audio 元素。 
</audio>

系统会自动从上到下寻找受支持的资源类型，如果所有格式都不支持，则会显示标签内的文字内容。
<video>的用法和audio相似

<video width="320" height="240" controls="controls"> 
<source src="movie.mp4" type="video/mp4"> 
您的浏览器不支持 video 标签。 
</video>

3.表单常用新属性

4.获取元素

1.通过类名获取元素，以伪数组形式存在。
document.getElementsByClassName ('class');
2.通过CSS选择器获取元素，符合匹配条件的第1个元素。
document.querySelector('css选择器');
3.通过CSS选择器获取元素，以伪数组形式存在。
document.querySelectorAll('css选择器');

5.类名操作

1.添加class
Node.classList.add('class');
2.移除class
Node.classList.remove('class');
3.切换class，有则移除，无则添加
Node.classList.toggle('class');
4.检测是否存在class，返回true或者false
Node.classList.contains('class');

6.自定义属性

在HTML5中我们可以自定义属性，其格式如下data-*=""
使用时，Node.dataset是以对象形式存在的
注意点
自定义属性时，data-xx，xx最好全都使用小写字母，也不要使用其他任何的特殊字符，原因如下：
当我们自定义属性设置为<div id="demo" data-my-name="itcast">时，获取时需要使用驼峰格式才能正确获取：

var demo = document.querySelector("#demo");
var name = demo.dataset['myName'];

修改方式如下，打印值为abc

demo.dataset.myName= 'abc';
var name = demo.dataset['myName'];
console.log(name)

当我们为同一个DOM节点指定了多个自定义属性时，Node.dataset则存储了所有的自定义属性的值。

<div id="demo" data-my-name="itcast" data-age="18" data-sex="man">

var demo = document.querySelector("#demo");
var nameOrigin = demo.dataset
console.log(nameOrigin)

打印值为一个DOMStringMap对象

age: "18"
myName: "itcast"
sex: "man"

7.全屏方法

浏览器自带全屏实现方式是F11，但是在HTML5中也提供了操作元素是否全屏显示的方法，目前兼容性比较差，所以在使用的时候需要封装一个公用的函数进行兼容性处理

• Node.requestFullScreen() 开启全屏显示
• Node.cancelFullScreen() 关闭全屏显示
• 由于其兼容性原因，不同浏览器需要添加前缀如：
  webkit内核浏览器：webkitRequestFullScreen、webkitCancelFullScreen，如chrome浏览器。
  Gecko内核浏览器：mozRequestFullScreen、mozCancelFullScreen，如火狐浏览器。
• document.fullScreen检测当前是否处于全屏
  不同浏览器需要添加前缀
  document.webkitIsFullScreen、document.mozFullScreen

函数封装

1.进入全屏

function requestFullScreen(ele) {
      if (ele.requestFullscreen) {
          ele.requestFullscreen();
      } else if (ele.mozRequestFullScreen) {
          ele.mozRequestFullScreen();
      } else if (ele.webkitRequestFullscreen) {
          ele.webkitRequestFullscreen();
      } else if (ele.msRequestFullscreen) {
          ele.msRequestFullscreen();
      }
}

2.退出全屏

function cancelFullScreen() {
    if(document.exitFullScreen) {
        document.exitFullScreen();
    } else if(document.mozCancelFullScreen) {
        document.mozCancelFullScreen();
    } else if(document.webkitExitFullscreen) {
        document.webkitExitFullscreen();
    } else if(document.msExitFullscreen) {
        document.msExitFullscreen();
    }
}

3.判断当前是否全屏

function isFullScreen() {
  return  !! (
      document.fullscreen || 
      document.mozFullScreen ||                         
      document.webkitIsFullScreen ||       
      document.webkitFullScreen || 
      document.msFullScreen 
   );
}

调用上面这个函数的时候直接isFullScreen()就可用获得返回值了
console.log(isFullScreen())
注意事项
1.document下没有requestFullscreen
2.requestFullscreen方法只能由用户触发，比如：在onload事件中不能触发
3.页面跳转需先退出全屏
4.进入全屏的元素，将脱离其父元素，所以可能导致之前某些css的失效
5.一个元素A全屏后，其子元素要再全屏，需先让元素A退出全屏

8.多媒体

在HTML5中，新增了两个元素---video元素与audio元素，其中video元素专门用来播放网络上的视频或电影，而audio元素专门用来播放网络上的音频数据，另外都可以通过子标签source来实现让浏览器自动选择支持的文件。

<audio controls>
   <source src="horse.ogg" type="audio/ogg">
   <source src="horse.mp3" type="audio/mpeg">
 Your browser does not support the audio element.
</audio> 

audio和video的属性、方法和事件有很多都是相同的，下面总结一下比较常用的一些。
1.方法

2.属性

3.事件

canplay事件使用示例：
提示该视频已准备好开始播放

myVid=document.getElementById("video1");
myVid.oncanplay=alert("Can start playing video");

另外，可以在audio或者video的开始标签和结束标签之间放置文本内容，这样老的浏览器就可以显示出不支持该标签的信息。

embed标签

<embed> 标签定义嵌入的内容，比如插件、各种多媒体。格式可以是 Midi、Wav、AIFF、AU、MP3等等。url为音频或视频文件及其路径，可以是相对路径或绝对路径。
但是因为兼容性问题，embed支持嵌入的形式多样，但也仅仅是展示作用，这点和video和audio标签有很大的区别，这里记录一下使用embed插入网络视频的方法：
在优酷、爱奇艺、腾讯等能上传分享视频的网站上传对应的视频，通过分享产生<iframe>代码，把这个代码放置到对应的src位置中就可以了，embed可以通过width和height属性来定义窗口的大小，示例：

<embed src="http://player.youku.com/player.php/sid/XMTI4MzM2MDIwOA==/v.swf" 
allowFullScreen="true" quality="high" width="480" height="400" 
align="middle" allowScriptAccess="always" 
type="application/x-shockwave-flash"></embed>

9.地理定位

在HTML规范中，增加了获取用户地理信息的API，
这样使得我们可以基于用户位置开发互联网应用，
即基于位置服务 (Location Base Service)
鉴于该特性可能侵犯用户的隐私，除非用户同意，否则用户位置信息是不可用的。

• 获取当前地理信息

navigator.geolocation.getCurrentPosition(successCallback, errorCallback) 

• 当成功获取地理信息后，会调用succssCallback，并返回一个包含位置信息的对象position。
  position.coords.latitude纬度
  position.coords.longitude经度
  position.coords.accuracy精度
  position.coords.altitude海拔高度
• 当获取地理信息失败后，会调用errorCallback，并返回错误信息error

var x=document.getElementById("demo");
function getLocation(){
    if (navigator.geolocation){
        navigator.geolocation.watchPosition(showPosition);
    }else{
        x.innerHTML="该浏览器不支持获取地理位置。";
    }
}
function showPosition(position){
    x.innerHTML="纬度: " + position.coords.latitude + 
    "<br>经度: " + position.coords.longitude; 
}
getLocation()

• 在现实开发中，通过调用第三方API（如百度地图）来实现地理定位信息，这些API都是基于用户当前位置的，并将用位置位置（经/纬度）当做参数传递，就可以实现相应的功能。
• 重复获取当前地理信息watchPosition() =>返回用户的当前位置，并继续返回用户移动时的更新位置（就像汽车上的 GPS）
  clearWatch() - 停止 watchPosition() 方法

10.本地存储

随着互联网的快速发展，基于网页的应用越来越普遍，
同时也变的越来越复杂，为了满足各种各样的需求，会经常性在本地存储大量的数据，
HTML5规范提出了相关解决方案。
在浏览器中的查看位置：开发者工具里的Application里面的Storage

• 特性
  • 设置、读取方便
  • 容量较大，可达到5M及以上
  • 只能存储字符串，可以将对象JSON.stringify() 编码后存储
• window.sessionStorage
  • 生命周期为关闭浏览器窗口
  • 在同一个窗口(页面)下数据可以共享
• window.localStorage
  • 永久生效，除非手动删除（服务器方式访问然后清除缓存）
  • 可以多窗口（页面）共享
• 方法
  • setItem(key, value) 设置存储内容
  • getItem(key) 读取存储内容
  • removeItem(key) 删除键值为key的存储内容
  • clear() 清空所有存储内容

11.历史管理

提供window.history，对象我们可以管理历史记录，
可用于单页面应用，Single Page Application，可以无刷新改变网页内容。

• history.back() 回退
• history.forward() 前进
• history.go(n) 跳转至指定页
• history.pushState(data, title, url) 追加一条历史记录
  • data用于存储自定义数据，通常设为null
    • title网页标题，基本上没有被支持，一般设为空
    • url 以当前域为基础增加一条历史记录，不可跨域设置
• history.replaceState(data, title, url) 与pushState()基本相同，
  不同之处在于replaceState()，只是替换当前url，不会增加/减少历史记录。
• popstate事件 历史记录发生改变时触发，注意:用history.pushState()或者history.replaceState()不会触发popstate事件，只有在做出浏览器动作时，才会触发该事件，如用户点击浏览器的回退按钮（或者在Javascript代码中调用history.back()）

window.addEventListener('popstate',function(e){
  console.log('历史记录发生改变时，我触发了')
})

• hashchange事件，用于监听hash值(以 '#' 号为开始) 的改变触发事件

12.文件读取

HTML5新增内建对象，可以读取本地文件内容。
下面这个案例实现了读取并预览图片：

<input type="file" class="file" multiple>
<img src="" alt="" id="img">
<script>
    /*获取到了文件表单元素*/
    var file = document.querySelector('.file');
    /*选择文件后触发*/
    file.onchange = function () {
        /*初始化了一个文件读取对象,h5提供的*/
        var reader = new FileReader();
        /*读取文件数据  this.files[0] 文件表单元素选择的第一个文件 */
        reader.readAsDataURL(this.files[0]);
        /*读取的过程就相当于 加载过程 */
        /*读取完毕  预览 */
        reader.onload = function () {
             /*读取完毕 base64位数据  表示图片*/
            console.log(this.result);
            document.querySelector('#img').src = this.result;
        }
    }
</script>

13.网络状态

• 我们可以通过window.onLine来检测，用户当前的网络状况，返回一个布尔值

// 获取当前网络状态
var state = window.navigator.onLine;
if (state) {
      alert("联网状态");
}else {
      alert("断网状态");
}

网络状态事件

• window.ononline用户网络连接时被调用

使用方法
1.不推荐，有兼容性问题
window.ononload = function() {}
2.推荐
window.addEventListener('online',  function() {});

• window.onoffline用户网络断开时被调用

1.不推荐，有兼容性问题
window.onoffline = function() {}
2.推荐
window.addEventListener('offline',  function() {});

注意事项：如果在加载网页前就已经处于在线状态是不会触发程序的在线事件，同理离线也是，只有网络状态发生变化了才会触发。