问答社区页面应使用语义化标签构建结构：提问用包裹，含；回答用/包裹，每条为内嵌；采纳答案添加aria-label；补充内容放；全页仅一个。

规划问答社区页面的提问与回答结构，核心是用语义化标签清晰表达内容层级和角色关系，同时兼顾可访问性、SEO 和后续交互扩展。重点不是堆砌样式，而是让机器（爬虫、屏幕阅读器）和人一眼看懂“谁在问、问题是什么、谁在答、答案是否被采纳”。

提问区域：用

包裹完整问题单元

每个提问应视为一个独立、可分发的内容实体，必须使用

标签包裹，不能只用

或

。

• 内部包含：
  （含提问者信息、时间、标签）、

  （问题标题）、

  或

  

  html-to-pptx

  将多页 HTML 演示文稿转换为美化的 PPTX 文件，便于分享和分发。

  下载

  （问题正文）、

  （操作区：编辑、分享、收藏）

  提问者信息建议用

  标签，例如：<address> <a href="https://www.php.cn/link/2864c252715c01e09de3dac606f6872c">张三</a><time datetime="2026-07-28T14:22">昨天</time> </address>

  问题发布时间必须用 ，提供 machine-readable 时间戳，利于结构化数据提取

  回答列表：用

  或

  组织，每条回答为一个
  • 内嵌

  回答是有明确排序逻辑（如按投票数、时间）的内容集合，适合用有序列表

  ；若不强调顺序，可用

  。每条回答本身也是一则独立内容，因此每个
  • 内部应再嵌套一个
    。

    • 内部结构类似提问：

      （答主+时间）、

      （回答正文）、

      （投票按钮、评论入口、采纳按钮）

      若某回答被采纳，给对应

      添加 aria-label="已采纳的答案"，并用 CSS 视觉强化（如徽章图标），避免仅靠颜色区分

      投票控件建议用 而非 + JS，确保键盘可聚焦、屏幕阅读器可识别动作

      互动与辅助信息：用语义容器隔离，不混入主干内容

      相关问题、热门标签、侧边推荐等属于补充内容，应放在

      中，与

      严格分离。

      • 只包含提问主体 + 回答列表，不得塞入广告、推荐或导航
      • 用户提问表单应置于提问区域上方或下方，用
        包裹，字段含 （问题描述）、<select>（分类）、<button type="submit"> 提交</button></select>
      • FAQ 折叠区块可用
        实现，无需额外 JS，天然支持无障碍展开/收起

      整体页面骨架：保持单一

      ，避免嵌套污染

      整个问答页必须只有一个

      元素，且它只包裹提问块和回答列表。

      放网站全局导航，

      放版权信息，

      放侧边模块——三者都与

      并列，不可嵌套其中。

      • 错误示例：<main><header>...</header><article>...</article></main>（
        属于页面级，不应在

        内）
      • 正确结构：<header>...</header><main><article>...</article><ol>...</ol></main><aside>...</aside><footer>...</footer>
      • 所有文本内容必须有明确的标题层级（h1–h3），例如页面 h1 是“提问：XXX”，问题标题用 h2，回答标题不用 h3（除非回答内含子章节）

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！