问答中心分类: HTML为什么CSS可以处理假元素?
0
匿名用户 提问 1天 前

在我的课堂上,我到处玩,发现CSS可以与组合元素一起工作。
例子:

imsocool {
    color:blue;
}
HELLO

当我的教授第一次看到我使用这个时,他对合成元素的有效性有点惊讶,并建议我简单地将所有合成元素更改为带有ID的段落。
为什么我的教授不让我使用合成元素?它们有效地工作。
还有,为什么他不知道组合元素存在并与CSS一起工作。它们不常见吗?

18 Answers
0
Dan Grahn 回答 1天 前

TL;博士

  • 自定义标记在HTML中无效。这可能会导致渲染问题。
  • 由于代码不可移植,使得未来的开发更加困难。
  • 有效的HTML提供了很多好处,如搜索引擎优化、速度和专业性。

长答案
一些论点带有自定义标记的代码更有用。
但是,它会导致无效的HTML。这对你的网站不好。
有效CSS/HTML |堆栈溢出点

  • 谷歌更喜欢它,所以它有利于搜索引擎优化。
  • 它使您的网页更有可能在您尚未测试的浏览器中工作。
  • 它让你看起来更专业(至少对一些开发者来说)
  • 兼容浏览器可以更快地呈现[有效HTML]
  • 它指出了一系列您可能忽略的模糊错误,这些错误可能会影响您可能尚未测试的内容,例如页面的代码页或语言集。

为什么验证| W3C

  • 验证作为调试工具
  • 验证作为未来的质量检查
  • 验证简化了维护
  • 验证有助于传授良好做法
  • 验证是专业的标志
Pat Dobson 回复 1天 前

有效代码的另一个论点是,如果您需要将代码移交给另一个开发人员或您正在团队中工作,其他成员或新开发人员应该立即了解您试图实现的目标……使用无效的、虚构的标记,这可能会变得非常困难。。。

Dan Grahn 回复 1天 前

又称作未来的发展和易于维护。

0
Andrew Steitz 回答 1天 前

YADA(另一个(不同的)答案)
编辑:请参阅下面BoltClock关于类型vs标记vs元素的评论。我通常不担心语义学,但他的评论非常恰当,内容丰富。
虽然已经有很多好的回复,但您表示您的教授提示您发布此问题,使您看起来(正式)在学校。我想我会更深入地阐述一下CSS和机械师的网页浏览器。根据维基百科,“CSS是一种样式表语言,用于描述用标记语言。“(我强调了“a”)注意,它没有说“用HTML编写”,更不用说HTML的特定版本了。CSS可以用于HTML、XHTML、XML、SGML、XAML等。当然,你需要一些能够提供这些文档类型中的每一种都将应用样式。根据定义,CSS没有了解/理解/关心特定标记语言标记。因此,就HTML而言,标记可能是“无效的”,但CSS中没有“有效”标记/元素/类型的概念。
现代的视觉浏览器不是单片程序。它们是有特定工作要做的不同“引擎”的混合体。在a裸最小值我可以想到3个引擎,渲染引擎、CSS引擎和javascript引擎/虚拟机。不确定解析器是否是渲染引擎的一部分(反之亦然),或者它是否是一个单独的引擎,但您已经知道了。
是否为视力的浏览器(其他人已经解决了屏幕读者处理无效标记可能还有其他挑战)应用格式取决于解析器是否在文档中保留“无效”标记,然后呈现引擎是否将样式应用于该标记。由于这将使开发/维护更加困难,因此CSS引擎不适用于这是一个HTML文档,下面是有效标记/元素/类型的列表标记/元素/类型然后告诉渲染引擎,“这是你应该应用的样式。”渲染引擎是否决定实际应用这些样式取决于它。
这里有一个简单的方法来思考基本的从引擎到引擎的流程:解析器->CSS->渲染。实际上,这要复杂得多,但这对于初学者来说已经足够好了。
这个答案已经太长了,所以我将在这里结束。

BoltClock 回复 1天 前

