2016-10-15

H5范称 HTML + CSS3 + JS

常用新语义标签

 表示导航
 表示页眉
 表示页脚
 表示区块
 表示文章 如文章、评论、帖子、博客
 表示侧边栏 如文章的侧栏
 表示媒介内容分组 与 ul > li 做个比较
 表示标记 (带用“UI”，不怎么用)
 表示进度 (带用“UI”，不怎么用)
 表示日期
 标题列表 (据说已废弃)

尽量避免全局使用header、footer、aside等语义标签。

兼容处理

在不支持HTML5新标签的浏览器里，会将这些新的标签解析成行内元素(inline)对待，所以我们只需要将其转换成块元素(block)即可使用，但是在IE9版本以下，并不能正常解析这些新标签，但是却可以识别通过document.createElement('tagName')创建的自定义标签，于是我们的解决方案就是将HTML5的新标签全部通过document.createElement('tagName')来创建一遍，这样IE低版本也能正常解析HTML5新标签了，在实际开发中我们更多采用的是通过检测IE浏览器的版本来加载三方的一个JS库来解决兼容问题。

表单

输入类型

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

表单元素（标签）

表单属性

placeholder 占位符
autofocus 获取焦点
multiple 文件上传多选或多个邮箱地址
autocomplete 自动完成，用于表单元素，也可用于表单自身
form 指定表单项属于哪个form，处理复杂表单时会需要
novalidate 关闭验证，可用于
标签
required 验证条件，必填项
pattern 正则表达式 验证表单
表单重写没有提及，自行验证，共包含formaction、formenctype、formtarget、formmethod、formnovalidate
应用于提交按钮上，如：

表单事件

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

音频

可以通过附加属性可以更友好控制音频的播放，如：

autoplay 自动播放
controls 是否显不默认播放控件
loop 循环播放
preload 预加载 同时设置autoplay时些属性失效
由于版权等原因，不同的浏览器可支持播放的格式是不一样的

1.png

多浏览器支持的方案，如下图

1.png

视频

附加属性可以更友好的控制视频的播放

autoplay 自动播放
controls 是否显示默认播放控件
loop 循环播放
preload 预加载，同时设置了autoplay，此属性将失效
width 设置播放窗口宽度
height 设置播放窗口的高度
由于版权等原因，不同的浏览器可支持播放的格式是不一样的

1.png

多浏览器支持的方案，如下图

1.png

DOM扩展

获取元素

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

2、document.querySelector('selector') 通过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']

新增API

多媒体

• 方法：load()、play()、pause()

• 属性：currentSrc、currentTime、duration

• 事件：

• 音乐播放器

拖拽

• 拖拽元素：

• 目标元素：*

• 设置拖拽：draggable="true"

• 事件监听：

ondrag、ondragstart、ondragleave、ondragend
ondragenter、ondragover、ondrop

• 数据传递：

ev.dataTransfer.setData()、ev.dataTransfer.getData()

历史

pushState()
replaceState()
onpopstate

地理定位

geolocation.getCurrentPosition()
geolocation.watchPosition()

Web存储

window.sessionStorage
window.localStorage
setItem(key, value)
getItem(key)
removeItem(key)
clear()
key(n)
生命周期差异，存储空间差异
WebSQL、IndexDB

全屏