HTML5 学习笔记
2021-03-04 19:29:40 0 举报AI智能生成
登录查看完整内容
HTML5 学习笔记
作者其他创作
大纲/内容
<!DOCTYPE html>
<meta charset=\"UTF-8\">
语法的改变
selection：文档或应用程序的一个区段
article：文档中一块独立的内容
header：页面中一个内容区域或整个页面的标题
footer：页面中一个内容区域或整个页面的脚注
nav：导航链接部分
address：用于当前article或文档作者的联系方式
结构元素
aside：表示article元素的内容之外的与article元素内容相关内容
figure：一段独立的流内容
figcaption：为figure元素组添加标题
dialog：定义对话
子元素：option
datalist：和表单元素的list属性一起使用
块级元素
mark：重点突出或高亮显示的文本
small：表示内容为附属细则，通常用来免责、警告、提出法律限制或版权
time：表示日期或时间
value
min
max
low
high
optimum
meter：度量元素，仅用于已知最大值和最小值的度量
progress：运行中进度
details：用户要求得到并且可以得到的细节信息
summary：提供标题或图例，是details元素的第一个子元素
menu：菜单列表
command：命令按钮，如单选按钮、筛选框或按钮
行内元素
email
tel
url
number
range
search
color
date
month
weak
time
datetime
datetime-local
input新类型
checkValidity()：验证元素
setCustomValidity(errorMsg)：给元素设置错误消息
input新方法
新增的元素
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：过滤文件类型
<input type=\"file\" />
FileList对象：通过 file.files 获取
name：文件名
size：文件大小
type：文件类型
File对象
abort（）
readAsBinaryString(file)
readAsDataURL(file)
预览上传的图片示例
方法
onabort：中断时触发
onerror：出错时触发
onload：文件读取成功完成时触发
onloadstart：读取开始时触发
onloadend：读取完成触发，无论成功或失败
onprogress：读取中
事件
FileReader：异步读取文件到内存
文件API
1. 设置要拖放对象的draggable局长为true
dragstart
drag
dragenter
dragover
dragleave
drop
dragend
2. 监听拖放事件
dropEffect
effectAllowed
types
属性
void clearData(DOMString format)
DOMString getData(DOMString format)
3. DataTransfer：数据传输对象
拖放API
文件与拖放
video：视频播放元素
audio：音频播放元素
src：用于指定媒体数据的URL地址
autoplay：是否在页面加载后自动播放
none
metadata
auto
perload：是否预加载
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
绘制图形
大小限制为4KB
总是随HTTP事物一起发送（浪费一定带宽）
操作起来麻烦，所有信息被拼到一个长字符串里
cookies
sessionStorage：临时保存
localStorage：永久保存
大小被建议限制在5M（不同浏览器有不同大小）
length属性
key(index)
getItem(key)
remove(key)
clear()
WebStorage API
创建数据库表
新、删、改、查操作
本地数据库
本地存储
列举需要缓存或不需要被缓存的资源文件名称
可以为每个页面单独指定一个manifest文件
也可以对整个Web应用指定一个总的manifest文件
manifest文件
mainifest示例
配置Web服务器的mime-type：text/cache-mainifest main-ifest
示例
true：在线
false：离线
onLine属性
navigator对象
online/offline事件
body元素
判断在线状态
1. checking：检查缓存更新
2. noupdate：检测出manifest文件没有更新
3. downloading：正在下载缓存更新
4. progress：正在下载需要缓存的资源
5. cached：要缓存的资源已经下载完成 ，并且已经缓存
6. updateready：本地缓存更新完成触发（需要打开页面才会更新缓存，swapCache则可手动更新当前页缓存）
7. obsolete： manifest的请求出现404或410错误，缓存请求被取消
8. error：缓存更新错误
update：发起应用程序缓存下载进程
abort：取消正在进行的缓存下载
swapCache：手工执行本地缓存的更新（需要重新打开页面新的缓存才会生效）
0.未缓存
1.空闲
2.检查中
3.下载中
4.更新就绪
5.过期
status状态
applicationCache 本地缓存对象
离线应用
作用：后台运行线程任务
注意：后台线程中不能访问或窗口对象
1. 创建对象：var w = new Worker('w.js')
2. 监听消息：w.onmessage = function(e){}
3. 发送消息：w.postMessage(message)
4. 停止监听：w.terminate()
使用：
Web Worker 处理线程
跨文档通信
1. var ws = new WebSocket('ws://localhost:8888/demo');
2. ws.send('hello word');
onopen
onclose
onmessage
onerror
3. 监听事件
4. 示例
Web Socket（全双工）
EventSource对象
CONNECTIONG：正在建立连接
OPEN：连接已建立，正在委派事件
CLOSED：连接已关闭
readyState属性
data属性：服务端发送过来的数据
Event对象
Content-Type:text/event-stream
Cache-Control:no-cache
输出的消息必需以 data: 开头
服务端响应头设置
服务端发送事件（单向）
通信 API
latitude：纬度
longtiude：经度
altitude：海拔调试
accuracy：精度（米为单位）
heading：设置前进方向
spead：设备前进速度（以米/秒为单位）
timestamp：获取时的时间
position.coords
onSuccess(position)
permission_denied
position_unavailable
timeout
unkown_error
error.code
onError(error)
enableHighAccuracy：是否启用高精度位置（false）
timeout：获取位置的超时时间（默认0）
maximumAge：对地理位置信息缓存的有效时间（默认60000）
options
void clearWatch(int watchId)：停止监视
navigator.geolocation
地理位置API
如果导图对您有用，请在右上角给点个赞吧
HTML5 学习笔记
0 条评论
回复 删除
下一页
