HTML代码优化的技巧有哪些

今天小编给大家分享一下HTML代码优化的技巧有哪些的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。

开发和设计原则

1. 结构的分离去使用 HTML 增加结构，而不是样式内容

2. 保持代码的整洁，为工作流添加代码验证的工具，使用工具或样式向导维护代码结构和格式

3. 学习新语言，获取语义标记与元素结构。

4. 为了能够正常访问可以使用 ARIA 属性与 Fallback 属性等

5. 代码测试，使网站在多种设备中能够良好运行，可使用 emulators 和性能工具。

HTML, CSS和JavaScript三者关系

HTML 是用于构建页面结构和内容的标记语言，HTML 无法用于修饰内容的样式效果，也不能在开头标签中输入文本内容会使得代码变得复杂及冗长，相反我们使用 CSS 来修饰页面布局和外观比较合适。

HTML 元素默认的外观是通过浏览器样式表定义的，例如在谷歌中

标签会被渲染成 32px 的 粗体。

三条通用设计规则：

1. 使用 HTML来构建页面结构，CSS 修饰页面样式，JavaScript 实现页面动态功能。

2. 可以用 CSS 或 JavaScript 实现就少用 HTML 代码。

3. 将 CSS 和 JavaScript 文件与 HTML 分离开，有助于缓存和调试。

文档结构方面优化

使用 HTML5 文档类型

      
Pesto
   
Pesto is good!
 

文档起始位置引用 CSS 文件

使用以上两种方法，浏览器就会在解析 HTML 代码前将 CSS 代码准备好。这样有助于提高页面加载性能。

在页面底部 body 结束标签前输入 JavaScript 代码，这样有助于提升页面加载的速度，因为浏览器在解析 JavaScript 代码之前将页面加载完成，使用 JavaScript 会对页面元素产生积极的影响。

   ...