[X]HTML自定义标签：优点和缺点缺点
我想使用一些语义 [X]HTML 标签来代替
渲染时我可能会遇到哪些缺点？使用CSS、JS？
我记得的是：IE6 无法克隆它不认识的标签。
I'd like to use some semantic [X]HTML tags instead of <div>s: <article>, <product>, <footer> etc. Some of them are already presented in the upcoming HTML5, however, it's not fully supported.
Which are the possible cons I might face when Rendering? Using CSS, JS?
The one I remember is: IE6 can't clone tags it doesn't know.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（5）
添加以下 JavaScript 修复程序可使自定义 HTML5 标记在 IE 中工作。事实上，它们在我尝试过的所有其他浏览器中都可以工作。我使用 HTML5 构建了我的网站，虽然它在 IE6 和 7 中看起来不太好，但它仍然有效。以下是您放入模板标头中的代码：
由于 CSS 的语义性质，使用 HTML5 标签可以增强对 CSS 的控制。实际上，制作网站要容易得多，因为如果正确使用标签，它们会更容易理解。
在任何地方使用 div 都很好，因为如果它们有适当的 ID 和类，它们仍然是语义的，但使用 HTML5 标签，您可以更快地识别页面结构。
Adding the following JavaScript fix makes custom HTML5 tags work in IE. In fact they work in every other browser I have tried. I have built my website using HTML5, and although it doesn't look great in IE6&7, it still works. Here is the code you put in your template header:
Using HTML5 tags gives you increased control using CSS due to their semantic nature. It is actually a lot easier making sites, as they are easier to understand if you use the tags correctly.
Using divs everywhere is fine, because if they have appropriate ID's and classes, they are still semantic, but with the HTML5 tags, you can recognize page structure a lot faster.
这个问题提到了“克隆”，所以 IE6 是否可以设置自定义元素的样式（它可以）并不是真正的问题，如果意图是使用 JS 来克隆自定义元素，如果 IE6 无法管理的话（我不这样做）我不知道）。
如果想法只是设置自定义元素的样式，那么每个浏览器都可以做到。由于 IE6，您需要为自定义元素命名，因此并在 HTML 元素中指定命名空间，例如 。
为了在所有浏览器中都完全正确（因此 Javascript 会选择自定义元素），您还需要提供自定义 DTD，以便自定义元素的命名空间一致地工作，因此 然后编写 DTD，不幸的是，这并不是一件小事，并且必须包含对其所替换的 HTML DTD 的完整替换。
因此，在应用自定义 DTD、指定自定义命名空间并应用自定义元素后，它们可以在任何浏览器中设置样式，因此
。
这在所有浏览器中都一致有效，但其价值存在争议。它允许使用一致的有意义的标记和由命名空间明确描述的元素，并且不会因级联而造成样式污染，并避免 div-itis。
然而，它在网络开发中有点像贫民区，涉及复杂性，可能无法得到足够的回报。
The question mentions 'cloning', so whether or not IE6 can style a custom element (it can) isn't really the question if the intention is to use JS to clone custom elements if IE6 can't manage that (which I don't know).
If the idea is just to style custom elements then every browser can do it. Because of IE6 you need to namespace your custom elements thus <prefix:custom /> and specify the namespace in the HTML element thus <html xmlns:prefix="http://domain/path">.
To get it all exactly right in all browsers (and so Javascript picks up on custom elements) you also need to provide a custom DTD, so that the namespacing of custom elements work consistently thus <!DOCTYPE html SYSTEM "http://domain/path/custom.dtd"> and then write the DTD, which unfortunately isn't trivial and has to include a complete replacement for the HTML DTD it replaces.
So after applying a custom DTD, specifying a custom namespace and applying custom elements they can be styled in any browser thus <style>prefix\:custom {background:red;} </style>.
This works consistently across all browsers but is debateable in value. It allows the use of consistent meaningful markup with elements that are clearly delineated by namespace and does not risk pollution of styling by cascading and avoids div-itis.
It is however a bit of a ghetto in web developement involving complexity that may not be sufficiently rewarded.
即使你使用 JS 让 IE 6“识别”HTML5 标签，你仍然会遇到问题，因为 IE 6 不允许嵌套此类标签。
另一方面，如果您的网页不是面向应用程序的，而是纯粹用于演示，那么您也可以使用带有样式的普通旧式 XML。它与传统的页面制作方式略有不同，但在 XML 术语中没有“旧”或“新”标签。
请参阅此页面 -- http://feeds.feedburner.com/blogspot/MKuf（Google 的博客提要）——作为样式化 XML 的示例。 JS 和 DOM API 也能正常工作。
Even if you use JS to make IE 6 "recognize" HTML5 tags, you'll still have problems, since IE 6 will not allow to nest such tags.
On the other hand, if your web page is not application-oriented, but purely for presentation, you could as well use plain old XML with styling. It differs a bit from the traditional way of making pages, but in XML terms there are no "old" or "new" tags.
See this page -- http://feeds.feedburner.com/blogspot/MKuf (Google's blog feed) -- as an example of styled XML. JS and DOM API's work just as well.
这并不能完全回答您的问题，但是
人类可以阅读它并思考“啊哈，这一定是一种产品，在这个购物网站的上下文中意味着我可以购买的东西，因此并不意味着“通过数量相乘获得的数量”，就像在 mathoverflow 上那样.com”。这对于任何阅读代码的人来说都是真正有用的，因此从这个意义上来说它是语义的。
但就计算机将您的页面解析为 HTML 而言（或者人类在浏览器中查看 HTML 页面而不是阅读代码），它只是一个未知标签，因此不会获得任何有用的默认样式（与
标签，它具有很好的边距，使屏幕上的内容可读）或行为（与标签不同，如果您提供它，它是可点击的href属性）。只有当人们通过 HTML5 等规范同意标签的含义时，计算机才会获得语义。
This doesn’t entirely speak to your question, but
<product>isn’t semantic as far as computers are concerned.A human can read it and think “Aha, this must be a product, which in the context of this shopping website means something I can buy, and therefore doesn’t mean ‘a quantity obtained by multiplying quantities’ as it might do on mathoverflow.com”. That’s genuinely useful for any human reading the code, so it’s semantic in that sense.
But as far as a computer parsing your page as HTML is concerned (or a human viewing your HTML page in a browser instead of reading the code), it’s just an unknown tag, and thus won’t get any useful default styling (unlike the
<p>tag, which gets nice margins to make things readable on-screen) or behaviour (unlike the<a>tag, which is clickable if you give it ahrefattribute).Computers only get semantics when people agree what tags mean, via specs like HTML5.
除非您正在为一组非常有限的浏览器进行开发，否则这听起来是一个坏主意。如果它在较旧的浏览器中完全可以工作，那么它就不会很好地工作；我们还需要数年时间才能期望所有常见浏览器都对 HTML 5 提供良好的支持。
Unless you're developing for a very limited set of browsers, this sounds like a bad idea. If it works at all in older browsers, it won't work well; it'll be years until we can expect good HTML 5 support from all common browsers.