编程语言研究书库
HTML/CSS/JavaScript Web 开发

HTML 元素 — 文字、表格、链接与列表

HTML 元素 — 文字、表格、链接与列表

这一章讲一件事: 把最常用的 HTML 积木全部拿到手。文字怎么强调、菜单怎么排成表格、 页面之间怎么互相链接、清单怎么缩进——全部用一家虚构餐厅「Anna's Kitchen」的页面当例子1。 这一章积木密度高,但有一条暗线把它们串起来:每个标签都在回答「这段内容是什么」, 而不是「这段内容看起来怎样」。 生词都在当场解释。

1. 先看现象:同样一段字,「是什么」和「什么样」是两回事

菜单上一行字「今日特价:烤牛肉 $15」。你可以把它写成普通段落,也可以写成表格的一行, 还可以写成列表的一项——三种写法在屏幕上可能长得差不多,但对机器来说是三种完全不同的内容: 表格意味着「这是有行列关系的数据」,列表意味着「这是并列的几项」,段落意味着「这是一段连续的话」。

这一章教的所有积木,本质上都是这道选择题的不同选项:先判断内容的身份,再挑标签。

2. 顶层全景:元素、标签、属性——三个词先钉死

第 03 章用过标签,现在把三个容易混的词一次分清(这是原书给的结构2):

  <a href="/menu">看看完整菜单</a>
  └┬┘ └────┬───┘ └────┬────┘
  开始标签   属性        内容
  └──────────────┬──────────────┘
                 元素 = 开始标签 + 属性 + 内容 + 结束标签(</a>)

  图说:整个这一行叫「元素」;<a> 和 </a> 是「标签」,成对出现;href 是「属性」,
       只在开始标签里,写法是 名字="值"。

元素(element)是完整的单元;标签(tag)是元素的边界记号;属性(attribute)是写在开始标签里、 给这个元素的补充信息3。书的例子是锚元素 <a>(anchor,锚):<a href="/menu"> 是开始标签, href="/menu" 是属性(它指定链接的目标地址),「看看完整菜单」是显示在页面上的可见内容, </a> 收尾4。

这一章的每一个机制,都可以回到这张图上认位置。

3. 主线例子:给 Anna's Kitchen 写「今日菜单」

这一章的主线例子是餐厅页面的「今日菜单」区块——每个机制都在它身上走一步, 从一行字长成一张完整的菜单页:

  ① <h1>Anna's Kitchen</h1>                    ← 页面主标题
  ② <p>Every day, our expert chefs prepare …   ← 一段介绍文字
  ③ <strong>beef, turkey, pork …</strong>      ← 文字里圈出重点
  ④ <table> 三行两列:菜名 | 价格              ← 菜单排成表格
  ⑤ <a href="menu.html">Click here for full menu</a>  ← 链到完整菜单页
  ⑥ <ol><li>…</li></ol> 与 <ul><li>…</li></ul>  ← 两种列表收尾

  图说:①–③ 是文字层,④ 是数据层,⑤ 是页面之间的桥,⑥ 是并列信息层。

② 段落与①标题(第 03 章已学,这里进正文)

书里给 Anna's Kitchen 写的第一段介绍,从 <p> 到 </p> 整整一段烤牛肉、约克郡布丁的宣传词5。 存盘、刷新,浏览器把整段当作一个块,段间自动留白。记住:HTML 源码里的换行和缩进,浏览器一律忽略; 页面上的「段」只由 <p> 划定。 这是初学者最常见的误会之一——「我明明在代码里空行了,为什么页面不换行」。

③ 强调文字:语义化分叉点

书里圈出了菜名那一串「beef, turkey, pork and marmalade-glazed gammon」, 给了两对看上去一模一样的标签:<b>/<i> 和 <strong>/<em>67:

标签对视觉效果语义(对机器说什么)
<b> / <i>加粗 / 斜体没有——纯视觉,「这段换个样式」
<strong> / <em>默认也是加粗 / 斜体「这重要」/「这被强调」

为什么要分?书里点破:<em> 的主要目的不是斜体,而是告诉屏幕阅读器等辅助技术「这段更重要」7。 搜索引擎读页面时同样吃这一套——<strong> 里的词在排名里权重更高。

判断(我们的,不是书里的): 这是 HTML 哲学的一句话版本:「是什么」优先于「什么样」。 视觉上你随时可以拿 CSS 把任何文字弄粗;但「重要」这层意思只有标签能表达。 这一行的现行最佳实践是:默认用 <strong>/<em>,只有纯粹装饰(比如图标字体、产品名样式)才用 <b>/<i>。 如果错,会错在: 个别老代码库大量用 <b>/<i>,并不犯法——浏览器渲染没问题,只是语义丢了。 这是「旧代码能跑」和「新代码该这么写」的区别,别把前者当错误去改。

