HTML的10个最佳做法 _HTML

| 来源：公众号《前端全栈开发者》（ID：by-zhangbing-dev）
在当今世界，JAVAScript框架每周都会出现，其他一切都会随之改变，这很容易让人陷入困境，并怀疑你的网站是否以最佳状态执行。哪些做法要保留，哪些要放弃。我读到过，使用 implementation x 可以帮助提升性能。但另一个帖子提到要不惜一切代价避免使用它——真相是什么？

文章插图

使用html（最终构成我们的内容），我们可以轻松完成工作。它不会像JavaScript页面那样频繁地更改。但是，这里提到的某些方面——有时甚至是大多数——经常被忽略，这确实会损害你的网站。最终，它驱使最终用户离开。
在进入这些步骤之前，先做一个站点报告。不管是Lighthouse还是别的什么。然后，在应用此处提到的所有内容后再取一个。你会有一个很好的对比，它到底有什么不同。
因此，下一次编写HTML时，请牢记以下10个最佳实践。
1.编写有效且可读的DOM第一个听起来有些明显。但我想在这里提一下我经常遇到的类似问题：

全部小写：很多时候，我看到基础结构写的都是大写，例如 <HTML> 或 <BODY>，甚至更糟的是，整个HTML本身。每个标签都应该是小写的，所以请不要在HTML标签中使用任何大写。
缩进是可读性的关键：使用它。否则，你的文档会显得很平淡，里面的一切都会显得很杂乱。增强可读性也意味着可以减少开发时间。
自动关闭标签曾经是强制性的。但是使用HTML5，它是可选的，完全由开发人员决定。要么在所有标签上使用它，要么根本不使用它。这里的关键是保持一致。当然，不要忘记关闭常规标签。
避免过度使用注释：除非你有一个构建系统，或者你使用的是模板引擎，否则这些真的会增加你的HTML文件的体积。反过来，这也会拖慢你的初始页面加载速度，会让你的用户等待。最终，让他们离开。
组织DOM：始终考虑是否需要额外的div或额外的元素。尝试只创建绝对必要的元素，并使用语义HTML元素而不是div来划分页面的大部分。其他地方也一样，如果可以，请始终使用HTML5语义元素。它可以帮助搜索引擎知道页面上哪一部分很重要，哪一部分不重要。记住，要时刻问自己，你是否真的需要那里多出来的div 。把多余的东西处理掉。

2.不要使用内联样式和脚本否则你的文档很快就会变得杂乱无章，无法阅读。总是使用外部样式表。另外，尽量避免在css文件中使用 import 语句，它们会产生额外的服务器请求。
你还应该将它们捆绑在一起以减少请求数量。对于大型bundle，你可以利用域分片的优势，将它们分割为2-4个更小的块。
内联JavaScript也是如此。除了可读性问题，这将使你的文档变得更重、更难维护。
3.内联关键CSS【HTML的10个最佳做法】我们讨论了为什么不应该内联CSS 。现在我们来讨论一下为什么你应该这样做。考虑将关键的CSS放在顶部，这样，用户可以更快地看到页面的第一部分。仅内联关键CSS，仅此而已！

关键CSS指的是渲染页面顶部所需的最小CSS集，即用户在登陆你的网站时首先看到的CSS 。

此外，请记住，链接标签的顺序可能会重写规则，所以要小心放置它们。如果你有用于重置或第三方库的单独文件，请先放置这些文件，然后放置其余文件。
4.将脚本标签放在底部将脚本标签放在文档的底部。从官方的角度来说，脚本标签是活在 head 里面的，但如果我们把它们放在文档底部，就在正文标签关闭之前，我们就可以延迟它们的下载。这样我们的文档就可以先加载到dom中，展示给用户，然后再请求脚本。
之所以这样，是因为浏览器会逐行从上到下解释你的文档。当它到达 head 并遇到 script 标签时，它将向服务器发出请求以获取文件。如果它是一个巨大的文件，它将继续加载，用户将只看到一个空白页面，因为它仍在加载头部。因此，将它们移到底部。这样，在加载脚本标签的内容之前，将加载正文的所有内容。作为回报，我们可以诱使用户相信我们的页面正在快速加载。你也可以在你的脚本标签中添加一个 defer 标签，以确保HTML被优先加载。
5. 照顾无障碍你是否知道，根据世界卫生组织的说法，世界人口的15％患有某种残疾？超过10亿人可能会在使用你的网站时遇到问题。如今，我们网站上的互动非常频繁，可访问性很容易受到冲击。花一些时间用 aria 属性装饰复杂的UI元素。这带来了对辅助技术的支持，因此你可以覆盖更多的受众。