HTML 练习题(10 题)

这一页给 10 道 HTML 练习题,覆盖文档结构、标题段落、链接、图片、列表、表格、表单、语义化、SEO、媒体这些最核心的知识点。每题都有题目描述、提示、可折叠的参考答案。

使用建议:先自己动手写,卡住了再看提示,实在写不出再对照答案。HTML 是网页的骨架,练熟了就能搭出任何静态页面的结构。

基础结构(5 题)

第 1 题:基础文档结构

题目:写一个最小可用的 HTML5 页面,包含 <!DOCTYPE>、html、head、body,并在 body 里放一个 h1 标题和一个 p 段落。要求设置正确的语言和字符编码。

提示:lang 属性写 zh-CN;meta charset 写 UTF-8;head 里通常还要加 viewport。

参考答案

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>我的第一个网页</title>
</head>
<body>
  <h1>你好,世界</h1>
  <p>这是我的第一个 HTML 页面。</p>
</body>
</html>
<!-- 知识点:
  - <!DOCTYPE html> 声明 HTML5
  - <html lang="..."> 声明语言,利于 SEO 和读屏
  - <head> 放元信息,<body> 放可见内容 -->

第 2 题:标题与段落层级

题目:用 h1~h3 写一篇包含「主标题 → 章 → 小节」三级结构的文章,每个标题下配一段 p 正文。

提示:标题按层级递进,不要跳级(比如 h1 后直接 h3)。一个页面通常只有一个 h1。

参考答案

<h1>文章主标题</h1>
  <h2>第一章</h2>
    <p>第一章的段落正文……</p>
    <h3>1.1 小节</h3>
      <p>小节的正文……</p>
  <h2>第二章</h2>
    <p>第二章正文……</p>
<!-- 知识点:标题按 h1→h6 层级递进,一个页面通常只有一个 h1,
  不要为了字号大而用标题,样式用 CSS -->

第 3 题:超链接(内部/外部/锚点)

题目:写三种链接:(a) 打开外部网站(新标签页);(b) 站内相对路径链接;(c) 同页内的锚点跳转。

提示:target="_blank" 新窗口打开,务必配 rel="noopener noreferrer" 防安全漏洞;锚点用 id + href="#id"。

参考答案

<!-- 外部链接:新标签页打开 -->
<a href="https://www.example.com" target="_blank" rel="noopener noreferrer">外部网站</a>

<!-- 内部链接:相对路径 -->
<a href="/about/">关于我们</a>

<!-- 锚点跳转:同页内导航 -->
<h2 id="section-2">第二节</h2>
<a href="#section-2">跳到第二节</a>
<!-- 知识点:target="_blank" 务必配 rel="noopener" 防安全漏洞 -->

第 4 题:图片与无障碍

题目:插入一张图片,要求:有 alt 替代文本、设置宽高、懒加载。

提示:alt 是无障碍必需(读屏给视障用户读);loading="lazy" 懒加载;设置宽高防止加载时布局抖动(CLS)。

参考答案

<img src="cat.jpg"
     alt="一只橘猫趴在窗台上晒太阳"
     width="400" height="300"
     loading="lazy">
<!-- 知识点:
  - alt 是无障碍必需:读屏会读给视障用户;图加载失败时显示
  - width/height 防止加载时布局抖动(CLS)
  - loading="lazy" 懒加载,首屏外的图滚到才加载 -->

第 5 题:有序/无序列表

题目:写一个购物清单(无序)和一个操作步骤(有序),再写一个嵌套列表(水果下含苹果、香蕉)。

提示:无序用 ul,有序用 ol;嵌套就是把 ul/ol 放到 li 里面。

参考答案

<h3>购物清单(无序)</h3>
<ul>
  <li>牛奶</li>
  <li>面包</li>
  <li>鸡蛋</li>
</ul>

<h3>步骤(有序)</h3>
<ol>
  <li>打开水壶</li>
  <li>加水煮沸</li>
  <li>泡茶</li>
</ol>

<!-- 嵌套列表 -->
<ul>
  <li>水果
    <ul>
      <li>苹果</li>
      <li>香蕉</li>
    </ul>
  </li>
</ul>

进阶(5 题):表格 / 表单 / 语义化 / SEO / 媒体

第 6 题:表格

题目:做一个两行数据的表格,姓名/年龄/城市三列,用 thead 和 tbody 分组。

提示:表头单元格用 th(默认加粗居中),数据单元格用 td;thead/tbody 让表格语义更清晰。

参考答案

<table>
  <thead>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
      <th>城市</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>张三</td>
      <td>28</td>
      <td>北京</td>
    </tr>
    <tr>
      <td>李四</td>
      <td>35</td>
      <td>上海</td>
    </tr>
  </tbody>
</table>
<!-- 知识点:th 表头(默认加粗居中),thead/tbody/tfoot 语义化分组 -->

第 7 题:表单

