HTML5新增属性

新增语义化标签

<nav> 表示导航
<header> 表示页眉
<footer> 表示页脚
<section> 表示区块
<article> 表示文章 如文章、评论、帖子、博客
<aside> 表示侧边栏 如文章的侧栏
<figure> 表示媒介内容分组 与 ul > li 做个比较

表单类输入类型

• email 输入email格式
• tel 手机号码
• url 只能输入url格式
• number 只能输入数字
• search 搜索框
• range 范围
• color 拾色器
• time 时间
• date 日期 （不是绝对的）
• datetime 时间日期
• month月份
• week 星期
• 部分类型是针对移动设备生效的，并且具有一定的兼容性，在实际开发中，可以选择性使用

表单属性

• placeholder 占位符
• autofocus 获取焦点
• multiple 文件上传多选或多个邮箱地址
• autocomplete 自动完成，用于form元素，也可用于部分input
• form 指定表单项属于哪个form， 处理复杂表单时会需要
• novalidate 关闭验证， 可用于
  标签，（只适用于form）
• required 验证条件，必填项
• pattern 正则表达式 自定义验证规则

表单事件

• oninput 用户输入内容是触发，可用于移动端输入字数统计
• oninvalid 验证不通过时触发

音频

• autoplay 自动播放
• controls 是否显示不默认播放控件
• loop 循环播放

<audio src = './music/See You Again.mp3'> </audio>

视频

• H5通过<video>标签来解决音频播放的问题，同音频播放一样，<video>使用也相当简单，

<video src = './video/movie.mp4' controls = 'controls'> </video>

• autoplay 自动播放
• controls 是否显示不默认播放控件
• loop 循环播放
• preload 预加载，同时设置了autoplay， 此属性将失效
• width 设置播放窗口宽度
• height 设置播放窗口的高度

video.js 第三方的视频 插件

• 多浏览器支持的方案

<video controls = 'controls'>
    <source src = './video/movie.ogg'>
    <source src = './video/movie.mp4'>
    您的浏览器不支持HTML视频 播放功能
</video>

DOM模块

获取元素

1. document.querySelector('selector') 通过css选择器获取元素，符合匹配条件的第一个元素
2. 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节点，是一个通称。

自定义属性

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

---

历史管理

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

旧版本

• history.back() 回退
• history.forward() 前进
• history.go(n) 前进/后退n步，正值前进，负值后退
• history.length历史记录条数

事件监听

• onpopstate事件，当前进或后退时则触发，通过事件对象ev.state可以读取到存储的数据，监听是要给window。

存储机制

cookie

1. 设置、读取方便
2. 容量较大，sessionStorage约5M、localStorage约20M
3. 只能存储字符串，可以将对象JSON.stringify() 编码后存储

window.sessionStorage

1. 生命周期为关闭浏览器窗口
2. 在同一窗口下数据可以共享

window.localStorage

1. 永久生效，除非手动删除
2. 可以多窗口共享

方法

setItem(key, value) 设置存储内容
getItem(key) 读取存储内容
removeItem(key) 删除键值为key的存储内容
clear() 清空所有存储内容
key(n) 以索引值来获取存储内容

全屏

    HTML5规范允许用户自定义网页上任一元素全屏显示。
    requestFullScreen() 开启全屏显示
    cancelFullScreen() 关闭全屏显示
    不同浏览器需要添加前缀如：
    webkitRequestFullScreen、mozRequestFullScreen
    webkitCancelFullScreen、mozCancelFullScreen
    规范允许所有元素可以取全屏，但实际测试结果关闭全屏只能添加到document元素上
    通过document.fullScreen检测当前是否处于全屏状态
    不同浏览器需要添加前缀
    document.webkitIsFullScreen、document.mozFullScreen
    全屏伪类
    :full-screen .box {}、:-webkit-full-screen {}、:moz-full-screen {}

事件监听

onload 当文件读取完成时调用 

多媒体

方法： load(); play(); pause()
属性： currentStr; currentTime; duration