HTML系列教程：3_HTML 基础标签 — 标题、段落、超链接、图像

零基础新手教程，全部示例都附带逐行解释，复制代码保存为 .html 直接就能运行查看效果。

前言

前面我们学会了 HTML 简介、安装编辑器，以及 HTML5 基础网页骨架。网页里面最常用 4 大类内容：标题、文字段落、点击跳转的链接、图片。这 4 类是网页最基础标签，几乎每一个网页都会大量使用。

记住一个核心规则：所有页面看得见的内容，全部写在 <body> </body> 标签里面。

完整基础骨架模板，后面所有例子都基于这个模板：

html 复制代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>基础标签演示</title>
</head>
<body>
    <!-- 所有示例代码写在这里 -->

</body>
</html>

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

HTML 提供 6 级标题，h 是 heading（标题）缩写。

<h1>：一级标题，字号最大，最重要
<h2>：二级标题
<h3>：三级标题
<h4>：四级标题
<h5>：五级标题
<h6>：六级标题，字号最小

✅特点：

自带加粗效果；
自动上下留白，写完标题会自动换行，不需要手动换行；
语义：h1代表整个页面最重要标题，一个网页建议只用 1 个 h1，不要滥用；h2‑h6 可以多次使用，用来做子标题。

完整示例代码

html 复制代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>标题标签演示</title>
</head>
<body>
    <h1>这是h1一级标题（页面主标题，一个页面尽量只用一次）</h1>
    <h2>这是h2二级标题</h2>
    <h3>这是h3三级标题</h3>
    <h4>这是h4四级标题</h4>
    <h5>这是h5五级标题</h5>
    <h6>这是h6六级标题</h6>
</body>
</html>

代码解释：

<h1> 开始标签，表示这里开始是一级标题；
中间文字就是显示在网页上的标题文字；
</h1> 结束标签，表示标题到此结束；
浏览器会自动把文字放大加粗，每个标题自动占一整行，自动有上下间距。

📌新手注意误区：不要用 h1‑h6 单纯用来调字体大小！ h 标签有语义含义 ，代表标题层级。想要改字体大小后面学 CSS，不要乱用 h 标签。 ❌错误：很多小文字全部写<h1>，会破坏网页结构。

二、段落标签 `<p>`

p 是 paragraph（段落）。网页正文文字全部放在 <p> 标签。

✅特点：

一个 <p> 代表一个完整段落；
段落和段落之间自动有上下空白间距；
段落会自动换行，浏览器窗口变小文字会自动折行。

示例

html 复制代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>段落演示</title>
</head>
<body>
    <h2>小猫介绍</h2>
    <p>小猫是一种很可爱的小动物，性格温顺，很多人喜欢养猫当做宠物。</p>
    <p>小猫喜欢睡觉，喜欢玩毛线球，白天经常懒洋洋的晒太阳。</p>
</body>
</html>

解释：

第一个<p>是第一段文字；
第二个<p>是第二段文字；
两段之间浏览器自动空一行，不用我们手动打空格换行。

补充：换行标签 `<br>`

br = break，单标签，不需要闭合标签 。作用：强制文字换行，但是不会产生段落之间的大间距。

区分重点：

<p>：新段落，换行 + 上下大空隙

<br>：单纯强制换行，没有额外空隙

示例对比：

html 复制代码

<body>
    <p>床前明月光<br>
    疑是地上霜</p>

    <p>举头望明月</p>
    <p>低头思故乡</p>
</body>

解释：

<br> 只是把一句诗换到下一行，两段文字紧贴在一起；
两个独立<p>，两句诗中间会空一大段距离。

新手提示：不要大量滥用<br>，真正分段优先用<p>。只有同一段文字内部需要强制换行的时候才用<br>。

补充：空格问题

在 HTML 代码里面，不管敲多少个空格、回车换行，网页只会显示 1 个空格。

示例：

html 复制代码

<p>我        爱        HTML</p>

