【用AI学前端】HTML-02-HTML 常用标签（基础）

HTML 常用标签（基础）

本章目的

掌握网页最常用的内容元素，学会使用文本、链接、图片、列表等标签来组织和展示网页内容。

为什么需要这么多标签？

HTML 提供了各种标签来标记不同类型的内容，就像我们写文章时会使用标题、段落、引用、列表等格式一样。使用正确的标签可以让：

浏览器更好地理解内容结构
搜索引擎更容易索引网页
屏幕阅读器等辅助技术更好地服务视障用户
代码更易读、易维护

文本标签

段落标签 `<p>`

html 复制代码

<p>这是一个段落，用于包裹一段文字。</p>

作用：表示一段文字，浏览器会自动在段落之间添加间距。

说明：不要用 <br> 来模拟段落，应该使用 <p> 标签，这是语义化正确的做法。

行内文本容器 `<span>`

html 复制代码

<p>这是一个段落，其中有一个 <span style="color: #d35400;">强调的词</span>。</p>

作用：行内容器，不会独占一行，用于给一小段文字设置样式或标记。

说明：<span> 本身没有语义，主要用于配合 CSS 设置样式。

标题标签 `<h1>` ~ `<h6>`

html 复制代码

<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>

作用：表示不同层级的标题，<h1> 最大、最重要，<h6> 最小、最不重要。

最佳实践：

每个页面只应该有一个 <h1>，通常是页面主标题
标题应该按层级嵌套使用，不要跳级（比如不要从 <h2> 直接跳到 <h4>）
搜索引擎会给标题更高权重

强调标签 `<strong>` 和 `<em>`

html 复制代码

<p>可以用 <strong>strong</strong> 表示重要强调，用 <em>em</em> 表示语气强调。</p>

区别：

<strong>：表示内容很重要，浏览器通常用粗体显示
<em>：表示语气上的强调，浏览器通常用斜体显示

说明：不要仅仅为了粗体或斜体效果使用这些标签，它们有语义含义。如果只是想改变样式，应该使用 CSS。

代码标签 `<code>` 和 `<pre>`

html 复制代码

<p>行内代码示例：<code>console.log('hello')</code></p>

<pre>
function greet(name) {
    return `Hello, ${name}!`;
}
</pre>

作用：

<code>：标记行内代码片段
<pre>：预格式化文本，保留空格、换行等格式，常用于代码块

说明：<pre> 会保留所有空格和换行，适合显示多行代码。

引用块 `<blockquote>`

html 复制代码

<blockquote>
    这是一段引用内容，通常用来引用别人的文字。
</blockquote>

作用：表示一段引用的文字，浏览器通常会缩进显示。

说明：引用内容通常来自其他来源，应该注明出处。

换行 `<br>` 和分隔线 `<hr>`

html 复制代码

<p>这一行之后插入换行<br>然后再显示这一句。</p>
<hr>

作用：

<br>：强制换行
<hr>：水平分隔线，用于分隔不同的内容区块

注意：不要用多个 <br> 来制造间距，应该使用 CSS 的 margin 或 padding。

链接和图片

超链接 `<a>`

html 复制代码

<p>访问 <a href="https://developer.mozilla.org/" target="_blank" rel="noopener noreferrer">MDN Web Docs</a> 获取更多资料。</p>

属性说明：

href：链接地址，可以是网址、文件路径或锚点
target="_blank"：在新标签页打开链接
rel="noopener noreferrer"：安全属性，防止新页面访问原页面的 window 对象

常见用法：

外部链接：href="https://example.com"
内部链接：href="about.html"
邮件链接：href="mailto:name@example.com"
锚点链接：href="#section1"（跳转到页面内某个位置）

图片 `<img>`

html 复制代码

<img src="image.png" alt="示例占位图" width="200" height="120">

属性说明：

src：图片路径或 URL（必须）
alt：图片无法显示时的替代文本（必须，对可访问性很重要）
width / height：图片宽度和高度（可选，但建议设置以避免页面抖动）

