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() 前进

HTML5笔记（一）相关推荐

HTML5笔记(菜鸟教程）
写了一篇笔记了,觉得整个页面效果乱乱的,这篇文章就再改变一下试一下小节加粗康康有没有好一点.最近希望自己学习效率可以高一点再高一点,最近网课上的我负能量满满这样不好不好.不知道大家写博客的时候用的是M ...
HTML5笔记+案例
HTML笔记文件扩展名 Word.docx Excel.xlsx PPT.pptx 打开文件扩展名的方法: 或者: 一 . html简介 1.HTML是什么? HTML:Hyper Text Mar ...
HTML5笔记加案例
软件安装篇 1.记笔记工具----typroa 文件名:基本文件名.扩展名 eg:SDN.docx 用word打开销售统计表.xlsx 用excel打开 2.截图工具的安装 Greensho ...
HTML5笔记案例结合
预备内容: 软件安装 1.安装笔记工具----typroa 文件名:基本文件名.扩展名 2,截图工具安装 3,sublimes----无需安装解压将解压后的文件剪切到C盘创建桌面快捷方式# H ...
HTML5笔记——formData
注:formData中的数据在控制台上的console里面是打印不出来的,只能在控制台的network里面查看到具体的发送数据和发送选项文章出处:梦想天空 XMLHttpRequest Level ...
HTML5笔记1——HTML5的发展史及标签的改变
记得第一次接触HTML5还是在<联信永益>实习那会儿(2011),当时一个项目技术选型的时候面临两种选择,分别是Silverlight和HTML5,那是用的最新的IE浏览器版本还是IE9, ...
html语言笔记,HTML/HTML5 笔记
HTML:标记语言 web 标准结构 HTML 表现 CSS 行为 JS 浏览器 IE IE内核 Opera欧朋最初是自己的Presto内核,后来是Webkit,现在是Blink内核 Safari ...
狂神说HTML5笔记
1 前言 HTML发展史跨平台,各个平台都支持HTML HTML5标准 HTML开发常用IDE 记事本 Dreamweaver IDEA WebStorm 2.网页基本信息网页基本信息 DOCTY ...
【HTML5 笔记】基础内容
文章目录 01 canvas 1.1 canavs 的应用场景 1.2 canvas 发展历史 1.3 如何使用 canvas 1.4 两个对象 1.5 线段 1.6 矩形 1.7 擦除当前区域 1. ...

HTML5笔记（一）