代码里敲很多空格，网页只会看到一个空格。

如果想要网页显示多个连续空格，使用  （空格实体）

html 复制代码

<p>我&nbsp;&nbsp;&nbsp;爱HTML</p>

  代表一个空格，写几个就代表几个空格。

实际开发很少用，后期 CSS 处理间距，新手了解即可。

三、超链接标签 `<a>`

a 是 anchor（锚）。网页点击文字跳转到别的网页，就是超链接。

语法格式：

html 复制代码

<a href="跳转的地址">点击显示的文字</a>

<a>：链接开始标签
href="地址"：属性，写要跳转去哪里，这个属性必须要有！
中间文字：用户看到、可以点击的文字
</a>：链接结束标签

属性格式：属性名="属性值"，引号使用英文双引号，新手千万不要打中文引号！

示例 1：跳转到外部网站（外网链接）

html 复制代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>超链接演示</title>
</head>
<body>
    <p>点击下面文字访问百度</p>
    <a href="https://www.baidu.com">去百度</a>
</body>
</html>

解释：

href="https://www.baidu.com"：点击后跳转到百度；
"去百度" 是页面看到的蓝色带下划线文字；
默认在当前浏览器标签页打开网站。

target 属性：新标签页打开网页

很多时候我们希望点击链接，打开新浏览器标签页 ，不关闭当前页面。属性：target="_blank"

html 复制代码

<a href="https://www.baidu.com" target="_blank">在新窗口打开百度</a>

✨开发高频使用：target="_blank" 记住，外部网站链接几乎都加上这个属性。

示例 2：内部链接，跳转自己网站的 HTML 文件

如果你本地文件夹有两个网页：index.html（首页）、about.html（关于页面）同一个文件夹下面，直接写文件名：

html 复制代码

<a href="about.html">跳转到关于页面</a>

这就是本地项目内部页面跳转，做网站必备。

示例 3：空链接（#）

暂时不知道跳转去哪里，先用 # 占位，点击回到页面顶部。

html 复制代码

<a href="#">这是一个空链接</a>

📌新手常见错误：

href 忘记写，链接失效；

使用中文引号 href="xxx"，必须英文 " "；

外网地址忘记写 https://，直接写www.baidu.com会出错。

❌错误写法：

html 复制代码

<a href="www.baidu.com">错误示范</a>

✅正确：

html 复制代码

<a href="https://www.baidu.com">正确示范</a>

四、图像标签 `<img>` 插入图片

img = image，图片标签。单标签，不需要闭合标签。

基础语法：

html 复制代码

<img src="图片路径" alt="图片描述文字">

两个最重要属性：

src（source 来源）：图片的地址 / 路径，必须写，告诉浏览器图片在哪里；
alt：替代文本。图片加载失败的时候，就会显示 alt 里面的文字；同时给读屏软件使用，属于规范，建议每一张图片都写 alt。

img 是单标签，HTML5 直接写 <img src=""> 即可，不需要写 </img>。

两种图片路径：本地图片、网络图片

方式 1：网络图片（网上图片地址，直接复制图片网址）

直接拿互联网图片 URL，不需要本地保存图片。

html 复制代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>图片演示</title>
</head>
<body>
    <h2>风景图片</h2>
    <img src="https://picsum.photos/id/10/400/250" alt="风景照片">
</body>
</html>

解释：

src 里面是网络图片地址；
alt="风景照片"：万一网络打不开，图片显示不出来，网页就会显示文字 "风景照片"。

方式 2：本地图片（自己电脑上的图片，重点！新手最容易出错）

⚠️路径大坑！！你的项目文件夹（html 学习文件夹），结构如下：

html 复制代码

html学习/
├─ index.html
└─ images/
    └─ cat.jpg

新建一个文件夹叫 images，专门存放所有图片，把图片 cat.jpg 放进去。 index.html 和 images 文件夹是同级。

此时写图片：

html 复制代码

