编辑“︁HTML编码规范”︁（章节）

= HTML编码规范 =

HTML编码规范是一套用于编写HTML代码的规则和最佳实践，旨在提高代码的可读性、可维护性和一致性。遵循良好的编码规范不仅有助于团队协作，还能减少错误并提升网页性能。本指南适用于初学者和有一定经验的开发者。

== 简介 ==
HTML编码规范定义了如何组织和格式化HTML代码，包括标签使用、属性顺序、缩进、注释等方面。良好的编码规范有助于：
* 提高代码可读性
* 便于团队协作
* 减少错误
* 优化搜索引擎索引
* 提升可访问性

== 基本规范 ==

=== 文档结构 ===
每个HTML文档应遵循标准结构，包含DOCTYPE声明、html、head和body标签。

<syntaxhighlight lang="html">
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>页面标题</title>
</head>
<body>
    <!-- 页面内容 -->
</body>
</html>
</syntaxhighlight>

=== 标签使用规范 ===
* 使用小写字母书写标签和属性
* 自闭合标签无需关闭（如<img>, <br>, <input>）
* 双标签必须正确嵌套和关闭
* 属性值使用双引号

=== 缩进与格式 ===
* 使用4个空格缩进（不推荐使用Tab）
* 块级元素应换行并缩进
* 内联元素可以写在一行

<syntaxhighlight lang="html">
<!-- 正确示例 -->
<div>
    <p>这是一个段落。</p>
    <ul>
        <li>项目1</li>
        <li>项目2</li>
    </ul>
</div>

<!-- 内联元素示例 -->
<p>这是一个包含<em>强调</em>和<strong>加粗</strong>的段落。</p>
</syntaxhighlight>

== 属性规范 ==

=== 属性顺序 ===
推荐属性顺序：
1. class
2. id
3. data-*
4. src, for, type, href, value
5. title, alt
6. aria-*, role
7. style

<syntaxhighlight lang="html">
<img class="logo" id="main-logo" src="logo.png" alt="公司标志" width="200" height="100">
</syntaxhighlight>

=== 布尔属性 ===
布尔属性可以省略值：

<syntaxhighlight lang="html">
<!-- 正确 -->
<input type="checkbox" checked>
<button disabled>不可点击</button>

<!-- 不推荐 -->
<input type="checkbox" checked="checked">
</syntaxhighlight>

== 语义化HTML ==
使用语义化标签增强文档结构和可访问性：

<mermaid>
graph TD
    A[HTML5语义标签] --> B[header]
    A --> C[nav]
    A --> D[main]
    A --> E[article]
    A --> F[section]
    A --> G[aside]
    A --> H[footer]
</mermaid>

<syntaxhighlight lang="html">
<header>
    <h1>网站标题</h1>
    <nav>
        <ul>
            <li><a href="/">首页</a></li>
            <li><a href="/about">关于</a></li>
        </ul>
    </nav>
</header>
<main>
    <article>
        <h2>文章标题</h2>
        <p>文章内容...</p>
    </article>
</main>
<footer>
    <p>版权信息</p>
</footer>
</syntaxhighlight>

== 性能优化 ==

=== 减少DOM节点 ===
* 避免不必要的嵌套
* 使用CSS代替表格布局

=== 资源加载 ===
* 为<img>标签添加width和height属性
* 使用loading="lazy"实现图片懒加载

<syntaxhighlight lang="html">
<img src="example.jpg" alt="示例图片" width="800" height="600" loading="lazy">
</syntaxhighlight>

== 可访问性规范 ==

* 为所有图片添加alt属性
* 使用ARIA属性增强可访问性
* 确保表单元素有对应的label
* 使用适当的标题层级(h1-h6)

<syntaxhighlight lang="html">
<form>
    <label for="username">用户名:</label>
    <input type="text" id="username" name="username" aria-required="true">
    
    <button type="submit">提交</button>
</form>
</syntaxhighlight>

== 注释规范 ==
* 使用<!-- 注释内容 -->格式
* 注释应解释代码意图而非描述代码
* 避免过度注释

<syntaxhighlight lang="html">
<!-- 主导航开始 -->
<nav class="main-nav">
    <!-- 导航项 -->
    <ul>...</ul>
</nav>
<!-- 主导航结束 -->
</syntaxhighlight>

== 实际案例 ==

=== 电商产品卡片 ===
展示一个符合规范的电商产品卡片HTML结构：

<syntaxhighlight lang="html">
<article class="product-card" itemscope itemtype="http://schema.org/Product">
    <figure>
        <img src="product.jpg" alt="蓝色运动鞋" itemprop="image" width="300" height="300" loading="lazy">
        <figcaption class="visually-hidden">产品展示图</figcaption>
    </figure>
    <div class="product-info">
        <h2 itemprop="name">蓝色运动鞋</h2>
        <p class="price" itemprop="offers" itemscope itemtype="http://schema.org/Offer">
            <span itemprop="priceCurrency" content="CNY">¥</span>
            <span itemprop="price" content="299.00">299</span>
        </p>
        <button class="add-to-cart" aria-label="加入购物车">
            加入购物车
        </button>
    </div>
</article>
</syntaxhighlight>

== 数学公式示例 ==
虽然HTML本身不常用于展示数学公式，但了解如何在网页中嵌入公式也很重要：

<math>
E = mc^2
</math>

<math>
\frac{d}{dx}\left( \int_{0}^{x} f(u)\,du\right)=f(x)
</math>

== 总结 ==
遵循HTML编码规范可以带来以下好处：
* 提高代码质量和一致性
* 便于团队协作和维护
* 增强可访问性和SEO优化
* 提升页面性能

记住，规范不是一成不变的，应根据项目需求和团队约定进行调整。最重要的是保持一致性，使代码易于理解和维护。

[[Category:编程语言]]
[[Category:HTML]]
[[Category:HTML基础]]