25个构建Web项目的HTML建议，你需要了解一下！
1、避免内联样式
2、优先添加关键样式
3、延迟加载图片
4、避免过多的 HTML
5、停止支持低版本 IE
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 属性，告诉浏览器如何处理它们。
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 属性将确保浏览器正确呈现内容。
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规则，对于团队项目开发是有很大的意义。
学习更多技能
web前端开发
一个专业而懂你的前端学习平台，分享你需要的编程开发与职场技能知识，我们坚持，每天学习一点点，每天进步一点点，人生进步一大步！关注我们，与我们一起学习进步，通过学习遇见更好的自己。
Official Account