1. 网页结构与信息架构

普适性 & 专业性

• 网页结构（Web Structure）：指页面在 HTML 层面的区域划分与内容组织，例如头部（Header）、导航（Nav）、主体（Main）、侧栏（Aside）、页脚（Footer）。这是 HTML 文档的“骨架”。
• 信息架构（Information Architecture, IA）：是从用户体验的角度，设计内容的分类、层级、关系和路径，让用户能快速找到所需信息。
• 专业意义：
  • 结构清晰 → 搜索引擎容易抓取。
  • 层级合理 → 用户认知成本低，能快速定位。

本例结合

• 标题区在结构中：处于 <body> 的最上方，用 <header> 表示，包含站点身份（Logo + 名称）和导航。
• 信息架构体现：
  • “首页”“教学日志”“学生作品”是网站主分类。
  • “联系”是功能入口，“学习资源”是外部链接。
  • 导航排列逻辑是从常用到次要，符合用户访问路径习惯。

2. HTML 语义化标签

普适性 & 专业性

• 语义化（Semantic HTML）：使用能体现内容意义的标签，而不是仅为外观而选择标签。
• 常用标签：
  • <header>：页面或区域的头部。
  • <nav>：导航链接集合。
  • <ul>/<li>：无序列表，适合导航菜单。
  • <a>：超链接，配合 href、target、rel。
  • <img>：图片，配合 alt 提供替代文字。
• 专业意义：
  • 提升可访问性（辅助技术能正确理解结构）。
  • 提高 SEO（搜索引擎能理解内容类型）。
  • 后期维护方便（结构与样式分离）。

本例结合

<!-- ===== 标题区 / Header ===== -->
<header class="site-header" aria-label="站点标题区">
  <div class="container">
    <!-- 左侧：Logo + 站点名称 -->
    <a class="brand" href="index.html" rel="home" aria-label="返回首页">
      <img class="brand__logo" src="image/site-logo.png" alt="前端成长工坊 Logo：实践·成长·看见">
      <span class="brand__title">前端成长工坊</span>
    </a>

    <!-- 右侧：主导航（与原站一致） -->
    <nav class="nav" aria-label="主导航">
      <ul class="nav__list">
        <li><a href="index.html">首页</a></li>
        <li><a href="category-teaching-log.html">教学日志</a></li>
        <li><a href="category-student-works.html">学生作品</a></li>
        <li><a href="contact.html">联系</a></li>
        <li><a href="https://www.notion.so/web-240b5034f3d38096a900f1c096fbe7e3" target="_blank" rel="noopener noreferrer">学习资源</a></li>
      </ul>
    </nav>
  </div>
  </header>

• 语义化体现：
  • <header> 包含了整个标题区。
  • <nav> 明确了这是导航菜单。
  • <ul>/<li> 明确这是一个列表式菜单。
  • <img> 的 alt 写了站点名和口号，语义完整。

3. 可访问性（a11y）