HTML 结构与常用标签
基础HTML 用成对标签标记内容。骨架：DOCTYPE、html、head（给浏览器）、body（给访客）。常用：h1-h6 标题、p 段落、ul/ol+li 清单、a 连结、img 图片；语意化标签 header/nav/main/footer 令机器都明网页结构。
- HTML 是标记语言：成对标签包住内容，先开的后关。
- 骨架四件：DOCTYPE、html、head（给浏览器）、body（给访客）。
- 常用标签：h1-h6 标题、p 段落、ul/ol 加 li 清单、a 连结、img 图片。
文体小知识：编程教学课每个概念都配一段可以亲手试的代码例子，照住输入、改一改，最快学会。
§课文原文 Passage
1网页的骨架是 HTML（HyperText Markup Language，超文字标记语言）：它不是程式语言，而是一种标记语言 — 用一对对标签告诉浏览器「这里是标题、这里是段落」。标签绝大多数成对出现：＜p＞Hello!＜/p＞ 中，＜p＞ 是开始标签、＜/p＞ 是结束标签（带斜线），中间就是内容。
2每个 HTML 档都有固定骨架：＜!DOCTYPE html＞ 宣告这是 HTML5；＜html＞ 包住全部；＜head＞ 放给浏览器看的资讯（网页标题、文字编码），不会显示在页面上；＜body＞ 放给访客看的一切内容。把代码存成 index.html，用浏览器打开就见到网页 — 写网页就是这样开始的。
3最常用的标签有几组：标题 ＜h1＞ 到 ＜h6＞（一页通常只有一个 ＜h1＞）；段落 ＜p＞；清单 ＜ul＞ 配 ＜li＞（无序、圆点）或 ＜ol＞ 配 ＜li＞（有序、编号）；超连结 ＜a href="网址">文字＜/a＞；图片 ＜img src="相片.jpg" alt="说明"＞（单标签，不用结束）。href 和 src、alt 这些挂在标签上的额外资讯叫属性（Attribute）。
4较新的 HTML 鼓励用语意化标签（Semantic Tags）：＜header＞ 页首、＜nav＞ 导览选单、＜main＞ 主要内容、＜footer＞ 页尾。它们外表像 ＜div＞，但讲明「这部分是什么用途」，令搜寻引擎和萤幕阅读器（视障人士用的朗读软件）都能理解网页结构 — 网页不只是画给人看，还要讲给机器听。
1重点摘要 Summary
HTML 用成对标签标记内容。骨架：DOCTYPE、html、head（给浏览器）、body（给访客）。常用：h1-h6 标题、p 段落、ul/ol+li 清单、a 连结、img 图片；语意化标签 header/nav/main/footer 令机器都明网页结构。
2生字卡 Vocabulary
编写网页的标记语言，用标签描述内容的结构和意义。
尖括号包住的标记，多数成对出现：开始 ＜p＞、结束 ＜/p＞。
开始标签、内容、结束标签的整体，例如 ＜p＞Hello＜/p＞ 是一个段落元素。
挂在开始标签上的额外资讯，例如 ＜a href="..."> 的 href、＜img> 的 src 和 alt。
head 放给浏览器看的资讯（标题、编码）；body 放显示给访客的全部内容。
用 href 指定目的地、点击后跳去的连结，例如 ＜a href="https://...">前往＜/a＞。
单标签，用 src 指定图片来源、alt 写图片说明文字。
表明用途的结构标签：header 页首、nav 导览、main 主内容、footer 页尾。
标签一层层包住另一层；先开的后关，不可交错。
3逐步讲解 Steps
- 最小网页骨架每个网页档案都有固定骨架：＜!DOCTYPE html＞ 宣告这是 HTML5 文件；＜html＞ 包住全部内容；＜head＞ 内放给浏览器看的资讯，例如 ＜title＞我的网页＜/title＞，它显示在浏览器分页上而不显示在页面内；＜body＞ 放访客看到的一切内容。把骨架存成 index.html 再用浏览器开启，分页显示「我的网页」，页面显示「你好！」。骨架是每个网页的地基，必须一字不差地记熟。
- 标题与段落＜h1＞ 到 ＜h6＞ 是六级标题，h1 最大、h6 最小，一页通常只用一个 h1 作为主标题，其余章节用 h2、h3 逐级细分，切忌跳级。＜p＞ 包住一段文字，前后自动留白。例如 body 内写 ＜h1＞3A班主页＜/h1＞ 与 ＜p＞这是我的第一个网页。＜/p＞。标题层级不只控制字体大小，更向搜寻引擎与萤幕阅读器说明文件结构；乱用标题会令视障用户难以理解页面的组织。
- 两种清单清单有两种。无序清单 ul 配 li，项目前显示圆点：＜ul＞＜li＞足球＜/li＞＜li＞象棋＜/li＞＜/ul＞；有序清单 ol 配 li，自动编号 1. 2.：＜ol＞＜li＞开机＜/li＞＜li＞登入＜/li＞＜/ol＞。选择标准是次序有无意义：兴趣清单没有次序用 ul；操作步骤次序重要用 ol。每个 li 必须包在 ul 或 ol 之内，直接把 li 放在 body 是无效写法，浏览器可能照样显示，但结构已经错误。
- 超连结与图片超连结用 a 标签：＜a href="https://www.labzstudy.com"＞前往 LabzStudy＜/a＞，href 属性写目的地网址，中间文字是可点击部分；连向自己站内另一页写相对路径 ＜a href="about.html"＞关于我们＜/a＞。图片用 img 单标签：＜img src="images/campus.jpg" alt="校园全景照片"＞，src 指向图片位置，alt 是图片无法显示时的说明文字；视障人士的萤幕阅读器靠 alt 朗读，因此 alt 不可留空。
- 语意化标签语意化标签讲明每部分的用途：＜header＞ 放页首，＜nav＞ 放导览选单，＜main＞ 放主要内容，＜footer＞ 放页尾。例如 body 内依序放 ＜header＞3A班网站＜/header＞、＜nav＞主页｜相簿＜/nav＞、＜main＞欢迎来到本班网站＜/main＞、＜footer＞© 2026 3A班＜/footer＞。它们外观与 div 相似，但向机器讲明「这部分是什么」，搜寻引擎与萤幕阅读器因此能理解网页结构。网页不只画给人看，还要讲给机器听。
- 巢状规矩：后开先关标签嵌套必须「先开的后关」：段落内加粗，写 ＜p＞这是＜strong＞重点＜/strong＞内容＜/p＞，strong 在 p 之内开启，就要在 p 关闭之前关闭。写成交错的 ＜p＞...＜strong＞...＜/p＞＜/strong＞ 虽然部分浏览器勉强显示，但结构已错，排版可能混乱，网页的 DOM 树亦不合法。检查方法由内向外：最后开启的标签必须最先关闭，如同行李箱先放大箱再放小箱，收拾时先取小箱。
- 属性与学习方法属性是挂在开始标签内的额外资讯，格式为 name='值'：href、src、alt、class、id 都是属性，一个标签可以有多个属性，以空格分隔。学 HTML 最有效的方法是一边写一边看：用文字编辑器建立 index.html，每次修改后存档并在浏览器按重新整理，即时看到效果。HTML 写错时通常不会报错，而是静静地显示异常，因此要养成小步修改、立即检查的习惯，错误才不会累积。
4图解 Diagrams
5例题示范 Example
例题：写一个「自我介绍」小网页，包含网页标题、最大标题、一段自我介绍、兴趣清单和一条站外连结。
- 写骨架：＜!DOCTYPE html＞ ＜html＞ ＜head＞＜title>自我介绍＜/title＞＜/head＞ ＜body＞...＜/body＞ ＜/html＞ — title 显示在浏览器分页。
- 加最大标题和段落：body 内写 ＜h1>我是小明＜/h1＞ ＜p>我是3A班的学生，喜欢运动和电脑。＜/p＞。
- 加兴趣清单：＜ul＞＜li>篮球＜/li＞＜li>写Python＜/li＞＜li>影相＜/li＞＜/ul＞ — 三个项目自动配圆点。
- 加连结并关闭：＜a href="https://www.labzstudy.com">我常用的学习网站＜/a＞，然后补上 ＜/body＞ ＜/html＞ 完成整页。
- 答案：完整的自我介绍网页由骨架加四个部分组成：title、h1+p、ul 清单、a 连结 — 存成 .html 档浏览器即可开启。
6常见错误 Mistakes
75 题快测 Quick check
Q1网页的可见内容应放在哪个标签内？A. ＜head＞ B. ＜body＞ C. ＜title＞
Q2一个网页通常可以有多少个 ＜h1＞？
Q3写出「连往 about.html、文字为『关于我们』」的超连结标签。
Q4img 标签的 alt 属性有什么作用？
Q5＜nav＞、＜main＞、＜footer＞ 这类标签统称为什么？它们的好处是什么？
8重点回顾 Recap
- HTML 是标记语言：成对标签包住内容，先开的后关。
- 骨架四件：DOCTYPE、html、head（给浏览器）、body（给访客）。
- 常用标签：h1-h6 标题、p 段落、ul/ol 加 li 清单、a 连结、img 图片。
- 属性挂在开始标签上：href 指连结目的地，src 指图片来源，alt 是必填说明。
- 语意化标签 header/nav/main/footer 令机器都读得懂网页结构。