HTML优化方法

HTML编码规范

代码格式化与缩进

1.缩进规则

​ 推荐使用空格缩进而不是Tab，因为不同环境下空格的效果更加一致。常见缩进量为2个或4个空格

2.标签对齐

​ 在嵌套的HTML结构中，子标签应当缩进，以清晰地展示层级关系。

3.属性的排列

​ 对于较短的标签，将属性放在同一行中。

​ 如果标签属性较多，可以分行排列，属性对齐以提高可读性。

4.标签的关闭

自闭合标签：自闭合的HTML标签（如<img>、<br>、<hr>等）在HTML5中不需要强制加上斜杠，但为了兼容性或规范，可以加上。

示例：

<img src="image.jpg" alt="描述文字" />

5.换行与空行

换行：在不同的块级元素之间（如<div>、<section>、<header>），添加换行符以保持代码清晰。

空行：在逻辑上相关但不同的代码块之间可以使用空行，以提高可读性。

文件命名规则

统一格式

小写字母（确保跨平台兼容性）

连字符-（而不是使用下划线_)

语义化命名

提升HTML性能

优化图片和媒体资源

使用现代图片格式

响应式图片

延迟加载图片和媒体

压缩和优化图片

音视频优化：选择合适的格式、自适应流媒体、延迟加载视频