[1144] Tags

Title Text:<A>: Like </a>this.&nbsp;<

Origin:https://xkcd.com/1144/

https://www.explainxkcd.com/wiki/index.php/1144:_Tags

標籤

<A>:像是</a>這樣。&nbsp;

https://xkcd.tw/1144

HTML是Web开发中使用的标记语言,也是本漫画的主题。这部漫画采用了多种糟糕的HTML实践,同时提出了如何最好地惹恼网页开发人员,有效地回答它所带来的问题的修辞问题。

在HTML中,所有元素(自关闭元素除外,例如&lt; img&gt;)应该包含相同类型的打开和关闭标记&lt; div&gt;像这样&lt; /div&gt;。

HTML(除了它作为XML语言的表述 – 捕获HTML)从来没有区分大小写,但使用大写标签的可读性的做法已经过时了,本例中的案例混合肯定会惹恼开发人员。

HTML的另一个基本思想是所有元素都应该正确嵌套。也就是说,必须在div关闭之前关闭其开放标记出现在div内的任何元素。

注意:在实践中,Web浏览器将纠错几乎所有这些问题。

 正确

 不正确

&LT; DIV&GT;

    &LT;醇&GT;

        &lt; li&gt;正确嵌套&lt; /li&gt;

    &LT; /醇&GT;

&LT; /DIV&GT;

&LT; DIV&GT;

    &LT;醇&GT;

        &lt; li&gt;错误地嵌套&lt; /li&gt;

    &LT; /DIV&GT;

&LT; /醇&GT;

适当嵌套的规则还限制了哪些标签可以放置在“阻塞”元素的位置,例如&lt; div&gt;。不能放在“内联”元素内,例如&lt; span&gt;,内联元素必须放在某种块元素中。因此,&lt; span&gt;&lt; div&gt;即使标签以正确的顺序关闭,也是禁止的。

此外,Web开发人员区分语义和结构元素。语义元素在其名称中包含关于它们是什么类型的元素的线索,例如,&lt; article&gt;标签包含文章,例如博客文章或新闻文章,而&lt; ol&gt;标签包含有序列表。 (明智的做法是注意这不是一个绝对的规则;可以将非文章内容放在&lt; article&gt;中,但不建议这样做。)然而,语义标签并不表示如何显示其内容;您的浏览器可能会显示&lt; article&gt;在默认字体,布局和展示位置中,我的屏幕阅读器可能会忽略页面上的所有内容&lt; article&gt; s,并以舒缓的声音阅读&lt; article&gt; s。

另一方面,结构标签没有提供关于它们包含什么的线索;他们只是说明了如何布置网页。 &LT;跨度&GT;和&lt; div&gt;是结构标签;它们可以包含任何东西它们在HTML中的定义只表示&lt; div&gt;是一个块标记(它可以影响文本的样子和它在页面上的位置;默认情况下,它显示在与页面中其余文本不同的块中,并且至少有一个换行符并且在显示之后)和&lt; span&gt;是一个内联标记:它会影响文本的外观,但不会影响页面的位置。如果没有其他属性,浏览器就无法分辨出&lt; div&gt;内的内容。或者&lt; span&gt;,这意味着我的屏幕阅读器不能只是拔出博客文章并阅读它们。

目前,使用标准正在转向使用语义标签而不是结构标签,因为它们为浏览器和阅读网页源代码的人提供了更多信息。 HTML5是标准Web开发标记语言的最新版本,它引入了许多具有语义意义的标记,可以使用CSS设置样式以遵循与div或span相同的行为,但在阅读标记或解析标记时更容易理解使用非标准浏览器。例如,这是一个跨度,这是一个div。

标题文本引用了&amp; nbsp;,这是非破坏空间的HTML转义码,这是一种将两个单词放在一起的空间,并且不允许自动换行将它们分开。如果单词出现在显示行的末尾,则处理方式取决于浏览器和元素的样式;一些浏览器和样式会强制连接的单词进入一个新行,而其他浏览器和样式将“溢出”容器的边缘以容纳链接的单词。例如,这对于保持具有数字的单位非常有用,因此很容易发现100公里而不需要寻找100公里。在一行的末尾使用不间断的空格,在其尾端没有另一个单词,仅在非常罕见和有限的情况下有用,并且通常没有用处。标题文本也使用&lt; A&gt;。标签,似乎表示答案。实际上,&lt; A&gt;是一个锚标记,它创建超链接。它不是答案标签。此标记通常与href =(创建指向另一个URL的链接)或name =(在页面上创建可以使用href =#链接的命名锚点)属性(但通常不会同时使用)一起使用。另外,&lt; A&gt;的放置。和&lt; a&gt; (这里的大写也激怒了一个重视一致性的Web开发人员)表示“:Like”应该是一个链接或命名锚点,但是“这个”。不应该。是否在锚点中包含标点符号是开发人员之间的一些争论问题,但是包括过多的空格通常是不受欢迎的,并且锚点应该包括所有相关文本。

Leave a Reply

Your email address will not be published. Required fields are marked *

Categories