Title Text:<A>: Like </a>this. <
Origin:https://xkcd.com/1144/
https://www.explainxkcd.com/wiki/index.php/1144:_Tags
標籤
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”应该是一个链接或命名锚点，但是“这个”。不应该。是否在锚点中包含标点符号是开发人员之间的一些争论问题，但是包括过多的空格通常是不受欢迎的，并且锚点应该包括所有相关文本。
