logo标签列表

没有功能的自定义HTML标签？

htmlcss
5
我之前在多个网站上看到过这种做法。
我想要做的是使用像<header>、<description>和<contact>这样的标签，而不使用任何属性，代替注释，因为这样看起来更清晰。
然而，我在想是否会有任何后果，以及这样做是否安全？
6个回答
2
2
  1. 除了那些是HTML的（例如header元素），它们并不是HTML。
  2. Internet Explorer（除非是版本9）不允许你在没有JavaScript hack的情况下为它们设置样式。
  3. 你可能会得到意想不到的结果，尤其是在非视觉用户代理（如搜索引擎）和在浏览器中使用DOM的工具（如屏幕阅读器）中。
  4. 如果它们在将来被添加到HTML中，它们可能不会像你所希望的那样有意义，并且默认样式表可能会以不希望的方式与你的样式表相互作用。
0

如果您想创建其他标签，可以使用以下方法：

document.createElement("custom")

如果是JavaScript，你可以使用

<custom>bla bla bla</custom>

然后像这样应用CSS规则：

custom { display:none;}

但是这不是有效的HTML，也不建议这样做。

0
如果你阅读W3C的规范，你会发现浏览器不应该冒泡任何异常。浏览器有许多解析器，一个用于HTML，一个用于CSS，一个用于JavaScript。当你在HTML文档中使用自定义标签时，浏览器试图理解它，但它根本不理解。但好的一点是，它不会抛出异常。换句话说，你的自定义元素不会在浏览器中引起任何问题。
然而，你会失去有效的标记，也就是说，你的HTML文档将不再被视为有效。
从CSS的角度来看，将CSS应用于标签并不仅限于官方的HTML标签，你也可以将CSS应用于像XML这样的东西（例如：在XML上应用CSS）。因此，你可以在各种浏览器中对自定义元素进行技术格式化。

如果您不介意的话，我有一个更好的建议给您。为什么不坚持社区商定的HTML5自定义属性呢？它们以data前缀开头，并且可以通过验证测试。例如：<a href='...' data-custom-attribute='custom-value'></a>。

0
首先，<header> 实际上是一个有效的 HTML5 标签。所以如果你打算使用它，因为这是你自己的自定义发明而不是有效的标签，那么你需要想出一种替代方案。
一般来说，添加自己的标签不是一个好主意。
正如你从这个答案的第一段已经看到的，没有什么可以证明你选择的标签不会在未来成为标准标签。HTML 的下一个版本很可能会包含一个 <description> 标签。并且未来的浏览器中可能会有与您使用方式冲突的规则。<header> 标签很可能已经做到了这一点。要非常谨慎。
总的来说，最好使用现有的 HTML 标签，并简单地给它们一个指示其功能的类名。这是标准行为，也是浏览器期望的行为。
如果您必须使用自定义标签，请非常小心地对待它们的样式，因为即使在不同的浏览器中它们能够正常工作，但是它们可能会在不同的浏览器中获得不同的默认样式。这意味着您需要在每个浏览器的每个版本中彻底测试您的网站。显然，这是一个好的实践，但是使用自定义标签使其变得更加重要，并且更有可能出现意外的问题。
自定义标签在大多数浏览器中都可以正常工作。HTML5添加了一堆新标签，它们在几乎所有现有的浏览器中都可以正常工作，尽管某些浏览器的样式可能会有所不同。例外情况（像往常一样）是IE，但是即使在这里，也可以相当容易地使其正常工作。
IE需要一个特殊的hack来使自定义样式正常工作。有一个称为HTML5Shiv的小型Javascript工具可以为所有新的HTML5标签执行此操作。IE有一个怪癖，即在通过Javascript创建它们之前，它不会接受它不认识的标签，而该脚本利用了这个怪癖。奇怪，但是它有效。
因此，如果您真的想要一个自定义标签，它将在除IE之外的所有浏览器中正常工作。在IE中，您需要使用自定义标签执行Javascript createElement()，然后它将正常工作。然后使用CSS重置样式表以确保它们在所有浏览器中看起来相同。

这是可以做到的。但我还是不推荐这样做。

0

自定义标签并不邪恶

请仔细考虑：

  • 它们不会被IE 6-8默认识别，你必须使用JavaScript来引入页面上使用的每个自定义标签，例如：document.createElement('custom-tag')。 这意味着只有在打开JavaScript的情况下，您的网站才会正确地渲染。
  • 在大多数浏览器中，您的自定义标签将被视为内联元素，例如<span>，这意味着您必须编写CSS将它们声明为custom-tag { display:block }。
  • 我没有找到任何证据表明自定义标签对搜索引擎有任何负面影响。事实上，Google发布了Angular.js，它在首页的示例中推广自定义标签（<pane>和<tab>）。
  • 大多数HTML编辑器将把您的自定义标签标记为无效的HTML，因为它们确实是无效的。
  • 您的网页将不再符合HTML规范（这对于您的网站意味着什么由您决定..）

总之：

  • 当重要元素比<div>更有意义且没有现有的HTML 4/5等效项时，请使用自定义标签。这对于解析DOM以创建组件（如Angular.js）的Web应用程序特别适用。
  • 如果您只构建一个普通内容的简单网站，请坚持使用标准HTML。您希望您的网站即使在JavaScript关闭的情况下也能正常工作。
  • 如果您构建了一个Web应用程序，其中自定义标签可以真正帮助使源代码更清晰并表达特殊语义，请使用它们。所有上述负面影响（必须打开JavaScript / CSS声明）对于这些情况都不会太重要，因为您的Web应用程序无论如何都无法正常工作。相同的规则适用于自定义属性。
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接