构建WEB项目的 25 个HTML建议

html 超文本标记语言是一种用于创建网页的标准标记语言。HTML是一种基础技术，常与css、JavaScript一起被众多网站用于设计网页、网页应用程序以及移动应用程序的用户界面。

HTML是WEB应用程序的骨架，尽管非常容易上手，但仍有很多需要注意的规则，可能因为没有遵循这些规则导致WEB应用程序的实践受到影响，现在对于项目开发，很多规则是可以通过程序来自动完成，对于初学者还是有必要了解一下。

1. 避免内联样式

虽然现代浏览器或其他辅助设备可能能够有效处理内联属性和标签，但一些较旧的设备不能，这可能会导致一些奇怪的网页显示。额外的字符和文字会影响搜索引擎收录网页的内容，同时内联样式也会带来维护上的不方便。内联样式的使用的唯一场合就是动态更改样式，比如从 Javascript 端完成的一些样式操作，而不是作为一种设置 HTML 样式的方式。

2. 优先添加关键样式

如果将网站的所有样式都放在一个文件中，则可能需要很长时间来获取和解析，这会延迟网站呈现。最佳的实践方式是将站点的主要和基本样式包含在头部的样式标签中，或者首先加载一个较小的样式表，只加载第一次渲染所需的样式，然后次要样式文件增加 deferred 属性。

次要样式可以是用于用户交互的样式，例如弹出图层、下拉列表和通知组件等，或者是用户需要滚动到页面下方的内容。

3. 延迟加载图片

有些浏览器只会在视图中加载图片，如果有一个100张图片的页面，只会加载视图内的图片，当用户滚动时，其他的图片也会相应地加载。最佳的实践方式是用lazy值指定加载属性。如果想在所有浏览器中使用这个特性，可以使用 polyfill。

4. 避免过多的 HTML

过多的HTML并不好，采用允许加载足够的HTML进行初始呈现的策略，其余内容放在不同的页面上，或者稍后通过Javascript的滚动或点击按钮来获取。因为太多的HTML意味着更长的解析时间，而且通常是不必要的。

5. 停止支持低版本 IE

在WEB项目开发中，各种兼容性问题的支持，特别的低版本IE的支持简直是地狱级的体验，在这里倡议大家停止兼容低版本IE，除非是必须，否则就引导用户去升级浏览器，好消息是微软将在 2021 年年中停止对 IE11 的支持。

6. 为图片增加适配

图片标签允许为不同的窗口大小指定多个资源，这可以更快地加载适当的图像，并为适当的视图大小使用不同的图像。这可以更快地为移动设备加载较小尺寸的图像，为桌面加载更大的图像。

<picture>
    <source srcset="apple-360.jpg" media="(min-width: 800px)">
    <img src="apple.jpg" alt=""/>
</picture>

7. 为媒体指定多个备份源

对于视频和音频，总是设置多个 sources 。

<audio controls>
  <source src="audio.mp3" type="audio/mpeg">
  <source src="audio.ogg" type="audio/ogg">
  <p>你的浏览器不支持HTML5 audio 标签</p>
</audio>
<video controls width="360">
  <source src="movie.webm" type="video/webm">
  <source src="movie.mp4" type="video/mp4">
  <p>你的浏览器不支持HTML5 video 标签</p>
</video>

8. 始终为视频指定预加载选项

可以使用 preload 属性在页面上延迟加载视频，最佳做法是始终包含此属性，因为不同的浏览器具有不同的默认值，preload="none" 将阻止浏览器立即加载视频并同时 poster 设置的图片。

<video controls preload="none" poster="movie.jpg">
  <source src="movie.webm" type="video/webm">
  <source src="movie.mp4" type="video/mp4">
</video>

9. 始终指定按钮类型

简单的规则，始终指定按钮的类型。如果不指定按钮将使用默认为 submit 类型，这可能并不是你想要的行为。通常情况下，总是指定按钮类型，即使它是默认值。

<button type="button">我是开心按钮</button>
<input type="text"/>

10. 视频有时比 gif 更好

通常需要展示动画内容时候，首先想到的是 gif 而不是视频，认为 gif 可以更小视频更大。但根据视频不同的格式，视频并不一定比 gif 文件大，这时视频可能是更好的选择，因此，在做出决定之前，请先比较视频和 gif。