题目:写一个注册表单,包含:姓名(必填)、邮箱(必填、格式校验)、密码(至少 8 位)、年龄(0-150 数字)、性别(单选)、提交按钮。

提示:label 的 for 必须配 input 的 id;type 决定验证规则和键盘(email/number/password);required 必填;minlength/min/max 限定范围。

参考答案

<form action="/submit" method="POST">
  <label for="name">姓名:</label>
  <input type="text" id="name" name="name" required>

  <label for="email">邮箱:</label>
  <input type="email" id="email" name="email" required>

  <label for="pwd">密码:</label>
  <input type="password" id="pwd" name="pwd" minlength="8" required>

  <label for="age">年龄:</label>
  <input type="number" id="age" name="age" min="0" max="150">

  <fieldset>
    <legend>性别</legend>
    <label><input type="radio" name="gender" value="m"> 男</label>
    <label><input type="radio" name="gender" value="f"> 女</label>
  </fieldset>

  <button type="submit">提交</button>
</form>
<!-- 知识点:label 的 for 必须配 input 的 id;type 决定验证和键盘 -->

第 8 题:语义化布局

题目:用语义标签搭一个页面骨架:顶部 header(含导航 nav)、主体 main(含一篇文章 article,文章里有 section 和侧边 aside)、底部 footer。

提示:语义标签替代无意义的 div,利于 SEO 和读屏。main 一个页面只有一个;article 是可独立分发的内容;aside 是旁支相关内容。

参考答案

<body>
  <header>
    <nav>
      <a href="/">首页</a>
      <a href="/about">关于</a>
    </nav>
  </header>

  <main>
    <article>
      <h1>博客文章标题</h1>
      <time datetime="2026-08-05">2026年8月5日</time>
      <section>
        <h2>引言</h2>
        <p>正文……</p>
      </section>
      <aside>
        <h3>相关阅读</h3>
        <p>侧边推荐内容。</p>
      </aside>
    </article>
  </main>

  <footer>
    <p>&copy; 2026 我的公司</p>
  </footer>
</body>
<!-- 知识点:header/nav/main/article/section/aside/footer 是语义标签,
  替代无意义的 div,利于 SEO 和无障碍 -->

第 9 题:SEO meta 标签

题目:在 head 里写一套完整的 SEO meta:title、description、keywords、Open Graph(社交分享卡片)、viewport、结构化数据。

提示:description 最重要(搜索结果摘要);Open Graph 用 property="og:...";结构化数据用 application/ld+json。

参考答案

<head>
  <meta charset="UTF-8">
  <title>HTML 入门教程 | 我的网站</title>

  <!-- SEO 三大件 -->
  <meta name="description" content="一份给新手的 HTML 入门教程,涵盖标签、表单、语义化。">
  <meta name="keywords" content="HTML,教程,入门">
  <meta name="author" content="张三">

  <!-- Open Graph:分享到社交平台的卡片 -->
  <meta property="og:title" content="HTML 入门教程">
  <meta property="og:description" content="涵盖标签、表单、语义化">
  <meta property="og:image" content="https://example.com/cover.jpg">
  <meta property="og:url" content="https://example.com/html">

  <!-- 视口适配:移动端必需 -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <!-- 结构化数据 -->
  <script type="application/ld+json">
  {"@context":"https://schema.org","@type":"Article","headline":"HTML 入门"}
  </script>
</head>

第 10 题:视频与音频

题目:嵌入一段视频(带封面图和控件)和一段音频,都提供 mp4/ogg 两种格式降级;再放一个 canvas 元素。

提示:多个 source 提供格式降级,浏览器按顺序找支持;poster 是视频封面;controls 显示播放控件;标签内的文字是浏览器不支持时的兜底。

参考答案

<video controls width="640" poster="cover.jpg">
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.webm" type="video/webm">
  您的浏览器不支持 video 标签。
</video>

<audio controls>
  <source src="song.mp3" type="audio/mpeg">
  <source src="song.ogg" type="audio/ogg">
  您的浏览器不支持 audio 标签。
</audio>

<!-- 画布:配合 JS 做图形动画 -->
<canvas id="cv" width="300" height="200"></canvas>

<!-- 知识点:
  - 多个 <source> 提供格式降级,浏览器按顺序找支持的
  - poster 是视频封面图
  - 文字内容是浏览器都不支持时的兜底 -->

练习建议

HTML 标签很多,但常用就二三十个。重点掌握结构类(html/head/body/div)、文本类(h1-h6/p/strong/em)、链接图片(a/img)、列表表格(ul/ol/table)、表单(form/input/select)、语义类(header/nav/main/article/footer)。

做完这 10 题,试着搭一个完整的小页面:个人简介页或博客文章页。把每个标签都用上,再配合 CSS 美化,就是一个完整的网页了。

← 上一篇 HTML 语义化

返回 HTML 教程目录

✈️💬