虽然你提到“标签”已经成为元素的常用术语,我不能也不会反对,但这并没有改变一个事实,即它们的正确术语仍然是“元素”。标记特别是HTML和XML的语法特性,在与CSS兼容的其他文档语言中可能不存在。因此,说人们通常称之为CSS样式的“标记”并不能很好地解释CSS的文档语言不可知论。

0
GolezTrol 回答 1天 前

未知元素被视为div通过现代浏览器。这就是他们工作的原因。这是即将到来的HTML5标准的一部分,该标准引入了一种可以添加新元素的模块化结构。
在较旧的浏览器(我认为IE7-)中,可以应用Javascript技巧,之后它们也可以工作。
这是一个相关问题我在寻找一个例子时发现。
这是一个关于Javascript修复的问题事实证明,IE7确实不支持这些现成的元素。

而且为什么他不知道虚构标签的存在并使用CSS。它们不常见吗?

是的,相当。但特别是:它们没有额外的用途。在早期版本的HTML中,未知标记无效。
此外,有时,教师似乎在知识方面存在差距。这可能是因为他们需要教学生关于某一特定学科的基本知识,而了解所有细节并真正掌握最新信息并没有真正的回报。playGWBasic中的命令。(真实的故事,是的,很久以前)。但不管是什么原因,我认为不使用自定义元素的建议是合理的。

GolezTrol 回复 1天 前

@小野仙台你让我怀疑,但我真的认为它们被呈现为“没有额外标记的块元素”,所以基本上像div。

cimmanon 回复 1天 前

@OnoSendai块元素的显示属性为,但这不是必需的。例如,锚定标记被提升为块状态(意味着可以将div之类的块元素放在其中),但仍然具有内联显示属性。

OnoSendai 回复 1天 前

我明白了-谢谢你的澄清,GolezTrol和cimmanon。

BoltClock 回复 1天 前

的初始值displayinline,所以@OnoSendai的评论是正确的。

BoltClock 回复 1天 前

@西曼农:a元素现在有了一个透明的内容模型,所以它们是块还是内联取决于它们的祖先是块还是内嵌。这个答案是关于未知元素的,HTML没有为其定义内容模型。就CSS而言,如果没有浏览器默认值display值它使用初始值。

fluffy 回复 1天 前

@BoltClock’sUnicorn那么这意味着什么酒吧将渲染这两个标记为块?这似乎有点可疑。。。

BoltClock 回复 1天 前

@fluffy:我说的是HTML内容模型(直到CSS部分…)。它基本上意味着a没有任何特定的内容模型,因此它可以放在几乎任何地方,而不会使HTML无效。在CSS方面,a元素默认为display: inline,由于向后兼容,这一点没有改变。

fluffy 回复 1天 前

@BoltClock’sUnicorn好吧,我想我只是对你所说的“它们是块还是内联取决于它们的祖先是块还是内嵌”的意思感到困惑。HTML对“块”和“内联”有自己的含义吗我以前只在样式方面看到过这一点(现在由CSS涵盖)。

BoltClock 回复 1天 前

@fluffy:老实说,我不知道术语block和inline是如何在HTML中出现的——HTML分别将内容模型称为“流内容”和“短语内容”。我想它们恰好类似于CSS中的块和内联显示模式。但事实上,它们在很大程度上是不相关的。

Alohci 回复 1天 前

@fluffy-“Block”是HTML中元素的一个类别,至少从HTML 2.0开始,早在CSS发明之前。“内联”直到HTML 4.0才出现,与CSS同时出现,它意味着直接映射到显示:在CSS中内联。正如Boltclock所说,HTML5没有使用这些术语,可能是故意避免与CSS含义混淆。另一方面,“流内容”既不类似于HTML4块,也不类似于CSS块,因为它包含短语元素和如下元素table以及传统的方块元素。

Alohci 回复 1天 前

此外,透明内容模型并不完全是它的祖先是块还是内联,而是它的父对象是否允许流但不允许非语法内容。例如<p>元素不是短语内容(和以前的块一样),但只允许短语内容。所以<a>a内的元素<p>也只能有语法内容。但是<div>可以有流畅、无语法的孩子,所以<a>a内的元素<div>也可以有流畅、无语法的内容。

