使用自定义HTML标签

Question

在我的HTML中，我想知道是否可以像使用<h1>一样使用唯一标识符，例如<toys>。例如：

我想要：

<toys class="grid_4 push_2">&nbsp;</toys>

使用以下CSS：

toys {
  background: url("toys.png") no-repeat scroll 0 0 transparent;
  width: 181px;
  height: 93px;
  margin-top: -8px;
}

我目前有:

<h1 class="grid_4 push_2">&nbsp;</h1>

使用以下CSS：

h1.push_2 {
  background: url("toys.png") no-repeat scroll 0 0 transparent;
  width: 181px;
  height: 93px;
  margin-top: -8px;
}

使用类似于 <toys> 的唯一标识符是否在语义上是正确的？

- Noob

---

除了关于维护的更大问题之外，如果对于你的目标受众来说能够正确显示，并且是有效的、语义正确的HTML代码。 - worc

采用组件化的方法是可以的（例如React和AngularJs组件）。然而，我不建议在一般情况下使用它（即没有概念支持就随意添加新标签）。 - Bernardo Dal Corno

你的自定义标签（元素）不能命名为"toys"，而应该使用<the-toys>以避免与未来标准命名冲突。你的自定义元素名称必须包含连字符（https://www.w3.org/TR/custom-elements/#custom-element-conformance）。 - comeGetSome

Answer 1

这些回答大多是好的普遍建议，但并不是完整回答这个问题，而我认为这个问题是完全合理的。

HTML5已经是一个不断发展的目标；浏览器以不同的速度实现规范和创新。没有一种叫做“有效 HTML”的单一东西，至少值得使用。如果您正在为地球上所有人和机器人/网络爬虫构建公共页面，那么您已经必须要 A) 检测客户端并相应地进行定制，用于复杂/高级页面或 B) 使其非常简单明了。另一方面，如果您将其放在LAN上或隐藏在登录墙后或开发最前沿并计划经常更新，则应自由创新，恰当地使用。浏览器开发人员和规范撰写人员迎合他们的需求，您也可以这样做。

所以，如果您想要一个自定义标记，请仔细选择（这里我将指出，成为浏览器实现正式规范的可能性是微乎其微），然后就可以去做了。但是为了让您的CSS在IE中能够工作，您必须像html5shim那样在JavaScript中调用document.createElement('toys')。

我还应该补充说，自定义元素正在获得它们自己的标准和支持，但目前的共识是它们所有应该在名称中加入'-'。因此，我建议选择类似于“x-toys”或“my-toys”而不仅仅是“toys”。个人而言，我对这种约定并不满意，但我理解其中的原因。

- Nathan Bubna

---

非常好的答案，特别是关于在Internet Explorer浏览器中调用*createElement()*的部分。 - Cypher

标签包含一个标签名称，给出元素的名称。HTML元素都有名称，只使用U+0030数字零（0）到U+0039数字九（9），U+0061拉丁小写字母a到U+007A拉丁小写字母z和U+0041拉丁大写字母A到U+005A拉丁大写字母Z中的字符。在HTML语法中，标记名称，即使是用于外部元素的名称，也可以用任何混合大小写字母编写，当转换为全小写时，与元素的标记名称匹配；标记名称不区分大小写。 - Tigerware

似乎负号并不被官方允许，但在某些浏览器中可能会起作用。 - Tigerware

只使用 toys- 就可以了，因为 W3C 自己在使用 <c-> 进行代码高亮。 - BarryCap

Answer 2

最好避免使用自定义标签，因为你永远不知道这些标签在未来会不会被标准化，并具有特殊的用途。

如果您想避免使用标题标签，则最好采用以下方法：

<div class="toys grid_4 push_2">&nbsp</div>

.toys {
    background: url("toys.png") no-repeat scroll 0 0 transparent;
    width: 181px;
    height: 93px;
    margin-top: -8px;
}

此外：

如果您在设计页面时不使用标准的HTML标签，那么当禁用样式时它们将无法以任何有组织的方式显示。这并不是一个问题，但如果出于任何原因您需要查看“玩具”列表而没有样式，则除非您使用带有<li>标记的<ul>或<ol>，否则您将无法找到。

更新：

正如Flimzy在评论中指出的那样，自定义HTML元素现在有了自己的W3C规范，但它们尚未得到完全支持。

• 规范：https://www.w3.org/TR/custom-elements/
• 支持情况：http://caniuse.com/#feat=custom-elements

- cwharris

---

谢谢你。你澄清了使用自定义HTML标签可能会出现的问题。 - Noob

那么我想问，标签的存在有什么意义呢？它们不应该提供语义化的含义吗？很有趣的是，XHTML代表可扩展HTML，但每当你扩展它并且你的标记无法验证时，所有人都会感到恐慌。 - lukemh

我不认识任何一位优秀的网络开发人员，他们认为XHTML比标准的、格式正确的、封闭标签的HTML更好。实际上，我相信很多新的开发人员认为XHTML代表XML-HTML，因为它比以前的HTML标准更符合XML标准。回答您的问题，标签确实提供语义意义。HTML文档是某些数据的视图，不是数据本身。因此，标签为它们所表示的数据的展示方式提供了语义含义。"div"表示分割，"p"表示段落，"section"表示章节等。 - cwharris