<img src="images/cat.jpg" alt="小猫图片">

解释： src="images/cat.jpg"

先找 images 文件夹；
在文件夹里面找到 cat.jpg 图片。

新手最常见错误：

图片路径写错，图片显示不出来，网页出现破碎小图标；

图片名字带中文！图片文件名不要写中文，不要空格！不要写：小猫.jpg，改成 cat.jpg，容易加载失败。

VS Code 记得打开整个项目文件夹，不要单独打开 html 文件，否则图片找不到。

设置图片宽高 width 和 height

可以给图片设置宽度、高度，单位是像素 px。

html 复制代码

<img src="images/cat.jpg" alt="小猫" width="300" height="200">

提示：一般我们只写宽度，高度浏览器会自动按比例缩放，避免图片拉伸变形。后期开发中图片大小更多交给 CSS 处理。

拓展：图片外面包 a 标签，实现点击图片跳转

把<img>放到<a>标签中间，点击图片就能跳转网页。

html 复制代码

<a href="https://www.baidu.com" target="_blank">
    <img src="images/cat.jpg" alt="小猫图片" width="200">
</a>

解释：点击这张小猫图片，打开百度网页。

完整综合示例（把 4 种标签全部写在一起）

复制全部代码保存运行，可以直接看到标题、段落、链接、图片一起使用效果

html 复制代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>综合演示页面</title>
</head>
<body>
    <h1>小动物介绍</h1>

    <h2>小猫</h2>
    <p>小猫是非常可爱的宠物，性格安静，很多家庭都会饲养小猫。</p>
    <p>小猫喜欢吃鱼，喜欢晒太阳，<br>白天大部分时间都在睡觉。</p>

    <!-- 网络图片 -->
    <img src="https://picsum.photos/id/40/300/200" alt="小猫照片">

    <p>想了解更多宠物知识，请访问：
        <a href="https://www.baidu.com" target="_blank">百度搜索</a>
    </p>

</body>
</html>

📖本篇新手重点总结

标题 h1~h6：一共 6 级，h1 最重要，一个页面尽量只用一次，自带加粗换行；
段落 <p> ：写正文文本，段落之间自动有空隙；<br>只是单纯强制换行；
超链接 <a href="地址"> ：href 属性填写跳转地址；target="_blank"新窗口打开；
图片 <img src="路径" alt=""> ：src 写图片地址，alt 写图片说明文字；本地图片注意路径，图片名字不要中文。
所有标签内容写在 <body> 里面；属性值必须使用英文双引号。

新手高频踩坑清单

引号写成中文引号，代码全部失效；
图片路径写错，图片不显示；
本地图片文件名中文，导致加载失败；
忘记写 target="_blank"，点外部链接把自己网页覆盖掉；
滥用<br>来制造大间距，应该优先使用<p>分段。

下一节预告

下一篇教程：元素**，附带完整示例。**

HTML系列教程：3_HTML 基础标签 — 标题、段落、超链接、图像

前言

一、标题标签 <h1> ~ <h6>

完整示例代码

二、段落标签 <p>

示例

补充：换行标签 <br>

补充：空格问题

三、超链接标签 <a>

示例 1：跳转到外部网站（外网链接）

target 属性：新标签页打开网页

示例 2：内部链接，跳转自己网站的 HTML 文件

示例 3：空链接（#）

四、图像标签 <img> 插入图片

两种图片路径：本地图片、网络图片

方式 1：网络图片（网上图片地址，直接复制图片网址）

方式 2：本地图片（自己电脑上的图片，重点！新手最容易出错）

设置图片宽高 width 和 height

拓展：图片外面包 a 标签，实现点击图片跳转

完整综合示例（把 4 种标签全部写在一起）

📖本篇新手重点总结

新手高频踩坑清单

下一节预告

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

二、段落标签 `<p>`

补充：换行标签 `<br>`

三、超链接标签 `<a>`

四、图像标签 `<img>` 插入图片