核心 · 前端第 1 课 / 共 8 课免费阅读

页面的结构 · 前端：HTML、CSS 与 JavaScript

一个网页到底是由什么组成的？

为什么需要它

你用过的每个网站，底层都是 HTML。浏览器把它画出来，搜索引擎读它，读屏软件把它念给看不见屏幕的人听。结构对了，样式和脚本都会容易很多；结构错了，再多 CSS 也救不回来。

直觉理解

HTML 描述的是页面上每一块内容是什么，而不是它长什么样。你用标签把内容包起来：

<h1>My reading list</h1>

<h1> 是开始，</h1> 是结束，它们加上中间的文字合起来叫一个元素。元素可以放在别的元素里面，像盒子套盒子：列表 <ul> 里装着列表项 <li>。

有些元素需要额外的信息，写在开始标签里，叫属性：

<a href="https://example.com">a link</a>
<img src="cat.jpg" alt="A grey cat asleep on a sofa">

<img> 没有结束标签：它里面没有文字。

每天都会用到的元素：

元素	是什么
`h1` … `h6`	标题，从最重要到最不重要
`p`	一个段落
`ul` / `ol` + `li`	无序 / 有序列表，以及其中的项
`a`	链接
`img`	图片
`header` `nav` `main` `footer`	页面的几大区域

点运行：「预览」里是页面，「输出」里是它的大纲，也就是浏览器构建出来的元素树。

定义

元素

An opening tag, its content and its closing tag: Hello. Elements nest inside each other to form a tree.
开始标签、内容和结束标签合在一起：Hello。元素一层套一层，组成一棵树。

属性

Extra information in the opening tag, written name="value": href on a link, src and alt on an image.
写在开始标签里的额外信息，格式是 name="value"：链接的 href，图片的 src 和 alt。

语义化 HTML

Choosing the element that says what something is (nav for navigation, button for a button) rather than a generic div. Search engines and screen readers depend on it.
选用能说明内容是什么的元素（导航用 nav，按钮用 button），而不是一律用通用的 div。搜索引擎和读屏软件都靠它。

示例

第一个页面

在互动课里运行

一个标题、一个段落和一个列表。运行它，对比「预览」和「输出」里的大纲。

<h1>My reading list</h1>
<p>Books I want to finish this year.</p>
<ul>
  <li>Dune</li>
  <li>The Hobbit</li>
  <li>Sapiens</li>
</ul>

逐步执行

L1页面上最重要的标题。一个页面用一个 h1。
L3一个无序列表开始了。
L4每个 li 是一项，放在 ul 里面。
L7列表结束。<ul> 和 </ul> 之间的都属于它。

链接和图片

在互动课里运行

属性里写着链接的地址，以及图片的文件和描述。

1
2

<p>Read more on <a href="https://example.com">example.com</a>.</p>
<img src="cat.jpg" alt="A grey cat asleep on a sofa">

逐步执行

L1链接放在段落里面。href 是它要去的地方；标签之间的文字是大家点的部分。
L2这里没有 cat.jpg，所以浏览器显示了 alt 文字。alt 正是为这种情况准备的。

页面的几大区域

在互动课里运行

大多数页面骨架都一样。语义化元素给每个区域起了名字。

<header>
  <h1>Daily Notes</h1>
  <nav>
    <a href="/">Home</a>
    <a href="/archive">Archive</a>
  </nav>
</header>
<main>
  <h2>Today</h2>
  <p>Learned how HTML elements nest.</p>
</main>
<footer>
  <p>Written by me</p>
</footer>

逐步执行

L1页面顶部：标题和导航。
L3一组用来在网站里跳转的链接。
L8主要内容：这一页讲的是什么。
L12页面底部。

常见错误

结束标签顺序反了

标签要按打开的相反顺序关闭，像盒子一样：<a>…</a>，不能写成 <a>…</a>。检查器会提醒你哪些标签没有关闭。

按字号挑标题

按重要程度选 h1–h6，而不是看它显示得多大。字号是 CSS 的事。用读屏软件的人靠在标题之间跳转来找内容。

图片没有 alt

没有 alt，读屏软件只会念「图片」，文件加载失败时也什么都不显示。用 alt 描述图片内容；纯装饰的图片才用 alt=""。

小测验

1. 哪个元素用来做可以点击的链接？

A<a href="...">
B<link>
C<href>

查看答案

答案：A

<a> 是链接元素；href 里写地址。<link> 是在页面头部引入样式表用的。

2. 哪一行嵌套是正确的？

AHi
BHi
CHi

查看答案

答案：A

最后打开的元素最先关闭。

动手练习

3 道练习，分三层：先预测程序的输出，再按新需求改程序，最后从零写一个。代码在浏览器里运行，提交马上判题。

预测输出数一数列表项
这个页面上一共有几个 <li> 元素？先数，再运行。
改需求修好坏掉的页面
购物清单应该显示三项，照片也需要一段描述，给看不见它的人。修好检查器报告的两个问题。
从零写个人主页
做一个小小的个人主页，包含：
- 一个 h1，写一个名字
- 一个 p，介绍这个人
- 一个 ul，至少 3 个爱好
- 一个链接，指向 https://example.com
- 一张带 alt 文字的图片

在互动课里练这一课

打开互动课，这些例子都能直接改、直接运行，练习题提交马上判题。免费开始，不用注册。

打开互动课课程地图

本课术语

术语	中文	英文定义
HTML	HTML	HyperText Markup Language: the elements that give a page its structure.
Tag	标签	<p> opens an element and </p> closes it.
Alt text	替代文字	A text description of an image, read aloud by screen readers.