最佳实践：

始终提供 alt 属性，描述图片内容
如果图片是装饰性的，可以使用空 alt=""
使用适当尺寸的图片，不要用 CSS 缩放大图

列表标签

无序列表 `<ul>` 和 `<li>`

html 复制代码

<p>无序列表示例：</p>
<ul>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
</ul>

作用：表示没有顺序的项目列表，浏览器通常用圆点显示。

有序列表 `<ol>` 和 `<li>`

html 复制代码

<p>有序列表示例：</p>
<ol>
    <li>打开 VS Code</li>
    <li>创建 index.html</li>
    <li>在浏览器中预览</li>
</ol>

作用：表示有顺序的项目列表，浏览器通常用数字显示。

说明：<li> 用于列表项，可以嵌套使用创建子列表。

最佳实践

选择正确的标签：根据内容的语义选择合适的标签，而不是为了视觉效果
提供 alt 文本 ：所有图片都应该提供 alt 属性，提升可访问性
安全的链接 ：外部链接使用 target="_blank" 时要加上 rel="noopener noreferrer"
合理的标题层级 ：按正确层级使用标题，每个页面只有一个 <h1>
避免滥用 <br> ：用 CSS 的 margin/padding 来控制间距，不要用多个 <br>

文件说明

index.html - 常用标签示例，展示文本、链接、图片、列表等各种标签
image.png - 示例图片资源

练习题

基础练习

创建 practice.html，要求：

使用 <h1> 作为主标题"我的学习笔记"
包含 3 个段落，介绍你学过的编程语言
使用无序列表列出你的兴趣爱好
使用有序列表列出学习 HTML 的步骤
添加一张图片并设置合适的 alt 文本

进阶练习

创建一个简单的"新书推荐"页面
包含书名（<h2>）、作者信息（<p>）、简介（多个段落）
使用引用块（<blockquote>）引用书中的精彩句子
添加"购买链接"和"了解更多"两个按钮（使用 <a> 标签样式化）
使用 <strong> 和 <em> 强调重点内容

挑战练习

在页面中创建一个嵌套列表（列表项内再有子列表）
使用 <code> 和 <pre> 展示一段代码
创建一个目录，使用锚点链接跳转到页面内的不同章节

学习目标检查

掌握常用文本标签的用法（p, span, h1-h6, strong, em）
能够创建链接和插入图片
掌握无序列表和有序列表的使用
理解 alt 属性的重要性
知道如何在页面中使用代码和引用
能够选择正确的标签来表达内容的语义

参考

项目在https://github.com/tao355667/frontend-journey，借助 OpenCode 内置的 GLM 4.7 与 Kimi 2.5 模型生成内容，并结合学习进度对项目内容进行针对性修改与润色

【用AI学前端】HTML-02-HTML 常用标签（基础）

HTML 常用标签（基础）

本章目的

为什么需要这么多标签？

文本标签

段落标签 <p>

行内文本容器 <span>

标题标签 <h1> ~ <h6>

强调标签 <strong> 和 <em>

代码标签 <code> 和 <pre>

引用块 <blockquote>

换行 <br> 和分隔线 <hr>

链接和图片

超链接 <a>

图片 <img>

列表标签

无序列表 <ul> 和 <li>

有序列表 <ol> 和 <li>

最佳实践

文件说明

练习题

基础练习

进阶练习

挑战练习

学习目标检查

参考

段落标签 `<p>`

行内文本容器 `<span>`

标题标签 `<h1>` ~ `<h6>`

强调标签 `<strong>` 和 `<em>`

代码标签 `<code>` 和 `<pre>`

引用块 `<blockquote>`

换行 `<br>` 和分隔线 `<hr>`

超链接 `<a>`

图片 `<img>`

无序列表 `<ul>` 和 `<li>`

有序列表 `<ol>` 和 `<li>`