当前位置：首页 > news >正文

HTML 编码规范

news 2025/9/15 9:21:24

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. 注释

强制要求：注释内容不得包含敏感信息
推荐：单行注释保留空格

<!-- 这是单行注释 -->

3. 标签

强制要求：标签名称必须小写

<h1>标题</h1>

推荐：自闭合标签保留结尾斜线并前置空格

<img src="image.png" alt="示例" />
<meta name="viewport" content="width=device-width" />

4. 属性

强制要求：属性值必须使用双引号

<link rel="stylesheet" href="style.css" />

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>