您知道这八个HTML5标签吗？

网站构建期间，Web开发人员在网站构建过程中使用了许多HTML标签。虽然许多人熟悉 ，

和<p></p>>的常见HTML5标签，但一些鲜为人知的标签具有显着优势。 本文探讨了八个这样的标签，检查了其W3C规格并提供了实际示例。 <h1></h1>

>了解html5标签用法

> W3C规格提供概念概述，但实际应用可能具有挑战性。 良好的做法并不总是严格定义；本文提供了推荐的用法示例。

钥匙要点<p></p>

>使用来突出显示与用户活动相关的文本，提高可见性。

>使用

• 对不太重要的文本，最大程度地减少视觉影响。 <mark></mark>>使用
用于简短的内联行情，
• 用于较长的摘录，保持语义精度。<small></small>
实现
• ，<q></q>和<blockquote></blockquote>标记添加，删除和校正，在编辑中有用。
>
• >与<ins></ins><del></del>组合选项，以分类选择，增强用户体验。<s></s>
• <select></select> 1。上下文突出显示，<optgroup></optgroup>

>

标签表示“相关性”或“审查”。 相关性与上下文有关；在特定活动中有用时，元素很重要。例如，搜索结果可以用<mark></mark>标记以指示与搜索查询相关的。 >

实践示例：

在“最便宜的假期套餐”页面上，可以使用<mark></mark>来强调最便宜的套餐的价格：<mark></mark>>

最佳实践：<mark></mark>不应仅用于样式；为此使用CSS。 不要使用它来表示重要性（为此使用 >>）。使用

突出显示与当前用户操作相关。

<code class="language-html"><div class="deal-list">
  <div>
    <h2>Vanuatu Cruise</h2>
    <p><mark>9</mark> - 5 Nights</p>
    <p>A relaxing cruise...</p>
  </div>
  <div>
    <h2>Fiji Resort Getaway</h2>
    <p><mark>9</mark> - 6 Nights</p>
    <p>Includes all you can eat buffet...</p>
  </div>
  <div>
    <h2>Pacific Island Hiking</h2>
    <p>99 - 5 Nights</p>
    <p>Hike your way...</p>
  </div>
</div></code>

2。 <mark></mark>较低的重要性 <strong></strong><em></em>降低了文本大小，其语义含义的视觉副产品：表示较低的重要性。 使用它以获取不太关键的信息，通常在页脚或侧边栏中发现。<mark></mark>>

实践：在页脚中： <small></small> 或产品列表中：

<small></small>

最佳实践：

不能降低已使用 或强调的文本的重要性。 不要仅将其用于尺寸控制。

<code class="language-html"><small>Designed and developed by Simon Codrington. © 2016 My Company - All rights reserved</small></code>

3。带有

和

<code class="language-html"><h3>Woolen Llama Print Jumper</h3>
<em>.99</em><small> - Excludes tax</small></code>

>的报价

>使用<q></q>用于简短的内联报价，<blockquote></blockquote>用于更长的块引号。 这些是用于引号，而不是样式（为此使用<span></span>）。

>

实例：

<q>He hasn't eaten anything as good in his whole life!</q>

<code class="language-html"><div class="deal-list">
  <div>
    <h2>Vanuatu Cruise</h2>
    <p><mark>9</mark> - 5 Nights</p>
    <p>A relaxing cruise...</p>
  </div>
  <div>
    <h2>Fiji Resort Getaway</h2>
    <p><mark>9</mark> - 6 Nights</p>
    <p>Includes all you can eat buffet...</p>
  </div>
  <div>
    <h2>Pacific Island Hiking</h2>
    <p>99 - 5 Nights</p>
    <p>Hike your way...</p>
  </div>
</div></code>

最佳实践：两种支持属性（源的url）和> tags（源标题）。 cite<cite></cite> 4。插入，删除和校正

，

和<ins></ins><del></del><s></s>>

>标记添加了文本，

删除了文本，<ins></ins>文本不再正确。 所有支持<del></del>和<s></s>属性的属性。cite> datetime

实例：

>

>最佳实践：

<code class="language-html"><small>Designed and developed by Simon Codrington. © 2016 My Company - All rights reserved</small></code>

>使用

用于更换原件的校正。不要仅将其用于样式。 <s></s>5。用

组织选项 <optgroup></optgroup>>对

元素中的选项进行分类，从而改善导航。它具有

>和<optgroup></optgroup>>属性。<select></select> label disabled实例：

<strong></strong>最佳实践：

<code class="language-html"><h3>Woolen Llama Print Jumper</h3>
<em>.99</em><small> - Excludes tax</small></code>

本身无法直接选择或定型。

> 6。预定义的选项，带有 <optgroup></optgroup>

>定义了标签的有效选择，提供了下拉建议列表。<datalist></datalist>

实例：

<datalist></datalist> <input>

>最佳实践：

浏览器支持变化；验证取决于>类型。 总之，这些经常被忽视的HTML5标签提供了有价值的语义增强和改进的用户体验。 了解它们的适当使用会导致更清洁，更容易访问和更有效的网络开发。

以上是您知道这八个HTML5标签吗？的详细内容。更多信息请关注PHP中文网其他相关文章！