为什么CSS可以处理假元素？

在课堂上，我在玩耍，发现CSS可以与虚构元素一起使用。

例：

imsocool {
    color:blue;
}

<imsocool>HELLO</imsocool>

当我的教授第一次看到我使用此功能时，他对组合元素起作用感到有些惊讶，并建议我将所有组合元素更改为带有ID的段落。

为什么我的教授不希望我使用虚构元素？他们有效地工作。

另外，他为什么不知道组成元素存在并且可以与CSS一起使用。他们不常见吗？

为什么CSS可以处理假元素？

（大多数）浏览器被设计为（在某种程度上）与将来添加的HTML向前兼容。无法识别的元素被解析到DOM中，但是没有语义或与之关联的专用默认呈现。

当在规范中添加新元素时，有时CSS，JavaScript和ARIA可以用于在旧版浏览器中提供相同的功能（这些元素必须出现在DOM中，以使这些语言能够操纵它们以添加该功能）。

（尽管应该注意的是，正在定义一种使用自定义元素扩展HTML的方法，但是这项工作目前处于开发的早期阶段，因此，在成熟之前应该避免使用它。）

为什么我的教授不希望我使用虚构元素？

• HTML规范不允许使用它们
• 它们可能与同名的将来标准元素冲突
• 可能存在一个更适合该任务的HTML元素

也; 他为什么不知道虚构元素存在并与CSS一起使用。他们不常见吗？

是。人们不使用它们，因为它们存在上述问题。

TL; DR

• 自定义标记在HTML中无效。这可能会导致渲染问题。
• 由于代码不可移植，因此使将来的开发更加困难。
• 有效的HTML提供了很多好处，例如SEO，速度和专业性。

长答案

有一些参数认为使用自定义标签的代码更有用。

但是，它导致无效的HTML。这对您的网站不利。

有效CSS / HTML的重点| 堆栈溢出

• Google更喜欢它，因此对SEO很有好处。
• 它使您的网页更有可能在未经测试的浏览器中工作。
• 它使您看起来更加专业（至少对于某些开发人员而言）
• 兼容的浏览器可以呈现[更快的有效HTML]
• 它指出了您可能错过的一堆难以理解的错误，这些错误会影响您可能尚未测试的内容，例如页面的代码页或语言集。

为什么要验证 W3C

• 验证作为调试工具
• 验证为永不过时的质量检查
• 验证简化了维护
• 验证有助于教导良好做法
• 验证是专业精神的标志

YADA（还有另一个（不同的）答案）

编辑：请参阅以下BoltClock关于类型vs标签vs元素的评论。我通常不担心语义，但是他的评论非常恰当且内容丰富。

尽管已经有了很多好的答复，但您表示您的教授提示您发布此问题，因此您似乎（正式）在上学。我以为我将对CSS 以及Web浏览器的机制进行更深入的阐述。根据Wikipedia的说法，“ CSS是一种样式表语言，用于描述... 以标记语言编写的文档。” （我增加了对“ a”的强调）。请注意，它并没有说“用HTML编写”，更不用说HTML的特定版本了。CSS可以在HTML，XHTML，XML，SGML，XAML等上使用。当然，您需要一些可以呈现的东西这些文档类型中的每一个也将应用样式。根据定义，CSS 不了解/不了解/不关心特定的标记语言标签。因此，就HTML而言，标记可能是“无效”的，但是CSS中没有“有效”标记/元素/类型的概念。

现代视觉浏览器不是单片程序。它们是不同的“引擎”的混合物，它们有特定的工作要做。在一个最起码我能想到3个引擎，渲染引擎，CSS引擎和JavaScript引擎/ VM的。不知道解析器是否是呈现引擎的一部分（反之亦然），或者它是否是单独的引擎，但是您可以理解。

