作为网络开发人员，您可能会在整理下一个网站制作时利用各种不同的标签。机会是很高，你是早已在一些HTML5如推出了俗称标签的精通<article>，<header>以及<footer>，但你可能不知道的一些，你可以趁着鲜为人知/边缘情况标签。
这些标签中的一些是HTML5中全新的，或者已经从HTML4规范重新使用。从HTML4重用的标签可能看起来很熟悉，但是它们被赋予了新的含义，并且在如何使用它们方面有所改变。
对于每个标签，我们将通过W3C规范说明并应用一个实际的例子来展示如何使用它。来吧!
1 -上下文突出显示<mark>
标签的规范说，这个标签应用于表示“相关性”或“仔细检查”。
“相关性”很难形容。当我们进行活动时，元素和文字是相关的，它们在当时对我们有用(或者将来可能会有用)。
例如，如果您使用关键字“jQuery”搜索了一些网站，并显示了几篇文章，则可以将<mark>标记中的匹配包裹。标记标签的目的是对浏览器说“嘿，这里的东西与你正在做的事情有关”。
实际例子
我们可以使用标记标记来突出显示相关内容。为了说明，请考虑以下情况：
我们在一个名为“便宜的度假套餐”的页面上，它显示了按价格范围排序的假日套餐网格。它从便宜的顶部开始到底部贵的。
对于顶级假期，价格本身可以突出显示<mark>标签，因为我们来到这个页面的便宜的假期交易，这是便宜的页面提供 - 它们是相关的。
对于前两个结果，价格(这是我们关注的)包裹在<mark>标签内。然而，第三个结果 - 这是更昂贵 - 没有标记，因为它不如其他相关。
佳做法和注意事项
虽然人们通常将此标签与快速的方式相关联，但这并不正确。它不应该只是为了造型的目的，你应该是另一个元素像<spn>这样。
不要使用此标签来表示文本重要性或强调强度 - 这就是<strong>标签应该使用的。使用时<mark>，要查明有关的东西给当前用户。
作为辅助功能的附注，使用Windows 高对比度模式时，浏览器会显示标记亮点，因此在这方面也很好。
2 - 重要性较低<small>
你以前可能已经使用过这个标签。它完全符合你的想法，这将使你的文本更小。虽然浏览器可能会使您的文本更小，但这实际上是使用小标签的副产品，而不是其语义含义。
该标签的规范说明应该使用此标签来降低文本或信息的重要性。浏览器通过使字体更小，从而影响较小。
当涉及到内容或信息时，该标签应用于表示低重要性。低重要性的信息通常在网站的页脚或侧边栏(远离页面的主要内容)中使用。
实际例子
总体来说，您对标签的使用应该对浏览器说： “这个内容在这个宏伟的计划中并不重要。” 例如，在页脚中，您可以将其用于您的合法归属和版权：
总的来说，如果你想让某些东西被认为是较低的重要性<small>。不要仅仅使用它来控制元素的大小。
佳做法和注意事项
您不能降低受到<strong>或<em>标记影响的内容的重要性或重点。标记样式可能会影响其视觉外观(取决于浏览器)，但不会影响其语义。
3 - 报价<q>与<blockquote>
虽然您可能使用风格<div>或包围您的报价，更好的方法是使用<q>或<blockquote>标签。这两个都是用于外部引用(当你引用某些东西)时，但是它们在使用它们方面有所不同。
根据规范，<q>标签应用于定义文本的“短内联报价”。
<blockquote>另一方面，标签应该用于大范围的文字。
在实践中，您应该使用<q>标签的较小的引号，并<blockquote>用于其他一切。请记住，这些仅用于报价或资源，不应仅用于风格目的(使用跨度)。
实际例子
让我们来看看我们如何使用这两个标签。
如果您有小报价，请使用<q>：
如果你有更长的报价，或者更复杂的话，你可以用<blockquote>标签把它包装起来：
对于上述示例，我们使用<blockquote>标签包装了一个长的报价，并提供了cite属性(资源的链接)和标<cite>签(解释了这个资源是什么)。
佳做法和注意事项
这两个引用元素都可以支持cite属性和cite元素。
cite属性指定相关资源本身的URL(例如链接到该引用的网站的链接)。引用标签应用于指定作品的标题。有一些关于如何使用引用属性和<cite>标签的争论，但总体来说，我一直发现使用它们，就像这样工作正常。
4 - 插入<ins>，删除<del>和更正<s>
当您使用处理已更改内容或其相关性已更新的内容时<ins>，该标签<del>和<s>标签很有用。
该<ins>标签定义了近添加到文档中的文本 - 它代表新的内容。您可以使用此标签来标记已添加的文本或内容中更新相关性的文字。
该<del>标签定义已经从文档中删除文本，它代表被删除内容。即使它表示删除的内容，但它仍然在文档中实际存在，作为删除内容的记录。
这两个标签支持两个可选属性 - cite用于链接到解释此更改的资源的datetime属性以及发生这种情况的属性。datetime必须是有效的datetime字符串，不幸的是不是很容易理解。如果你很忙，你可以欺骗和使用时间戳生成器。
当您希望为添加或删除提供上下文时，这些属性很有用。您可能会在更新日志和修订列表中看到这一点，作者列出了所有更改，并提供了有关这些更改发生的原因的详细信息。
该<s>标签是类似而是定义文本不再正确。这被用来表示浏览器包装的文本不再相关了，通常后面是它的替换文本(例如，标记中包含的新内容)。此标签通常会以透明文字的形式呈现，以表明它不再相关。您不应该仅仅为了风格目的而使用(但是您可以轻松地做到这一点)。
实际例子
想象一下，您有一个您正在开发的插件的更改列表。在您的发布日志页面上，您可以使用<ins>标签和属性来概述您的新更新。
下一个例子，展示如何使用<del>标签是在一个笔记应用程序。当内容不再存在(并且不被替换)时，应使用此标签。
您可以看到我们的两个任务已经完成，因此它们已被包装在<del>标签中。这向用户(和浏览器)显示内容不再存在。我们提供了datetime属性，因为它实际上是一个方便的数据，以继续考虑我们正在跟踪任务完成。
该<s>标签适用于当内容已被删除，然后更新时，例如在更正文档时：
在上面的例子中，我们已经修改了几条信息，在可能的情况下引用了我们<s>标签中的引用URL 。
5 - 选项选项<optgroup>
这个标签是古老的标签之一，但奇怪的是它仍然被开发人员忽视。
该<optgroup>标签是内使用<select>表单控件标签来帮助分类的各种<options>元素。如果您在选择范围内有几十个(或数百个)选项，那么将其分类为本地格式的功能非常方便。该<optgroup>标签必须是内部<select>元件和包含两个属性- label，作为被打开的列表，并当可视标签看出其作用disabled，其使用时可以确保没有一个选项的内部也可以进行选择。
optgroup本身不能被选择，不能被风格化(至少不是以任何跨浏览器兼容的方式)。
实际例子
当您使用该标签时，该元素可以在任何情况下运行。例如考虑电子商务网站上的计算机价格范围的下拉列表。
这里有一个例子，您可以使用该disabled属性来禁止一系列选项(尽管没有什么真正阻止人们从中删除此属性，因此不要依赖它进行验证)。
在下面的示例中，您不应该选择“西海岸 - 澳大利亚”optgroup中的任何内容。
热点新闻
前端开发技术库
