HTML5笔记（一）

1 语法规范

HTML5在语法规范上也做了比较大的调整，去除了许多冗余的内容，书写规则更加简洁、清晰。

特点：

1、更简洁

2、更宽松

单标签不用写关闭符号
双标签省略结束标签

  html、head、body、colgroup、tbody可以完全省略

实际开发中应规范书写，不建议太随意 ！

2.语义标签

HTML5则是通过新增语义标签的形式来解决这个问题，例如<header></header>、<footer></footer>等，这样就可以使其具有通用性。

3.兼容处理

加载三方的一个JS库来解决兼容问题。

4.DOM扩展

   获取元素

1、document.getElementsByClassName ('class') 通过类名获取元素，以类数组形式存在。

2、document.querySelector(‘div’) 通过CSS选择器获取元素，符合匹配条件的第1个元素。

3、document.querySelectorAll('selector') 通过CSS选择器获取元素，以类数组形式存在。

 类名操作

1、Node.classList.add('class') 添加class

2、Node.classList.remove('class') 移除class

3、Node.classList.toggle('class') 切换class，有则移除，无则添加

4、Node.classList.contains('class') 检测是否存在class

Node指一个有效的DOM节点，是一个通称。

 自定义属性

在HTML5中我们可以自定义属性，其格式如下data-*=""，例如

data-info="我是自定义属性"，通过Node.dataset['info'] 我们便可以获取到自定义的属性值。

Node.dataset是以类对象形式存在的

当我们如下格式设置时，则需要以驼峰格式才能正确获取

data-my-name="itcast"，获取Node.dataset['myName']

5.新增API

多媒体

方法：load() 加载、play() 播放、pause() 暂停

属性：currentTime 视频播放的当前进度、

      duration:视频的总时间

      paused:视频播放的状态.

事件：

     oncanplay: 事件在用户可以开始播放视频/音频（audio/video）时触发。

     ontimeupdate:通过该事件来报告当前的播放进度.

     onended:播放完时触发

全屏：video.webkitRequestFullScreen();

5.1拖拽

在HTML5的规范中，我们可以通过为元素增加draggable="true"来设置此元素是否可以进行拖拽操作，其中图片、链接默认是开启的。

5.2拖拽元素

页面中设置了draggable="true"属性的元素

5.3目标元素

页面中任何一个元素都可以成为目标元素

5.4事件监听

拖拽元素

ondrag 应用于拖拽元素，整个拖拽过程都会调用

ondragstart 应用于拖拽元素，当拖拽开始时调用

ondragleave 应用于拖拽元素，当鼠标离开拖拽元素时调用

ondragend 应用于拖拽元素，当拖拽结束时调用

目标元素

ondragenter 应用于目标元素，当拖拽元素进入时调用

ondragover 应用于目标元素，当停留在目标元素上时调用

ondrop 应用于目标元素，当在目标元素上松开鼠标时调用

ondragleave 应用于目标元素，当鼠标离开目标元素时调用

5.5历史

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

旧版本浏览器..

history.back() 回退

history.forward() 前进