1.新增语义化标签
新增布局标签 | |
header | 头部 |
footer | 底部 |
nav | 导航 |
aside | 侧边栏 |
article | 文章、帖子、杂志、新闻、博客、评论等 |
section | 页面中的某段文字或文章只能的某段文字,(文字里面通常会包含标题) |
artice 和section 区别
1.articele里 可以有多个 section
2. section 强调的是分段或分块
3.articele 比 section更强调独立性
新增状态标签 | |
meter 电量 | high low max规定最大值 min规定最小值 optimum最优值 value当前数值 |
progress | 显示任务完成进度 |
新增列表标签 | |
datalist | 用于搜索框的关键字提示 |
datails | 展示问题和答案,对专用名词进行解释,配合summary使用 |
summary | 写在datails里面,用于解释名词等 |
新增文本标签 | |
ruby rt | 名词 和拼音 ,名词ruby写上面 rt拼音写下面,呈现的是 上面拼音下面文字 |
mark | 文本标记,标记搜索结果中的关键字 |
2.新增表单标签
表单控件新增属性(像是hidden等属性) | ||
placeholder | 提示文字 | 用于文字输入类表单控件 |
required | 必填选项 | 用于除按钮外的其他表单控件 |
autofocus | 自动获取焦点 | 用于所有 |
autocomplete:on或者off | 自动输入(保留输入的记录) | 需要开启浏览器的保存并填写地址 |
pattern | 正则表达式 | 用于文本输入类 表单控件 |
input新增的type属性值 | ||
type=xxx | ||
邮箱 | 一定要写name | |
url | 网址 | |
number | 数值 | 可以设置max min 最大最小值,step 每次增加的多少 |
tel | 电话 | 只能作用在手机上 |
range | 范围 | |
color | 颜色 | |
data | 日期 | |
month | 月份 | |
week | 周 | |
time | 时间 | |
datetime-loacl | 日期+时间 |
form上的属性 novalidate 不验证数据
3.多媒体标签
视频标签 video | ||
src | 地址 | |
width height | 宽高 | |
controls | 显示视频控制控件 | |
muted | 视频静音 | |
autoplay | 自动播放 | 自动播放需要禁音才行, 没有静音是因为 媒体参与度高 |
loop | 循环播放 | |
poster | 视频封面 | |
preload | 视频预加载 | none 不预加载 metadata 只获取视频元数据,例如视频长度等 auto 自动加载 |
音频标签 audio | ||
controls | 显示音频控制控件 | |
muted | 禁音 | |
autoplay | 自动播放 | |
loop | 循环播放 | |
preload | 音频预加载 | none 不预加载 metadata 只获取视频元数据,例如视频长度等 auto 自动加载 |
音频和视频相比就少了 宽高 和 封面
4.新增全局属性(了解即可)
contenteditable:true /false | 可编辑 |
draggable :true /false | 可被拖动 |
hidden | 隐藏元素 |
spellcheck :true /false | 对元素进行拼写和语法检查 |
contextmenu | 规定元素的上下文菜单,在用户鼠标右键点击元素时显示。 |
data-* | 自定义属性 |
5.h5兼容性处理
1.添加元信息,让浏览器处于最优渲染模式
<!--设置IE总是使用最新的文档模式进行渲染-->
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<!--优先使用 webkit ( chromium ) 内核进行染,针对369等壳浏览器--><meta name="renderer" content="webkit">
2.使用 htm15shiv 让低版本浏览器认识 H5 的语义化标签
<!--[if lt ie g]>
<script src="../sources/js/html5shiv.js"></script>
<![endif]-->