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

在我的课堂上,我在玩耍时发现 CSS 可以与合成元素一起使用。
例子:

imsocool {
    color:blue;
}
HELLO

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

cen 回复 1月 前

因为您想象的标签不可移植……如果您将代码展示给其他人,他们需要找出 tose 标签的含义。您的 CSS 代码也不能移植或重用于任何其他项目。

cen 回复 1月 前

我相信它不适用于像 IE8 这样的旧浏览器。

cen 回复 1月 前

HTML 是一种为数据提供意义的方式,可以被多种媒介(包括人和浏览器)理解。你编造的标签没有任何意义。这是他不想让你使用它们的众多原因之一。

cen 回复 1月 前

它适用于较旧的浏览器,只要您在设置元素之前创建元素 – 这就是 HTML5 垫片的工作方式,请参阅:paulirish.com/2011/the-history-of-the-html5-shiv

cen 回复 1月 前

@MrMisterMan 实际上我认为他们这样做。更有意义的是——<p>555-212-2344</p>或者555-212-2344

cen 回复 1月 前

@YuriyGalanter;P

cen 回复 1月 前

您是否有机会使用 IE?仅仅因为它可以在一个浏览器中工作并不意味着它可以在所有浏览器中工作……你最好坚持标准。

cen 回复 1月 前

@YuriyGalanter无处不在,因为它是一个标准。没有什么会支持标签。

cen 回复 1月 前

@YuriyGalanter 这有点像我对 UI 框架的想法。几乎就像一个新的引导程序。

cen 回复 1月 前

@YuriyGalanter — 段落更有意义(尽管意思是错误的,因为内容不是段落)。<supportPhone>没有任何意义,因为 HTML 没有任何意义。

cen 回复 1月 前

随机标记有什么语义价值?屏幕阅读器应该如何处理呢?

cen 回复 1月 前

@MrMisterMan 请记住,所有这些规则和编程结构都是由不比你聪明的人制定的,你可以改变它,你可以影响它,你可以构建自己的东西供其他人使用。

cen 回复 1月 前

@L_7337 老实说,他们可能比我聪明得多,但是是的,我明白你的意思。

cen 回复 1月 前

我可能会指出,您所做的基本上是 XML 而不是 HTML。 XML 是一种更抽象的标记语言,它允许您以您描述的“有用”方式表示数据 – 即。附带语义。然后,您可以使用 XSLT 转换以 HTML 格式呈现数据

cen 回复 1月 前

@MrMisterMan 聪明与否,我们都回想起来,当这些规则最初制定时他们没有

cen 回复 1月 前

@L_7337:不管他们是否更聪明,他们很久以前就做到了,我们有几十年的遗留软件依赖这些标准。是的,它们有缺陷,是的,我们中的许多人都可以改进它们,因为我们了解他们的错误,但我们无法改变过去并删除遗留软件。

cen 回复 1月 前

我会在那里添加我的答案,但就问题的范围和答案而言,“重复”问题是完全不够的。

cen 回复 1月 前

@blesh 我刚刚投票决定重新开放。那里的答案并没有真正解决this问题..它们肯定是相关的,但它们不是重复的。“可能吗..”对比“为什么…”

cen 回复 1月 前

因为他们不会工作,如果我创造一些made up我自己的浏览器。我只允许已知元素;)

cen 回复 1月 前

如果您曾经为 XML 设置样式,那么它会派上用场。

cen 回复 1月 前

当然,如果你真的想在 HTML 中添加自己的语义标签,你可以。您只需要创建自己的从 HTML 派生的文档类型,并且可以添加任意数量的标签。不过,浏览器中的默认处理是您必须测试的(尽管规范可能对此有话要说)。

cen 回复 1月 前

补充一下 ose 所说的内容:HTML 只是一个 SGML 应用程序(XHTML 是一个(更严格的)XML 应用程序)。因此,添加自定义标签您只是在创建自己的 SGML/XML 应用程序。事实上,它不会是更多的 HTML,因为它不会通过 HTML 验证器。

cen 回复 1月 前

另外,浏览器如何知道你有一个内联元素还是一个块元素?我想它可以在一定程度上说明该元素是否在文本块中使用,例如em,但这不适用于通常写在单独行上的元素,例如img.默认可能是块元素。此外,大多数浏览器都被构建为具有弹性并捕获此类错误。

cen 回复 1月 前

看一下Angular.js.他们大量使用自定义元素(或至少支持您这样做)。恕我直言,Angular 是新一代 JavaScript 框架中最好的,并且被广泛使用。总会有人告诉你事情是不允许的或不应该做的。如果你要打破规则,首先理解它们会有所帮助。然后你就可以成功破解它们。

cen 回复 1月 前

@Trompa 尽管与 SGML 和 XML 密切相关,但 HTML 实际上并不符合两者,并且被接受为 HTML5 的 WHATWG 生活标准明确地远离两者。 XHTML 是 W3C 现在放弃的使其成为 XML 应用程序的尝试(早期版本只是松散地基于 SGML),尽管“XHTML5”作为 HTML5 的 XML-conformant 表示存在,如果您真的想要的话。

cen 回复 1月 前

@Jordan,提问者:您将在软件/网络开发方面走得很远。最伟大的头脑会看到他们能做什么,即使他们最终出于规范/约定的原因不使用它。

