在我的课堂上，我一直在玩弄，发现CSS可以用于制作元素。
示例：
imsocool {
color:blue;
}<imsocool>HELLO</imsocool>
当我的教授第一次看到我使用它时，他对组成元素的工作有点惊讶，并建议我只需将所有组成元素更改为带ID的段落。
为什么我的教授不希望我使用化妆元素？他们有效地工作。
另外，为什么他不知道组成元素存在并使用CSS。它们不常见吗？
答案 0 :(得分：469)
为什么CSS使用假元素？
（大多数）浏览器被设计为（在某种程度上）向前兼容HTML的未来添加。无法识别的元素被解析到DOM中，但没有与它们相关联的语义或专门的默认呈现。
当一个新元素被添加到规范中时，有时可以使用CSS，JavaScript和ARIA在旧浏览器中提供相同的功能（并且元素必须出现在DOM中，以便这些语言能够将它们操作到添加该功能）。
（虽然应该注意到正在开展工作来定义extend HTML with custom elements的方法，但是这项工作目前处于开发的早期阶段，所以在它成熟之前应该避免它。）
为什么我的教授不希望我使用虚构元素？
也;为什么他不知道组成元素存在并使用CSS。它们不常见吗？
是。人们不会使用它们，因为它们有上述问题。
答案 1 :(得分：98)
<强> TL; DR
长答案
some arguments有自定义标记的代码更有用。
然而，它导致HTML无效。这对您的网站不利。
The Point of Valid CSS/HTML | StackOverflow
- Google prefers it so it is good for SEO.
- 它使您的网页更有可能在未经测试的浏览器中运行。
- 它让你看起来更专业（至少对某些开发者而言）
- 兼容的浏览器可以呈现[有效的HTML更快]
- 它指出了一些你可能错过的模糊错误，这些错误会影响你可能没有测试过的东西，例如：页面的代码页或语言集。
- 验证作为调试工具
- 验证是一种面向未来的质量检查
- 验证可以简化维护
- 验证有助于教授良好实践
- 验证是专业的标志
答案 2 :(得分：68)
YADA（另一个（不同的）答案）
编辑：请参阅下面BoltClock关于类型vs标记与元素的评论。我通常不担心语义，但他的评论非常恰当且信息丰富。
虽然已经有很多好的回复，但您表示您的教授提示您发布此问题，以便您（正式）在学校。我以为我会更深入地阐述CSS，而不仅仅是Web浏览器的 mechanics 。根据{{3}}，“CSS是一种样式表语言，用于描述用 a 标记语言编写的文档。” （我强调“a”）注意它并没有说“用HTML编写”，更不用说特定版本的HTML了。 CSS可用于HTML，XHTML，XML，SGML，XAML等。当然，您需要一些呈现这些文档类型的东西，这些文档类型也将应用样式。根据定义，CSS不会了解/理解/关心特定的标记语言标记。因此，就HTML而言，标签可能是“无效的”，但CSS中没有“有效”标签/元素/类型的概念。
现代可视化浏览器不是单一程序。它们是具有特定工作要素的不同“引擎”的混合物。在最低限度我可以想到3个引擎，渲染引擎，CSS引擎和javascript引擎/ VM。不确定解析器是否是渲染引擎的一部分（反之亦然），或者它是否是一个单独的引擎，但你明白了。
是否视觉浏览器（其他人已经解决了屏幕读者可能还有其他问题需要处理无效标记这一事实）格式化取决于解析器是否在文档中保留“invalid”标记，然后是否呈现引擎将样式应用于该标记。由于它会使开发/维护变得更加困难，因此CSS引擎不会写入理解“这是一个HTML文档，所以这里是有效标签/元素/类型的列表。” CSS引擎只需找到标签/元素/类型，然后告诉渲染引擎，“这是你应该应用的样式。”渲染引擎是否决定实际应用样式就是它。
这是一种简单的方法来考虑从引擎到引擎的 基本 流程：解析器 - ＆gt; CSS - ＆gt;渲染。实际上它更复杂，但这对初学者来说已经足够了。
这个答案已经太长了所以我会在那里结束。
答案 3 :(得分：53)
现代浏览器将未知元素视为div。这就是他们工作的原因。这是即将推出的HTML5标准的一部分，该标准引入了可以添加新元素的模块化结构。
在较旧的浏览器中（我认为IE7-）你可以应用一个Javascript技巧，之后它们也会起作用。
这是我在寻找示例时找到的related question。
这是question about the Javascript fix。事实证明，IE7确实不支持开箱即用的这些元素。
也;为什么他不知道伪造的标签存在并使用CSS。它们不常见吗？
是的，非常。但尤其是：它们没有其他用途。而且他们是html5的新手。在早期版本的HTML中，未知标记无效。
此外，教师有时似乎在知识方面存在差距。这可能是因为他们需要向学生讲授关于某一特定科目的基础知识，并且知道所有的细节并且确实是最新的并不是真正的回报。
我曾经被拘留过，因为老师以为我编程了病毒，只因为我可以让电脑在GWBasic中使用play命令播放音乐。 （真实的故事，是的，很久以前）。但无论什么原因，我认为不使用客户元素的建议是合理的。
答案 4 :(得分：27)
实际上您可以使用自定义元素。以下是关于此主题的W3C规范：
http://w3c.github.io/webcomponents/spec/custom/
这是一个解释如何使用它们的教程：
http://www.html5rocks.com/en/tutorials/webcomponents/customelements/
正如@Quentin所指出的那样：这是开发初期的草案规范，它对元素名称的含义施加了限制。
答案 5 :(得分：22)
关于其他答案的一些事情要么措辞不当，要么可能有些不正确。
不一定。他们＆＃34;不符合＆＃34; 。有什么区别？ 有些东西可以＆＃34;不符合＆＃34;并且仍然是＆＃34;允许＆＃34;。 W3C不会将HTML警察发送到您的家中并将您带走。
由于某种原因，W3C以这种方式离开了这里。一致性和规范由社区定义。如果你碰巧有一个较小的社区消费HTML用于更具体的目的，并且他们都同意一些新的元素，他们需要使事情变得更容易，他们可以拥有W3C所指的"other applicable specifications"。 （这显然是过度简化，但你明白了）
那就是说，严格的验证者会声明你的非标准元素是＆＃34;无效＆＃34;。但这是因为验证人的工作是确保符合其验证的任何规范，而不是确保合法性＆＃34;用于浏览器或用于使用。
可能，但不太可能。 （替换＆＃34;将＆＃34;与＆＃34;可能＆＃34;）这会导致渲染问题的唯一方法是，如果您的自定义元素与其他规范冲突，例如更改HTML规范或其他规范规范在同一系统中得到尊重（例如SVG，数学或自定义）。
事实上， CSS可以设置非标准代码的原因是因为HTML规范clearly states：
用户代理必须将他们不理解的元素和属性视为语义中立;将它们留在DOM中（对于DOM处理器），并根据CSS（对于CSS处理器）设置它们的样式，但不要从它们中推断出任何含义
注意：如果您想使用自定义标记，请记住以后对HTML规范的更改可能会影响您的样式，因此请做好准备。但是，W3C实际上不太可能实现<imsocool>标记。
您可以使用JavaScript访问和更改自定义元素的原因是specification even talks about how they should be handled in the DOM，它是（非常可怕的）API，允许您操作页面上的元素。
HTMLUnknownElement接口必须用于未由此规范（或其他适用规范）定义的HTML元素。
例如：
var wee = document.createElement('wee');
console.log(wee.toString()); //[object HTMLUnknownElement]
（我确定这会引起火焰，但那是我的2美分）
答案 6 :(得分：18)
根据规格：
我认为这被称为元素选择器，但显然它实际上是 type 选择器。该规范继续讨论CSS qualified names，它对名称实际上没有任何限制。也就是说，只要类型选择器匹配CSS限定名称语法，它在技术上是正确的CSS并且将匹配文档中的元素。对特定规范中不存在的元素（HTML或其他）没有特定于CSS的限制。
在文档中包含所需的任何标记没有官方限制。但是，文档确实说
后来又说
作者不得使用本规范或其他适用规范不允许的元素，属性或属性值，因为这样做会使语言在将来更难扩展。
我不确定具体在哪里或者说规范是否知道允许未知元素，但它确实讨论了无法识别元素的HTMLUnknownElement接口。有些浏览器甚至可能无法识别当前规范中的元素（IE8会浮现在脑海中）。
虽然有draft for custom elements，但我怀疑它是否已在任何地方实施。
答案 7 :(得分：13)
这可以通过html5实现，但您需要考虑旧浏览器。
如果您决定使用它们，请务必注明您的HTML！有些人可能在弄清楚它是什么时遇到一些麻烦，所以评论可以为他们节省大量的时间。
像这样，
<!-- Custom tags in use, refer to their CSS for aid -->
当您制作自己的自定义标记/元素时，较旧的浏览器将无法理解像nav / section这样的html5元素。
如果您对此概念感兴趣，那么我建议您采用正确的方式。
入门
自定义元素允许Web开发人员定义新类型的HTML 元素。该规范是登陆的几个新API原语之一 Web Components的保护伞，但它可能是最多的 重要。如果没有解锁功能，则Web组件不存在 自定义元素：
定义新的HTML / DOM元素创建从其他元素扩展的元素 元素逻辑上将自定义功能捆绑在一起 tag扩展现有DOM元素的API
你可以用它做很多事情，它确实使你的剧本很漂亮，就像这篇文章所说的那样。 Custom Elements defining new elements in HTML
让我们回顾一下，
<强>赞成
非常优雅且易于阅读。
很高兴看不到这么多divs。 ：P
允许对代码有独特的感觉
<强>缺点
较早的浏览器支持是一件值得考虑的事情。
如果他们不了解自定义标签，其他开发人员可能不知道该怎么做。 （向他们解释或添加评论以告知他们）
最后要考虑的一件事，但我不确定，是块和内联元素。通过使用自定义标记，您最终会编写更多css，因为自定义标记不会有默认标记。
选择完全取决于您，您应该根据项目的要求进行选择。
更新1/2/2014
这是一篇非常有用的文章，我发现并想到我会分享，Custom Elements。
了解技术为何选择自定义元素？自定义元素让作者定义 他们自己的元素。作者将JavaScript代码与自定义标记相关联 名称，然后使用那些自定义标签名称，因为它们将是任何标准 标签
例如，在注册一个特殊类型的按钮后 超级按钮，使用超级按钮就像这样：
自定义元素仍然是元素。我们 可以像任何一样轻松地创建，使用，操作和组合它们 标准或今天。
这似乎是一个非常好的库，但我确实注意到它没有通过Window的Build状态。这也是一个预先的alpha我相信所以我会在它发展的时候关注它。
答案 8 :(得分：4)
他为什么不要你使用它们？它们不是常见的，也不是HTML5标准的一部分。 从技术上讲，他们是不允许的。他们是一个黑客。
但是，我自己也喜欢他们。您可能对XHTML5感兴趣。它允许您定义自己的标签并将其用作标准的一部分。另外，正如其他人所指出的那样，它们是无效的，因此不便携。
他为什么不知道他们存在？我不知道，除了它们不常见。可能他只是不知道你可以。
答案 9 :(得分：2)
我认为制作标签可能比带有ID的p（通常是一些文本块）更令人困惑或不清楚。我们都知道带有ID的p是一个段落，但是谁知道什么是用于制作标签的？至少那是我的想法。 :)因此，这更像是一种风格/清晰度问题，而不是功能之一。
答案 10 :(得分：2)
很少使用过制作标签，因为它们不太可能在每个当前浏览器和每个未来的浏览器中可靠地工作。
浏览器必须将HTML代码解析为它所知道的元素，然后将已编译的标签转换为适合文档对象模型（DOM）的其他内容。由于Web标准并未涵盖如何处理标准之外的所有内容，因此Web浏览器倾向于以不同方式处理非标准代码。
Web开发很棘手，有许多不同的浏览器都有自己的怪癖，没有添加另一个不确定因素。最好的办法是坚持标准中实际存在的东西，这就是浏览器厂商试图遵循的东西，这样才有最好的机会实际工作。
答案 11 :(得分：2)
其他人已经提出了很好的观点，但值得注意的是，如果你看一下像AngularJS这样的框架，那么自定义元素和属性就有一个非常有效的例子。这些不仅传达了xml更好的语义，而且还可以为网页提供行为，外观和感觉。
答案 12 :(得分：2)
CSS是一种样式表语言，可用于呈现XML文档，而不仅仅是（X）HTML文档。带有伪造标签的代码段可能是合法XML文档的一部分;如果将它包含在单个根元素中，它就是一个。可能你周围已经有<html> ...</html>了吗？任何当前的浏览器都可以显示XML文档。
当然它不是一个非常好的XML文档，它缺少语法和XML声明。如果您使用HTML声明标头（并且可能是发送正确mime类型的服务器配置），那么它将是非法的HTML。
（X）HTML优于普通XML，因为元素具有在网页表示的上下文中有用的语义含义。工具可以使用这种语义，其他开发人员知道其含义，它不易出错，更易于阅读。
但在其他情况下，最好使用带XML和/或XSLT的CSS来进行演示。这就是你做的。由于这不是你的任务，你不知道自己在做什么，而HTML / CSS是更好的方式，你应该在你的场景中坚持使用它。
您应该在文档中添加（X）HTML标题，以便工具可以为您提供有意义的错误消息。
答案 13 :(得分：2)
...我只是将所有制作的标签更改为带有ID的段落。
我实际上对他如何正确地做到这一点提出了建议。
<p>标记用于段落。我看到人们一直使用它而不是div - 只是为了间隔目的或者因为它看起来更温和。如果它不是段落，请不要使用它。
除非您需要专门针对它（例如使用Javascript），否则您不需要或想要在所有内容上粘贴ID。使用类或只是一个直接的div。
答案 14 :(得分：2)
显然没人提到它，所以我会。
这是browser wars的副产品。
回到20世纪90年代互联网刚开始成为主流时，竞争在浏览器市场中肆虐。为了保持竞争力并吸引用户，一些浏览器（最着名的是Internet Explorer）试图弄清楚设计器意味着什么，从而允许标记不正确（例如，用户友好型）。 ，<b><i>foobar</b></i>会正确呈现为粗体斜体。）
这在某种程度上是有道理的，因为如果一个浏览器一直抱怨语法错误，而另一个浏览器吃了任何你扔掉它并吐出（或多或少）正确的结果，那么人们自然会涌向后者。 / p>
虽然许多人认为浏览器战争已经结束，但自Chrome发布以来，浏览器厂商之间的新战争在过去几年中再次爆发，苹果再次开始增长并推动Safari，IE失去了主导地位。 （由于浏览器供应商对标准的合作和支持，你可以把它称之为“冷战”。）因此，即使是据称严格遵守网络标准的当代浏览器也不足为奇尽量做到“聪明”并允许像这样的标准破坏行为，以便像以前一样获得优势。
不幸的是，这种宽容的行为导致了一个巨大的（some甚至可能说癌症）增长不良标记的网页。因为IE是最宽松和最受欢迎的浏览器，并且由于微软不断蔑视标准，IE因为鼓励和推广糟糕的设计以及传播和延续损坏的页面而臭名昭着。
你现在可以在某些浏览器上使用这样的怪癖和漏洞，但除了偶尔的谜题或游戏之外，你应该在创建网页和网站时始终坚持web standards确保它们正确显示并避免它们在浏览器更新时被破坏（可能完全被忽略）。
答案 15 :(得分：2)
从早期开始，CSS被设计为与标记无关，因此它可以与任何标记语言一起使用，从而生成类似树的DOM结构（例如SVG）。符合name token生成的任何标记在CSS中都是完全有效的。所以你的问题是关于HTML而不是CSS本身。
HTML5规范支持带有自定义标记的元素。 HTML5标准化了必须在DOM中解析未知元素的方式。所以HTML5是第一个严格说明自定义元素的HTML规范。您只需在文档中使用HTML5 doctype <!DOCTYPE html>。
自定义标签名称本身......
此文档http://www.w3.org/TR/custom-elements/建议您选择包含至少一个“ - ”（破折号）符号的自定义标记。这样他们就不会与未来的HTML元素发生冲突。因此，您最好将文档更改为以下内容：
<style>
so-cool {
color:blue;
}
</style>
<body>
<so-cool>HELLO</so-cool>
</body>
答案 16 :(得分：1)
虽然浏览器通常会将CSS与HTML标记相关联，无论它们是否有效，您都应该绝对不要这样做。
从CSS的角度来看，技术上没有任何问题。但是，使用组合标签是你不应该在HTML中做的事情。
HTML是一种标记语言，这意味着每个标记对应于特定类型的信息。
您制作的标签与任何类型的信息都不对应。这会从网页抓取工具中产生问题，例如Google。
阅读importance of correct markup。
的更多信息Divs指的是多个相关元素的组，意味着以块的形式显示，并且可以这样操作。
Spans指的是与它们当前所处的上下文不同地设置样式的元素，并且意图以内联方式显示，而不是作为块显示。例如，如果句子中的几个单词需要全部大写。
自定义标记与任何标准都不相关，因此span / div应与class / ID属性一起使用。
对此有非常特定豁免，例如 Angular JS
答案 17 :(得分：0)
尽管CSS有一个叫做“标签选择器”的东西，但它实际上并不知道标签是什么。这是留给文档的语言来定义的。 CSS不仅用于HTML，还用于XML，其中（假设你没有使用DTD或其他验证方案）标签几乎可以是任何东西。您也可以将它与其他语言一起使用，但您需要提出自己的语义，以确定“标签”和“属性”对应的内容。
浏览器通常将CSS应用于HTML中的未知标记，因为这被认为比完全破坏更好：至少它们可以显示某些东西。但故意使用“假”标签是非常不良做法。其中一个原因是新标签会不时定义，如果定义的标签看起来有点像假标签，但效果不一样，那么可能会导致新浏览器出现问题。
答案 18 :(得分：0)
CSS为什么使用伪元素？，因为它不会伤害任何人，因为您不应该使用它们。
为什么我的教授不希望我使用虚构元素？因为如果将来该元素是由规范定义的，则您的元素将具有不可预测的行为。
此外，他为什么不知道组成元素存在并且可以与CSS一起使用。它们不常见吗？因为他像其他大多数Web开发人员一样，理解我们不应该使用将来可能会随机中断的东西。