面向初学者的HTML的10个最佳作法

时间 2020-08-09

标签面向初学者 html 最佳作法栏目 HTML 繁體版

原文原文链接

来源：公众号《前端全栈开发者》

在当今世界，JavaScript框架每周都会出现，其余一切都会随之改变，这很容易让人陷入困境，并怀疑你的网站是否以最佳状态执行。哪些作法要保留，哪些要放弃。我读到过，使用 implementation x 能够帮助提高性能。但另外一个帖子提到要不惜一切代价避免使用它——真相是什么？前端

使用HTML（最终构成咱们的内容），咱们能够轻松完成工做。它不会像JavaScript页面那样频繁地更改。可是，这里提到的某些方面——有时甚至是大多数——常常被忽略，这确实会损害你的网站。最终，它驱使最终用户离开。web

在进入这些步骤以前，先作一个站点报告。不论是Lighthouse仍是别的什么。而后，在应用此处提到的全部内容后再取一个。你会有一个很好的对比，它到底有什么不一样。浏览器

所以，下一次编写HTML时，请牢记如下10个最佳实践。服务器

1.编写有效且可读的DOM

第一个听起来有些明显。但我想在这里提一下我常常遇到的相似问题：框架

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

2.不要使用内联样式和脚本

不然你的文档很快就会变得杂乱无章，没法阅读。老是使用外部样式表。另外，尽可能避免在CSS文件中使用 import 语句，它们会产生额外的服务器请求。dom

你还应该将它们捆绑在一块儿以减小请求数量。对于大型bundle，你能够利用域分片的优点，将它们分割为2-4个更小的块。工具

内联JavaScript也是如此。除了可读性问题，这将使你的文档变得更重、更难维护。性能

3.内联关键CSS

咱们讨论了为何不该该内联CSS。如今咱们来讨论一下为何你应该这样作。考虑将关键的CSS放在顶部，这样，用户能够更快地看到页面的第一部分。仅内联关键CSS，仅此而已！优化

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

此外，请记住，连接标签的顺序可能会重写规则，因此要当心放置它们。若是你有用于重置或第三方库的单独文件，请先放置这些文件，而后放置其他文件。网站

4.将脚本标签放在底部

将脚本标签放在文档的底部。从官方的角度来讲，脚本标签是活在 head 里面的，但若是咱们把它们放在文档底部，就在正文标签关闭以前，咱们就能够延迟它们的下载。这样咱们的文档就能够先加载到dom中，展现给用户，而后再请求脚本。

之因此这样，是由于浏览器会逐行从上到下解释你的文档。当它到达 head 并遇到 script 标签时，它将向服务器发出请求以获取文件。若是它是一个巨大的文件，它将继续加载，用户将只看到一个空白页面，由于它仍在加载头部。所以，将它们移到底部。这样，在加载脚本标签的内容以前，将加载正文的全部内容。做为回报，咱们能够诱使用户相信咱们的页面正在快速加载。你也能够在你的脚本标签中添加一个 defer 标签，以确保HTML被优先加载。

5. 照顾无障碍

你是否知道，根据世界卫生组织的说法，世界人口的15％患有某种残疾？超过10亿人可能会在使用你的网站时遇到问题。现在，咱们网站上的互动很是频繁，可访问性很容易受到冲击。花一些时间用 aria 属性装饰复杂的UI元素。这带来了对辅助技术的支持，所以你能够覆盖更多的受众。

6.对图片使用alt标签

alt标签为图像指定替代文本。因此万一由于某种缘由不能显示图片，就会显示这段文字。当你的图片缺乏alt标签时，搜索引擎是不喜欢的，会所以下降你的页面排名。

7.每页一个h1

每页仅使用一个 h1。将最重要的文字放在此处，以描述页面的内容。好比你的博客文章或文章标题。每一个页面使用多个 h1 标签不必定是个好主意，也不建议这样作，由于它可能会损害你的搜索引擎结果，这有助于搜索引擎正确地索引你的网站。另外，这是W3C规范中定义的，反正你的页面内容应该由一个标签来描述，因此每页只保留一个 h1。

8.正确使用title和meta标签

为你的页面使用一个标题和适当的描述性元标签。这些由你的本地搜索引擎人员负责，并用于为你的网站创建索引，所以，经过为他提供有用的信息来帮助他。始终使用meta视口标签，以便根据设备的屏幕尺寸显示你的网站。此外，还能够考虑使用open graph 标签，将你的网站连接变成社交媒体平台上的丰富内容。

9.压缩

一旦你完成了一切，你准备让你的网站上线，压缩它。你可使用第三方库，特殊程序或称为构建工具的工具，甚至可使用在线应用程序。这将使你的文档更小，从而加快页面加载速度。要进一步执行此步骤，请在服务器端启用brotli或gzip压缩。它会对页面速度产生巨大影响。

10.验证你的HTML

最后但并不是最不重要的一点是，始终验证你的HTML。验证器能够发现缺陷或错误的代码，从而消除它们。你可使用w3c validator。在这里，你能够在上线前经过URL验证你的网站，经过上传，或者你也能够经过直接输入验证。

比这更好的是，若是你能在提交代码以前，设置一个自动检查此类问题的linter。

按照这10个简单的步骤，将帮助你增强你的HTML，让你的网站排名更高，带来更多流量，同时也从优化步骤中使其更快。也会致使更多的用户互动。最后，它不只会授予你更多的访客，并且会有更多的快乐访客。而这才是最重要的。感谢你花时间阅读本文，祝你优化愉快！