速记H5的新标签

293 阅读4分钟

一直有面试官问,h5的新标签有哪些?一直记不住,今天整理了一下,发现其实蛮好记得。将其分类就好了;这里我只写一下,大部分浏览器都支持的

语义化标签

我们从一个网页的头记忆到尾 那么首先就是header

  1. header 定义文档的页眉
    一般用的话,应该就会把h标签什么的放在里面,介绍文章信息
  2. nav 定义导航链接
    基本上就是a标签在里面。分类,模块什么的
  3. article 定义文章,
  4. section 定义文档中的节(section、区段)。比如章节、页眉、页脚或文档中的其他部分。
    属性 cite section 的 URL,假如 section 摘自 web 的话。应该类似cite标签吧。我基本没见过使用。。。
  5. footer 定义文档或节的页脚, 元素应当含有其包含元素的信息。 页脚通常包含文档的作者、版权信息、使用条款链接、联系信息等等。您可以在一个文档中使用多个 元素。
  6. figcaption 定义figrue的标题
  7. figure 规定独立的流内容(图像、图表、照片、代码等等)。figure 元素的内容应该与主内容相关,但如果被删除,则不应对文档流产生影响。

简单脚本标签

  1. meter 已知范围或分数值内的标量测量。也被称为 gauge(尺度)。 例子:磁盘用量、查询结果的相关性,等等。 IE不支持

form 规定 <meterl > 元素所属的一个或多个表单。 hight 规定被视作高值的度量 low 规定被视作低值的度量 max 最大值 min 最小值 value 当前值 optimum 设定最优值的地方

大概是这个样子的:
min--low-optimum-height-max

<meter min="0" low="45" height="80" max="100" value="90">90</meter>
<meter min="0" low="45" height="80" max="100" value="90">75</meter>
<meter min="0" low="45" height="80" max="100" value="90">35</meter>
  • 90
  • 75
  • 35
  1. progress 表进度条 请结合 <progress> 标签与 JavaScript 一同使用,来显示任务的进度。

max 最大值 value 当前进度

<progress max="100" value="75">75</progress>
<progress>
  • 75
  1. output 标签定义不同类型的输出,比如脚本的输出。IE不支持

for 定义输出域相关的一个或多个元素 form 定义输入字段所属的一个或多个表单 name 对象唯一标识符

<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0
<input type="range" id="a" value="50">100
+<input type="number" id="b" value="50">
=<output name="x" for="a b"></output>
</form>
0 100 + = 50 这里的output好像被限制了,并不能自动变化了

音 画 动态标签

  1. audio 音乐标签
  2. canvas 画图的 这个可以看我的速记canvas系列
  3. video 视频的
  4. source audio和video的资源标签,避免浏览器不支持单一资源格式
  5. track 视频字幕啥的

增强系标签

  1. datalist 输入时的自动补全,或者提示功能吧
<input list="cars" />
<datalist id="cars">
	<option value="BMW">
	<option value="Ford">
	<option value="Volvo">
	<option value="aMW">
</datalist>
  1. details 创建一个挂件,被展开才显示内容
  2. summary details的标题,或者说显示出来的部分 这两个都不支持IE和Edge
<details>
    <summary>详情请看</summmary>
    <p>也没啥东西</p>
</details>
详情请看

也没啥东西

  1. mark 定义标识,高亮文本
  2. wbr 定义单词换行的方,就是那种长单词

新元素

  1. aside 表示一个和其余页面内容几乎无关的部分,被认为是独立于该内容的一部分并且可以被单独的拆分出来而不会使整体受影响。其通常表现为侧边栏或者标注框(call-out boxes)。

  2. bdi 定义文本方向

  3. embed 将外部内容嵌入文档中的指定位置。此内容由外部应用程序或其他交互式内容源(如浏览器插件)提供。

  4. ruby rt rp 东亚文字的拼音或注释 rt是上部的拼音,rp是不支持rt的时候出来的

<ruby>
  <rb>漢</rb>字
  <rp>(</rp><rt>han</rt>zi<rp>)</rp>
</ruby>
<ruby>
  汉 <rp>(</rp><rt>han</rt><rp>)</rp>
  字 <rp>(</rp><rt>zi</rt><rp>)</rp>
</ruby>
漢字 (hanzi) (han)(zi)

摘自

  • [MDN]
  • [W3C]