25个构建Web项目的HTML建议，你需要了解一下！
WEB前端开发社区 今天
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、为媒体指定多个备份源
<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、始终为视频指定预加载选项
<video controls preload="none" poster="movie.jpg"> <source src="movie.webm" type="video/webm"> <source src="movie.mp4" type="video/mp4"></video>
9、始终指定按钮类型
<button type="button">我是开心按钮</button><input type="text"/>
10、视频有时比 gif 更好
11、避免书写 Javascript
12、script标签放在页面底部
13、减少外部链接的数量
<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
15、 一个 h1 标签
16、字体预加载
17、定义响应式meta
<meta name="viewport" content="width=device-width, initial-scale=1" />
18、始终指定 DOCTYPE
<!DOCTYPE html>
19、页面语言
<html lang="zh">
20、 正确使用 data-*
21、 使用 time 标签
<time datetime="20:00">20:00</time>