您的位置：首页 > Web前端 > HTML

Html 5知识总结

2015-07-18 21:46 381 查看

Html 5知识总结

本文主要对Html 5的学习作一个总结：

新增和删除的元素

更加语义化的元素标签eg：

section,article,aside,header,footer,nav,figure,figcaption等；

其他元素eg:比较重要的vedio,audio,embed,mark,progress,canvas；

其他time,ruby,rt,rp,wbr,command,details,datalist,datagrid,keygen,output,source,param,menu。

input新增类型：email,url,number,range,search,DatePickers(date,month,week,time,diatomite,datetime-local)。

废除的元素

元素标签的省略

不允许写结束标记的元素：

area,base,br,col,command,embed,hr,img,input,keygen,link,meta,param,source,track,wbr.

可以省略全部标记的元素：

html,head,body,colgroup,thbody

可以省略结束标记的元素：

这个就不说了，这种省略不是个好习惯。

新增和删除的属性

新增

autofocus: 针对input的text类型,select,textarea,button。

placeholder: 针对input,textarea。

form: 针对input,textarea,select,button,fieldset,指定其属于哪个表格。

required: input的text类型,textarea。

autocomplete,min,max,multiple,pattern,step:针对input。

datalist: 针对list。

formaction,formenctype,formmethod,formvalidate,formtarget:针对input与button。

disabled: 针对filedset。

novalidate: 针对input,button,form。

删除

全局属性

contentEditable

designMode

hidden

spellcheck

tabindex

增强的页面元素

figure与figcaption

details与summary

mark

progress

meter

表单

autocomplete,nonvalidate

文件

参见type为file的input

拖放API

dataTransfer.getData()

3.绘图

canvas画布

canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

颜色、样式和阴影

[thead]
[/thead]

属性	描述
fillStyle	设置或返回用于填充绘画的颜色、渐变或模式
strokeStyle	设置或返回用于笔触的颜色、渐变或模式
shadowColor	设置或返回用于阴影的颜色
shadowBlur	设置或返回用于阴影的模糊级别
shadowOffsetX	设置或返回阴影距形状的水平距离
shadowOffsetY	设置或返回阴影距形状的垂直距离

[thead]
[/thead]

方法	描述
createLinearGradient()	创建线性渐变（用在画布内容上）
createPattern()	在指定的方向上重复指定的元素
createRadialGradient()	创建放射状/环形的渐变（用在画布内容上）
addColorStop()	规定渐变对象中的颜色和停止位置

线条样式

[thead]
[/thead]

属性	描述
lineCap	设置或返回线条的结束端点样式
lineJoin	设置或返回两条线相交时，所创建的拐角类型
lineWidth	设置或返回当前的线条宽度
miterLimit	设置或返回最大斜接长度

矩形

[thead]
[/thead]

方法	描述
rect()	创建矩形
fillRect()	绘制“被填充”的矩形
strokeRect()	绘制矩形（无填充）
clearRect()	在给定的矩形内清除指定的像素

路径

[thead]
[/thead]

方法	描述
fill()	填充当前绘图（路径）
stroke()	绘制已定义的路径
beginPath()	起始一条路径，或重置当前路径
moveTo()	把路径移动到画布中的指定点，不创建线条
closePath()	创建从当前点回到起始点的路径
lineTo()	添加一个新点，然后在画布中创建从该点到最后指定点的线条
clip()	从原始画布剪切任意形状和尺寸的区域
quadraticCurveTo() 创	建二次贝塞尔曲线
bezierCurveTo()	创建三次方贝塞尔曲线
arc()	创建弧/曲线（用于创建圆形或部分圆）
arcTo()	创建两切线之间的弧/曲线
isPointInPath()	如果指定的点位于当前路径中，则返回 true，否则返回 false

转换

[thead]
[/thead]

方法	描述
scale()	缩放当前绘图至更大或更小
rotate()	旋转当前绘图
translate()	重新映射画布上的 (0,0) 位置
transform()	替换绘图的当前转换矩阵
setTransform()	将当前转换重置为单位矩阵。然后运行 transform()

文本

[thead]
[/thead]

属性	描述
font	设置或返回文本内容的当前字体属性
textAlign	设置或返回文本内容的当前对齐方式
textBaseline	设置或返回在绘制文本时使用的当前文本基线
方法	描述

fillText()	在画布上绘制“被填充的”文本
strokeText() 在	画布上绘制文本（无填充）
measureText()	返回包含指定文本宽度的对象

图像绘制

[thead]
[/thead]

方法	描述
drawImage()	向画布上绘制图像、画布或视频

像素操作

[thead]
[/thead]

属性	描述
width	返回 ImageData 对象的宽度
height	返回 ImageData 对象的高度
data	返回一个对象，其包含指定的 ImageData 对象的图像数据

[thead]
[/thead]

方法	描述
createImageData()	创建新的、空白的 ImageData 对象
getImageData()	返回 ImageData 对象，该对象为画布上指定的矩形复制像素数据
putImageData()	把图像数据（从指定的 ImageData 对象）放回画布上

合成

[thead]
[/thead]

属性	描述
globalAlpha	设置或返回绘图的当前 alpha 或透明值
globalCompositeOperation	设置或返回新图像如何绘制到已有的图像上

其他

[thead]
[/thead]

方法	描述
save()	保存当前环境的状态
restore()	返回之前保存过的路径状态和属性
createEvent()
getContext()
toDataURL()

4.多媒体

audio

<audio src="song.ogg" controls="controls">
Your browser does not support the audio tag.
</audio>

vedio

eg:

<video width="320" height="240" controls="controls">
  <source src="/i/movie.ogg" type="video/ogg">
  <source src="/i/movie.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>

5.本地存储(Web Storage)

对比cookie：a.cookie大小限制4K，b.占用带宽

Web Storage又分为两种：sessionStorage和localStorage

sessionStorage：数据存储在session对象中，浏览器关闭数据即丢失；

localStorage：数据存储在本地硬件设备上，浏览器关闭数据依然存在。

基本方法：存—-setItem(key,value)

读—-getItem(key)

6.离线应用(Application Cache)

应用程序缓存为应用带来三个优势：

离线浏览 - 用户可在应用离线时使用它们

速度 - 已缓存资源加载得更快

减少服务器负载 - 浏览器将只从服务器下载更新过或更改过的资源。

声明

<html manifest="xxxx.appcache">

Manifest 文件

CACHE MANIFEST - 在此标题下列出的文件将在首次下载后进行缓存

NETWORK - 在此标题下列出的文件需要与服务器的连接，且不会被缓存

FALLBACK - 在此标题下列出的文件规定当页面无法访问时的回退页面（比如 404 页面）

更新缓存

一旦应用被缓存，它就会保持缓存直到发生下列情况：

用户清空浏览器缓存

manifest 文件被修改（参阅下面的提示）

由程序来更新应用缓存

实例 - 完整的 Manifest 文件

CACHE MANIFEST
# 2012-02-21 v1.0.0
/theme.css
/logo.gif
/main.js

NETWORK:
login.asp

FALLBACK:
/html5/ /404.html

7.其他

地理定位（Geolocation）

方法： getCurrentPosition()

Web Worker

web worker 是运行在后台的 JavaScript，不会影响页面的性能。

WebSocket

可以把 WebSocket 看成是 HTTP 协议为了支持长连接所打的一个大补丁，它和 HTTP 有一些共性，是为了解决 HTTP 本身无法解决的某些问题而做出的一个改良设计。

Html 5知识总结
目录
简介

新特点

绘图

多媒体

本地存储Web Storage

离线应用Application Cache

其他

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航

Html 5知识总结