代码风格指南
标签小写、属性引号、缩进统一、DOCTYPE 声明、语言属性
代码风格指南
一致的代码风格让 HTML 更易读、易维护——团队协作尤其重要。
学完本章你将： 掌握标签小写、属性引号、缩进、DOCTYPE、lang 等规范。
基本规范
html
<!-- ✅ 标签和属性名小写 -->
<p class="intro">正确</p>
<!-- ❌ <P CLASS="intro">避免</P> -->
<!-- ✅ 属性值用双引号 -->
<a href="https://example.com">链接</a>
<!-- ❌ <a href='https://example.com'> 也行但不统一 -->
<!-- ✅ 始终闭合标签 -->
<p>段落文字</p>
<!-- ❌ <p>段落文字 不推荐省略 -->
<!-- ✅ 2 空格缩进（推荐） -->
<div>
<p>缩进清晰</p>
<ul>
<li>列表项</li>
</ul>
</div>必做项
html
<!DOCTYPE html> <!-- 始终声明 DOCTYPE -->
<html lang="zh-CN"> <!-- 设置语言 -->
<head>
<meta charset="UTF-8"> <!-- 设置编码 -->
<meta name="viewport" <!-- 响应式基础 -->
content="width=device-width, initial-scale=1.0">
<title>有意义的标题</title>
</head>可访问性规范
html
<!-- ✅ 图片有 alt -->
<img src="chart.png" alt="2024年销售柱状图">
<!-- ✅ 表单有 label -->
<label for="email">邮箱：</label>
<input type="email" id="email" name="email">
<!-- ✅ 用语义标签 -->
<nav>导航</nav> <!-- 而非 <div class="nav"> -->文件结构
project/
├── index.html # 首页
├── about.html # 关于页
├── css/
│ └── style.css # 样式
├── js/
│ └── main.js # 脚本
├── images/
│ └── logo.png # 图片
└── favicon.ico # 图标