HTML 零基础入门

标题、段落与文字语义

用标题建立大纲,用恰当元素表达引用、强调、时间和代码。

难度
入门
预计时间
35 分钟
最近验证
2026/9/21

这一节要完成什么

把零散学习记录整理成能快速浏览的章节,而不是一堆放大的文字。

先理解:为什么要学它

HTML 的文字元素表达“这段内容是什么”。标题级别形成目录,段落承载一个完整意思;强调、时间和代码各有自己的语义。默认样式只是浏览器附送的结果。

跟着做

<article>
  <h2>第 1 周:认识 HTML</h2>
  <p>本周我学会了用标题和段落组织内容。</p>

  <h3>今日记录</h3>
  <p>完成时间:<time datetime="2026-09-21">2026 年 9 月 21 日</time></p>
  <p>最常用的文件名是 <code>index.html</code>。</p>
  <blockquote>先写出结构,再处理外观。</blockquote>
</article>
  1. 把 article 放到进度 section 后面。
  2. 只看标题,页面大纲应是 h1 → h2 → h3,不能因为想让字小一点就从 h1 跳到 h4。
  3. 把日期可见文字改成今天,同时将 datetime 改成机器可读的 YYYY-MM-DD
  4. 朗读每个段落:如果一句话换了主题,就拆成新的 p。不要用连续 <br> 模拟段落。

关键代码怎么读

  • 每页通常有一个描述全页主题的 h1,其下用 h2 分大章,h3 分小节。
  • time 同时提供人类可读文字和机器可读日期。
  • code 表示代码片段,blockquote 表示来自别处或被单独引用的一段话。

常见错误:看到什么,检查什么

现象检查方法
用 h3 只是因为它看起来大小合适标题级别由内容层级决定,大小以后交给 CSS。
整页只有一个超长 p按意思分段,每段围绕一个主题。
用 strong 标所有文字只标真正重要、会改变理解重点的词句。

自己完成一次

新增“容易忘记的规则”小节,包含一个 h3、一个解释段落和一段行内代码。再从头只读标题,确认仍能理解页面结构。

完成后再看参考答案

标题应与“今日记录”同级,因此使用 h3;命令、文件名或标签名可放在 code 中。

完成检查

  • 我的页面出现了本节要求的新内容
  • 我能不用看答案解释关键标签或属性
  • 我主动制造并修复了至少一个错误

隐私选择

必要存储始终启用。只有在你同意后,才会加载可选的访问统计与支持服务。