HTML代码注释专家

幂简官方

34 浏览

2 试用

0 购买

Dec 3, 2025更新

本提示词专为HTML和CSS开发场景设计，能够为HTML代码添加专业、清晰的注释说明。通过分析代码结构和功能，自动生成符合技术文档标准的注释内容，帮助开发者理解代码逻辑、维护项目文档。该提示词支持多种注释风格选择，能够适应不同的开发规范和团队要求，提升代码可读性和协作效率。

原始代码分析摘要
- 页面结构采用典型的“头部-主体-底部”三段式布局：header（粘性导航栏）、main（英雄区与特性区）、footer（版权与协议链接）。
- 样式层使用CSS自定义属性集中管理主题色，并通过Grid/Flex与媒体查询实现响应式布局（900px与600px两个断点）。
- 顶部导航包含站点Logo、菜单与主题切换按钮；主体英雄区包含标题、说明文本、订阅表单与预览图；特性区以三列卡片展示产品卖点。
- 可访问性方面使用了lang、alt、aria-label、aria-pressed等属性；脚本通过IIFE绑定按钮事件，切换documentElement上的dark类，并同步ARIA状态。
注释添加说明
- 注释风格：标准；详细程度：中等。
- 注释覆盖范围：HTML结构注释使用HTML注释（）；style内为保证有效性使用CSS注释（/* /）；script内使用JS注释（//、/ */）。
- 注释重点：语义结构、布局关系、关键交互、可访问性参数与媒体查询断点效果。
带有完整注释的HTML代码块

