在我的课上,我玩了一下,发现CSS与虚构的元素一起工作。
例子:
imsocool { 颜色:蓝色; } < imsocool >你好< / imsocool >
当我的教授第一次看到我使用它时,他有点惊讶于虚构元素的工作,并建议我简单地将所有的虚构元素更改为带有ID的段落。
为什么我的教授不让我使用合成元素?他们工作效率很高。
另外,为什么他不知道存在虚构元素,并与CSS一起工作。它们不常见吗?
在我的课上,我玩了一下,发现CSS与虚构的元素一起工作。
例子:
imsocool { 颜色:蓝色; } < imsocool >你好< / imsocool >
当我的教授第一次看到我使用它时,他有点惊讶于虚构元素的工作,并建议我简单地将所有的虚构元素更改为带有ID的段落。
为什么我的教授不让我使用合成元素?他们工作效率很高。
另外,为什么他不知道存在虚构元素,并与CSS一起工作。它们不常见吗?
当前回答
我认为编造的标签可能比带有id的p更令人困惑或不清楚(通常是一些文本块)。我们都知道带ID的p是一个段落,但是谁知道创建的标记是用来干什么的呢?至少我是这么想的。:)因此,这更多的是一个风格/清晰度问题,而不是功能问题。
其他回答
博士TL;
自定义标记在HTML中无效。这可能会导致渲染问题。 使将来的开发更加困难,因为代码不可移植。 有效的HTML提供了很多好处,比如SEO、速度和专业性。
长回答
有一些争论认为带有自定义标记的代码更有用。
但是,这会导致无效的HTML。这对你的网站不好。
有效的CSS/HTML | StackOverflow的要点
谷歌更喜欢它,所以它对SEO有好处。 它使你的网页更有可能在你没有测试过的浏览器上运行。 它让你看起来更专业(至少对一些开发人员来说) 兼容的浏览器可以更快地呈现[有效的HTML] 它指出了一堆你可能忽略的、影响你可能没有测试的东西的模糊错误,例如代码页或页面的语言集。
为什么验证| W3C
作为调试工具的验证 验证作为一种面向未来的质量检查 验证简化了维护 验证有助于教授好的实践 认可是专业的标志
...我只是简单地将我所有的自制标签更改为带有ID的段落。
我实际上不同意他关于如何正确做这件事的建议。
<p>标记用于段落。我看到人们一直在使用它而不是div——仅仅是为了空格的目的,或者因为它看起来更温和。如果不是一个段落,就不要用。 你不需要或想要把ID贴在所有东西上,除非你需要专门针对它(例如用Javascript)。使用类或直接使用div。
这对于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版本,所以我会密切关注它的发展。
现代浏览器将未知元素视为div。这就是它们有效的原因。这是即将到来的HTML5标准的一部分,该标准引入了模块化结构,可以向其中添加新元素。
在较老的浏览器(我认为是IE7-)中,你可以应用javascript技巧,之后它们也能正常工作。
下面是我在寻找例子时发现的一个相关问题。
这里有一个关于Javascript修复的问题。事实证明IE7确实不支持这些开箱即用的元素。
也;为什么他不知道自制标签的存在和CSS的工作。它们不常见吗?
是的,相当。但特别的是:它们没有额外的用途。他们是html5的新手。在HTML的早期版本中,未知标记是无效的。
Also, teachers seem to have gaps in their knowledge, sometimes. This might be due to the fact that they need to teach students the basics about a given subject, and it doesn't really pay off to know all ins and outs and be really up to date. I once got detention because a teacher thought I programmed a virus, just because I could make a computer play music using the play command in GWBasic. (True story, and yes, long ago). But whatever the reason, I think the advice not to use custome elements is a sound one.
从早期开始,CSS就被设计为与标记无关的,因此它可以与任何标记语言一起使用,生成类似DOM结构的树(例如SVG)。任何符合名称令牌生成的标记在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>