后端开发教程 - Java、Spring Boot 实战 - msg200.com
让我们像专业人士一样编写 HTML 😎
您是否经常在编写 HTML 块时没有意识到所编写的代码可能并不理想？
原因
HTML一直是角落里没人跟他说话的那个孩子，因为JavaScript他CSS总是能吸引人们的注意。
现在，请将那幅画面记在脑海里，因为我将介绍一些简单的技巧，这些技巧结合起来，会产生影响，并帮助那个孩子再次回到中心。
这些是创建干净、可维护和可扩展代码的观点的一部分，它将充分利用语义标记元素，HTML5并在支持的浏览器中正确呈现。
因此，为了阻止我继续讨论“为什么”，让我们来看看“是什么”。
文档类型
从 的顶部开始index.html，确保声明了一个DOCTYPE。这将在所有浏览器中激活标准模式，并告知它们应如何解释文档。请记住DOCTYPE不是 HTML 元素。
因为HTML5它看起来像：
<!DOCTYPE html>
注意：如果您正在使用框架，则此部分已预先填充。如果没有，我强烈建议您使用VS Code中提供的Emmet等代码片段。
想了解更多其他文档类型？请查看此参考文档。
可选标签
HTML5 中有些标签是可选的，主要是因为这些元素是隐式存在的。信不信由你，你可以省略这些<html>标签，页面也能正常渲染。
<!DOCTYPE HTML>
<head>
<title>Hello</title>
</head>
<body>
<p>Welcome to this example.</p>
</body>
</html>
以上是有效的HTML，但是，有些情况下你不能这样做，例如标签后跟评论：
<!DOCTYPE HTML>
<!-- where is this comment in the DOM? -->
<head>
<title>Hello</title>
</head>
<body>
<p>Welcome to this example.</p>
</body>
</html>
上述内容无效，因为解析树由于注释超出<html>标签范围而发生变化。
结束标签
你应该始终考虑使用关闭标签，因为某些浏览器在渲染你的页面时会遇到问题。不过，出于可读性和其他原因（稍后我会详细介绍），建议保留这些标签。
<div id="example">
<img src="example.jpg" alt="example" />
<a href="#" title="test">example</a>
<p>example</p>
</div>
以上所有标签均有效。但也有一些例外👇🏼。
自闭合标签有效，但不是必需的。这些元素包括：
<br>, <hr>, <img>, <input>, <link>, <meta>,
<area>, <base>, <col>, <command>, <embed>, <keygen>, <param>, <source>, <track>, <wbr>
注意：普通元素永远不能有自闭合标签。
<title />
以上显然是无效的。
字符集
预先定义你的字符集。最佳做法是将其放在<head>元素内部最顶部。
<head>
<title>This is a super duper cool title, right 😥?</title>
<meta charset="utf-8">
</head>
以上代码无效，标题无法正确渲染。请将字符集减速效果移至上方。
<head>
<meta charset="utf-8">
<title>This is a super duper cool title, right 😃?</title>
</head>
语言
另一个不省略可选标签的原因是使用属性时。在这种情况下，您可以而且应该定义网页的语言。这对于可访问性和搜索功能非常重要。
<html lang="fr-CA">
...
</html>
标题
千万千万不要省略标题标签。这非常影响可访问性，我个人永远不会使用你的网站，因为我打开它两秒就找不到它，之后又翻了20多个标签页😁（浏览器标签页什么都显示不出来）。
标签base
这是一个非常有用的标签，但使用时务必谨慎。它会设置应用的基本 URL。一旦设置，所有链接都将相对于此基本 URL，这可能会导致一些不必要的行为：
<base href="http://www.example.com/" />
根据上述设置，href="#internal"将被解释为href="http://www.example.com/#internal"。
或者href="example.org"将被解释为href="http://www.example.com/example.org"。
描述
虽然严格来说并非最佳实践的一部分，但这个元标记非常有用。它对于搜索引擎抓取您的网站非常有用。
<meta name="description" content="HTML best practices">
语义标签
虽然你可以只用 s 来创建 UX 工程师的线框图div，但这并不意味着你应该这样做。语义 HTML赋予你的页面以意义，而不仅仅是呈现。像p、section、h{1-6}、main、nav等标签都是语义标签。如果你使用p标签，用户会知道这代表一段文本，浏览器也知道如何表示它们。
语义化 HTML 远远超出了本文的讨论范围。但你一定要了解一下，并在写作时像使用笔一样使用它们。不用笔❓（或者不用鼠标😁）你能写字吗？
hr不应用于格式化
<hr>不是格式化元素，因此请勿使用它来格式化您的内容。在 HTML5 中，此标签代表内容的主题划分。正确的用法可能如下所示：
<p>Paragraph about puppies</p>
<p>Paragraph about puppies' favourite foods</p>
<p>Paragraph about puppies' breeds</p>
<hr>
<p>Paragraph about why I am shaving my head 😂</p>
使用title属性时要小心
属性title是一个强大的工具，它可以帮助阐明页面上元素的操作或用途，例如工具提示。但是，它不能与其他属性（例如alt图片上的属性）互换。
来自 HTML5 规范：
目前不鼓励依赖该
title属性，因为许多用户代理不按照本规范的要求以可访问的方式公开该属性（例如，需要鼠标等指点设备才能出现工具提示，这不包括仅使用键盘的用户和仅使用触摸的用户，例如任何拥有现代手机或平板电脑的用户）。
单引号或双引号
我遇到过很多代码库，其中标记中混合使用了这两种格式。这不太好，尤其是当你使用的框架依赖于单引号时php，或者像我现在这样在句子中使用单引号时you're。另一个原因是保持一致，这总是好的。不要这样做：
<img alt="super funny meme" src='/img/meme.jpg'>
反而：
<img alt="super funny meme" src="/img/meme.jpg">
省略布尔值
当涉及到属性的布尔值时，建议省略它们，因为它们不会增加任何值，也不会增加标记的权重。
<audio autoplay="autoplay" src="podcast.mp3">
<!-- instead 👇🏼 -->
<audio autoplay src="podcast.mp3">
省略类型属性
无需在和标签中添加type属性。您还会收到某些服务（例如W3C 的标记验证工具）的验证错误。scriptstyle
验证您的标记
您可以使用W3C 的标记验证等服务来确保您拥有有效的标记😍。
对内联样式说不☢
你在 HTML 文件中编写的是内容，它的外观是呈现方式。将呈现方式留给 CSS，不要使用内联样式。这有利于你的开发人员和浏览器理解你的标记。
概括
以上只是编写标记时需要注意的小细节，仅供参考。还有很多优秀的资源可供您参考，以深入了解，我强烈建议您至少浏览一遍。
希望你喜欢这篇文章。保持优雅😊，用你的标记😁。
文章来源：https://dev.to/yashints/let-s-write-html-like-a-pro-28h5