无论是否视觉浏览器（别人已经解决的事实，屏幕阅读器可能有处理无效标签其他挑战）适用的格式依赖于文件中是否解析器叶“无效”标签，然后渲染引擎是否适用风格到那个标签。由于这样做会使开发/维护变得更加困难，因此没有写CSS引擎来理解 “这是HTML文档，因此这里是有效标记/元素/类型的列表”。CSS引擎只需找到标签/元素/类型，然后告诉渲染引擎，“这是您应该应用的样式”。渲染引擎是否决定实际应用样式取决于它。

这是考虑引擎之间基本流程的简单方法：解析器-> CSS->呈现。实际上，它要复杂得多，但这对于初学者来说已经足够了。

这个答案已经太久了，我将在此处结束。

div现代浏览器将未知元素视为。这就是为什么他们工作。这是即将到来的HTML5标准的一部分，该标准引入了可以向其中添加新元素的模块化结构。

在较旧的浏览器（我认为是IE7-）中，您可以应用Javascript技巧，然后它们也将正常工作。

这是我在寻找示例时发现的一个相关问题。

这是有关Javascript修复的问题。事实证明，确实是IE7不支持这些元素。

也; 他为什么不知道虚假标签存在并与CSS一起使用。他们不常见吗？

是的，非常。但尤其要注意的是：它们没有其他用途。而且它们是html5的新功能。在早期版本的HTML中，未知标签无效。

而且，有时老师的知识似乎也有不足。这可能是由于他们需要教给学生有关给定主题的基础知识，而了解所有来龙去脉并保持最新状态并没有真正的回报。我曾经被拘留是因为老师认为我编写了病毒，只是因为我可以使用playGWBasic中的命令使计算机播放音乐。（真实的故事，是的，很久以前）。但是无论出于何种原因，我认为不使用custome元素的建议都是合理的。

实际上，您可以使用自定义元素。这是关于此主题的W3C规范：

http://w3c.github.io/webcomponents/spec/custom/

这是说明如何使用它们的教程：

http://www.html5rocks.com/zh-CN/tutorials/webcomponents/customelements/

正如@Quentin指出的那样：这是开发初期的规范草案，并且对元素名称的名称施加了限制。

关于其他答案，有些事情要么措辞不佳，要么可能有些不正确。

FALSE（ish）：非标准HTML元素为“不允许”，“非法”或“无效”。

不必要。他们是“不合格的”。有什么不同？某些事物可能“不符合”并且仍然是“允许的”。W3C不会将HTML警察发送到您的家中并将您拖走。

W3C之所以这样离开是有原因的。一致性和规范由社区定义。如果您碰巧有一个为特定目的而使用HTML的较小社区，并且他们都同意使事情变得更轻松所需的一些新元素，则可以使用W3C所谓的“其他适用规范”。（显然，这过于简化了，但是您知道了）

也就是说，严格的验证程序将声明您的非标准元素为“无效”。但这是因为验证者的工作是确保符合其验证的任何规范，而不是确保浏览器或使用的 “合法性” 。

FALSE（ish）：非标准HTML元素将导致呈现问题

可能，但不太可能。（将“ will”替换为“ might”）这将导致呈现问题的唯一方法是，如果您的自定义元素与另一个规范冲突，例如对HTML规范的更改或在同一系统中使用另一个规范（例如SVG，数学或自定义项）。

实际上，CSS可以设置非标准标签样式的原因是因为HTML规范明确指出：

用户代理必须将他们不理解的元素和属性视为语义中立的；将它们留在DOM中（对于DOM处理器），并根据CSS样式化（对于CSS处理器），但不从中推断出任何含义

注意：如果要使用自定义标签，请记住，稍后对HTML规范进行更改可能会破坏样式，因此请做好准备。但是，W3C不太可能实现该<imsocool>标签。

非标准标签和JavaScript（通过DOM）

您可以使用JavaScript访问和更改自定义元素的原因是，该规范甚至讨论了应如何在DOM中处理这些元素，而DOM是（确实很糟糕的）API，可让您操作页面上的元素。

