gpt4 book ai didi

html - 这个 "Quine"代码如何详细工作?

转载 作者:行者123 更新时间:2023-11-28 16:34:56 26 4
gpt4 key购买 nike

来源:Rosettacode Quine for HTML/CSS (找到 HTML/CSS 部分)。

以下代码在保存为 html 文件时,在浏览器中呈现为源代码。

<!DOCTYPE html>
<html>
<head>
<title>HTML/CSS Quine</title>
<style type="text/css">
* { font: 10pt monospace; }

head, style { display: block; }
style { white-space: pre; }

style:before {
content:
"\3C""!DOCTYPE html\3E"
"\A\3Chtml\3E\A"
"\3Chead\3E\A"
"\9\3Ctitle\3E""HTML/CSS Quine""\3C/title\3E\A"
"\9\3Cstyle type=\22text/css\22\3E";
}
style:after {
content:
"\3C/style\3E\A"
"\3C/head\3E\A"
"\3C""body\3E\3C/body\3E\A"
"\3C/html\3E";
}
</style>
</head>
<body></body>
</html>

我不知道这是怎么回事,引用页面也根本没有解释。

最佳答案

这是一个“作弊的”quine,因为它本质上是自省(introspection)自己的源代码,并对其进行样式设置以使其可见而不是默认不可见。最好逐一解释 CSS 规则:


* { font: 10pt monospace; }

这只是为了美观,因为代码倾向于用等宽标记。

head, style { display: block; }

一般情况下,<head>中的内容和 <style>是看不见的。我不知道像这样设置这些元素的样式是否严格符合标准,但总的来说,我认为该规范在更改 display 时为文档作者提供了很大的自由度。元素到别的东西。例如,您可以毫无问题地将内联或 block 元素设置为表格、表格行和表格单元格。我们想让这些元素可见,以便渲染 CSS 源代码。

style { white-space: pre; }

这又是为了美观:这使得脚本元素内的空白逐字呈现,而不是对 HTML 元素应用通常的合并规则,其中连续的空白被单个空格替换。

style:before {
content:
"\3C""!DOCTYPE html\3E"
"\A\3Chtml\3E\A"
"\3Chead\3E\A"
"\9\3Ctitle\3E""HTML/CSS Quine""\3C/title\3E\A"
"\9\3Cstyle type=\22text/css\22\3E";
}
style:after {
content:
"\3C/style\3E\A"
"\3C/head\3E\A"
"\3C""body\3E\3C/body\3E\A"
"\3C/html\3E";
}

这些规则在 <style> 前后插入所需的 HTML 代码元素,因为我们不能仅通过 CSS 呈现这些。在 CSS 中,一个反斜杠后跟一系列十六进制数字构成一个转义序列——\3C\3E<>分别\A表示换行符和 \9表示制表符。连续给出的多个字符串(它们之间有可选的空格)被连接在一起。

关于html - 这个 "Quine"代码如何详细工作?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30293191/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com