②½ 内联样式:临时化妆师,先上场再退场

这一章还教了怎么直接往标签上写样式——style 属性,书里叫内联样式(inline styles)8:

<h1 style="color:Yellow;">The Home of the Roast!</h1>          <!-- 标题变黄色 -->
<h2 style="font-family:Helvetica;">The Home of the Roast!</h2> <!-- 字体换 Helvetica -->
<body style="background-color:Orange;">                          <!-- 整页橙底 -->
<p style="background-color:Gold">…</p>                          <!-- 段落金底 -->

写法永远是 style="属性名:值;",多条用分号隔开。书里给的字体候选表(Arial、Verdana、Georgia、Times New Roman 等)9有一个要点:字体名写一串时,后面的当备胎——font-family: Arial, sans-serif; 的意思是「有 Arial 用 Arial,没有就随便哪种无衬线字体顶上」。

但内联样式是临时工。 它把「内容」和「样子」又焊回了同一行——正是 CSS 要拆开的那种耦合。 书里用它是因为此时还没教 CSS(第 07 章接管);学完全书要养成的心智是:样式能进 .css 文件就不进标签。 现在先记住它的语法,因为第 06 章给表格单元格调内边距、第 13 章之前你都会一直用它。

4. 表格:四种标签,一套俄罗斯套娃

菜单要有菜名和价格——这是「有行列关系的数据」,表格是它在这个星球上存在了三十年的答案。 HTML 表格是四层套娃,每层一个标签10:

  <table>            ← 整张表(还有样式:金色底、1 像素边框)
      <tr>           ← 一行(table row)
          <th>菜名</th>  ← 表头单元格(table header,默认加粗居中)
          <th>价格</th>
      </tr>
      <tr>
          <td>Roast Beef</td>  ← 普通单元格(table data)
          <td>$15</td>
      </tr>
      …再两行:Turkey & Stuffing $14、Gammon & Marmalade $13

  图说:table 套 tr,tr 套 th 或 td——数据从“行”的角度写,列是行里单元格的副产品。

书里有个细节值得单独说:每个 <th> 和 <td> 上都写了 style="padding: 10px;"11—— 内边距(padding),内容到边框之间的空隙。没有它,字会贴着线,没法看。 这是全书第一次实际使用盒模型的零件(第 07 章会系统讲),先用起来再补课,是这本书一贯的节奏。

表格的边界: 不要拿表格做页面布局。书里没明说,但这是这一行的铁律(④ 类通用知识,补充): 表格是「给数据用的」,拿它排页面会把阅读顺序和可访问性一起毁掉。页面布局是第 08 章 flexbox/grid 的活。

5. 超链接:Web 之所以是 Web 的那个标签

<a>(anchor)是万维网的命名来源之一——超文本(hypertext)就是「能跳到别处的文本」。 书里给了它的完整写法12:

