概述HTML5的新特性
1) web socket
服务器与浏览器之间的请求连通
web socket 可以保持服务器与浏览器之间的持久连通
2) 离线 & 缓存
离线:断网,有些网站一旦断网脱机就立刻不能访问,h5提出新的api可以对关键的网页进行缓存
存储:程序持久化的方法,数据库持久化mysql,断电关机数据不丢失就是持久化的作用,h5提供了js对数据操作的api,localStorage,sessionStorage,webDataBase
3) 音频与视频
audio & video
embed
4) 3D 图像 效果
增加API canvas WebGl svg
5) 性能与集成
增加web worker 可以进行js的在线操作,之前的js是单线程的,不能操作多线程,h5能让js进行多线程操作(浏览器的支持性特别差)
6) 设备
h5可以用电脑或手机操作硬件设备
调用地理位置,摄像头,触控设备,检测设备,这些硬件设备主要是手机端的API
7) css3
HTML5新增标签:
表单类型 type=''
email 当表单提交时检测是不是一个电子邮件格式
url 当表单提交时检测是不是一个url
tel 电话号码
date 年月日控件
time 时分控件
datetime-local 年月日时分 本地
month 年月格式
week 年周格式
number 数字格式
range 选择区间
search 搜索框 后边有一个叉号,用于清空
color 颜色选择
表单新属性
placeholder 占位符 提示语句
required 必填框
autofocus 自动获取焦点在页面刷新的时候
pattern 正则验证
min/max 最小值/最大值
step 每一步走多远
minlength/maxlength 最大最小长度
list 指定一个datalist作为下拉菜单
结构标签
<section></section> 模块
<article></article> 文章
<header></header> 头部
<footer></footer> 底部
<nav></nav> 导航
<address></address> 地址
媒体标签
视频标签
<video width="320" height="240">
<source src="" type="video/ogg">
<source src="" type="video/mp4">
</video>
属性
controls
在视频的底部展示一个工具栏,鼠标悬停在视频上会出现,鼠标移开消失
preload
是否在页面加载后载入视频
auto:当页面加载后载入整个视频
metadata:只加载播放文件的基本信息(尺寸,时间,第一针的信息,曲目列表......)
注意:autoplay 自动播放 谨慎使用
loop(循环)
视频播放结束后循环播放
poster(海报)
在视频文件播放前显示的图片
poster='url'
muted(消除声音)
为视频或音频文件设置静音或者消除静音,或者检测当前是否是静音
volume(音量)
获取或设置视频文件的音量,值在0-1之间
duration(持续的时间)
整个媒体文件的播放时长,以s为单位
currentTime
以s为单位返回从开始到当前媒体播放了多长时间,在播放过程中可以设置这个值进行视频播放定位
ended(已结束)
如果视频播放完毕就返回true
用于判断当前视频是否播放完毕
paused(已经暂停)
如果视频被暂停返回true
判断视频是否已暂停
currentSrc
以字符串的形式返回当前正在播放视频的文件,对应当前浏览器在source元素中选中的文件
play()
开始播放
pause()
暂停播放
load()
媒体开始加载
canPlayType
用来测试浏览器是否支持指定的媒体类型
返回值:
空字符串:说明不支持
maybe::可能支持
probably:大概也许可能支持
音频标签
<audio>
<source src="" type="audio/ogg">
<source src="" type="audio/wav">
<source src="" type="audio/mp3">
</audio>
语义标签
1) 图片与图片的标题标签
figure figcaption
<figure>
<img src="images/1.png" alt="">
<figcaption>这是一张图片</figcaption>
</figure>
2) div可编辑属性
contenteditable = false|true true为可编辑
h5中大部分内容标签都可以支持这个属性
3) 搜索框下拉标签
datalist 标签
包含选择内容下拉菜单
4) 进度条
progress 标签
value min max title
meter 标签
<progress value="60" min='0' max='100' title="60%">60%</progress>
<meter value="60" min="0" max="100" title="60%">60%</meter>
5) 高亮标签
mark
6) 地址标签
address
7) 注释语义
ruby rp rt
<ruby>
漢<rp><rt>han</rt></rp>
字<rp><rt>zi</rt></rp>
</ruby>
8) 摘要与细节
details summary
details:用来定义细节,可以是文本或图片等
summary:用来包含细节的标题,必须写在details中,并且是details的第一个儿子