cen 回复 1月 前

语义网应该是一个意义网。使用未知标签根本无助于语义原因。当然它们有效,但我怀疑它们应该被任何人使用。想想一个大型网站和 10 位前端开发人员,让他们弄清楚发生了什么事情会有多混乱?

cen 回复 1月 前

你有权利。这是未来。你的教授教你存在感。

cen 回复 1月 前

为什么我的蓝色房子油漆也会使我的车变蓝?

18 Answers
0
dan grahn 回答 1月 前

TL;博士

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

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

  • 谷歌更喜欢它,所以它有利于 SEO。
  • 它使您的网页更有可能在未经测试的浏览器中运行。
  • 它让你看起来更专业(至少对一些开发人员来说)
  • 兼容的浏览器可以渲染 [更快的有效 HTML]
  • 它指出了一堆你可能错过的模糊错误,这些错误会影响你可能没有测试过的东西,例如页面的代码页或语言集。

为什么要验证 | W3C

  • 验证作为调试工具
  • 验证作为面向未来的质量检查
  • 验证简化了维护
  • 验证有助于传授良好实践
  • 验证是专业的标志
pat dobson 回复 1月 前

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

dan grahn 回复 1月 前

又名。未来的发展和轻松的维护。

0
andrew steitz 回答 1月 前

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

boltclock 回复 1月 前

尽管您提到“标签”已成为元素​​的常用术语,我不能也不会不同意,但这并不能改变它们的正确术语仍然是“元素”的事实。标签是 HTML 和 XML 的特定语法特征,可能不存在于其他与 CSS 兼容的文档语言中。因此,说人们经常称之为 CSS 样式“标签”并不能充分说明 CSS 的文档语言不可知论。

0
goleztrol 回答 1月 前

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

还;为什么他不知道虚构的标签存在并与 CSS 一起使用。它们不常见吗?

是的,相当。但特别是:它们没有其他用途。他们是 html5 的新手。在早期版本的 HTML 中,未知标记无效。
此外,有时教师似乎在知识方面存在差距。这可能是因为他们需要教给学生有关给定主题的基础知识,而了解所有来龙去脉并真正了解最新情况并没有真正的回报。我曾经被拘留,因为一位老师认为我编写了病毒,只是因为我可以用电脑让电脑播放音乐playGWBasic 中的命令。 (真实的故事,是的,很久以前)。但不管是什么原因,我认为不使用客户元素的建议是合理的。

goleztrol 回复 1月 前

@OnoSendai 你让我怀疑,但我真的认为它们被渲染为“没有额外标记的块元素”,所以基本上就像 div。

cimmanon 回复 1月 前

@OnoSendai 块元素可能具有的 display 属性堵塞,但这不是必需的。例如,锚标签被提升为块状态(意味着您可以在其中放置块元素,如 div),但仍然具有内联显示属性。

onosendai 回复 1月 前

我明白了 – 感谢 GolezTrol 和 cimmanon 的澄清。

boltclock 回复 1月 前

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

boltclock 回复 1月 前

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

fluffy 回复 1月 前

@BoltClock'saUnicorn 这是否意味着酒吧将呈现这两个标签作为块?这似乎有点可疑…

boltclock 回复 1月 前

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

fluffy 回复 1月 前

@BoltClock'saUnicorn 好的,我想我只是对“它们是块还是内联取决于它们的祖先是块还是内联”的意思感到困惑。 HTML 是否有自己的“块”和“内联”含义?我之前只在样式方面看到过这一点(现在由 CSS 涵盖)。

boltclock 回复 1月 前

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

alohci 回复 1月 前

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

alohci 回复 1月 前

.. 另外,透明内容模型不完全是它的祖先是块还是内联,而是它的父是否允许流动但非分词的内容。例如,<p>element 不是短语内容(和过去一样的块),但只允许短语内容。所以一个<a>a 内的元素<p>也只能有分句内容。但是一个<div>可以有流畅的、非分词的孩子,所以<a>a 内的元素<div>也可以有流畅的、非短语的内容。

fluffy 回复 1月 前

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

alohci 回复 1月 前

@fluffy – 我发现通过异常理解流内容更容易。不是流内容的元素是只能出现在特定父元素中的元素,例如li(仅在 ul 和 ol 内),tbody(桌子),td(tr),figcaption(图)等等。

boltclock 回复 1月 前

@Alohci:感谢您的澄清。

kryan 回复 1月 前

@Alohci 我希望将此评论流转换为问答。这是您在评论中隐藏的一些重要信息。

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月 前

+1 不知道 W3C 用途github但他们确实使用。

0
ben lesh 回答 1月 前

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

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

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

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

TL;DR:为了沟通和安全,符合规范。不符合项仍然是允许的,除了验证器,其唯一目的是强制符合性,但其使用是可选的。
例如:

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

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

boltclock 回复 1月 前

HTML 不仅指定了如何处理 CSS 中的元素,CSS 规范在大多数情况下也是设计与文档语言无关的(这在其他一些答案中已经暗示了一些,但我在这里注意到它是为了方便)。如果有任何特定于 HTML 和/或 XHTML 的行为,它总是被指示, 即使在信息文本中(例如“一个 HTML 元素的 ID 由id属性”),而不仅仅是规范性文本(参见背景和边框 3例如)。