HTML：页面结构、语义与表单

从一个页面开始

HTML 描述内容及结构，CSS 控制样式，JavaScript 处理交互。先写出无需脚本也能阅读和提交的页面，再逐步增强。保存以下代码为 index.html，在浏览器打开。

<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="一个最小的学习记录页面">
    <title>学习记录</title>
  </head>
  <body>
    <header><h1>学习记录</h1></header>
    <nav aria-label="页内导航"><a href="#notes">记录列表</a></nav>
    <main>
      <section id="notes">
        <h2>今天完成的内容</h2>
        <ul><li>写出一个完整 HTML 页面</li></ul>
      </section>
      <section>
        <h2>添加记录</h2>
        <form action="/notes" method="post">
          <label for="note">记录内容</label>
          <input id="note" name="note" required maxlength="100">
          <button type="submit">保存</button>
          <button type="button">预览</button>
        </form>
      </section>
    </main>
    <footer><p>每日练习</p></footer>
  </body>
</html>

<!doctype html> 使 HTML 文档按标准模式渲染；head 放标题和元数据，body 放可见内容。lang 帮助辅助技术确定语言，viewport 为移动设备布局提供正确视口。示例表单的 /notes 需要服务端实现，直接打开本地文件只能检查结构与浏览器校验。

按内容选择元素

内容	常用元素	注意
页面区域	header、nav、main、footer	使用真实语义，不为每个容器增加多余角色
独立文章、主题分区、附属内容	article、section、aside	分区通常配标题；纯样式容器用 div
标题、段落、强调	h1～h6、p、em、strong	标题级别表示层级，不按字体大小挑选
无序、有序、术语列表	ul/ol + li、dl/dt/dd	用于成组内容
链接、操作	a href、button	导航用链接，执行操作用按钮
引用、时间、图文说明	blockquote、time、figure/figcaption	让结构表达内容含义

span 和 div 没有特定语义。原生语义足够时不必重复 role；title 悬停提示不能替代可见标签。

表格、媒体与嵌入

表格用于二维数据，不用于页面布局。表头用 th，简单表格通过 scope 关联行列，caption 给出表格名称。

<table>
  <caption>练习耗时</caption>
  <thead><tr><th scope="col">任务</th><th scope="col">分钟</th></tr></thead>
  <tbody><tr><th scope="row">HTML</th><td>20</td></tr></tbody>
</table>

图片使用 img src，并提供符合语境的 alt；纯装饰图片可写 alt=""。width、height 的 HTML 属性使用数值尺寸，百分比布局写在 CSS 中。音视频用 audio、video 和 controls，需要字幕时用 track。iframe 嵌入其他文档时提供能说明用途的 title，并按需要限制权限。

HTML 中 img、input、meta、link、br 等是空元素，不能添加结束标签；HTML 末尾的 / 不会赋予普通元素自闭合行为。不要沿用 Flash 的 embed/object/param 示例来学习媒体嵌入。元素参考可查询具体规则。

属性与表单边界

• id 在页面中唯一，用于定位、标签关联和片段链接；class 用于复用样式；data-* 用于自定义数据。
• href 表示链接目标，src 表示加载资源。download 是下载提示，受来源等规则限制，不能保证任意跨站资源下载。
• 表单提交使用 name 作为字段名；id 不等于提交字段名。label for 对应控件 id，placeholder 不能替代 label。
• required、disabled 等是布尔属性，写 disabled="false" 仍表示禁用。禁用控件通常不参与提交；只读控件和禁用控件用途不同。
• 表单内的 button 默认可能提交表单，为普通操作明确写 type="button"。客户端校验改善体验，服务端仍需校验输入。

CSS 通过 <link rel="stylesheet" href="styles.css"> 引入；模块脚本通过 <script type="module" src="app.js"></script> 引入。事件处理集中在脚本中，继续读 CSS，再读 JavaScript 基础。

练习

用键盘 Tab 遍历整页，确认链接和按钮可操作、每个输入框有标签；清空记录后提交，应被 required 阻止。再添加第二条记录和一张有描述的图片，检查标题层级和 alt 是否仍符合上下文。

参考核对

Tab应访问导航链接、输入与两个按钮；清空输入提交时停留在表单并提示必填。第二条记录仍放在同一ul的另一个li中；图片若表达学习成果，alt应描述该成果而非只写“图片”。页面主标题仍为h1、分区为h2。保存需要实现/notes服务，预览按钮尚未绑定行为，因此不能把静态页面当已实现保存/预览。

深入课程已接续：HTML约束与键盘状态。基础内容与旧锚点保留，按当前路线进入完整机制和实践。