<a href="url to page">Link name to display on page</a>
  • href 是属性,值是目标地址——可以是另一个网站(https://…),可以是同项目的另一个文件(menu.html),也可以是一个锚点(#section2,跳到本页某处);
  • 标签之间的文字是显示给用户的部分,浏览器默认给它蓝色加下划线(又是「浏览器默认样式」,第 07 章接管)。

主线例子的第 ⑤ 步:在菜单表格下面加一句 <a href="menu.html">Click here for full menu</a>13。 书里还特意演示了链接断掉的状态:点了没反应,因为 menu.html 这个文件还不存在14—— 然后当场新建 menu.html,链接活了。这就是相对路径的实感:链接的目标就是项目文件夹里的另一个文件, 文件不在,链接就是死的。

6. 列表:三种,加一个套娃规则

菜单页底部常有「我们的承诺」这类并列条目——列表的地盘。书里教了三种15:

有序列表 <ol>(ordered list):条目前有编号,顺序有含义(步骤、排名)。 每个条目用 <li>(list item)包。编号样式可用 type 属性换:1 数字(默认)、A 大写字母、 a 小写、I/i 罗马数字16。

无序列表 <ul>(unordered list):条目前是符号点,顺序无含义(菜单、特性清单)。 符号样式同样用 type 换:disc 实心圆(默认)、circle 空心圆、square 方块17。

嵌套列表(nested lists):一个列表整体塞进另一个列表的某个 <li> 里18—— 比如主列表第 2 项下面再展开两个子项。嵌套的 <ol> 或 <ul> 必须放在外层 <li> 的内部、 </li> 之前;浏览器会自动给内层换一套编号/符号样式并缩进。

  <ol>
      <li>Main item 1</li>
      <li>Main item 2
          <ol>
              <li>Sub-item 1</li>
              <li>Sub-item 2</li>
          </ol>
      </li>          ← 注意:内层列表在外层 </li> 之前结束
      <li>Main item 3</li>
  </ol>

  图说:嵌套的位置规则只有一条——内层必须完整躺在某个 <li> 里面。

7. 作者的判断与证据

书内作为事实给出的(可直接照用): 元素/标签/属性的结构定义3、表格四层套娃10、 链接的 href 语义12、列表的 type 值表1617、嵌套的位置规则18。

作者的取舍,值得意识到: 书里对内联样式的态度是「先用着」——它没有在这一章就警告内联样式的坏味道, 而是等到第 07 章用外部 CSS 形成对照。我们认可这个教学顺序,但在 ③ 节提前把「临时工」的性质点明了, 免得读者养成习惯再戒。

一处行业惯例,书里没解释为什么: 链接文字「Click here for full menu」——这一行的写作规范其实反对 「点这里」这种链接文字(屏幕阅读器用户听到的只是「链接:点这里」,毫无信息量)。 书是入门教材没提这一层,我们做拆解的补上:写链接文字时,让它脱离上下文也能听懂。

8. 边界与局限

  • 语义化只开了个头。 这一章的 <strong>/<em> 只是语义化最小的一课;真正的语义化大军是第 08、13 章的 <header>、<nav>、<main>、<footer> 等「结构化标签」,这一章还没出场。
  • 表格样式靠内联,很快会被取代。 style="padding: 10px;" 重复写在每个单元格上,是 CSS 最擅长收拾的重复——第 07 章会收拾它。
  • type 属性换编号/符号是「老式但有效」的写法,CSS 的 list-style-type 是更现代的对应物,本书没展开。
  • <img>、<video>、<audio> 这些媒体标签不在本章——它们是第 05 章的主角。

9. 可带走的

全章主线例子,一行写完: Anna's Kitchen 页面 = 标题 + 段落(strong 圈重点)→ 三行两列表格(菜名|价格)→ 链到 menu.html 的链接 → 有序、无序、嵌套列表各一段。

  1. 元素 = 开始标签 + 属性 + 内容 + 结束标签;属性只写在开始标签里,格式 名字="值"3;
  2. <strong>/<em> 说「重要/被强调」,<b>/<i> 只说「换个样式」——默认用前者;
  3. 内联样式(style="…")语法现在就要会,但它是临时工——第 07 章起样式进 .css 文件;
  4. 表格四层套娃:<table> → <tr> → <th>(表头)/<td>(数据)10;
  5. <a href="目标">文字</a>;href 可以是网址、项目里的文件名、页内锚点;文件不存在,链接就是死的14;
  6. <ol> 编号(顺序有含义)、<ul> 圆点(顺序无含义)、<li> 是它们的条目;
  7. 嵌套列表的唯一规则:内层列表完整放在外层某个 <li> 里面;
  8. HTML 源码里的换行缩进浏览器全忽略;「段」只由 <p> 划定。

10. 原文地图

主题原书章原文位置
Anna's Kitchen 贯穿例子HTML Elements and Attributestext/10-fm-introduction.txt:9(搜「fictional restaurant」)
元素/标签/属性结构HTML Elements and Attributestext/10-fm-introduction.txt:45(搜「opening and closing tags」) · text/10-fm-introduction.txt:49(搜「anchor element」)
语义化强调 vs 纯视觉HTML Elements and Attributestext/10-fm-introduction.txt:33(搜「semantic」) · text/10-fm-introduction.txt:105(搜「screen readers」)
段落示例HTML Elements and Attributestext/10-fm-introduction.txt:75(搜「marmalade-glazed」)
内联样式(颜色/字体/背景)HTML Elements and Attributestext/10-fm-introduction.txt:123(搜「color:Yellow」) · text/10-fm-introduction.txt:173(搜「background-color:Orange」)
表格四种标签HTML Elements and Attributestext/10-fm-introduction.txt:201(搜「table row」) · text/10-fm-introduction.txt:203(搜「table header」)
单元格内边距HTML Elements and Attributestext/10-fm-introduction.txt:217(搜「padding: 10px」)
超链接写法HTML Elements and Attributestext/10-fm-introduction.txt:263(搜「url to page」) · text/10-fm-introduction.txt:267(搜「/menu」)
链接断掉与补建 menu.htmlHTML Elements and Attributestext/10-fm-introduction.txt:271(搜「will not work until」)
有序列表 type 值HTML Elements and Attributestext/10-fm-introduction.txt:313(搜「uppercase letters」)
无序列表 type 值HTML Elements and Attributestext/10-fm-introduction.txt:365(搜「filled circle」)
嵌套列表HTML Elements and Attributestext/10-fm-introduction.txt:393(搜「placing one list inside another」)

Footnotes

  1. 出处:「HTML Elements and Attributes」第 9 段(text/10-fm-introduction.txt:9,搜「fictional restaurant」)。原话:「We will demonstrate this by creating a simple static website for a fictional restaurant called Anna's Kitchen.」 ↩

  2. 出处:「HTML Elements and Attributes」第 45 段(text/10-fm-introduction.txt:45,搜「opening and closing tags」)。原文把「开始标签」「结束标签」「内容」三者的关系讲得完整,并以 anchor 的 a 为例。 ↩

  3. 出处:「HTML Elements and Attributes」第 49 段(text/10-fm-introduction.txt:49,搜「anchor element」)。原文:「the whole element consists of an opening tag and a closing tag. In the opening tag, we can include attributes, and between the opening and closing tags, we include the visible content.」 ↩ ↩2 ↩3

  4. 出处:「HTML Elements and Attributes」第 49 段(text/10-fm-introduction.txt:49,搜「visible content」)。 ↩

  5. 出处:「HTML Elements and Attributes」第 75 段(text/10-fm-introduction.txt:75,搜「marmalade-glazed」)。这段烤牛肉宣传词后面还会在第 07 章被 CSS 反复改造,是全书的「常客文本」。 ↩

  6. 出处:「HTML Elements and Attributes」第 89、91 段(text/10-fm-introduction.txt:89,搜「marmalade-glazed gammon」;:91,搜「」)。两对标签包住同一段文字,渲染结果一致。 ↩

  7. 出处:「HTML Elements and Attributes」第 105 段(text/10-fm-introduction.txt:105,搜「screen readers」)。原文:「its main purpose is to signal that the text is more important or emphasized, which can be useful for screen readers and other assistive technologies.」 ↩ ↩2

  8. 出处:「HTML Elements and Attributes」第 33 段(text/10-fm-introduction.txt:33,搜「inline styles」)。 ↩

  9. 出处:「HTML Elements and Attributes」第 147–163 段(text/10-fm-introduction.txt:147,搜「variety of fonts」)。书里列了 Arial、Verdana、Tahoma、Georgia、Times New Roman、Courier New、Trebuchet MS、Lucida Sans 八种「多数系统都有」的字体。 ↩

  10. 出处:「HTML Elements and Attributes」第 199–203 段(text/10-fm-introduction.txt:201,搜「table row」;:203,搜「table header」)。四个标签的全称:table、tr = table row、td = table data、th = table header。 ↩ ↩2 ↩3

  11. 出处:「HTML Elements and Attributes」第 217 段(text/10-fm-introduction.txt:217,搜「padding: 10px」)。 ↩

  12. 出处:「HTML Elements and Attributes」第 263 段(text/10-fm-introduction.txt:263,搜「url to page」)。原书模板:<a href= "url to page"> Link name to display on page </a>。 ↩ ↩2

  13. 出处:「HTML Elements and Attributes」第 267 段(text/10-fm-introduction.txt:267,搜「/menu」)。 ↩

  14. 出处:「HTML Elements and Attributes」第 271 段(text/10-fm-introduction.txt:271,搜「will not work until」)。原文:点了链接「will not work until we create the menu.html file」。 ↩ ↩2

  15. 出处:「HTML Elements and Attributes」第 289、343 段(text/10-fm-introduction.txt:289,搜「numbered sequentially」;:343,搜「bullet points」)。 ↩

  16. 出处:「HTML Elements and Attributes」第 309–323 段(text/10-fm-introduction.txt:313,搜「uppercase letters」)。四种取值:1 / A / a / I / i。 ↩ ↩2

  17. 出处:「HTML Elements and Attributes」第 363–373 段(text/10-fm-introduction.txt:365,搜「filled circle」)。三种取值:disc(默认实心圆)/ circle(空心圆)/ square(方块)。 ↩ ↩2

  18. 出处:「HTML Elements and Attributes」第 393–395 段(text/10-fm-introduction.txt:393,搜「placing one list inside another」)。 ↩ ↩2

第一个网页 — HTML 文档的骨架与浏览器开发者工具

Previous Page

图片、视频、音频 — 媒体怎么进页面

Next Page

On this page

HTML 元素 — 文字、表格、链接与列表1. 先看现象:同样一段字,「是什么」和「什么样」是两回事2. 顶层全景:元素、标签、属性——三个词先钉死3. 主线例子:给 Anna's Kitchen 写「今日菜单」② 段落与①标题(第 03 章已学,这里进正文)③ 强调文字:语义化分叉点②½ 内联样式:临时化妆师,先上场再退场4. 表格:四种标签,一套俄罗斯套娃5. 超链接:Web 之所以是 Web 的那个标签6. 列表:三种,加一个套娃规则7. 作者的判断与证据8. 边界与局限9. 可带走的10. 原文地图Footnotes