在我的课上,我玩了一下,发现CSS与虚构的元素一起工作。
例子:
imsocool { 颜色:蓝色; } < imsocool >你好< / imsocool >
当我的教授第一次看到我使用它时,他有点惊讶于虚构元素的工作,并建议我简单地将所有的虚构元素更改为带有ID的段落。
为什么我的教授不让我使用合成元素?他们工作效率很高。
另外,为什么他不知道存在虚构元素,并与CSS一起工作。它们不常见吗?
在我的课上,我玩了一下,发现CSS与虚构的元素一起工作。
例子:
imsocool { 颜色:蓝色; } < imsocool >你好< / imsocool >
当我的教授第一次看到我使用它时,他有点惊讶于虚构元素的工作,并建议我简单地将所有的虚构元素更改为带有ID的段落。
为什么我的教授不让我使用合成元素?他们工作效率很高。
另外,为什么他不知道存在虚构元素,并与CSS一起工作。它们不常见吗?
当前回答
虽然浏览器通常会将CSS与HTML标记关联起来,不管它们是否有效,但你绝对不应该这样做。
从CSS的角度来看,这在技术上没有什么问题。然而,在HTML中绝对不应该使用编造的标签。
HTML是一种标记语言,这意味着每个标记对应于特定类型的信息。
您创建的标记不对应于任何类型的信息。这将产生来自网络爬虫的问题,如谷歌。
阅读有关正确标记重要性的更多信息。
Edit
div指的是多个相关元素的组,意味着以块形式显示,并可以这样操作。
span指的是与它们当前所在的上下文样式不同的元素,它们应该内联显示,而不是作为块显示。一个例子是句子中的几个单词需要全部大写。
自定义标记与任何标准都不相关,因此span/div应该与class/ID属性一起使用。
有一些非常特殊的例外情况,比如Angular JS
其他回答
关于其他的答案,有一些事情要么措辞不当,要么可能有点不正确。
FALSE(略):非标准HTML元素“不允许”、“非法”或“无效”。
不一定。他们“不合格”。有什么不同?有些东西可以“不符合”,但仍然是“允许的”。W3C不会派HTML警察到你家把你拖走。
W3C这样做是有原因的。一致性和规范是由一个团体定义的。如果恰好有一个较小的社区出于更特定的目的使用HTML,并且他们都同意一些他们需要的新元素以使事情变得更容易,他们可以拥有W3C所说的“其他适用规范”。(显然,这是一种过于简单的做法,但你可以理解)
也就是说,严格的验证器会将您的非标准元素声明为“无效”。但这是因为验证器的工作是确保符合它验证的任何规范,而不是确保浏览器或使用的“合法性”。
FALSE(略):非标准HTML元素将导致呈现问题
有可能,但不太可能。(将“will”替换为“might”)导致呈现问题的唯一方式是您的自定义元素与另一个规范冲突,例如对HTML规范的更改或同一系统内的另一个规范(如SVG、Math或其他自定义的东西)。
事实上,CSS可以样式化非标准标签的原因是因为HTML规范清楚地指出:
用户代理必须将它们不理解的元素和属性视为语义中立的;将它们留在DOM中(用于DOM处理器),并根据CSS(用于CSS处理器)对它们进行样式化,但不从中推断任何含义
注意:如果您想使用自定义标记,请记住稍后对HTML规范的更改可能会破坏您的样式,因此请做好准备。然而,W3C不太可能实现<imsocool>标记。
非标准标签和JavaScript(通过DOM)
您可以使用JavaScript访问和修改自定义元素的原因是,规范甚至讨论了如何在DOM中处理它们,DOM是允许您操作页面上元素的(非常可怕的)API。
htmllunknownelement接口必须用于本规范(或其他适用规范)未定义的HTML元素。
TL;DR:符合规范是为了沟通和安全的目的。除了验证器以外,其他任何方法都允许不一致性,验证器的唯一目的是强制一致性,但其使用是可选的。
例如:
var wee = document.createElement('wee');
console.log(wee.toString()); //[object HTMLUnknownElement]
(我确信这会引起争议,但这是我的2分)
实际上你可以使用自定义元素。下面是关于这个主题的W3C规范:
http://w3c.github.io/webcomponents/spec/custom/
这里有一个教程来解释如何使用它们:
http://www.html5rocks.com/en/tutorials/webcomponents/customelements/
正如@Quentin所指出的:这是开发早期的规范草案,它对元素名称施加了限制。
为什么CSS使用假元素?
(大多数)浏览器被设计成(在某种程度上)向前兼容未来添加的HTML。未识别的元素被解析到DOM中,但没有与它们相关的语义或专门的默认呈现。
当一个新元素被添加到规范中时,有时CSS、JavaScript和ARIA可以用来在旧的浏览器中提供相同的功能(元素必须出现在DOM中,以便这些语言能够操作它们来添加该功能)。
(有一个自定义元素的规范,但是它们有特定的命名要求,并且需要使用JavaScript进行注册。)
为什么我的教授不让我使用合成元素?
它们不被HTML规范所允许 它们可能与将来同名的标准元素冲突 可能有一个现有的HTML元素更适合这个任务
也;为什么他不知道构成元素的存在并与CSS一起工作。它们不常见吗?
是的。人们不使用它们是因为它们有上述问题。
CSS是一种样式表语言,可用于表示XML文档,而不仅仅是(X)HTML文档。带有自制标记的代码片段可以是合法XML文档的一部分;如果你把它包含在一个根元素中,它就是1。可能你已经有一个<html>…</html> around it?当前的任何浏览器都可以显示XML文档。
当然,它不是一个很好的XML文档,它缺少语法和XML声明。如果使用HTML声明头(可能是发送正确mime类型的服务器配置),那么它将是非法的HTML。
HTML比普通XML有优势,因为元素有语义意义,在网页表示的上下文中是有用的。工具可以使用这种语义,其他开发人员知道它的含义,它更不容易出错,更易于阅读。
但在其他上下文中,最好使用CSS和XML和/或XSLT来表示。这就是你所做的。因为这不是你的任务,你不知道你在做什么,HTML/CSS是更好的方式,大多数时候你应该在你的场景中坚持使用它。
您应该在文档中添加一个(X)HTML头,以便工具能够为您提供有意义的错误消息。
YADA(又一个(不同的)答案)
编辑:请参阅下面BoltClock关于类型、标签和元素的评论。我通常不担心语义学,但他的评论非常合适,信息量很大。
Although there are already a bunch of good replies, you indicated that your professor prompted you to post this question so it appears you are (formally) in school. I thought I would expound a little bit more in depth about not only CSS but also the mechanics of web browsers. According to Wikipedia, "CSS is a style sheet language used for describing ... a document written in a markup language." (I added the emphasis on "a") Notice that it doesn't say "written in HTML" much less a specific version of HTML. CSS can be used on HTML, XHTML, XML, SGML, XAML, etc. Of course, you need something that will render each of these document types that will also apply styling. By definition, CSS does not know / understand / care about specific markup language tags. So, the tags may be "invalid" as far as HTML is concerned, but there is no concept of a "valid" tag/element/type in CSS.
现代的可视化浏览器不是单一的程序。它们是不同“引擎”的混合体,各自承担着特定的任务。至少我能想到3个引擎,渲染引擎,CSS引擎和javascript引擎/VM。不确定解析器是否是呈现引擎的一部分(反之亦然),或者它是否是一个单独的引擎,但您可以理解。
Whether or not a visual browser (others have already addressed the fact that screen readers might have other challenges dealing with invalid tags) applies the formatting depends on whether the parser leaves the "invalid" tag in the document and then whether the rendering engine applies styles to that tag. Since it would make it more difficult to develop/maintain, CSS engines are not written to understand that "This is an HTML document so here are the list of valid tags / elements / types." CSS engines simply find tags / elements / types and then tell the rendering engine, "Here are the styles you should apply." Whether or not the rendering engine decides to actually apply the styles is up it.
这里有一个简单的方法来考虑从引擎到引擎的基本流程:解析器-> CSS ->渲染。实际上,它要复杂得多,但这对于初学者来说已经足够好了。
这个答案已经太长了,所以我就到此为止。