构建Web项目的HTML建议的25个建议！

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

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

1、避免内联样式

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

2、优先添加关键样式

如果将网站的所有样式都放在一个文件中，则可能需要很长时间来获取和解析，这会延迟网站呈现。最佳的实践方式是将站点的主要和基本样式包含在头部的样式标签中，或者首先加载一个较小的样式表，只加载第一次渲染所需的样式，然后次要样式文件增加 deferred 属性。次要样式可以是用于用户交互的样式，例如弹出图层、下拉列表和通知组件等，或者是用户需要滚动到页面下方的内容。

3、延迟加载图片

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

4、避免过多的 HTML

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

5、停止支持低版本 IE

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

6、为图片增加适配

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

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

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

你的浏览器不支持HTML5 audio 标签

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

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

9、始终指定按钮类型

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

我是开心按钮

10、视频有时比 gif 更好

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

11、避免书写 Javascript

很多SDK都会将其脚本代码加入到站点的  标签中，但其实可以把这些代码统一放在外部脚本文件中，通过外部加载，并控制它的加载方式。

一般来说，应该避免 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 事件触发之前。www.zhuzhuvx.com

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