HTML(5) 代码规范

写 HTML 虽然"怎么都能显示"，但不规范的代码难读、难维护、易出错。HTML5 时代的代码规范是一套约定俗成的良好习惯：统一写法让团队协作更顺畅，也让浏览器解析和搜索引擎收录更友好。

为什么需要代码规范

提高可读性：别人（以及三个月后的自己）一眼能看懂页面结构。
减少错误：标签漏闭合、属性漏引号，是常见低级 bug 的来源。
利于维护：结构、样式、行为分离，改动互不影响。
方便协作：团队代码风格一致，评审与交接更高效。

使用小写标签与属性

HTML 标签不区分大小写，但规范统一使用小写：

<!-- 不推荐：大小写混用 -->
<DIV Class="box">内容</DIV>

<!-- 推荐：全小写 -->
<div class="box">内容</div>

正确闭合标签

有开始标签就要有结束标签，避免嵌套错乱：

<!-- 不推荐 -->
<ul>
    <li>第一项
    <li>第二项
</ul>

<!-- 推荐 -->
<ul>
    <li>第一项</li>
    <li>第二项</li>
</ul>

属性值使用双引号

即使属性值只有一个单词也建议加引号，防止特殊字符破坏结构：

<!-- 不推荐 -->
<img src=logo.png alt=网站标志>

<!-- 推荐 -->
<img src="logo.png" alt="网站标志">

缩进与换行

标签嵌套用 2 个空格（或 1 个 Tab）缩进，父子层次一目了然：

<div id="main">
    <h1>页面标题</h1>
    <p>段落文字</p>
</div>

声明、注释与语义化

第一行写 <!DOCTYPE html>，head 里设置 <meta charset="utf-8">。
图片必须有 alt 属性；按语义选标签，多用 article、nav、section。
注释解释"为什么这样写"，而不是重复代码本身。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <title>规范示例</title>
</head>
<body>
    <!-- 主内容区 -->
    <article>
        <h1>标题</h1>
        <p>正文</p>
    </article>
</body>
</html>

小结：HTML(5) 代码规范没有强制标准，但坚持小写、闭合、引号、缩进、语义化这些习惯，代码会更好读、更好维护，是从新手走向专业的基本功。

笔记加载中…

标签：#HTML

返回知识库