HTML 编码规范
文档规范
1. 文档类型
强制要求：必须使用 HTML5 文档类型声明
<!DOCTYPE html>
<html></html>
2. 语言设置
推荐：在 <html> 标签中添加 lang="zh-CN" 属性
<html lang="zh-CN">...</html>
3. 元数据设置
推荐：统一采用 UTF-8 字符编码
<head>
<meta charset="utf-8" />
</head>
推荐：移动端适配需设置 viewport，兼容 iPhone X 刘海屏
<meta name="viewport" content="width=device-width, minimum-scale=1.0, viewport-fit=cover" />
4. 资源加载
推荐：引入 CSS 和 JavaScript 时省略 type 属性
<link rel="stylesheet" href="example.css" />
<script src="example.js"></script>
推荐：CSS 在 head 中引入，JS 在 body 结束前引入
<head>
<link rel="stylesheet" href="example.css" />
</head>
<body>
<!-- 页面内容 -->
<script src="example.js"></script>
</body>
推荐：外部资源采用协议相对 URL
<link rel="stylesheet" href="//g.cdn.com/lib/style/index-min.css" />
推荐：关键资源使用 preload 预加载
<link rel="preload" href="style.css" as="style" />
<link rel="preload" href="main.js" as="script" />
推荐：使用 dns-prefetch 和 preconnect 优化网络性能
<link rel="preconnect" href="https://fonts.googleapis.com/" crossorigin />
<link rel="dns-prefetch" href="https://fonts.googleapis.com/" />
5. 页面标题
强制要求：每个页面必须有且仅有一个 title 标签
<head>
<title>页面标题</title>
</head>
编码规范
1. 缩进
推荐：统一采用 2 个空格缩进
<html>
<head>
<title>示例</title>
</head>
</html>
2. 注释
强制要求：注释内容不得包含敏感信息
推荐：单行注释保留空格
<!-- 这是单行注释 -->
推荐：多行注释规范格式
<!--
这是多行注释
第二行内容
-->
3. 标签
强制要求：标签名称必须小写
<h1>标题</h1>
推荐：自闭合标签保留结尾斜线并前置空格
<img src="image.png" alt="示例" />
<meta name="viewport" content="width=device-width" />
4. 属性
强制要求：属性值必须使用双引号
<link rel="stylesheet" href="style.css" />
推荐：Boolean 属性省略取值
<input type="text" disabled />
<input type="checkbox" checked />
推荐：自定义属性以 data- 开头
<a data-modal="toggle" href="#">链接</a>
5. 语义化
参考建议：优先使用语义化标签
<ul class="list">
<li class="item">项目1</li>
<li class="item">项目2</li>
</ul>
6. 可访问性
参考建议：提升页面可访问性
<img src="hello.jpg" alt="欢迎访问" />
<!-- 装饰性图片 -->
<img src="decor.png" alt="" />
标准模板
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8" />
<meta name="description" content="页面描述信息" />
<meta name="keyword" content="关键词1,关键词2" />
<meta name="viewport" content="width=device-width, minimum-scale=1.0, viewport-fit=cover" />
<title>页面标题</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div id="app"></div>
<script src="app.js"></script>
</body>
</html>
本规范旨在提升 HTML 代码的规范性、可读性和可维护性，同时兼顾性能优化与可访问性需求。