按照相同的逻辑，我应该避免在 C 中使用函数和变量，因为我永远不知道那些符号在未来可能成为保留字。我怀疑“toys”将成为HTML标准标记的可能性很小，如果它确实成为标记，我们可以希望一个积极主动、能力强的网站管理员会轻松地使用s/toys/my-toys/g进行更改。使用和样式化自定义标记可以大大简化和澄清标记。 - Sam Watkins

最好避免使用自定义标签，因为你永远不知道这些标签何时会被标准化...这个建议现在已经过时了，因为可以明确地允许使用自定义标签，并且在名称中使用“-”可以保证它们永远不会被标准化。 - Jonathan Hall

Answer 3

你当然可以这样做；但是，一般来说，这不是一个好主意。在许多方面，HTML5正在向类似于通用化的东西发展；虽然支持特定标签，但在不同的浏览器中可能会产生非常不同的结果。

- Tejs

Answer 4

更新（因为所有答案都已过时）：

随着Web组件API被实现在每个主要浏览器中，我认为你将无法避免在未来使用自定义标签。我认为Web组件很容易成为主流。整个理论是建立在它上面的：自定义标签，自定义属性，自定义JS附加到这些元素。

所以我想说的是：现在使用自己的标签并不是一件坏事，但你仍然需要考虑与SEO相关的构建。

- wintercounter

Answer 5

如果您定义一个标签，并且在样式表中定义了它的作用，那么这应该是一致的吧？即使您的新标签后来变为标准化，您的样式表也会覆盖标准 - 毕竟这就是样式表的作用。

例如，我经常需要控制页面上的换行。与其使用笨拙的

<span style="white-space:nowrap">bla bla bla</span>

每次，我都会将我的未损坏的文本放在自己的

标签中，并在我的样式表中定义：

nbr {
  white-space:nowrap;
}

so

<p> This is some text. <nbr>This is some more text.</nbr></p>

如果有足够的空间，第一句话将在一行上显示，否则第二句话将出现在下一行。需注意，这适用于除旧版IE以外的所有浏览器。为确保效果，请在每个页面的 [head] 部分添加以下代码（在WordPress中，只需添加到主题的header.php文件中即可）：

<!--[if lt IE 9]> 
<script> document.createElement('nbr'); </script>
<![endif]-->

还是我漏看了什么吗？

- Steve GS

---

是的，你少了些东西。"即使你新的标签后来成为了标准，你的样式表也会覆盖标准" 这种想法非常幼稚。举个现实世界的例子，让我们来看 <picture> 元素。如果你在样式表中只有类似 white-space:nowrap 这样的东西，你将无法覆盖这个元素的所有默认样式，在支持它的新浏览器中，你的文档会糟糕地崩溃。所以不要这样做。要么为你自己设计的元素使用推荐的命名协议（例如带有破折号的 <n-br>），要么将它们放在你自己选择的命名空间中（<my:nbr>）。 - Mr Lister

我同意为了我喜欢具有特定属性的“layout”标签而这样做。 - Dustin Poissant

Answer 6

是的，从语义上讲，那是正确的。

然而，它是无效的语法，因为HTML有一组定义好的标签。

在某些浏览器中，您可以绕过这个问题。

话虽如此，这样做有什么好处呢？这只会使维护源代码的人受益。

顺便说一下，您提出的基本上就是XML的内容。

- DA.

Answer 7

我也同意原贴作者的观点，自定义元素可能比 CSS 类和 ID 更好。例如，我有一个朋友在 Google Sheets 中管理其库存和网站内容。Google Sheets 数组输出只是纯文本。(前端 HTML 使用 JS 从 GSheets 检索内容)。因此，我设置了自定义标签，例如 <sale>，以更改字体颜色和样式，这样我的朋友就可以在 Google Sheets 中插入这些标签来自定义字体，而不需要懂编程。太棒了。

- nms553

Answer 8

我同意@superUntiled的观点，你应该充分利用CSS选择器（类和ID）。所以如果你有一个类型为“玩具”的对象，你应该为该对象创建一个类。然后你可以使用选择器.toy仅使用CSS选择所有你的汽车。

就像这样：

<style>
.toy {
    color: red;
}
</style>

<p class="toy">My little car</p>

- PachinSV

Answer 9

如果您的文档类型设置为XHTML，那么应该没问题。但是对于HTML文档类型来说通常不合法。

- Shaz

---

XHTML是老式的。请查看HTML5规范。 - BerggreenDK

@BerggreenDK：我理解这一点，也从未建议使用它。 - Shaz

Answer 10

你不想自己创造标签。

HTML 标签在 HTML 规范中定义。

而不是：

<h1 class="grid_4 push_2">&nbsp</h1>

你应该这样做：

<h1 class="toys">&nbsp</h1>

然而，如果使用XML，您可以自己创建标签。

但请注意，并非所有浏览器都支持您的标签，并且您将无法使用CSS对其进行样式设置。

新的HTML5标签也面临同样的问题。

- PeeHaa