- html5简介
狭义上指新一代html标准,广义上指前端 - 优势
针对js,新增很多可操作接口;
新增一些语义化标签,全局属性;
新增多媒体标签代替flash;
更侧重语义化,对SEO更友好;
可移植性好,应用在移动端 - 兼容性
支持:Chrome、Safari、Opera、Firefox - 新增布局标签
标签 | 语义 |
---|---|
header | 头部 |
footer | 底部 |
nav | 导航 |
article | 文章、杂志、帖子、新闻、博客、评论等,article强调独立性,内部可以写多个section |
section | 某段文字,section强调是分段或分块 |
aside | 侧边栏 |
main | 文档主要内容(WHATWG无语义,IE不支持) |
hgroup | 包裹连续标题(w3c删除) |
- 新增状态标签
meter
定义已知范围内标量测量
meter属性 | 含义 |
---|---|
optimum | 最优值 |
min | 最小值 |
max | 最大值 |
low | 低值 |
high | 规定高值 |
value | 当前值 |
progress
显示某个任务完成进度
progress属性 | 含义 |
---|---|
max | 最大值 |
value | 当前值 |
- 新增列表标签
datalist
用于搜索框关键字提示
<input type="text" list="selectcont">
<datalist id="selectcont">
<option>dd</option>
</datalist>
details
用于展示内容答案,对专有名词解释
<details>
<summary>执魔</summary>
<p>小说,作者我是墨水</p>
</details>
summary
写在details里,用于指定名词或问题
- 新增文本标签
文本注音ruby
<ruby>
<span>拼音</span>
<rt>pin yin</rt>
</ruby>
文本标记mark
,w3c建议用于搜索显示的关键字
- 新增表单控件属性
属性 | 含义 |
---|---|
placeholder | 提示文字,适用于文字输入类的表单控件 |
required | 必填项,适用于除按钮外表单控件 |
autofocus | 自动获取焦点 |
autocomplete | 自动完成,可以设置off或on,适用于文字输入类表单控件,密码框、多行输入框不可用 |
pattern | 正则表达式,适用文本输入类表单控件, 多行输入不可用,空的表单不会验证,往往与required配合使用 |
- input新增type属性值
type取值 | 含义 |
---|---|
提交时进行邮箱格式验证 ,为空不验证 | |
number | 数字类型,为空不验证 |
url | URL类型,为空不验证 |
search | 搜索框 |
tel | 移动端输入唤起数字键盘 |
range | 默认50,提交时范围类型验证 |
color | 颜色 |
date | 日期 |
month | 月 |
week | 周 |
time | 时间 |
datetime-local | 日期+时间 |
- form新增属性
novalidate
表单所有输入不验证 - 新增视频标签
video
video属性 | 含义 |
---|---|
src | 视频地址 |
controls | 显示视频控件 |
muted | 静音 |
autoplay | 自动播放 |
loop | 循环播放 |
poster | 视频封面 |
preload | auto/metadata/nono,metadata仅预先获取视频原数据(如长度),auto下载整个文件,如果设置autoplay,忽略该属性 |
width | 宽 |
height | 高 |
- 新增音频标签
audio
audio属性 | 含义 |
---|---|
src | 视频地址 |
controls | 显示视频控件 |
muted | 静音 |
autoplay | 自动播放 |
loop | 循环播放 |
preload | auto/metadata/nono,metadata仅预先获取视频原数据(如长度),auto下载整个文件,如果设置autoplay,忽略该属性 |
- 新增全局属性(了解)
属性 | 含义 |
---|---|
contenteditable | 是否可被编辑,值类型布尔值 |
draggable | 是否可被拖动,值类型布尔值 |
hidden | 隐藏,不占位 |
spellcheck | 拼写检查,值类型布尔值 |
contentmenu | 规定鼠标右键显示内容 |
data-* | 储存页面私有数据 |
- 部分兼容性处理
设置IE总是使用最新文档模式进行渲染
<meta http-equiv="X-UA-compatible" content="IE=Edge">
默认使用webkit内核进行渲染,针对360等双核浏览器
<meta name="rendener" content="webkit">
使用html5shiv
让低版本浏览器认识h5语义化标签
<!--[if lt ie 9]>
<script src="html5shiv"></script>
<![endif]-->
lt
小于 ,lte
小于等于,gt
大于 ,gte
大于等于,!
否
html5shi
资源Google 资源库:
http://html5shiv.googlecode.com/svn/trunk/html5.js
html5shi
资源百度静态资源:
http://apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js