使用自定义 HTML 标签
在我的 HTML 中，我很好奇使用诸如
我想要：
<toys class="grid_4 push_2"> </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"> </h1>
使用 CSS：
h1.push_2 {
background: url("toys.png") no-repeat scroll 0 0 transparent;
width: 181px;
height: 93px;
margin-top: -8px;
}
使用像
In my HTML I was curious if it was semantically correct to use unique identifiers such as <toys> rather than an <h1>. For example:
I wanted to have:
<toys class="grid_4 push_2"> </toys>
With the CSS:
toys {
background: url("toys.png") no-repeat scroll 0 0 transparent;
width: 181px;
height: 93px;
margin-top: -8px;
}
I currently have:
<h1 class="grid_4 push_2"> </h1>
With the CSS:
h1.push_2 {
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?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（10）
这些回复中的大多数都是很好的一般性建议，但不是问题的正确答案，我认为这是完全合理的。
HTML5 已经是一个移动的目标；浏览器以不同的速度实现规范和创新。不存在所谓的“有效 HTML”，至少不存在值得使用的东西。如果您正在为地球上的每个人和机器人/爬虫构建一个公共页面，那么您要么必须 A）检测客户端并相应地定制复杂/高级页面，要么 B）使其变得非常非常简单明了。另一方面，如果您将其放在 LAN 上或将其隐藏在登录墙后面或在最前沿进行开发并计划频繁更新，那么您应该自由谨慎地进行一些创新。浏览器开发人员和规范编写者可以满足他们的需求，您也可以这样做。
因此，如果您想要自定义标签，请仔细选择（在这里我将指出，成为浏览器实现正式规范一部分的可能性完全可以忽略不计），然后就去做吧。不过，要使 CSS 在 IE 中工作，您必须像 html5shim 一样，在 javascript 中调用 document.createElement('toys') 。
我还应该补充一点，自定义元素正在获得自己的标准和支持，但目前的共识是它们的名称中都应该有一个“-”。所以我会推荐“x-toys”或“my-toys”之类的东西，而不仅仅是“玩具”。就我个人而言，我对这次大会并不感到兴奋，但我理解其中的原因。
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.
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.
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.
最好避免使用自定义标签，因为您永远不知道这些标签何时会变得标准化，并在将来有特殊用途。
对于您的示例，如果您想避免使用标题标记，最好的做法如下：
此外：
如果您在设计页面时不使用标准 html 标记，它们将不会出现在禁用样式时的任何组织方式。展望未来，这不是问题，但如果出于任何原因您需要查看没有样式的“玩具”列表，那么除非您使用
或，否则您就不走运了。 >带有标签。更新：
正如 Flimzy 在评论中指出的那样，自定义 HTML 元素现在拥有自己的 W3C 规范。但是，它们尚未得到完全支持。
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:
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.UPDATE:
As Flimzy pointed out in the comments, custom HTML elements now have their own W3C specification. However, they are not yet fully supported.
你当然可以可以；但是，这样做通常不是一个好主意。在许多方面，HTML5 正在向类似的方向发展，但已被通用化。具有特定标签，虽然受支持，但在不同浏览器中可能会产生截然不同的结果。
You certainly can; however, it's generally not a good idea to 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.
更新（因为所有答案都是旧的）：
随着 Web 组件 API 在每个主要浏览器中实现，在我看来，您将来无法避免使用自定义标签。我认为 Web Components 将很容易成为主流。整个理论建立在它之上：自定义标签、自定义属性、自定义 JS 附加到这些元素。
所以我想说的是：现在使用自己的标签并不是一件坏事，但你仍然需要考虑 SEO 相关的建设。
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.
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.
当然，如果您定义了一个标签并在样式表中定义了它应该做什么，那应该将其捆绑起来吗？即使您的新标签稍后变得标准化，您的样式表也会覆盖标准 - 毕竟这就是样式表的用途。
例如，我经常需要控制页面上的换行符。 我不是
每次都使用笨拙的文本，而是将完整的文本包含在自己的标签中，并在样式表中定义：
如果有空间，那么
将出现在一行上，否则第二句话将出现在下一行上。或者，准确地说，在除旧版 IE 之外的所有浏览器中。为了做到铸铁，我将以下内容添加到每个页面的 [head] 部分（在 WordPress 中，只需要添加到主题的 header.php 中）：-
或者我遗漏了什么？
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
every time, I enclose my non-broken text within my own tags and define in my stylesheet:
so
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):-
Or am I missing something?
是的，这在语义上是正确的。
然而，它的语法无效，因为 HTML 有一组定义的标签。
您可以在某些浏览器中解决这个问题。
也就是说，这样做有什么好处呢？它确实只会使必须维护源代码的人受益。
仅供参考，您所提议的内容几乎就是 XML。
Yes, that would be semantically correct.
However, it's invalid syntax as HTML has a defined set of tags.
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.
我同意@superUntiled，你应该充分利用 CSS 选择器（类和 ID）。因此，如果您有一个“玩具”类型的对象，您应该为该对象创建一个类。然后，您可以使用 CSS 选择所有的
汽车，只需使用选择器.toy。像这样的东西：
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.Something like this:
我也同意原始海报的观点，即自定义元素可能是比 CSS 类和 ID 更好的方法。例如，我有一个朋友，他在 Google 表格中管理其网站的库存和内容。谷歌表格数组输出只是纯文本。 （前端 HTML 使用 JS 从 GSheets 检索内容）。因此，我设置了自定义标签，例如
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.如果您的文档类型设置为 XHTML，那么应该没问题。但它通常对 HTML 文档类型无效。
If your doctype is set to XHTML, you should be fine. But it's generally not valid for HTML doctypes.
您不想创建自己的标签。
HTML 标签在 HTML 规范中定义。
而不是：
您应该这样做：
但是，如果 XML，您可以编写自己的标签。
但请注意，并非所有浏览器都支持您的标签，您将无法使用 CSS 设置它们的样式。
新的 HTML5标签
You don't want to make up your own tags.
The HTML tags are defined in the HTML specification.
In stead of:
You should do something like:
However you can make up you own tags if XML.
But please note that not all browser support your tag and you won't be able to style them using CSS.
Same thing is happening with new HTML5 tags