11. 避免书写 Javascript

很多SDK都会将其脚本代码加入到站点的 <head> 标签中，但其实可以把这些代码统一放在外部脚本文件中，通过外部加载，并控制它的加载方式。一般来说，应该避免 Javascript 代码与 HTML 混合。

12. script标签放在页面底部

对于不支持某些优化属性（如defer 、 async ）的浏览器，此规则就不可避免。一般来说，如果 HTML 和 CSS 不是异步或延迟的，最好将脚本标签放在最后，以保证浏览器在完成解析和呈现 HTML 和 CSS 时不会被阻塞。因为script标签会阻塞HTML的解析.

13.减少外部链接的数量

始终尝试将外部样式表和脚本文件合并到一个压缩的文件中，并设置 dns-prefetch 、preload/prefetch、defer、async 属性，告诉浏览器如何处理它们。

dns-prefetch ：用于预解析CDN的地址的DNS

prefetch：利用浏览器空闲时间，预加载用户可能会用的资源（图片、视频、js、css）缓存到 disk ，如有页面需要就从disk中读取

preload：可以对当前页面所需的脚本、样式等资源进行预加载，将其放在内存中，而无需等到解析到 script 和 link 标签时才进行加载。这一机制使得资源可以更早的得到加载并可用，更不易阻塞页面的初步渲染。

defer：所有元素解析完成后，domContentLoaded 事件触发之前。

async：当前Javascript脚本加载完成后（加载后立即执行，执行顺序不固定，适合独立无依赖的代码）

 <link rel="dns-prefetch" href="//www.devpoint.cn" />
 <link rel="preload" href="./app.css" as="style" />
<link rel="preload" href="./app.js" as="script" />
<link rel="prefetch" href="./app.js" />
<script async />
<script defer/>

14. 始终添加图片 alt

如果图像加载失败，alt 标签会显示替代文本，提供了图像的额外上下文，这对 seo 很友好。

15. 一个 h1 标签

建议一个 HTML 页面一个 h1 标签，如果是网站 logo ，可以将 logo 包含在 h1 标签中。当然如果使用多个 h1 标签也是没有问题的。

16. 字体预加载

如果页面存在字体文件，建议在 <head></head> 标签中使用 prefetch/preload 属性进行与加载。

17. 定义响应式meta

应该始终确保网站具有响应性属性，这样不管用户使用什么设备都可以流畅清晰的浏览网站内容。

<meta name="viewport" content="width=device-width, initial-scale=1" />

18. 始终指定 DOCTYPE

在 DOCTYPE 中包含 HTML 属性将确保浏览器正确呈现内容。

<!DOCTYPE html>

19. 页面语言

通过指定网站的语言将有助于屏幕阅读器选择正确的语言来渲染，浏览器还可以使用它来确定是否应该自动翻译网站，lang 属性应该描述网站大部分内容使用的语言。

<html lang="zh">

20. 正确使用 data-*

标签 data 属性是大部份框架或者插件喜欢传递数据的方式，但是不要使用 data 属性来传递敏感数据，其他属性可能更适合。

21. 使用 time 标签

一个重要的时间使用 time 标签来展示，这样可以方便用户轻松点击以添加到日历中。

<time datetime="20:00">20:00</time>

22. 添加 favicon

浏览器会自动为获取网页图标，甚至不需要为 favicon 指定链接，只需将其放在网站的根目录中即可。无论您做什么，始终明确为网站包含各种大小和目标的网站图标，并为不同的设备、浏览器设置不同的图标，可以使用在线工具制作不同尺寸。

23. 有效的DOM标签

现代浏览器会尽力成对匹配标签，但它可能并不正确。因此建议所有 HTML 标签小写、关闭标签（可以借助开发工具自动完成）。

24. 正确使用title

为页面使用一个<title></title>标签，标题显示与浏览器选项卡中，并且当分享网址的时候能够清晰的获取标题。

25. 转义特殊字符

HTML 有一些特殊字符《HTML特殊符号对照表》，在使用的时候一定要进行转义，如果不这样做，可能会破坏页面的呈现。

总结

以上建议都是通用规则，制定大而全的HTML规则，对于团队项目开发是有很大的意义。

链接: https://fly63.com/article/detial/10464