<!DOCTYPE html> <!-- 文档类型声明：启用标准模式，确保浏览器一致渲染 -->
<html lang="zh-CN"> <!-- 页面主语言设为简体中文，利于无障碍与SEO -->
<head>
  <meta charset="utf-8"> <!-- 使用UTF-8编码，支持多语言字符 -->
  <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- 视口配置：移动端等比例缩放，启用响应式布局 -->
  <title>示例站点 - 首页</title>
  <style>
    /* 设计令牌：主题/文本/强调色，便于全局换肤与统一风格 */
    :root { --primary:#3B82F6; --accent:#F59E0B; --text:#111827; --muted:#6B7280; }

    /* 全局盒模型：包含内边距与边框，简化尺寸计算 */
    *{box-sizing:border-box}

    /* 基础排版与背景设定：系统字体栈、行高与文字颜色 */
    body{
      margin:0;
      font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,"Noto Sans",sans-serif;
      color:var(--text);
      line-height:1.6;
      background:#fff
    }

    /* 头部：粘性定位，滚动时保持在顶部；底边描边提升层次 */
    header{
      position:sticky;
      top:0;
      background:#fff;
      border-bottom:1px solid #E5E7EB;
      z-index:10
    }

    /* 容器：居中与左右内边距，限制内容最大宽度 */
    .container{max-width:1100px;margin:0 auto;padding:0 16px}

    /* 顶部导航行：水平分布，垂直居中，固定高度 */
    .nav{display:flex;align-items:center;justify-content:space-between;height:64px}

    /* Logo：粗体字重，微字距，去下划线，使用正文色 */
    .logo{font-weight:700;letter-spacing:.5px;text-decoration:none;color:var(--text)}

    /* 主菜单：横向排列与间距 */
    .menu{display:flex;gap:20px}
    .menu a{color:var(--muted);text-decoration:none}

    /* 按钮：通用样式，内联弹性布局支持图标与文字间距 */
    .btn{
      display:inline-flex;align-items:center;gap:8px;
      padding:10px 16px;border-radius:8px;
      border:1px solid #D1D5DB;background:#fff;color:var(--text);
      cursor:pointer
    }
    /* 主要按钮：使用主题主色背景并同步边框颜色 */
    .btn--primary{background:var(--primary);color:#fff;border-color:var(--primary)}

    /* 英雄区：双列网格（左文案右插图），垂直居中与列间距 */
    .hero{
      display:grid;grid-template-columns:1.1fr .9fr;
      align-items:center;gap:32px;padding:48px 0
    }
    .hero h1{font-size:40px;line-height:1.2;margin:0}
    .hero p{color:var(--muted);margin:12px 0 24px}

    /* 订阅表单：输入框与按钮水平排列，留出间距 */
    .signup{display:flex;gap:12px}
    .signup input{
      flex:1;padding:12px 14px;border:1px solid #D1D5DB;border-radius:8px
    }

    /* 特性区：三列网格，卡片间距与底部留白 */
    .features{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;padding:24px 0 56px}

    /* 卡片：内边距、描边与圆角 */
    .card{padding:20px;border:1px solid #E5E7EB;border-radius:12px}
    .card h3{margin:0 0 8px;font-size:18px}

    /* 页脚：顶部分隔线与内边距，文本次要色 */
    footer{border-top:1px solid #E5E7EB;padding:24px 0;color:var(--muted)}

    /* 断点1（<=900px）：
       - 英雄区改为单列堆叠（图文上下排列）
       - 特性区从三列减为两列 */
    @media (max-width:900px){
      .hero{grid-template-columns:1fr}
      .features{grid-template-columns:1fr 1fr}
    }

    /* 断点2（<=600px）：
       - 隐藏顶部横向菜单（为移动端预留收纳/抽屉空间）
       - 特性区改为单列
       - 订阅表单从横排改为纵排堆叠 */
    @media (max-width:600px){
      .menu{display:none}
      .features{grid-template-columns:1fr}
      .signup{flex-direction:column}
    }
  </style>
</head>
<body>
  <!-- 头部导航：包含站点标识、主菜单与主题切换 -->
  <header>
    <!-- 使用容器元素对齐内容；通过role与aria-label定义导航地标 -->
    <div class="container nav" role="navigation" aria-label="主导航">
      <!-- 站点Logo：返回首页 -->
      <a class="logo" href="/">示例站点</a>
      <!-- 主菜单：站内锚点跳转到对应分区 -->
      <nav class="menu">
        <a href="#top">产品</a>
        <a href="#features">特性</a>
        <a href="#pricing">价格</a>
        <a href="#about">关于</a>
      </nav>
      <!-- 主题切换按钮：aria-pressed表示开关状态，初始为未按下（浅色主题） -->
      <button id="themeToggle" class="btn" type="button" aria-pressed="false">切换主题</button>
    </div>
  </header>

  <!-- 主体内容：英雄区与特性区 -->
  <main class="container">
    <!-- 英雄区：核心卖点、说明与订阅入口 -->
    <section id="top" class="hero">
      <div>
        <h1>更快打造可读的前端代码</h1>
        <p>将零散的HTML/CSS转化为结构清晰、可协作的版本，减少沟通成本，让评审聚焦实现本身。</p>
        <!-- 订阅表单：GET方式提交；通过aria-label为输入提供可访问名称 -->
        <form class="signup" action="#" method="get">
          <input type="email" name="email" placeholder="输入邮箱获取产品更新" aria-label="订阅邮箱">
          <button class="btn btn--primary" type="submit">立即订阅</button>
        </form>
      </div>
      <div>
        <!-- 预览图：包含描述性alt文本；设置固有宽高以减少布局跳动，样式保证响应式缩放 -->
        <img
          src="https://dummyimage.com/600x380/EEF2FF/111827&text=Preview"
          alt="产品使用效果预览"
          width="600"
          height="380"
          style="max-width:100%;height:auto">
      </div>
    </section>

    <!-- 特性区：以卡片形式展示核心能力 -->
    <section id="features" class="features">
      <article class="card">
        <h3>多风格注释</h3>
        <p>支持标准、简洁和文档型注释，匹配团队规范。</p>
      </article>
      <article class="card">
        <h3>一致的结构</h3>
        <p>基于语义分区与组件边界生成说明，便于维护。</p>
      </article>
      <article class="card">
        <h3>评审更高效</h3>
        <p>把注意力集中在变更与意图，降低理解成本。</p>
      </article>
    </section>
  </main>

  <!-- 页脚：版权信息与法律链接 -->
  <footer>
    <div class="container">
      © 2025 示例站点 · <a href="#" style="color:inherit">使用条款</a>
    </div>
  </footer>

  <script>
    // IIFE：避免全局命名空间污染
    (function(){
      // 获取主题切换按钮
      var btn = document.getElementById('themeToggle');

      // 点击时切换html元素上的dark类，并同步ARIA状态
      btn.addEventListener('click', function(){
        var d = document.documentElement; // 根元素<html>
        var dark = d.classList.toggle('dark'); // 切换是否包含 .dark 类
        btn.setAttribute('aria-pressed', String(dark)); // 更新开关状态：true/false
      });

      // 说明：当前样式中未定义.dark的具体样式规则；
      // 若需生效暗色主题，可在:root或.dark作用域下补充变量或覆盖色板。
    })();
  </script>
</body>
</html>

注释内容总结
- 结构层面：标注了页面三段式布局、分区语义（header/main/footer/section/article）及容器职责。
- 样式层面：说明了CSS变量用途、布局方式（Flex/Grid）、卡片与按钮样式、媒体查询断点及其影响。
- 交互层面：解释了主题切换逻辑、dark类切换与ARIA状态同步机制。
- 可访问性：指出了lang、aria-label、aria-pressed、img的alt与固有宽高的作用。
- 响应式：明确了<=900px与<=600px断点下菜单、网格与表单布局的变化。

原始代码分析摘要
- 文档结构：标准 HTML5 文档，包含内联样式与内联脚本。页面主体由一个固定宽度的容器包裹，使用表格进行两处布局（顶部导航与主内容两列）。
- 功能模块：
  - 顶部导航：左侧站点/活动名称链接，右侧页内锚点导航（介绍、报名）。
  - 主内容区：左列为活动介绍，右列为报名表单（POST 到 /api/join）。
  - 模态对话框：用于展示提交成功提示，初始隐藏，通过脚本切换显示/隐藏。
  - 交互逻辑：拦截表单提交，阻止默认请求，触发提示模态；支持按钮关闭与点击遮罩关闭。
- 关键样式：基础字体与间距设置；按钮样式（默认/主按钮）；对话框容器样式；.hidden 控制显示状态。
- 可访问性：对话框设置了 role="dialog"、aria-modal="true" 与 aria-labelledby 关联标题。
注释添加说明
- 注释风格：文档型，围绕模块、结构与属性进行说明，使用分点描述重要参数与交互关系。
- 粒度与位置：在重要结构块（头部、导航、内容区、表单、模态、脚本）前添加块级注释；针对关键元素（表单、按钮、ARIA 属性）补充用途与参数说明。
- 注释格式：使用 HTML 注释（）；不在
  
  适用用户
  
  前端开发工程师
  
  为新页面一键补齐结构注释，梳理样式作用域，提交代码时附带清晰说明，减少评审往返。
  
  技术负责人/团队主管
  
  统一注释规范，快速评估遗留代码可维护性，搭建可复用的注释示例库，缩短新人上手周期。
  
  测试与质量工程师
  
  借助注释理解页面结构与交互路径，快速编写用例与检查点，定位改动影响范围，降低回归成本。
  
  特征总结
  
  • 自动识别HTML结构与样式作用，一键生成贴合业务的注释说明，减少沟通时间。
  
  • 支持多种注释风格与团队规范，快速统一口径，新人接手代码不再迷路。
  
  • 可调节注释详略与颗粒度，覆盖审查、教学与交付场景，所见即用，节省标注时间。
  
  • 对遗留页面自动补全缺失说明，标记关键模块与交互意图，维护更省心。
  
  • 结合页面结构关系标注组件边界与依赖，便于跨职能协作与需求变更落地。
  
  • 自动生成注释要点清单与摘要，支持同步到项目文档，知识沉淀一目了然。
  
  • 注释严格匹配代码逻辑，避免空话与误导，降低返工与线上风险，保证交付质量。
  
  • 一键输出可直接合并的带注释代码，减少重复劳动，提升评审与上线效率。
  
  • 适配响应式与常见布局写法，突出重要样式位置与参数说明，排查问题更高效。
  
  如何使用购买的提示词模板
  
  1. 直接在外部 Chat 应用中使用
  
  将模板生成的提示词复制粘贴到您常用的 Chat 应用（如 ChatGPT、Claude 等），即可直接对话使用，无需额外开发。适合个人快速体验和轻量使用场景。
  
  2. 发布为 API 接口调用
  
  把提示词模板转化为 API，您的程序可任意修改模板参数，通过接口直接调用，轻松实现自动化与批量处理。适合开发者集成与业务系统嵌入。
  
  3. 在 MCP Client 中配置使用
  
  在 MCP client 中配置对应的 server 地址，让您的 AI 应用自动调用提示词模板。适合高级用户和团队协作，让提示词在不同 AI 工具间无缝衔接。

AI 提示词价格

￥20.00元

先用后买，用好了再付款，超安全！

在线免费用提示词

您购买后可以获得什么

✓

获得完整提示词模板

- 共 513 tokens

- 3 个可调节参数

{ HTML代码 } { 注释风格 } { 注释详细程度 }

✓

获得社区贡献内容的使用权

- 精选社区优质案例，助您快速上手提示词

购买

限时半价

不要错过！

半价获取高级提示词-优惠即将到期

天

小时

分钟

秒

AI开发者

产品经理

商业分析师

电商运营人员

法律从业者

财务规划师

市场营销人员

品牌营销人员

新媒体运营

提示词工程

数据分析

写作

内容创作

内容营销

SEO

工具

商业战略

策略

DeepSeek

OpenAI

Claude

Gemini

Grok

Qwen

Kimi

HTML代码注释专家

适用用户

前端开发工程师

技术负责人/团队主管

测试与质量工程师

特征总结

如何使用购买的提示词模板

1. 直接在外部 Chat 应用中使用

2. 发布为 API 接口调用

3. 在 MCP Client 中配置使用

您购买后可以获得什么

不要错过！

热门提示词

热门角色

热门业务

大模型API

使用我们的提示词工具

反馈问题