H5 新标签
1. 语义化标签
1.1 新增布局标签
header
:整个页面,或部分区域的头部,双标签。footer
:整个页面,或部分区域的底部,双标签。nav
:导航,双标签。article
:文章、帖子、杂志、新闻、博客等,双标签。section
:页面中某段文字或文章中某段文字(通常包含标题),双标签。aside
:侧边栏,双标签。
关于 article 和 section:
- article 里面可以有多个 section。
- section 强调分段或分块,如果想将一块内容分成几段,可以考虑使用 section。
- article 更强调独立性,一块内容如果比较独立,比较完整,应该用 article。
1.2 新增状态标签
1.2.1 meter 标签
语义:定义已知范围内的标量测量,如电量、磁盘用量,双标签。
常用属性:
max
:规定范围最大值。min
:规定范围最小值。high
:规定范围高值。low
:规定范围低值。optimum
:规定最优值,通常值在 high ~ max 之间。value
:规定当前值。
html
<meter max="100" min="0" value="10" low="20" high="80" optimum="90"></meter>
1.2.2 progress 标签
语义:显示某个任务完成的进度,一般用于进度条,双标签。
常用属性:
max
:规定目标值。value
:规定当前值。
1.3 新增列表标签
datalist
:用于搜索框的关键字提示,双标签。details
:用于展示问题和答案,或对专有名词进行解释,双标签。summary
:写在 details 里面,用于指定问题或专有名词,双标签。
html
<form action="#">
<input type="text" list="myData">
<button>搜索</button>
</form>
<datalist id="myData">
<option value="周杰伦">周杰伦</option>
<option value="周冬雨">周冬雨</option>
<option value="马冬梅">马冬梅</option>
<option value="伦子">伦子</option>
</datalist>
html
<details>
<summary>如何一夜暴富?</summary>
<p>买彩票</p>
</details>
1.4 新增文本标签
1.4.1 文本注音
ruby
:包裹需要注音的文字,双标签。
rt
:写注音,rt
标签写在 ruby
里面,双标签。
html
<ruby>
<span>魑魅魍魉</span>
<rt>chi mei wang liang</rt>
</ruby>
1.4.2 文本标记
mark
:用于标记文字,W3C 建议标记搜索结果的关键字,双标签。
2. 表单功能
2.1 表单控件新增属性
placeholder
:提示文字(不是默认值,value 是默认值),适用于文字输入类表单控件。required
:表示该输入项必填,适用于除按钮外的其它表单控件。autofocus
:自动获取焦点,适用于所有表单控件,一般用于文字输入类。autocomplete
:自动完成,可以设为on
或off
,适用于文字输入类表单控件,密码输入框、多行输入框不可用。pattern
:填写正则表达式,适用于文本输入类表单控件,多行输入不可用,往往与required
配合使用。
2.2 input 新增属性值
email
:邮箱类型的输入框,表单提交时会验证格式。url
:url 类型的输入框,表单提交时会验证格式。number
:数字类型的输入框,表单提交时会验证格式。search
:搜索类型的输入框,表单提交时不会验证格式。tel
:电话类型的输入框,表单提交时不会验证格式,在移动端使用时,会唤起数字键盘。range
:范围选择框,默认值为 50,表单提交时不会验证格式。color
:颜色选择框,默认值为黑色,表单提交时不会验证格式。date
:日期选择框,默认值为空,表单提交时不会验证格式。month
:月份选择框,默认值为空,表单提交时不会验证格式。week
:周选择框,默认值为空,表单提交时不会验证格式。time
:时间选择框,默认值为空,表单提交时不会验证格式。datetime-local
:日期时间选择框,默认值为空,表单提交时不会验证格式。
2.3 form 标签新增属性
novalidate
:表单提交时不进行验证。
3. 多媒体标签
3.1 视频标签
<video>
标签用来定义视频,双标签。
属性:
src
:视频来源地址。width
:设置视频播放器宽度。height
:设置视频播放器高度。controls
:显示视频控件,如播放/暂停按钮。muted
:视频静音。autoplay
:自动播放,通常需要设置静音才生效。loop
:循环播放。poster
:视频封面地址。preload
:视频预加载,设为none
不预加载,metadata
仅预先获取视频的元信息,auto
预下载整个视频文件。
3.2 音频标签
<audio>
标签用来定义音频,是双标签。
属性:
src
:音频来源地址。controls
:显示音频控件,如播放/暂停按钮。autoplay
:自动播放,通常需要设置静音才生效。muted
:静音。loop
:循环播放。preload
:音频预加载,设为none
不预加载,metadata
仅预先获取音频的元信息,auto
预下载整个音频文件。
4. H5 兼容性处理
- 方式一:添加元信息,让浏览器处于最优渲染状态。
html
<!-- 设置IE总是使用最新的文档模式进行渲染 -->
<meta http-equiv="X-UA-compatible" content="IE=Edge">
<!-- 优先使用 webkit 内核进行渲染,针对国产双核浏览器 -->
<meta name="renderer" content="webkit">
- 方式二:使用
html5shiv.js
让低版本浏览器认识 H5 的语义化标签。
html
<!--[if lt ie 9]>
<script src="./js/html5shiv.js"></script>
<![endif]-->
拓展:
lt
:小于。lte
:小于等于。gt
:大于。gte
:大于等于。