在我的课上,我玩了一下,发现CSS与虚构的元素一起工作。
例子:
imsocool { 颜色:蓝色; } < imsocool >你好< / imsocool >
当我的教授第一次看到我使用它时,他有点惊讶于虚构元素的工作,并建议我简单地将所有的虚构元素更改为带有ID的段落。
为什么我的教授不让我使用合成元素?他们工作效率很高。
另外,为什么他不知道存在虚构元素,并与CSS一起工作。它们不常见吗?
在我的课上,我玩了一下,发现CSS与虚构的元素一起工作。
例子:
imsocool { 颜色:蓝色; } < imsocool >你好< / imsocool >
当我的教授第一次看到我使用它时,他有点惊讶于虚构元素的工作,并建议我简单地将所有的虚构元素更改为带有ID的段落。
为什么我的教授不让我使用合成元素?他们工作效率很高。
另外,为什么他不知道存在虚构元素,并与CSS一起工作。它们不常见吗?
当前回答
这对于html5来说是可行的,但是你需要考虑到旧的浏览器。
如果你决定使用它们,一定要注释你的html!!有些人可能很难弄清楚它是什么,所以注释可以节省他们大量的时间。
就像这样,
<!-- Custom tags in use, refer to their CSS for aid -->
当你创建自己的自定义标签/元素时,旧的浏览器将不知道这是什么,就像html5的元素如nav/section一样。
如果你对这个概念感兴趣,那么我建议你用正确的方法去做。
开始 自定义元素允许web开发人员定义新的HTML类型 元素。该规范是几个新的API原语之一 Web组件的保护伞,但它很可能是最 重要的。如果没有通过解锁的特性,Web组件就不存在 自定义元素: 定义新的HTML/DOM元素创建从其他元素扩展的元素 元素从逻辑上将自定义功能捆绑在一起 扩展现有DOM元素的API
您可以使用它做很多事情,并且它确实可以使您的脚本更漂亮,就像本文想说的那样。自定义元素在HTML中定义新元素。
让我们回顾一下,
Pros
非常优雅,易于阅读。 很高兴没有看到那么多的潜水者。: p 让代码有一种独特的感觉
Cons
较老的浏览器支持是需要考虑的重要因素。 如果不了解自定义标记,其他开发人员可能不知道该做什么。(向他们解释或添加评论告知他们) 最后要考虑的一件事,但我不确定,是块和内联元素。通过使用自定义标签,你最终会写更多的css,因为自定义标签不会有默认的一面。
选择完全取决于您,您应该根据项目的要求来选择。
更新1/2/2014
这里有一篇非常有用的文章,我发现并打算分享,自定义元素。
为什么要自定义元素?自定义元素让作者进行定义 他们自己的元素。作者将JavaScript代码与自定义标记相关联 名称,然后像使用任何标准一样使用这些自定义标记名称 标签。 例如,注册后的一种特殊按钮叫做 超级按钮,像这样使用超级按钮: 自定义元素仍然是元素。我们 能像其他的一样轻松地创建、使用、操纵和组合它们吗 今天的标准。
这似乎是一个非常好用的库,但我注意到它没有通过windows的构建状态。我相信这也是一个预alpha版本,所以我会密切关注它的发展。
其他回答
他为什么不想让你用?它们既不常见,也不是HTML5标准的一部分。 从技术上讲,这是不允许的。他们就是个笨蛋。
不过我自己也喜欢。您可能对XHTML5感兴趣。它允许您定义自己的标记,并将它们作为标准的一部分使用。
此外,正如其他人指出的那样,它们是无效的,因此不能携带。
为什么他不知道他们的存在?我不知道,只知道它们不常见。可能他只是不知道你可以。
虽然浏览器通常会将CSS与HTML标记关联起来,不管它们是否有效,但你绝对不应该这样做。
从CSS的角度来看,这在技术上没有什么问题。然而,在HTML中绝对不应该使用编造的标签。
HTML是一种标记语言,这意味着每个标记对应于特定类型的信息。
您创建的标记不对应于任何类型的信息。这将产生来自网络爬虫的问题,如谷歌。
阅读有关正确标记重要性的更多信息。
Edit
div指的是多个相关元素的组,意味着以块形式显示,并可以这样操作。
span指的是与它们当前所在的上下文样式不同的元素,它们应该内联显示,而不是作为块显示。一个例子是句子中的几个单词需要全部大写。
自定义标记与任何标准都不相关,因此span/div应该与class/ID属性一起使用。
有一些非常特殊的例外情况,比如Angular JS
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 ->渲染。实际上,它要复杂得多,但这对于初学者来说已经足够好了。
这个答案已经太长了,所以我就到此为止。
实际上你可以使用自定义元素。下面是关于这个主题的W3C规范:
http://w3c.github.io/webcomponents/spec/custom/
这里有一个教程来解释如何使用它们:
http://www.html5rocks.com/en/tutorials/webcomponents/customelements/
正如@Quentin所指出的:这是开发早期的规范草案,它对元素名称施加了限制。
我认为编造的标签可能比带有id的p更令人困惑或不清楚(通常是一些文本块)。我们都知道带ID的p是一个段落,但是谁知道创建的标记是用来干什么的呢?至少我是这么想的。:)因此,这更多的是一个风格/清晰度问题,而不是功能问题。