HTMLUnknownElement接口必须用于本规范（或其他适用的规范）未定义的HTML元素。

TL; DR：出于通讯和安全的目的，遵守规范。除验证者外，所有其他人仍然允许不符合，其唯一目的是强制执行符合性，但其使用是可选的。

例如：

var wee = document.createElement('wee');
console.log(wee.toString()); //[object HTMLUnknownElement]

（我敢肯定这会引起大火，但是我有2美分）

根据规格：

的CSS

一个类型选择为文档语言元素类型的使用CSS限定名称的语法写名字

我以为这叫做元素选择器，但显然它实际上是类型选择器。规范继续讨论CSS qualified names哪个名称实际上没有限制。也就是说，只要类型选择器匹配CSS限定名称语法，从技术上讲就是正确的CSS，并且将匹配文档中的元素。对于特定规范（HTML或其他规范）中不存在的元素，没有CSS特定的限制。

的HTML

对于您想要的文档中包含任何标签，没有官方限制。但是，文档确实说

作者不得将元素，属性或属性值用于其适当的预期语义目的以外的目的，因为这样做会阻止软件正确处理页面。

后来说

作者不得使用本规范或其他适用规范所不允许的元素，属性或属性值，因为这样做会使将来扩展该语言的难度大大增加。

我不确定具体在何处或规范中是否允许使用未知元素，但我确实谈到了无法识别元素的HTMLUnknownElement接口。一些浏览器甚至可能无法识别当前规范中的元素（想到了IE8）。

虽然有一个自定义元素的草案，但是我怀疑它是否可以在任何地方实现。

使用html5可以做到这一点，但您需要考虑使用旧版浏览器。

如果您决定使用它们，请确保注释您的html！有些人可能很难弄清楚这是什么，因此发表评论可以为他们节省大量时间。

像这样

<!-- Custom tags in use, refer to their CSS for aid -->

当您创建自己的自定义标记/元素时，较早的浏览器将不知道像nav/ 5 这样的html5元素是什么section。

如果您对此概念感兴趣，那么我建议您以正确的方式来做。

入门

自定义元素允许Web开发人员定义新类型的HTML元素。该规范是Web组件保护下的几个新API原语之一，但它很可能是最重要的。没有自定义元素解锁的功能，Web组件就不存在：

定义新的HTML / DOM元素创建从其他元素扩展的元素逻辑上将自定义功能捆绑在一起成为一个标签扩展现有DOM元素的API

您可以使用它做很多事情，它确实使您的脚本如本文所喜欢的那样漂亮。在HTML中定义新元素的自定义元素。

让我们回顾一下，

优点

• 非常优雅，易于阅读。

• 看到这么多真是高兴divs。：p

• 赋予代码独特的感觉

缺点

• 较旧的浏览器支持是一个很重要的考虑因素。

• 其他开发人员如果不了解自定义标签，可能不知道该怎么办。（向他们解释或添加评论以通知他们）

• 最后，要考虑的一件事是块元素和内联元素，但我不确定。通过使用自定义标签，您将最终编写更多的CSS，因为自定义标签没有默认的一面。

选择完全取决于您，您应该根据项目的要求来选择。

2014年1月2日更新

这是我发现并想分享的非常有用的文章Custom Elements。

了解技术为什么选择自定义元素？使用自定义元素，作者可以定义自己的元素。作者将JavaScript代码与自定义标签名称相关联，然后像使用任何标准标签一样使用这些自定义标签名称。

例如，在注册一种称为超级按钮的特殊按钮之后，请像下面这样使用超级按钮：

自定义元素仍然是元素。我们可以像任何标准或当今一样轻松地创建，使用，操纵和组合它们。

这似乎是一个非常好的库，但是我确实注意到它没有通过Window的Build状态。我相信这也是预测试版，因此在开发过程中我会密切注意。

