Skip to content

H5 新标签

1. 语义化标签

1.1 新增布局标签

  • header:整个页面,或部分区域的头部,双标签。
  • footer:整个页面,或部分区域的底部,双标签。
  • nav:导航,双标签。
  • article:文章、帖子、杂志、新闻、博客等,双标签。
  • section:页面中某段文字或文章中某段文字(通常包含标题),双标签。
  • aside:侧边栏,双标签。

关于 article 和 section:

  1. article 里面可以有多个 section。
  2. section 强调分段或分块,如果想将一块内容分成几段,可以考虑使用 section。
  3. 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:自动完成,可以设为 onoff,适用于文字输入类表单控件,密码输入框多行输入框不可用。
  • pattern:填写正则表达式,适用于文本输入类表单控件,多行输入不可用,往往与 required 配合使用。

2.2 input 新增属性值

  • email邮箱类型的输入框,表单提交时会验证格式。
  • urlurl 类型的输入框,表单提交时会验证格式。
  • 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:大于等于。

最后更新于: