[X]HTML自定义标签：优缺点

Question

[X]HTML自定义标签：优缺点

htmltagscustom-tag

7

我希望使用一些语义化的[X]HTML标签，而不是<div>：例如<article>、<product>、<footer>等。其中一些已经出现在即将推出的HTML5中，但还没有得到完全支持。

在渲染时我可能会面临哪些可能的缺点？使用CSS、JS？

我记得其中一个是：IE6无法克隆它不知道的标签。

- kolypto

可能是何时使用自定义HTML标签？的重复问题。 - Dean J

那个问题更多是理论性的，而被接受的答案证明了这一点。 - kolypto

5个回答

3

问题中提到了“克隆”，所以如果意图是使用JS克隆自定义元素，IE6是否能够处理（我不知道）就不是真正的问题了，即使IE6可以为自定义元素设置样式。

如果只是想为自定义元素设置样式，则每个浏览器都可以做到。由于IE6的存在，您需要为自定义元素命名空间，因此 <prefix:custom /> 并在HTML元素中指定命名空间 <html xmlns:prefix="http://domain/path">。

要在所有浏览器中完全正确地完成所有操作（以便JavaScript能够捕捉自定义元素），您还需要提供自定义DTD，以使自定义元素的命名空间工作一致，例如<!DOCTYPE html SYSTEM "http://domain/path/custom.dtd"> 然后编写DTD，这不幸的是并不容易，并且必须包括一个用于替换HTML DTD的完整替代。

因此，在应用自定义DTD、指定自定义命名空间和应用自定义元素之后，它们可以在任何浏览器中进行样式设置，例如<style>prefix\:custom {background:red;} </style>。

这在所有浏览器上都可以工作并保持一致，但其实际价值尚存争议。它允许使用具有明确定界的命名空间的一致有意义的标记，并避免了级联样式和div元素的滥用。

然而，这在网页开发中涉及到复杂度可能无法得到足够的回报。

- Fentex

好奇心重，谢谢！不过，我已经放弃了这个想法 :) - kolypto

2

即使您使用JS让IE 6“识别”HTML5标签，您仍然会遇到问题，因为IE 6不允许嵌套此类标签。另一方面，如果您的网页不是应用程序导向的，而纯粹是用于展示，那么您也可以使用带有样式的普通XML。它与制作页面的传统方式有些不同，但在XML术语中，没有“旧”的或“新”的标记。请参见此页面 - http://feeds.feedburner.com/blogspot/MKuf（Google的博客源） - 作为样式化XML的示例。JS和DOM API同样适用。

- joneff

2

这并不完全回答你的问题，但是对于计算机来说，“<product>”并不具有语义意义。

人类可以阅读并思考：“啊哈，这一定是一个产品，在这个购物网站的背景下意味着我可以购买它，因此不像在mathoverflow.com上可能意味着‘通过乘法获得的量’”。对于任何阅读代码的人来说，这确实很有用，所以从这个意义上讲，它是语义化的。

但就HTML页面的解析（或在浏览器中查看HTML页面的人）而言，它只是一个未知标签，因此不会获得任何有用的默认样式（与<p>标签不同，后者获得漂亮的边距以使屏幕上的内容可读）或行为（与<a>标签不同，后者如果给它一个href属性，则可以点击）。

只有当人们通过HTML5等规范达成标签含义的共识时，计算机才能获得语义。

- Paul D. Waite

2

即使您对它们进行样式设置，这仍然会让那些无法获取样式表的人（例如使用盲文阅读器、屏幕阅读器或搜索引擎的人）感到困扰。 - Quentin

1

除非你只在非常有限的浏览器中开发，否则这听起来像个坏主意。如果它能在旧版浏览器中工作，也不会表现良好；要等几年才能期望所有常见浏览器对HTML 5有良好的支持。

- Dean J

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- theorise · Accepted Answer

添加以下JavaScript修复程序可以使自定义HTML5标签在IE中工作。实际上，它们在我尝试过的每个其他浏览器中都有效。我使用HTML5构建了我的网站，虽然在IE6&7中它看起来不太好，但仍然可以工作。以下是您放置在模板头部的代码：

<!--[if IE]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <style type="text/css"> .clear { zoom: 1;display: block;} </style> <![endif]-->

使用HTML5标签由于其语义化的特性，可以在CSS中提供更高的控制力。如果正确使用这些标签，则创建网站会变得更加容易，并且更容易理解。

虽然在任何地方都可以使用divs，只要它们有适当的ID和类，它们仍然是语义化的，但是通过使用HTML5标签，您可以更快地识别页面结构。