代码设计|如何编写简洁明了的 HTML 代码？

文章来自：如何写出简洁明了的HTML代码？-综合讨论区葡萄城产品技术社区

如何提高网页的性能，很多开发者从图片优化、服务器配置、文件压缩或者CSS调整等各个方面入手。

很明显，HTML 已经达到了瓶颈，尽管它是开发 Web 界面所需的核心语言。HTML 页面负载也越来越重。大多数页面平均需要 40K 的空间，像一些大型网站会包含数千个 HTML 元素，页面大小会更大。

如何有效降低HTML代码的复杂度和页面元素的数量，本文主要解决这个问题，并从多方面介绍了如何编写简洁明了的HTML代码，可以让页面加载更快，并且可以使用在各种设备中工作正常。

在设计和开发过程中需要遵循以下原则：

HTML 是一种用于调整页面结构和内容的标记语言。HTML不能用于样式内容，也不能在标题标签中输入文本内容，使代码冗长复杂，使用CSS来装饰布局元素和外观更合适。HTML 元素的默认外观是由浏览器的默认样式表定义的，比如在 H1 标签中的元素会被渲染为 32px 倍的粗体。

好的学习方法会让你大吃一惊！欢迎大牛和小白加入！

直播时间：晚上8:00收听方式：有兴趣的同学可以加Q群：点击链接入群【前端学习交流】：/?_wv=1027&k=

直播方式：实时观看主播画面，实时互动

是否免费：免费

三个通用设计规则：

文档结构也可以优化，如下：

使用这两种方法，浏览器在解析 HTML 代码之前准备好 CSS 信息代码设计，从而有助于提高页面加载性能。

在页面底部的结束正文标记之前输入代码有助于加快页面加载速度，因为浏览器在解析代码之前加载页面，这对页面元素有积极影响。

  ...
  

  

使用 Defer 和 async 属性，具有 async 属性的脚本元素不能保证按顺序执行。

可以在代码中添加。千万不要添加到 HTML 内联代码中，比如下面的代码容易出错且不易维护：

索引.html：

  ...
  


  ...
  Foo
  ...

下面的写法更好：

索引.html：

  ...
  


  ...
  Foo
  ...

js/local.js：

init();

核实

优化网页的一种方法是让浏览器处理非法的 HTML 代码。合法的HTML代码易于调试，占用内存少，消耗资源少，易于解析和渲染，运行速度更快；非法的 HTML 代码使得实现响应式设计变得极其困难。

使用模板时，合法的 HTML 代码非常重要。经常会出现模板本身运行良好，与其他模块集成时报各种错误的情况。因此，必须保证 HTML 代码的质量。

可以采取以下措施：

代码格式

格式一致性使 HTML 代码易于阅读、理解、优化和调试。

语义标记

语义是指与意义相关的事物。HTML可以从页面的内容中看出语义：元素和属性的命名在一定程度上表达了内容的作用和功能。HTML5 引入了新的语义元素代码设计，例如 , 和 .

选择正确的元素来编写代码使代码易于阅读：

例如：

Name: 

换一种方式写会更好：

    Name:

布局

要提高 HTML 代码的性能，请遵循 HTML 代码的功能和目标，而不是样式。

CSS

虽然本文解释了如何优化 HTML，但这里有一些使用 CSS 的基本技能：

总结

以上就是本文介绍的HTML代码优化技术。一个高质量和高性能的网站往往取决于对细节的处理。所以我们在日常开发中，可以考虑用户体验、后期维护等，这样会带来更高效的开发。