题
在我的课堂上，我正在玩耍，发现CSS与化妆元素一起工作。
例子：
https://stackoverflow.com/questions/20353613
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russianimsocool {
color:blue;
}<imsocool>HELLO</imsocool>当我的教授第一次看到我使用它时，他感到有些惊讶，因为化妆元素有效，并建议我只是将所有的化妆元素更改为带有ID的段落。
为什么我的教授不希望我使用化妆元素？他们有效地工作。
另外，他为什么不知道化妆元素存在并与CSS合作。他们不常见吗？
解决方案
CSS为什么与假元素一起使用？
（大多数）浏览器的设计（在某种程度上）与HTML的未来添加相兼容。未识别的元素被解析为DOM，但没有与之相关的语义或专门的默认渲染。
当将新元素添加到规范中时，有时CSS，JavaScript和ARIA可用于在较旧的浏览器中提供相同的功能（并且这些元素必须在DOM中出现以使这些语言能够操纵它们以添加该功能。 ）。
（有一个规格 自定义元素, ，但它们有特定的命名要求，并且需要使用JavaScript进行注册。）
为什么我的教授不希望我使用化妆元素？
还;他为什么不知道化妆元素存在并与CSS合作。他们不常见吗？
是的。人们不使用它们，因为他们有上述问题。
其他提示
tl; dr
长答案
有 一些论点 带有自定义标签的代码更可用。
但是，它导致无效的HTML。这对您的网站不利。
- Google更喜欢它，因此对SEO有好处。
- 它使您的网页更有可能在尚未测试的浏览器中工作。
- 它使您看起来更专业（至少对某些开发人员而言）
- 合规浏览器可以渲染[更快的有效HTML
- 它指出了您可能错过的一堆晦涩的错误，这些错误可能会影响您可能没有测试的内容，例如该页面的编码页或语言集。
- 验证作为调试工具
- 验证作为未来质量检查
- 验证可轻松维护
- 验证有助于教授良好的实践
- 验证是专业精神的标志
yada（另一个（不同的）答案）
编辑：请参阅下面的BoltClock的评论，内容涉及类型VS vs元素。我通常不必担心语义，但他的评论非常适合和信息丰富。
尽管已经有很多很好的答复，但您指出您的 教授 提示您发布此问题，因此您似乎是（正式） 在学校. 。我以为我会不仅在CSS上，而且还会深入了解 力学 网络浏览器。根据 维基百科, ，“ CSS是一种用于描述的样式语言... 一个 标记语言。”（我添加了对“ a”的重点）请注意，它没有说“用html编写”更不用说html的特定版本。CSS可以在HTML，XHTML，XML，XML，SGML，XAML等上使用。当然，您需要一些东西 使成为 这些文档类型都将应用样式。根据定义，CSS不 了解 /了解 /关心 特定的标记语言标签。因此，就HTML而言，标签可能是“无效的”，但是没有CSS中“有效”标签/元素/类型的概念。
现代的 视觉浏览器不是单片程序。它们是具有特定工作要做的不同“引擎”的合并。在 最低限度 我可以想到3个引擎，渲染引擎，CSS引擎和JavaScript引擎/VM。不确定解析器是渲染引擎（反之亦然）的一部分，还是它是单独的引擎，但是您明白了。
是否是 视觉的 浏览器（其他人已经解决了屏幕 读者 可能还面临其他挑战）应用格式取决于解析器是否在文档中留下“无效”标签，然后渲染引擎是否将样式应用于该标签。由于这会使开发/维护更加困难，因此CSS发动机不会写成 理解 “这是HTML文档，因此这里是有效标签 /元素 /类型的列表。” CSS发动机只是找到 标签 /元素 /类型 然后告诉渲染引擎，“这是您应该使用的样式。”渲染引擎是否决定实际应用样式。
这是一种思考的简单方法 基本的 从发动机到发动机的流量：解析器 - > css->渲染。实际上，它更加令人费解，但对于初学者来说已经足够了。
这个答案已经太久了，所以我将在那里结束。
未知元素被视为 divS由现代浏览器。这就是为什么他们工作。这是即将迎来的HTML5标准的一部分，它引入了一个模块化结构，可以添加新元素。
在较旧的浏览器（我认为IE7-）中，您可以应用JavaScript-trick，之后他们也可以使用。
这里有一个 相关问题 我在寻找一个例子时发现。
这里有一个 有关JavaScript修复的问题. 。事实证明，确实是IE7不支持这些元素。
还;他为什么不知道化妆标签存在并与CSS合作。他们不常见吗？
是的，相当。但尤其是：它们没有额外的目的。它们是HTML5的新手。在早期版本的HTML版本中，一个未知的标签无效。
而且，有时候，老师似乎有差距。这可能是由于他们需要向学生传授有关给定主题的基础知识的事实，而且了解所有的来龙去脉并真正最新。我曾经被拘留，因为老师认为我已经编程了病毒，只是因为我可以使用计算机播放音乐 play GWBASIC中的命令。 （真实的故事，是的，很久以前）。但是，无论出于何种原因，我认为不使用Custome元素的建议是一个声音。
实际上，您可以使用自定义元素。这是有关此主题的W3C规格：
http://w3c.github.io/webcomponents/spec/custom/
这是一个教程，解释了如何使用它们：
http://www.html5rocks.com/en/tutorials/webcomponents/customelements/
正如@quentin指出的那样：这是开发初期的规范草案，并且对元素名称的限制施加了限制。
还有一些关于其他答案的事情，这些答案要么简单地措辞，要么有些不正确。
不必要。他们是 “不合格”. 。有什么不同？ 某些东西可以“不符合”，但仍然可以“允许”。 W3C不会将HTML警察送到您的家中并将您拖走。
W3C以某种原因离开了事情。一致性和规格由社区定义。如果您碰巧有一个较小的社区来消费HTML出于更具体的目的，并且他们都同意他们需要使事情变得更容易的一些新元素，那么他们可以将W3C称为 “其他适用规格”. 。 （显然，这是简化的总体，但是您明白了）
也就是说，严格的验证者将宣布您的非标准要素为“无效”。但这是因为验证者的工作是确保符合其验证的任何规格，而不是确保“合法性” 浏览器 或为 利用.
可能，但不太可能。 （替换为“愿意”），这应该导致渲染问题的唯一方法是，如果您的自定义元素与其他规范发生冲突，例如对HTML规范的更改或在同一系统中尊重的另一项规范（例如SVG，数学或其他自定义）。
实际上， CSS可以设计非标准标签的原因 是因为HTML规范 显然是说明 那：
用户代理必须将其不理解为语义中性的元素和属性；将它们留在DOM（用于DOM处理器）中，并根据CSS（对于CSS处理器）进行样式，但不从中推断出任何含义
笔记： 如果您想使用自定义标签，请记住以后对HTML规格的更改可能会吹您的样式，因此请做好准备。 W3C真的不太可能实施 <imsocool> 但是，标签。
您可以使用JavaScript访问和更改自定义元素的原因是因为 规格甚至谈论如何在DOM中处理它们, ，这是（非常可怕的）API，使您可以操纵页面上的元素。
必须将HTMLUNKNOWNELEMENT接口用于该规范（或其他适用规格）未定义的HTML元素。
例如：
var wee = document.createElement('wee');
console.log(wee.toString()); //[object HTMLUnknownElement]
（我敢肯定这会吸引火焰，但有2美分）
根据规格：
我以为这被称为 元素 选择器，但显然它实际上是 类型 选择器。规格继续谈论 CSS qualified names 这对名称的实际含义没有任何限制。也就是说，只要类型选择器与CSS合格的名称语法匹配，它在技术上是正确的CSS，并且将匹配文档中的元素。对特定规格中不存在的元素没有特定于CSS的限制-HTML或其他情况。
没有官方限制您想要的文档中的任何标签。但是，文档确实说
后来说
作者不得使用本规范或其他适用规范允许的元素，属性或属性值，因为这样做会使将来的语言更难扩展。
我不确定规格在哪里或是否表明未尊重的元素在哪里 允许, ，但它确实在谈论 htmlunknownlement 未识别元素的接口。一些浏览器甚至可能无法识别当前规格中的元素（IE8出现）。
有一个 定制元素草稿, 不过，但是我怀疑它是否在任何地方实施。
HTML5可以做到这一点，但是您需要考虑较旧的浏览器。
如果您决定使用它们，请确保对您的HTML发表评论！有些人可能会在弄清楚它是什么时遇到一些麻烦，所以评论可以节省大量时间。
这样的东西，
<!-- Custom tags in use, refer to their CSS for aid -->
当您制作自己的自定义标签/元素时，较旧的浏览器将不知道像HTML5元素一样 nav/section.
如果您对这个概念感兴趣，那么我建议以正确的方式进行操作。
入门
自定义元素允许Web开发人员定义新类型的HTML元素。该规格是网络组件伞下降落的几个新的API原语之一，但这很可能是最重要的。没有自定义元素解锁的功能，网络组件就不存在：
定义新的HTML/DOM元素创建元素，从其他元素延伸到逻辑上将自定义功能汇合到单个标签扩展了现有DOM元素的API
您可以做很多事情，它确实使您的脚本变得美丽，就像本文喜欢的那样。 定义HTML中新元素的自定义元素.
所以让我们回顾一下
优点
非常优雅，易于阅读。
很高兴看不到这么多 divs. 。 ：p
允许代码有独特的感觉
缺点
较旧的浏览器支持是一件重要的事情。
如果其他开发人员不知道自定义标签，可能不知道该怎么办。 （向他们解释或添加评论以通知他们）
最后要考虑一件事，但我不确定是块和内联元素。通过使用自定义标签，您将最终编写更多的CSS，因为具有自定义标签不会有默认的一面。
选择完全取决于您，您应该基于项目的要求。
更新2014年1月2日
这是我发现并认为我会分享的一篇非常有用的文章， 自定义元素.
了解技术为什么定制元素？自定义元素让作者定义自己的元素。作者将JavaScript代码与自定义标签名称相关联，然后使用这些自定义标签名称，就像任何标准标签一样。
例如，在注册了一种称为Super-Button的特殊按钮后，请使用这样的超级按钮：
自定义元素仍然是元素。我们可以像任何标准或今天一样轻松地创建，使用，操纵和构成它们。
这似乎是一个非常好的库，但我确实注意到它没有通过Window的构建状态。我相信这也是在α之前的，所以我会在开发时密切关注。
他为什么不希望您使用它们？它们并不常见，也不是HTML5标准的一部分。从技术上讲，不允许他们。他们是一个黑客。
我自己喜欢他们。您可能对XHTML5感兴趣。它允许您定义自己的标签并将其用作标准的一部分。
另外，正如其他人指出的那样，它们是无效的，因此无法便携。
他为什么不知道它们存在？我不知道，除了它们并不常见。可能他只是不知道你可以。
几乎没有使用化妆标签，因为它们不太可能在当前的每个浏览器和未来的浏览器中可靠地工作。
浏览器必须将HTML代码解析为已知的元素，将化妆标签转换为其他内容以适合文档对象模型（DOM）。由于Web标准不涵盖如何处理标准以外的所有内容，因此Web浏览器倾向于以不同的方式处理非标准代码。
Web开发非常棘手，其中有许多具有自己怪癖的不同浏览器，而没有添加其他不确定性元素。最好的选择是坚持实际上是标准中的事物，这就是浏览器供应商试图遵循的内容，因此，这是最好的工作机会。
我认为，化妆标签可能比使用ID的P（通常是文本的某些块）更令人困惑或不清楚。我们都知道具有ID的AP是一段段落，但是谁知道哪些化妆标签的目的是什么？至少那是我的想法。 :)因此，这更多是一种样式 /清晰性问题，而不是功能之一。
其他人提出了很好的观点，但值得注意的是，如果您看一个框架，例如 Angularjs, ，对于自定义元素和属性有一个非常有效的情况。这些不仅传达了XML更好的语义含义，而且还可以为网页提供行为，外观和感觉。
CSS是一种样式表语言，可用于显示XML文档，而不仅仅是（x）HTML文档。带有化妆标签的片段可能是合法XML文件的一部分；如果将其包装在单个根元素中，那将是一个。可能你已经有一个 <html> ...</html> 周围？任何当前浏览器都可以显示XML文档。
当然，这不是一个很好的XML文档，它缺乏语法和XML声明。如果您改用HTML声明标头（可能是发送正确的MIME类型的服务器配置），则将是非法的HTML。
（x）HTML比普通XML具有优势，因为元素具有语义含义，在网页演示文稿的上下文中很有用。工具可以与这种语义合作，其他开发人员知道含义，它的错误易于且阅读更好。
但是在其他情况下，最好将带有XML和/或XSLT的CSS进行演示。这就是你所做的。由于这不是您的任务，因此您不知道自己在做什么，而HTML/CSS是在大多数情况下，您应该在情况下坚持下去的更好方法。
您应该在文档中添加（X）HTML标头（X）HTML标头，以便工具可以为您提供有意义的错误消息。
...我只是将所有的化妆标签更改为带有ID的段落。
实际上，我对他的建议正确做到了疑问。
一个 <p> 标签用于段落。我看到人们一直在使用它而不是DIV - 仅仅是出于间距的目的或似乎更温和的目的。如果不是段落，请不要使用它。
除非需要专门针对（例如，使用JavaScript），否则您不需要或不想将ID贴在所有内容上。使用课程或直接div。
从早期开始，CSS就被设计为标记不可知论，因此可以与任何标记语言生成Tree Dom结构（例如SVG）一起使用。任何符合符合的标签 name token 生产在CSS中是完全有效的。因此，您的问题与CSS本身有关。
具有自定义标签的元素由HTML5规范支持。 HTML5标准化如何在DOM中解析未知元素的方式。因此，HTML5是第一个启用自定义元素的HTML规范。您只需要使用HTML5 Doctype <!DOCTYPE html> 在您的文档中。
作为自定义标签名称本身...
这个文件 http://www.w3.org/tr/custom-elements/ 建议您选择至少包含一个' - '（dash）符号的自定义标签。这样，他们就不会与未来的HTML元素冲突。因此，您最好将文档更改为这样的东西：
<style>
so-cool {
color:blue;
}
</style>
<body>
<so-cool>HELLO</so-cool>
</body>
令人惊讶的是，没有人（包括我过去的自我）提到可访问性。使用有效标签代替自定义标签的另一个原因是与最大的软件兼容，包括屏幕阅读器和其他人需要用于可访问性目的的工具。此外，诸如WAI之类的可访问性法律 要求 制作可访问的网站，这通常意味着要求他们使用有效的标记。
显然没有人提到它，所以我会的。
这是 浏览器大战.
早在1990年代，互联网首次开始成为主流，竞争在浏览器市场中也增加了。为了保持竞争力并吸引用户，一些浏览器（最著名的是Internet Explorer）试图通过弄清楚哪个页面设计师来尝试有用和“用户友好” 意思是 因此允许不正确的标记（例如， <b><i>foobar</b></i> 将正确地呈现为大胆的意见）。
这在某种程度上是有道理的，因为如果一个浏览器不断抱怨语法错误，而另一个浏览器则吃了任何东西，然后吐出了（或多或少）正确的结果，那么人们自然会涌向后者。
尽管许多人认为浏览器战争已经结束，但自Chrome释放以来的过去几年，浏览器供应商之间的一场新战争已重新点燃，苹果再次开始发展并推动Safari，IE失去了统治地位。 （您可以称其为“冷战”，这是由于浏览器供应商对标准的合作和支持。）因此，即使是当代浏览器，也就不足为奇了。 据说 严格符合Web标准，实际上试图变得“聪明”，并允许这样的标准行为，以便像以前一样尝试获得优势。
不幸的是，这种允许的行为导致了大规模（一些 甚至可能说）标记不佳的网页的癌性。因为IE是最宽松和受欢迎的浏览器，并且由于Microsoft的持续张贴标准，因此IE因鼓励和促进不良的设计以及传播和延续破碎的页面而臭名昭著。
您现在可以在某些浏览器上使用类似的怪癖和利用来摆脱某些浏览器，但是除了偶尔的拼图或游戏之类的东西外，您应该始终坚持 网络标准 当创建网页和站点以确保它们正确显示并避免使用浏览器更新而损坏（可能完全被忽略）。
尽管浏览器通常会将CSS与HTML标签联系起来，而不管它们是否有效，但您绝对不应该这样做。
从CSS的角度来看，从技术上讲，这没什么错。但是，使用制作标签是您在HTML中永远不会做的事情。
HTML是一种标记语言，这意味着每个标签对应于特定类型的信息。
您的UP标签与任何类型的信息不符。这将从网络爬网（例如Google）中产生问题。
阅读有关该信息的更多信息 正确标记的重要性.
DIV是指多个相关元素的组，该元素旨在以块形式显示，并且可以作为此类操作。
跨度指的是与当前所在的上下文相比，要划定的元素，并且本来可以显示内联的元素，而不是作为块。一个例子是，句子中的几个单词是否需要所有帽子。
自定义标签与任何标准不关联，因此应将SPAN/DIV与类/ID属性一起使用。
有 非常 对此的具体豁免，例如 角JS
尽管CSS有一个称为“标签选择器”的东西，但实际上并不知道标签是什么。这留给文档的语言来定义。 CSS的设计不仅与HTML一起使用，还与XML一起使用，在这里（假设您不使用DTD或其他验证方案），标签几乎可以是任何东西。您也可以将其与其他语言一起使用，尽管您需要提出自己的语义，以确切地说明“标签”和“属性”与之相对应的内容。
浏览器通常将CSS应用于HTML中的未知标签，因为这被认为比完全破裂更好：至少它们可以显示一些东西。但它是 非常 故意使用“假”标签的不良练习。这样做的原因之一是，新标签确实会不时定义，如果定义了看起来像您的假标签，但没有完全相同的方式，则可能会在新浏览器上引起您的网站问题。
CSS为什么与假元素一起使用？ 因为它不会伤害任何人，因为无论如何您都不应该使用它们。
为什么我的教授不希望我使用化妆元素？ 因为如果将来通过规范定义该元素，您的元素将具有不可预测的行为。
另外，他为什么不知道化妆元素存在并与CSS合作。他们不常见吗？ 因为他像大多数其他网络开发人员一样，了解我们不应该使用可能在将来随机破裂的事物。