他为什么不希望您使用它们？它们并不常见，也不是HTML5标准的一部分。从技术上讲，它们是不允许的。他们是骇客。

我自己也喜欢。您可能对XHTML5感兴趣。它允许您定义自己的标签并将其用作标准的一部分。

而且，正如其他人指出的那样，它们是无效的，因此不可移植。

他为什么不知道它们存在？我不知道，除了它们不常见。可能他只是不知道您可以。

虚构标签几乎从未使用过，因为它们不太可能在每个当前浏览器以及将来的所有浏览器中可靠地工作。

浏览器必须将HTML代码解析为它知道的元素，以便将组成的标签转换为其他内容以适合文档对象模型（DOM）。由于Web标准未涵盖如何处理标准之外的所有内容，因此Web浏览器倾向于以不同的方式处理非标准代码。

Web开发对于一堆具有自己独特特点的不同浏览器来说非常棘手，而又不会增加不确定性。最好坚持使用标准中实际存在的内容，这是浏览器供应商尝试遵循的内容，这样才有最好的机会真正起作用。

我认为，与ID（通常为某些文本块）相比，伪造的标签可能比p的标签更容易混淆或不清楚。我们都知道带有ID的ap是一个段落，但是谁知道伪造的标签是用于什么的呢？至少那是我的想法。:)因此，这更多是样式/清晰度问题，而不是功能之一。

其他人提出了很好的观点，但值得注意的是，如果您查看诸如AngularJS之类的框架，那么自定义元素和属性的情况非常有效。这些不仅向xml传达了更好的语义，而且还可以为网页提供行为，外观。

CSS是一种样式表语言，不仅可以用于（X）HTML文档，还可以用于呈现XML文档。您的带有虚构标签的代码段可能是合法XML文档的一部分；如果将其包含在单个根元素中，它将是一个。可能您已经有一个<html> ...</html>周围了吗？当前任何浏览器都可以显示XML文档。

当然，它不是一个很好的XML文档，它缺少语法和XML声明。如果改用HTML声明标头（可能是发送正确的mime类型的服务器配置），则将是非法HTML。

（X）HTML比普通XML更具优势，因为元素的语义含义在网页演示的上下文中很有用。工具可以使用这种语义，其他开发人员也可以理解其含义，它不那么容易出错，更易于阅读。

但是在其他情况下，最好将CSS与XML和/或XSLT一起使用来进行演示。这就是你所做的。因为这不是您的任务，所以您不知道自己在做什么，而在大多数情况下，应坚持使用HTML / CSS是您的最佳选择。

您应该在文档中添加（X）HTML标头，以便工具可以向您提供有意义的错误消息。

...我只是将所有组成的标签更改为带有ID的段落。

实际上，我对他关于如何正确执行操作的建议持怀疑态度。

1. 一个<p>标记是段落。我看到人们一直在使用它而不是div-仅仅是出于间隔目的或因为它看起来更柔和。如果不是段落，请不要使用它。

2. 您不需要或不想在所有内容上粘贴ID，除非您需要专门针对它（例如，使用Javascript）。使用类或仅使用纯正div。

从早期开始，CSS就被设计为与标记无关的，因此可以与产生树状DOM结构（例如SVG）的任何标记语言一起使用。任何符合的标签name token生产在CSS中都是完全有效的。因此，您的问题不是HTML而是CSS本身。

HTML5规范支持带有自定义标签的元素。HTML5标准化了如何在DOM中解析未知元素的方式。因此HTML5是第一个严格支持自定义元素的HTML规范。您只需要在文档<!DOCTYPE html>中使用HTML5 文档类型。

自定义标签名称本身...

本文档http://www.w3.org/TR/custom-elements/建议您选择包含至少一个'-'（破折号）符号的自定义标签。这样，它们将不会与将来的HTML元素冲突。因此，您最好将文档更改为以下内容：