fluffy 回复 1天 前

@好的,这很有帮助。我仍然不确定“流内容”和“短语内容”是什么意思,但这是我可以自己查的。谢谢

Alohci 回复 1天 前

@fluffy-我发现异常情况下更容易理解流内容。非流内容的元素是只能出现在特定父级中的元素,例如li(仅在ul和ol内),tbody(表),td(tr),figcaption(图)等等。

BoltClock 回复 1天 前

@阿洛奇:谢谢你的澄清。

KRyan 回复 1天 前

@阿洛奇,我很想把这个评论流转换成问答。这是你在评论中隐藏的一些很棒的信息。

0
Bas van Dijk 回答 1天 前

实际上,您可以使用自定义元素。以下是关于此主题的W3C规范:
http://w3c.github.io/webcomponents/spec/custom/
下面是一个教程,解释如何使用它们:
http://www.html5rocks.com/en/tutorials/webcomponents/customelements/
正如@Quentin所指出的那样:这是开发早期的一个规范草案,它对元素名称施加了限制。

Quentin 回复 1天 前

应该注意的是,这是开发早期的一个规范草案,并且它对元素名称可以是什么施加了限制。

Vitor Canova 回复 1天 前

+我不知道W3C的用途github但事实上,他们使用。

0
Ben Lesh 回答 1天 前

关于其他答案,有一些地方要么措辞不当,要么可能有点不正确。
FALSE(ish):非标准HTML元素为“不允许”、“非法”或“无效”。
不一定。他们是“不合格”.有什么区别?有些东西不能“不符合”,但仍然是“允许的”。W3C不会派HTML警察到你家把你带走。
W3C之所以这样做是有原因的。一致性和规范由社区定义。如果你碰巧有一个较小的社区为更具体的目的使用HTML,并且他们都同意一些新的元素,他们需要使事情变得更简单,那么他们可以拥有W3C所称的“其他适用规范”(显然,这是一种过度简化,但你明白了)
也就是说,严格的验证器将声明您的非标准元素为“无效”。但这是因为验证器的工作是确保符合其验证的任何规范,而不是确保验证的“合法性”浏览器或用于使用.
FALSE(ish):非标准HTML元素导致渲染问题
可能,但不太可能。(将“will”替换为“may”)这会导致呈现问题的唯一方式是,如果自定义元素与其他规范冲突,例如对HTML规范的更改或同一系统中遵守的其他规范(例如SVG、数学或自定义内容)。
事实上CSS可以设计非标准标签的原因是因为HTML规范明确指出即:

用户代理必须将其不理解的元素和属性视为语义中立;将它们留在DOM中(对于DOM处理器),并根据CSS对其进行样式化(对于CSS处理器),但不从中推断任何含义

注:如果您想使用自定义标记,只需记住,稍后对HTML规范的更改可能会破坏您的样式,所以请做好准备。W3C不太可能实现<imsocool>然而,标签。
非标准标记和JavaScript(通过DOM)
可以使用JavaScript访问和更改自定义元素的原因是规范甚至讨论了应该如何在DOM中处理它们,这是一个(非常可怕的)API,允许您操作页面上的元素。

HTMLunKnowneElement接口必须用于本规范(或其他适用规范)未定义的HTML元素。

TL;DR:符合规范是为了通信和安全。除a验证器,其唯一目的是强制一致性,但其使用是可选的。
例如:

var wee = document.createElement('wee');
console.log(wee.toString()); //[object HTMLUnknownElement]

(我肯定这会引火烧身,但这是我的2美分)

BoltClock 回复 1天 前

HTML不仅指定了如何使用CSS处理元素,CSS规范在很大程度上也是设计上与文档语言无关的(这在其他一些答案中已经有点含蓄了,但为了方便起见,我在这里注意到了这一点)。如果有任何特定于HTML和/或XHTML的行为,始终指示,即使在信息性文本中(例如,“HTML元素的ID由id属性),而不仅仅是规范性文本(参见背景和边框3例如)。