HTML5阶段知识点整理
2017-02-22 18:00:32 0 举报AI智能生成
HTML5是最新的HTML标准，它引入了许多新特性和功能，以增强网页的交互性和用户体验。HTML5的主要知识点包括：语义化标签，用于描述网页内容的结构和含义；多媒体元素，如视频、音频和图像，可以直接嵌入到网页中；Canvas和SVG，用于绘制图形和动画；Web存储，如本地存储和会话存储，用于在客户端存储数据；Web Workers，用于在后台执行JavaScript代码，以实现异步操作；Geolocation API，用于获取用户的地理位置信息；以及各种新的表单控件和输入类型。此外，HTML5还支持响应式设计，使网页能够适应不同设备的屏幕尺寸。
作者其他创作
大纲/内容
SVG绘图
<svg width="" height="">
<rect width="" height="" x="" y="">
<circle r="" cx="" cy="">
<ellipse rx="" ry="" cx="" cy="">
<line x1="" y1="" x2="" y2="">
<polyline points="5,10 100,200">
<polygon points="5,10 100,200 300,250">
<text>xx</text>
<image xlink:href="" width="" height="">
<g></g>
<defs></defs>
<linearGradident>
<filter>
<feGassianBlur>
地理定位
window.navigator.geolocation
getCurrentPosition( succCB, errCB )
watchPosition()
clearWatch()
拖放API
源对象可以触发的事件
dragstart
drag
dragend
目标对象可以触发的事件
dragenter
dragover
e.preventDefault()
dragleave
drop
源对象事件和目标对象事件间传递数据
e.dataTransfer
setData()
getData()
WebWorker
概念
var w = new Worker('x.js')
w.postMessage('xx');
w.onmessage = function(e){ e.data }
WebStorage
window.sessionStorage
setItem(k, v)
getItem(k)
removeItem(k)
clear()
window.localStorage
setItem(k, v)
getItem(k)
removeItem(k)
clear()
新的语义标签和属性
表单2.0
新的input type
email
url
number
tel
search
range
color
date
month
week
新的表单元素
datalist
progress
meter
output
表单元素的新属性
autofocus
autocomplete
placeholder
multiple
form
required
minlength
maxlength
min
max
pattern
视频和音频
<video src="" controls autoplay loop muted poster="" preload="auto">
<audio controls autoplay loop muted preload="auto">
Canvas绘图
<canvas width="" height="">
var ctx = canvas.getContext('2d')
绘制矩形
ctx.fillRect()
ctx.strokeRect()
ctx.clearRect()
绘制文本
ctx.fillText()
ctx.strokeText()
ctx.measureText().width
绘制路径
ctx.beginPath()
ctx.closePath()
ctx.moveTo()
ctx.lineTo()
ctx.arc()
ctx.stroke()
ctx.fill()
ctx.clip()
绘制图像
ctx.drawImage()
上下文变形
ctx.rotate()
ctx.translate()
ctx.scale()
ctx.save()
ctx.restore()
WebSocket
职业：暂无
0 条评论
下一页
