HTML5 学习笔记
2024-07-15 11:26:33 0 举报AI智能生成
HTML5 学习笔记
作者其他创作
大纲/内容
语法的改变
<!DOCTYPE html>
<meta charset="UTF-8">
新增的元素
结构元素
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键的顺序
文件与拖放
<input type="file" />
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)：停止监视
0 条评论
下一页
