除了元素和属性名称的正确拼写之外，万维网联盟 (W3C) 还声明了针对代码格式的具体建议。在本课中学习最基本的 HTML 的注意事项。
这些建议可让您提高可读性并使代码一致且为全球开发人员所熟悉。
使用小写的元素名称
从技术上讲，您可以使用您喜欢的 WHATEVER 字体大小写。HTML 接受在代码中混合小写和大写字母。但让我们承认它看起来很可怕。一致、整洁且组织良好的 HTML 标记使每个人都可以更轻松地阅读和理解您的代码。坚持使用小写格式，因为它更易读，更受开发人员欢迎。
关闭所有 HTML 元素
您可能还记得我们之前的课程中的一些 HTML 元素，例如<br>or <img>，是自给自足的，不需要结束标记。但是，万维网联盟 (W3C) 强烈建议关闭所有具有结束标记的 HTML 元素。这样做的原因包括更增强的可读性和更清晰的标记。
此外，有一天，您可能会用另一种标记语言 XHTML 编写代码。它在处理不同的数据格式时更加灵活，但在规则方面也更加严格。这意味着如果代码包含未关闭的标签，浏览器可能无法正确显示页面。
使用小写的属性名称
与 HTML 标记一样，属性名称不区分大小写，但 XHTML 要求小写。即使在 HTML 中编码时，以小写形式编写属性名称也是一个好习惯。它看起来更干净并增强了可读性。
问题是，当文本全部大写时，字母更难区分。结果，人们必须以明显较慢的速度逐个字母地阅读。Nielsen Norman Group 表示阅读速度可能会降低 10%。当您使用标题大小写或随机大写字母时，也会发生同样的情况。
始终引用属性值
另一个 W3C 建议与属性值有关。如果您总是将它们放在引号中，那将是最好的。另外，在某些情况下您必须使用引号。当一个值包含空格、撇号 ( ' )、等号 ( = )、小于或大于号 ( < , > ) 和引号 ( " ) 时，如果没有适当的标记，代码将无法工作。此外，使用属性值周围的引号使您的代码保持一致，并且当引号是可选的时，您可以避免记住和回忆规则。
始终为图像指定 alt、宽度和高度
设计师可以花费数小时为您的网站精心挑选合适的视觉效果。但如果没有适当的替代文字，屏幕阅读器用户将看不到它们并获得预期的信息。此外，替代文本（替代标签、替代描述）提供图像的书面副本并提高搜索引擎的网站排名。
我们还建议始终定义图像的宽度和高度。它减少了浏览器加载图像时可能发生的闪烁。这种行为对用户来说特别烦人，尤其是当他们已经开始阅读文章并且内容突然转移到某个地方时。结果，他们不得不再次找到他们读完的地方。避免这种情况的一种行之有效的技术是设置宽度和高度。
空格和等号
如果在等号周围放置空格，浏览器仍将呈现页面。但是，如果我们谈论礼貌，代码的间距越小越好。间距较小的文档更易于阅读并将相关实体组合在一起。此外，带有额外空格的代码看起来很混乱，并且可能会使其他可能阅读您的代码的开发人员感到困惑。
避免长代码行
好吧，没有人喜欢水平滚动，无论是普通用户还是开发人员。避免使用冗长的线条——它们非常不方便！Google 的 HTML/CSS 样式指南建议在 80 个字符处换行，除非它是 URL 或可以根据需要长的元数据标签。
空行和缩进
作为设计师，我们知道在提高可读性方面留白是我们最好的朋友。但是，W3C 建议在合理范围内使用空行、空格或缩进。首先，保持一致并使用 4 空格或 2 空格缩进。例如，当您应用嵌套元素时。其次，您应该添加空行来分隔块元素和大型或逻辑代码块，但要保持一行。
至于间距，你不应该在标签的大括号和元素名称之间放置空格。这是一个糟糕的模式——< p >虽然这个是正确的—— <p>。
永远不要跳过 <title> 标签
您永远不应该跳过<title>HTML 文档中的元素。用户在页面上看不到它，但它在浏览器工具栏中定义了一个标题。此外，搜索引擎算法使用此元素来获取网站的目的并决定其在搜索结果中的排名。
标题应该在用户第一眼看到搜索结果页面后就抓住了他们的注意力：
• 避免使用 2 或 3 个单词的标题。使它们具有足够的描述性和意义。
• 太长的标题也不好。搜索引擎通常会显示页面标题的前 55-60 个字符并删除其余部分。
• 关键字很重要，但如果您在标题中塞入太多关键字，搜索引擎可能会降低您的页面在搜索结果中的位置。
避免省略 <html> 和 <body> 标签
<html>和<body>元素是必不可少的，但是如果您跳过它们，浏览器会处理它并仍然呈现您的页面。那么为什么 W3C 强烈建议添加这些元素呢？首先，省略<body>可能会导致旧浏览器出现错误。
其次，开发人员使用<html>元素来指定页面语言，这对于屏幕阅读器和搜索引擎等可访问性应用程序很重要。语法将如下所示：<html lang="en-US">. 标签还保持可读性和一致性。
避免省略 <head> 标签
通常，该<head>元素包含元数据，如文档标题、样式、链接、脚本和其他类似信息。省略<head>元素并不是 HTML 页面的世界末日。浏览器将简单地在之前添加此信息<body>并收工。但是，我们建议保留该<head>元素以避免开发人员之间的混淆并提供一致性。
添加 lang 属性
langan 属性对于包含在元素中至关重要<html>。它的主要目标是定义内容的自然语言。浏览器和搜索引擎使用此信息在搜索结果中获得更准确的页面排名。如果有一段文本使用不同的语言，您可以使用lang围绕内容的元素的属性指定语言。
以上内容为转载
网友评论