HTML5新增标签

发表于 | 更新于 | 分类于

标记

  • <wbr>：规定文本中的何处适合换行。表示长度超过当前浏览器窗口的内容适合在此换行。
1
2
3
4
<body>
    <p>HyperTextMarkupLanguage是HTML的缩写。</p>
    <p>HyperText<wbr>Markup<wbr>Language是HTML的缩写。</p>
</body>

  • <ruby>：表示一段包含注音符号的文字。
  • <rt>：标记注音符号。
  • <rp>：标记不支持注音符号特性的浏览器显示在注音符号前后的括号。
1
2
3
4
<body>
    <ruby>饕<rp>（</rp><rt>tāo</rt><rp>）</rp></ruby>
    <ruby>餮<rp>（</rp><rt>tiè</rt><rp>）</rp></ruby>
</body>

  • <bdi>：设置一段文本使其脱离父元素的文本方向。（暂时没找到支持的浏览器）
  • <mark>：定义页面内高亮内容。
1
2
3
<body>
    <div><mark>mark</mark>：定义页面内高亮内容。</div>
</body>

  • <time>：定义日期和时间。
1
2
3
<body>
    <p>This article was posted on <time>2018-12-10</time>.</p>
</body>

内容

  • <figure>：独立元素组，一般为图像、图表、文本等等。
  • <figcaption>：定义 <figure> 的标题。
1
2
3
4
5
6
<body>
    <figure>
        <img src="plato.jpg" width="200px"><br>
        <figcaption>Plato was a philosopher in Classical Greece</figcaption>
    </figure>
</body>

结构

  • <hgroup>：标题组，一般与h1-h6元素组合使用

  • <section>：页面中内容区块
  • <article>：页面中一块独立内容，一般用来定义一篇文章
  • <aside>：定义 <acticle> 以外的内容
  • <header>：页面中内容区块或页面页眉
  • <footer>：页面中内容区块或页面页脚
  • <nav>：页面中导航链接

  • <address>：表示文档或 article 元素的联系信息。
1
2
3
<address>
Written by <a href="mailto:zane.corner@gmail.com">all4one4all</a>.
</address>
  • <details>：生成一个可以展开了解详细内容的区域。
  • <summary>：包含 details 元素的标题。
1
2
3
4
5
6
<body>
    <details>
        <summary>details元素与summary元素</summary>
        <p>details元素与summary元素可以生成一个可以展开了解详细内容的区域。</p>
    </details>
</body>

嵌入

  • <embed>：定义嵌入的内容，交互内容或插件。
  • <progress>：定义进度条。
1
2
3
4
5
6
<body>
    <progress value="0" max="100"></progress> 进度0%<br>
    <progress value="25" max="100"></progress> 进度25%<br>
    <progress value="75" max="100"></progress> 进度75%<br>
    <progress value="100" max="100"></progress> 进度100%
</body>

  • <meter>：定义度量衡。
1
2
3
4
5
<body>
    <meter value="20" min="0" max="100" hight="75" low="25"></meter> 20%<br>
    <meter value="80" min="0" max="100" hight="75" low="25"></meter> 80%<br>
    <meter value="0.8"></meter> 0.5
</body>

  • <video>：嵌入视频文件。
  • <audio>：嵌入音频文件。
  • <source>：嵌入定义媒体资源。
  • <canvas>：嵌入定义图形。
  • <track>：嵌入字幕等外部文件轨道。

表单

  • <datalist>：定义选项列表。
1
2
3
4
5
6
7
8
9
<body>
    your choice: <input list="number">
    <datalist id="number">
		<option value="1">
		<option value="2">
		<option value="3">
		<option value="4">
	</datalist>
</body>

  • <keygen>：生成密钥。
  • <output>：定义不同类型的输出。
1
2
3
4
5
<body>
    <form oninput="result.value=2+Number(y.value)">
        2 + <input type="number" id="y"> = <output name="result" for="x y"></output>
    </form>
</body>

  • <command>：定义命令按钮。（除IE9暂无其他支持的浏览器）