<style>
so-cool {
    color:blue;
}
</style>

<body>
    <so-cool>HELLO</so-cool>
</body> 

^{显然没有人提到它，所以我会的。}

这是浏览器大战的副产品。

早在1990年代，互联网首次开始成为主流时，浏览器市场的竞争就愈演愈烈。为了保持竞争力并吸引用户，某些浏览器（最著名的是Internet Explorer）试图通过找出页面设计者的含义并允许错误的标记（例如，<b><i>foobar</b></i>将其正确呈现为粗体显示斜体）。

这在某种程度上是有道理的，因为如果一个浏览器不断抱怨语法错误，而另一个却吃了您扔给它的任何东西并吐出（或多或少）正确的结果，那么人们自然会涌向后者。

尽管许多人认为浏览器之战已经结束，但自Chrome发布以来，浏览器供应商之间的新战在过去几年里重新燃起，苹果又开始成长并推动Safari，而IE失去了统治地位。（由于浏览器供应商对标准的合作和支持，您可以称其为“冷战”。）因此，即使是假定严格遵守Web标准的现代浏览器实际上也试图变得“聪明” ，这并不奇怪。允许这种违反标准的行为，以便尝试像以前一样获得优势。

不幸的是，导致了大规模的这种宽容的行为（有的甚至可以说癌变）标记了不良网页的增长。由于IE是最宽容和最受欢迎的浏览器，并且由于Microsoft不断推崇标准，因此IE以鼓励和促进不良设计以及传播和保留残缺页面而臭名昭著。

您现在也许可以在某些浏览器上使用类似的怪癖和漏洞利用，但除了偶尔的难题或游戏之类的东西外，在创建网页和网站时应始终遵守网络标准，以确保它们能够正确显示和避免它们因浏览器更新而损坏（可能被完全忽略）。

尽管浏览器通常会将CSS与HTML标签相关联，无论它们是否有效，但您绝对不应这样做。

从CSS的角度来看，这在技术上没有错。但是，永远不要在HTML中使用虚构标签。

HTML是一种标记语言，这意味着每个标签都对应一种特定的信息类型。

您组成的标签与任何类型的信息都不对应。这将给网络爬虫（例如Google）造成问题。

阅读有关正确标记的重要性的更多信息。

编辑

Divs指的是多个相关元素的组合，旨在以块形式显示并且可以这样操作。

跨度是指元素的样式与其当前所处的上下文不同，并且将以内联方式显示，而不是作为块显示。一个例子是，如果一个句子中的几个单词必须全部大写。

自定义标签与任何标准都不相关，因此span / div应该与class / ID属性一起使用。

有非常特殊的豁免，例如Angular JS

尽管CSS有一个叫做“标签选择器”的东西，但是它实际上并不知道标签是什么。剩下的就是文档的语言来定义。CSS的设计不仅可以与HTML一起使用，还可以与XML一起使用，在XML中（假设您未使用DTD或其他验证方案）标签几乎可以是任何东西。您也可以将其与其他语言一起使用，尽管您需要针对“标签”和“属性”所对应的内容提出自己的语义。

浏览器通常将CSS应用于HTML中的未知标签，因为这被认为比完全破坏更好：至少它们可以显示某些内容。但是，故意使用“假”标签是非常不好的做法。原因之一是确实会不时地定义新标记，如果定义的标记看起来像您的假标记，但工​​作方式不同，则可能导致新浏览器上的网站出现问题。

为什么CSS可以处理假元素？因为它不会伤害任何人，因为您不应该使用它们。

为什么我的教授不希望我使用虚构元素？因为如果将来该元素由规范定义，则您的元素将具有不可预测的行为。

另外，他为什么不知道组成元素存在并且可以与CSS一起使用。他们不常见吗？因为他像其他大多数Web开发人员一样，理解我们不应该使用将来可能会随机中断的东西。