🔢HTML配置规范
为了帮助初学者建立清晰的HTML和CSS编码规范，以下是一些建议和最佳实践。
HTML文件基本配置：
HTML文件应该以<!DOCTYPE html>声明开头，并推荐使用<html>标签。
必须声明文档的字符编码，建议使用UTF-8编码。
在移动端，务必使用viewport进行适配。
页面的<title>是极为重要的，不可忽视的一项。
标准的HTML结构示例：
主框架使用单一框架：
避免多个框架混合使用，保持工程内主框架的一致性。混合使用多框架可能导致代码混乱，后期维护困难。
📝CSS开发规范
1. 避免使用!important：
全局样式中禁止使用!important，确保样式的可维护性和一致性。
2. 不使用导入式引入CSS样式文件：
避免使用@import导入CSS样式文件，优先使用<link>标签进行外链引入。
🐠未使用的js/css禁止引用：
避免在页面中引入未使用的js/css文件，及时删除历史页面下线功能的依赖，以免资源加载浪费。
🏩使用gzip压缩文件：
开启Gzip压缩功能，对网站的css、js、xml、html文件进行压缩，提高访问速度，减少传输时间。
🏠优化API接口和前端规范指南
在进行API接口开发时，为提高数据传输效率，建议在数据中存在30%以上无用字段时进行删除操作，以优化数据请求速度。
🏢图片压缩的重要性
在图片上传前，务必进行无损压缩，以减少网络流量的消耗。为此，推荐使用网站tinypng进行图片压缩操作。
👉HTML标准结构的建议
以下是一些建议，以确保HTML文档的结构清晰有序：
前端模块区域标识和语义化标签的建议
在不同模块区域可使用简要备注标识模块内容，同时推荐使用HTML标签语义化，使结构更加清晰。
CSS和JS引入位置及资源URL协议头的声明
外链引入CSS和JS文件时，建议将CSS引入放在<head>中，将JS引入放在<body>的末尾，以优化页面加载性能。同时，省略嵌入式资源URL的协议头声明，使用//代替。
favicon的保障方法
为了确保favicon可访问，避免404错误，可以在Web Server根目录下放置favicon.ico文件或使用<link>标签指定favicon。
♐HTML标签使用规范
在编写HTML时，遵循一些基本的规范可以提高代码的可读性和一致性。
1. 标签小写：
所有原生HTML标签元素都应该使用小写，而自定义组件则使用小驼峰命名，以避免与原生标签同名。
2. 嵌套规则：
在行内元素中禁止嵌套块级元素，以确保HTML结构的合理性。
更多标签使用规则请查看尾部附录。
3. 属性定义：
在定义属性赋值时，统一使用双引号，不要混用单引号和双引号。
4. 正确闭合：
除了自闭合标签外，所有标签都应该正确闭合，以保持HTML文档的结构完整性。
常用自闭合标签：<br />、<col />、<img />、<input />、<link />、<meta />、<keygen />
5. ID和Class命名的最佳实践
在制定ID和Class的命名规范时，一些良好的实践可以使CSS代码更具可读性和可维护性。
通用而有意义的命名：
为ID和Class选择通用而有意义的名称，以确保代码的可理解性。
使用连字符 - 作为分隔符：
在ID和Class的名称中，使用连字符 - 作为分隔符，而不是驼峰命名法或下划线。
避免选择器嵌套过多：
尽量避免选择器嵌套层级过多，建议少于3级，以保持选择器的简洁性。
命名空间防止冲突：
使用命名空间来防止命名冲突，有助于更好地维护代码。
避免选择器和Class、ID叠加使用：
尽量避免在选择器中使用Class和ID，以保持CSS的简洁性。
声明顺序的规范：
遵循一定的声明顺序，相关属性应为一组，按照定位布局属性 -> 盒模型属性 -> 文本属性 -> 视觉属性 -> 其他属性的顺序。
特殊应用标识前缀：
在JS操作相关的选择器前面添加特殊应用标识前缀，以明确其用途。
⚽图片使用的最佳实践
在使用图片时，遵循一些规范和最佳实践可以提高页面性能和用户体验。
1. <img/>标签守则：
确保在使用<img>标签时遵循以下规范：
src属性不能为空，需添加默认值作为托底图片路径。
为重要图片添加alt属性，以便于在图像无法显示时提供替代文本，有助于SEO和用户阅读。
为图片标签增加width和height属性，避免图片加载时从无到有，导致页面抖动。
对于大量图片流资源，推荐使用懒加载技术，按需加载图片。
2. 图片资源守则：
在使用图片资源时，需要考虑以下因素：
大小：
对于尺寸小于50×50的图片，建议使用字体图标（iconfont）或将多个图标合成一张大图使用（雪碧图）。
尺寸大于50×50的图片，引入前先使用在线压缩工具对其进行压缩，控制图片大小在300kb以内。
倍率：
PC端和移动端推荐使用2倍图（@2x），以避免在高分辨率设备上显示失真或模糊。
在特殊场景（如兼容iPad等），可考虑使用3倍图（@3x）。
图片展示区域大小与图片实际尺寸的比例需遵守倍率规范。
无论使用几倍图，图片大小都应控制在规定范围内。
如遇图片倍图问题，可咨询UI设计师。
🔄性能优化守则
在开发过程中，遵循一些性能优化的守则可以提高网页加载速度和用户体验。
1. 避免不必要的 DOM 操作：
浏览器遍历 DOM 元素的代价昂贵，因此应尽量避免不必要的 DOM 操作。最简单的优化方案是将频繁使用的 DOM 元素保存在变量中，以避免多次查询 DOM 树。
2. 异步加载第三方内容：
在嵌入第三方内容（如埋点、调研等资源）时，考虑使用异步加载这些代码，以避免阻塞整个页面加载。
3. 减少标签的数量：
在编写 HTML 代码时，尽量避免多余的标签嵌套，减少 DOM 树的冗余，提高页面加载效率。
4. 控制静态资源数量：
页面中建议 CSS 文件不要超过3个：包括一个组件库样式文件、一个项目公共样式和一个页面样式。
JS 文件不要超过5个：包括一个框架文件、一个组件库文件、一个项目公共库文件、一个页面脚本文件和一个埋点文件。
💞编码和代码规范建议
在编写代码时，遵循一些规范和最佳实践可以提高代码质量和可维护性。
1. 缩进和样式建议：
使用2个空格进行代码缩进。
在样式中引入CSS reset，以重置各浏览器自带的样式差异。可以使用类似 normalize.css 的工具。
2. JS字符串定义：
在JavaScript中，使用单引号''来定义字符串。
3. 其他建议：
保持代码整洁，尤其在大型项目中。
代码逻辑应当直截了当，清晰易读，与业务逻辑和代码一一对应，减少逻辑错误的可能性。
删除过期无用代码，减少不必要的维护成本。
代码尽量复用，倡导组件化思想。
合理命名代码，使其他开发人员能够一眼理解意图，即使不写注释。
调优代码性能，降低耦合度，避免不合理的优化引起的混乱。
定义清晰的模块边界，确保模块之间逻辑清晰，避免功能交叉混杂。
4. Lighthouse性能检测工具：
Lighthouse是由Google开源的自动化工具，用于改进网络应用的质量。通过对各个测试项的打分和给出的优化建议，Lighthouse可以视为Google的网页最佳实践。
使用Chrome拓展程序：
在Chrome Web Store安装Lighthouse。
在右上角或菜单中点击Lighthouse图标，通过Options配置测试项目。
点击Generate report开始测试。
使用命令行：
通过遵循这些建议和使用Lighthouse工具，可以确保代码的可读性、可维护性，并优化网页性能。
🎁【附录】常用的标签规范
| 标签 | 语义 | 嵌套常见错误 | 常用属性 |
| <a></a> | 超链接/锚 | a不可嵌套a | href,name,title,rel,target |
| <div></div> | 块级容器 | ||
| <p></p> | 段落 | 不能嵌套块级元素 | |
| <span></span> | 内联容器（行内元素） | 不可嵌套块级容器 | |
| <form></form> | 表单 | action,target,method,name | |
| <input /> | 输入框 | 不可嵌套元素 | type,name,value,checked,disabled,maxlength,readonly,accesskey |
| <textarea></textarea> | 多行文本输入控件 | name,accesskey,disabled,readonly,rows,cols | |
| <img /> | 图像 | 不可嵌套元素 | alt,src,width,height |
| <label></label> | 标签（常用input元素定义标注） | 不可嵌套块级容器 | for |
| <table></table> | 表格 | 只可嵌套表格子元素 | width,align,background,cellpadding,cellspacing,summary,border |
| <tbody></tbody> | 表格主体 | 只能嵌套在table内 | |
| <thead></thead> | 表头 | 只能嵌套在table内 | |
| <tr></tr> | 表格行 | 嵌套于table或thead、tbody、tfoot | |
| <td></td> | 表格中的单元格 | 只用于tr | colspan,rowspan |
| <th></th> | 表格中的标题单元格 | 只用于tr | colspan,rowspan |
| <tfoot></tfoot> | 表格表尾 | 只用于table | |
| <button></button> | 按钮 | 不可嵌套表单、表格等块级元素 | type,disabled |
| <select></select> | 列表框或下拉框 | 只能嵌套option或optgroup | name,disabled,multiple |
| <option></option> | select中的一个选项 | 只能嵌套在select内 | value,selected,disabled |
| <ol></ol> | 有序列表 | 只能嵌套li | |
| <ul></ul> | 无序列表 | 只能嵌套li | |
| <li></li> | 无序列表项 | 只能嵌套在 ul 或 ol 内 | |
| <iframe></iframe> | 内嵌一个网页 | frameborder,width,height,src,scrolling,name | |
| <br /> | 换行 | ||
| <link /> | 引用样式或icon | 不可嵌套任何元素 | type,rel,href |
| <meta /> | 文档信息 | 只用于head内 | content,http-equiv,name |
| <script></script> | 引用脚本 | 不可嵌套任何元素 | type,src |
| <style></style> | 引用样式 | 不可嵌套任何元素 | type,media |
| <title></title> | 文档标题 | 只用于head内 |
