Frontend Academy · 课时

文本、图像、链接与列表

Q: 「文本、图像、链接与列表」这节课中我会学到什么？

使用标题和段落设置文本格式，为图像添加替代文本，创建超链接，并构建有序和无序列表。 你通过在浏览器中直接运行的动手代码来练习 Frontend Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

使用标题和段落设置文本格式，为图像添加替代文本，创建超链接，并构建有序和无序列表。

文本、图像、链接与列表 是 CoddyKit 上的免费 Frontend Academy 课时。这是第 3 节课，共 4 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 Frontend Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Frontend Academy 课程共包含 4 节课。

标题：h1 到 h6

HTML 提供六个标题层级。请使用它们创建文档大纲，而不是改变文本大小。<h1>是页面标题（每页使用一次），<h2>用于主要部分，<h3>用于子部分，依此类推。

<h1>Frontend Development Guide</h1>
<h2>HTML Basics</h2>
<h3>Headings</h3>

段落和 <br>

<p>元素用于包裹一段文本。浏览器会自动在段落上方和下方添加间距。请谨慎使用<br>——仅用于有实际意义的换行，例如地址或诗歌中的换行，而不是用于分隔段落。

行内文本元素

使用行内元素赋予文本含义：<strong>用于重要文本（粗体），<em>用于强调（斜体），<code>用于代码片段，<mark>用于高亮文本，<small>用于小字说明。

<p>Press <kbd>Ctrl+S</kbd> to save. The <code>console.log()</code> function outputs to the <strong>Console</strong> panel.</p>

图像：<img> 元素

<img>元素用于嵌入图像。源地址属性提供网址，替代文本属性则为屏幕阅读器以及图像加载失败时提供文本。请始终填写有意义的替代文本值。

<img src="/images/hero.webp"
     alt="A developer typing code on a laptop"
     width="800"
     height="450">

编写良好的替代文本

替代文本应该传达图像的内容和用途。装饰性图像（间隔图像、纯粹用于装饰的图标）应使用alt=""（空字符串），这样屏幕阅读器就会跳过它们。不要写“图像为……”——只需描述图像所展示的内容。

超链接：<a> 元素

<a>（锚点）元素用于创建超链接。目标地址属性用于设置目标网址。链接文本应该描述目标位置，绝不要写“点击这里”。

<!-- External link -->
<a href="https://mdn.mozilla.org" target="_blank" rel="noopener noreferrer">
  MDN Web Docs
</a>

<!-- Internal link -->
<a href="/courses">Browse Courses</a>

<!-- Email link -->
<a href="mailto:hello@example.com">Email Us</a>

在新标签页中打开链接的安全提示

在新标签页中打开链接时，请始终添加rel="noopener noreferrer"。如果不添加，打开的页面就可以访问打开它的页面的窗口对象，这会造成一种称为反向标签页劫持的安全漏洞。

无序列表：<ul>

当项目顺序无关紧要时，请使用<ul>（无序列表），例如功能、配料或导航链接。每个项目都是一个<li>。浏览器默认会显示项目符号，但您几乎总会使用 CSS 为其设置样式。

<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

有序列表：<ol>

当顺序很重要时，请使用<ol>（有序列表），例如教程步骤、排名或操作说明。项目会自动编号。使用起始值和反向属性可以控制编号。

<ol>
  <li>Install Node.js</li>
  <li>Create a new project</li>
  <li>Run npm install</li>
</ol>

描述列表：<dl>

<dl>（描述列表）用于将术语及其定义或说明分组。它适合用于术语表、元数据（作者/日期）以及键值对。<dt>是术语，<dd>是描述。

<dl>
  <dt>HTML</dt>
  <dd>HyperText Markup Language — the structure layer.</dd>
  <dt>CSS</dt>
  <dd>Cascading Style Sheets — the presentation layer.</dd>
</dl>

嵌套列表

列表可以嵌套，以表示层级关系。请将子<ul>或<ol>放在父<li>元素内部。不要仅仅为了缩进而嵌套列表，请改用 CSS。

快速检查

哪个属性会为屏幕阅读器提供图像的文本描述？

回顾：文本、图像、链接和列表

使用标题元素构建文档结构，使用 p 表示段落，使用带有有意义替代文本的 img 表示图像，使用带有描述性链接文本的 a 进行导航，并使用 ul/ol/dl 表示列表内容。语义化让 HTML 具备可访问性，也便于机器读取。

常见问题解答