使用自定义 HTML 标签
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5970093/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Using custom HTML Tags
提问by Noob
In my html I was curious if it was semantically correct to use unique identifiers such as <toys></toys>to hold an image rather than an <h2>. For example:
在我的 html 中，我很好奇使用唯一标识符（例如<toys></toys>保存图像而不是<h2>. 例如：
Is it preferred to have:
<toys class="grid_4 push_2"> </toys>
是否更喜欢：
<toys class="grid_4 push_2"> </toys>
with the css:
使用CSS：
toys {
background: url("toys.png") no-repeat scroll 0 0 transparent;
width: 181px;
height: 93px;
margin-top: -8px;
}
instead of: I currently have:
<h1 class="grid_4 push_2"> </h1>
而不是：我目前有：
<h1 class="grid_4 push_2"> </h1>
with the css:
使用CSS：
h1 {
background: url("toys.png") no-repeat scroll 0 0 transparent;
width: 181px;
height: 93px;
margin-top: -8px;
}
Is the use of unique identifiers like <toys>semantically correct?
像<toys>语义一样使用唯一标识符是否正确？
采纳答案by cwharris
It is best to avoid using custom tags, as you never know when those tags may become standardized, and have special usage in the future.
最好避免使用自定义标签，因为您永远不知道这些标签何时会变得标准化，并在将来有特殊用途。
The best thing to do for your example, if you want to avoid using the header tags, is the following:
如果您想避免使用标题标签，那么为您的示例做的最好的事情是：
<div class="toys grid_4 push_2"> </div>
.toys {
background: url("toys.png") no-repeat scroll 0 0 transparent;
width: 181px;
height: 93px;
margin-top: -8px;
}
In addition:
此外：
If you do not use standard html tags when designing pages, they will not appear in any organized manner when styles are disabled. This is not a problem, going forward, but if for any reason you needed to view a list of "toys" without styles, you had be out of luck unless you use <ul>or <ol>with <li>tags.
如果您在设计页面时不使用标准的 html 标签，则在禁用样式时它们将不会以任何有组织的方式出现。这是没有问题的，前进的，但如果您有任何理由需要查看的“玩具”名单没有风格，你有遇不可求的，除非你使用<ul>或<ol>与<li>标签。
UPDATE:
更新：
As Flimzy pointed out in the comments, custom HTML elements now have their own W3C specification. However, they are not yet fully supported.
正如 Flimzy 在评论中指出的，自定义 HTML 元素现在有自己的 W3C 规范。但是，它们尚未得到完全支持。
- Specification: https://www.w3.org/TR/custom-elements/
- Support: http://caniuse.com/#feat=custom-elements
回答by Nathan Bubna
Most of these responses are good general advice, but not proper answers to the question, which I think is perfectly legitimate.
大多数这些回答都是很好的一般建议，但不是对问题的正确回答，我认为这是完全合理的。
HTML5 is already a moving target; browsers implement specs and innovate at different paces. There is no single thing called "valid HTML", at least not that is worth using. If you are building a public page for every person and bot/crawler on the planet, then you already either have to A) detect the client and customize accordingly, for complex/advanced pages or B) make it really, really simple and plain. If, on the other hand, you're putting it on a LAN or hiding it behind a login wall or developing on the cutting edge and plan for frequent updates anyway, then you should feel free to innovate a bit, with discretion. Browser devs and spec writers cater to their needs, you can do the same.
HTML5 已经是一个移动目标；浏览器以不同的速度实施规范和创新。没有一种叫做“有效 HTML”的东西，至少不值得使用。如果您正在为地球上的每个人和机器人/爬虫程序构建一个公共页面，那么您已经要么必须 A) 检测客户端并针对复杂/高级页面进行相应的自定义，要么 B) 让它变得非常非常简单明了。另一方面，如果您将它放在 LAN 上或将其隐藏在登录墙后面或在前沿开发并计划频繁更新，那么您应该随意进行一些创新，并谨慎行事。浏览器开发人员和规范编写者可以满足他们的需求，您也可以这样做。
So, if you want a custom tag, choose carefully (here I will point out that the odds that would ever become part of a formal spec of browser implementation are totally negligible), then go for it. To make your CSS work in IE, though, you will have to do as html5shim does and call document.createElement('toys') in your javascript.
因此，如果您想要一个自定义标签，请谨慎选择（在这里我将指出，成为浏览器实现正式规范一部分的可能性完全可以忽略不计），然后就去做吧。但是，要使您的 CSS 在 IE 中正常工作，您必须像 html5shim 一样并在您的 javascript 中调用 document.createElement('toys') 。
I should also add that custom elements are getting their own standards and support, but the consensus currently is that they all should have a '-' in the name. So I would recommend something like 'x-toys' or 'my-toys' instead of just 'toys'. Personally, i'm not thrilled with the convention, but I understand the reasons.
我还应该补充一点，自定义元素正在获得自己的标准和支持，但目前的共识是它们的名称中都应该有一个“-”。所以我会推荐诸如“x-toys”或“my-toys”之类的东西，而不仅仅是“玩具”。就我个人而言，我对公约并不感到兴奋，但我理解其中的原因。
回答by Tejs
You certainly can; however, it's generally not a good ideato do so. In many ways HTML5 is moving to something like that but genericized; having specific tags, while supported can have very different results among different browsers.
你当然可以；但是，这样做通常不是一个好主意。在许多方面，HTML5 正在转向类似但泛化的东西；具有特定标签，虽然受支持在不同浏览器之间可能会产生非常不同的结果。
回答by wintercounter
UPDATE (because all the answers are old):
更新（因为所有的答案都是旧的）：
As of Web components API gets implemented in every major browser, in my opinion, you can't avoid using custom tags in the future. I think Web Components will easily become mainstream. The whole theory is built on it: Custom tags, custom attributes custom JS attached to these elements.
由于 Web 组件 API 已在每个主要浏览器中实现，在我看来，您将来无法避免使用自定义标签。我认为 Web Components 将很容易成为主流。整个理论建立在它之上：自定义标签，自定义属性，附加到这些元素的自定义 JS。
So what i say: it isn't a bad thing to use your own tags nowadays but you still need to consider SEO related building.
所以我要说的是：现在使用自己的标签并不是一件坏事，但您仍然需要考虑与 SEO 相关的构建。
回答by Steve GS
Surely if you define a tag and also define within your stylesheet what it should do, that should tie it up? Even if your new tag later becomes standardised, your stylesheet will override the standard - after all that is what stylesheets are for.
当然，如果您定义一个标签并在您的样式表中定义它应该做什么，那应该把它捆绑起来吗？即使你的新标签后来标准化了，你的样式表也会覆盖标准——毕竟这就是样式表的用途。
For example, I often need to control line breaks on my pages. Rather than use a clumsy
例如，我经常需要控制页面上的换行符。而不是使用笨拙的
<span style="white-space:nowrap">bla bla bla</span>
every time, I enclose my non-broken text within my own tags and define in my stylesheet:
每次，我都会将未损坏的文本包含在我自己的标签中并在我的样式表中定义：
nbr {
white-space:nowrap;
}
so
所以
<p> This is some text. <nbr>This is some more text.</nbr></p>
will appear on one line if there's room, otherwise the second sentence will appear on the next line. Or, to be precise, in all browsers except old versions of IE. To be cast iron, I added the following to each page [head] section (in Wordpress, only need to add to the theme's header.php):-
如果有空间，将出现在一行，否则第二句话将出现在下一行。或者，准确地说，在除旧版 IE 之外的所有浏览器中。为了生硬，我在每个页面的[head]部分添加了以下内容（在Wordpress中，只需要添加到主题的header.php）：-
<!--[if lt IE 9]>
<script> document.createElement('nbr'); </script>
<![endif]-->
Or am I missing something?
或者我错过了什么？
回答by nms553
I also agree with the original poster that custom elements could be a better way than CSS classes and IDs. For example I have a friend who manages his inventory and content for his website in Google Sheets. The google sheets array output is just plain text. (The frontend HTML uses JS to retrieve content from GSheets). Therefore, I set custom tags, such as <sale>, to change font color and style so my friend, who doesn't know coding, can simply insert those tags into the google sheet to customize the font. It's awesome.
我也同意原始海报的说法，即自定义元素可能比 CSS 类和 ID 更好。例如，我有一个朋友在 Google 表格中管理其网站的库存和内容。谷歌表数组输出只是纯文本。（前端 HTML 使用 JS 从 GSheets 检索内容）。因此，我设置了自定义标签，例如<sale>, 来更改字体颜色和样式，因此我不会编码的朋友可以简单地将这些标签插入到谷歌表中以自定义字体。这很棒。
回答by DA.
Yes, that would be semantically correct.
是的，这在语义上是正确的。
However, it's invalid syntax as HTML has a defined set of tags.
但是，这是无效的语法，因为 HTML 有一组已定义的标签。
You can get around that in some browsers.
您可以在某些浏览器中解决这个问题。
That said, what's the benefit of doing that? It really would only benefit the person that has to maintain the source code.
也就是说，这样做有什么好处？它确实只会使必须维护源代码的人受益。
FYI, what you are proposing is pretty much what XML is.
仅供参考，您所提议的几乎就是 XML。
回答by PachinSV
I agree with @superUntiled, you should make good use of the CSS selectors (classes and IDs). So if you have an object of type "toy", you should create a class for that object. Then you could select all your carsusing CSS just using the selector .toy.
我同意@superUntiled，你应该好好利用 CSS 选择器（类和 ID）。因此，如果您有一个“玩具”类型的对象，您应该为该对象创建一个类。然后，您可以cars仅使用选择器来选择所有使用的 CSS .toy。
Something like this:
像这样的东西：
<style>
.toy {
color: red;
}
</style>
<p class="toy">My little car</p>
回答by Shaz
If your doctype is set to XHTML, you should be fine. But it's generally not valid for HTML doctypes.
如果您的 doctype 设置为 XHTML，则应该没问题。但它通常对 HTML 文档类型无效。
回答by PeeHaa
You don't want to make up your own tags.
您不想制作自己的标签。
The HTML tags are defined in the HTML specification.
HTML 标签在 HTML 规范中定义。
In stead of:
代替：
<h1 class="grid_4 push_2"> </h1>
You should do something like:
你应该做这样的事情：
<h1 class="toys"> </h1>
However you can make up you own tags if XML.
但是，如果使用 XML，您可以自行创建标签。
But please note that not all browser support your tag and you won't be able to style them using CSS.
但请注意，并非所有浏览器都支持您的标签，您将无法使用 CSS 设置它们的样式。
Same thing is happening with new HTML5 tags
新的HTML5 标签也发生了同样的事情
