HTML5 学习笔记思维导图模板_ProcessOn思维导图、流程图

语法的改变

<!DOCTYPE html>

新增的元素

结构元素

selection：文档或应用程序的一个区段

article：文档中一块独立的内容

header：页面中一个内容区域或整个页面的标题

footer：页面中一个内容区域或整个页面的脚注

nav：导航链接部分

address：用于当前article或文档作者的联系方式

块级元素

aside：表示article元素的内容之外的与article元素内容相关内容

figure：一段独立的流内容

figcaption：为figure元素组添加标题

dialog：定义对话

datalist：和表单元素的list属性一起使用

子元素：option

行内元素

mark：重点突出或高亮显示的文本

small：表示内容为附属细则，通常用来免责、警告、提出法律限制或版权

time：表示日期或时间

meter：度量元素，仅用于已知最大值和最小值的度量

value

min

max

low

high

optimum

progress：运行中进度

value

max

details：用户要求得到并且可以得到的细节信息

summary：提供标题或图例，是details元素的第一个子元素

menu：菜单列表

command：命令按钮，如单选按钮、筛选框或按钮

input新类型

email

tel

url

number

range

search

color

date

month

weak

time

datetime

datetime-local

input新方法

checkValidity()：验证元素

setCustomValidity(errorMsg)：给元素设置错误消息

废除的元素

basefont

big

center

font

s

strike

tt

u

frameset

frame

noframes

applet

bgsound

blink

marguee

新增的属性

表单相关的属性

autocomplete

autofocus

form

list

min、max、step

multiple

novalidate

pattern

placeholder

required

表单重写属性

formaction：重写表单的action属性

formenctype：重写表单的enctype属性

formmethod：重写表单的method属性

formnovalidate：重写表单的novalidate属性

formtarget：重写表单的target属性

全局属性

contentEditable：用来指定元素的内容是否可编辑

designMode：用来指定整个页面是否可编辑

hidden：元素是否可见

spellcheck：是否查检元素的拼写和语法

tabindex：元素tab键的顺序

文件与拖放

multiple：允许选择多个文件

accept：过滤文件类型

文件API

FileList对象：通过 file.files 获取

File对象

name：文件名

size：文件大小

type：文件类型

FileReader：异步读取文件到内存

方法

abort（）

readAsBinaryString(file)

readAsDataURL(file)

readAsText(file,[encoding])

预览上传的图片示例

事件

onabort：中断时触发

onerror：出错时触发

onload：文件读取成功完成时触发

onloadstart：读取开始时触发

onloadend：读取完成触发，无论成功或失败

onprogress：读取中

拖放API

1. 设置要拖放对象的draggable局长为true

2. 监听拖放事件

dragstart

drag

dragenter

dragover

dragleave

drop

dragend

3. DataTransfer：数据传输对象

属性

dropEffect

effectAllowed

types

方法

void clearData(DOMString format)

void setData(DOMString format, DOMString data)

DOMString getData(DOMString format)

void setDragImage(Element image, long x, long y)

多媒体播放

video：视频播放元素

audio：音频播放元素

属性说明

src：用于指定媒体数据的URL地址

autoplay：是否在页面加载后自动播放

perload：是否预加载

none

metadata

auto

loop：是否循环播放

controls：是否使用默认的播放控制条

error：读取、使用媒体数据过程中出错时有值

networkStage：读取网络状态

currentTime、startTime、duration：读取或设置播放进度

volume、muted：声音控制

poster：video独有，当视频不可用时向用户展示一张图片

width和height：video独有，设置视频显示的大小

方法说明

play：播放

paused：暂停

load：重新载入

canPlayType(type)：测试浏览器是否支持指定的媒介类型

事件说明

loadstart

progress

suspend

abort

error

empited

stalled

play

pause

loadedmetadata

waiting

playing

canplaythrough

seeking

seeked

timeupdate

ended

ratechange

durationchange

volumechage

绘制图形

Canvas

本地存储

cookies

大小限制为4KB

总是随HTTP事物一起发送（浪费一定带宽）

操作起来麻烦，所有信息被拼到一个长字符串里

sessionStorage：临时保存

localStorage：永久保存

WebStorage API

大小被建议限制在5M（不同浏览器有不同大小）

length属性

key(index)

getItem(key)

setItem(key, value)

remove(key)

clear()

本地数据库

打开或创建数据库：DataBase openDataBase(String dbName, String dbVersion, String dbDesc, int dbSize)

transaction.executeSql(String sqlQuery, Object[] params, Function dataHandler, Function errorHandler)

创建数据库表

新、删、改、查操作

离线应用

manifest文件

列举需要缓存或不需要被缓存的资源文件名称

可以为每个页面单独指定一个manifest文件

也可以对整个Web应用指定一个总的manifest文件

mainifest示例

配置Web服务器的mime-type：text/cache-mainifest main-ifest

示例

判断在线状态

navigator对象

onLine属性

true：在线

false：离线

body元素

online/offline事件

applicationCache 本地缓存对象

事件

1. checking：检查缓存更新

2. noupdate：检测出manifest文件没有更新

3. downloading：正在下载缓存更新

4. progress：正在下载需要缓存的资源

5. cached：要缓存的资源已经下载完成，并且已经缓存

6. updateready：本地缓存更新完成触发（需要打开页面才会更新缓存，swapCache则可手动更新当前页缓存）

7. obsolete： manifest的请求出现404或410错误，缓存请求被取消

8. error：缓存更新错误

方法

update：发起应用程序缓存下载进程

abort：取消正在进行的缓存下载

swapCache：手工执行本地缓存的更新（需要重新打开页面新的缓存才会生效）

status状态

0.未缓存

1.空闲

2.检查中

3.下载中

4.更新就绪

5.过期

Web Worker 处理线程

作用：后台运行线程任务

注意：后台线程中不能访问或窗口对象

使用：

1. 创建对象：var w = new Worker('w.js')

2. 监听消息：w.onmessage = function(e){}

3. 发送消息：w.postMessage(message)

4. 停止监听：w.terminate()

示例

通信 API

跨文档通信

消息监听：window.addEventListener('message', function(e){}, false);

消息发送：window.postMessage(Object data, String targetUrl);

示例

Web Socket（全双工）

1. var ws = new WebSocket('ws://localhost:8888/demo');

2. ws.send('hello word');

3. 监听事件

onopen

onclose

onmessage

onerror

4. 示例

服务端发送事件（单向）

EventSource对象

onopen

onmessage

onerror

Event对象

readyState属性

CONNECTIONG：正在建立连接

OPEN：连接已建立，正在委派事件

CLOSED：连接已关闭

data属性：服务端发送过来的数据

服务端响应头设置

Content-Type:text/event-stream

Cache-Control:no-cache

输出的消息必需以 data: 开头

示例

地理位置API

navigator.geolocation

void getCurrentPosition(onSuccess, onError, options)：获取当前地理位置信息

onSuccess(position)

position.coords

latitude：纬度

longtiude：经度

altitude：海拔调试

accuracy：精度（米为单位）

heading：设置前进方向

spead：设备前进速度（以米/秒为单位）

timestamp：获取时的时间

onError(error)

error.code

permission_denied

position_unavailable

timeout

unkown_error

options

enableHighAccuracy：是否启用高精度位置（false）

timeout：获取位置的超时时间（默认0）

maximumAge：对地理位置信息缓存的有效时间（默认60000）

int watchPosition(onSuccess, onError, options)：持续监视当前地理位置信息

void clearWatch(int watchId)：停止监视