2015-05-01

html5教程笔记

HTML5

认识html5

html5并不仅仅只是作为html标记语言的一个最新版本，更重要的是它制定了web应用开发的一系列标准，称为一个将web作为应用开发平台的html5语言。

语义化

所谓语义化是要使HTML标签具备很好的可读性，可以清晰传达每个标签所要表达的意义，以方便其被友好的处理和解析。

兼容处理

h5新标签需要做兼容处理，它的原理就是创建新标签（在脚本里通过dom元素创建新标签）

新增了一些表单

类型	使用示例	含义
email	`<input type="email"/>`	输入邮箱格式
tel	`<input type="tel"/>`	输入手机号码格式
url	`<input type="url"/>`	输入url格式
number	`<input type="number"/>`	输入数字格式
search	`<input type="search"/>`	搜索框
range	`<input type="range"/>`	自由拖动滑块
color	`<input type="color"/>`	拾色器
time	`<input type="time"/>`	时间时：分
date	`<input type="date"/>`	日期年/月/日
month	`<input type="month"/>`	月份年-月
week	`<input type="week"/>`	星期年-周

表单元素


元素...................含义	....................用法
<datalist>............数据列表...........<option value=”值”>
<output>	............输出结果...............<output>内容</output>
<meter>...............度量器...............min max low high value

表单属性

属性用法含义
placeholder <input type="text" placeholder="请输入用户名"> 占位符
autofocus <input type="text" autofocus> 自动获得焦点
multiple <input type="file" multiple>多文件上传
autocomplete<input type="text" autocomplete="off"> 自动完成提示
form <input type="text" form="某表单ID">指定表单
novalidate <form novalidate></form>关闭验证
required<input type="text" required> 必填项
pattern <input type="text" pattern="\d"> 自定义验证

音频标签

<audio src="./music/See You Again.mp3"></audio>
并且可以通过附加属性可以更友好控制音频的播放，如：
autoplay 自动播放
controls 是否显不默认播放控件
loop 循环播放

多浏览器支持方案


<audio controls>
<source src="./music/See You Again.mp3">
<source src="./music/See You Again.wav">
<source src="./music/See You Again.ogg">
您的浏览器不支持html音频播放功能
</audio>

视频

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

同样，通过附加属性可以更友好的控制视频的播放
autoplay 自动播放
controls 是否显示默认播放控件
loop 循环播放
width 设置播放窗口宽度
height 设置播放窗口的高度
多浏览器支持方案同上。

DOM的扩展

获取元素
- document.getElementsByClassName (‘class’) 通过类名获取元素，以伪数组形式存在。
- document.querySelector(‘selector’) 通过CSS选择器获取元素，符合匹配条件的第1个元素。
- 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’] 我们便可以获取到自定义的属性值。
- Node.dataset是以对象形式存在的，当我们为同一个DOM节点指定了多个自定义属性时，Node.dataset则存储了所有的自定义属性的值。
- 假设某元素 <div id="demo" data-name="itcast" data-age="10"> var demo = document.querySelector('#demo'); 1、读取 demo.dataset['name'] 或者 demo.dataset['age'] 2、设置demo.dataset['name'] = 'web developer'
  
  当我们如下格式设置时，则需要以驼峰格式才能正确获取
  <div data-my-name="itcast"> 这样获取Node.dataset['myName']

网络状态

我们可以通过window.onLine来检测，用户当前的网络状况，返回一个布尔值
window.online用户网络连接时被调用
window.offline用户网络断开时被调用

全屏

HTML5规范允许用户自定义网页上任一元素全屏显示。

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

文件读取

通过FileReader对象我们可以读取本地存储的文件，使用 File 对象来指定所要读取的文件或数据。其中File对象可以是来自用户在一个 <input> 元素上选择文件后返回的FileList 对象，也可以来自由拖放操作生成的 DataTransfer

万兆淼