文章导读

基本的 HTML 标签 - 四个实例

海豚V靓仔 2026年2月1日 118

熟练掌握 <h1>-<h6>、<p>、<a>、<img> 这四类基础标签，是开启HTML学习、构建网页内容的关键第一步。这些标签构成了网页内容呈现与互联的基石，对后续学习至关重要。
HTML学习指南

掌握基础标签的重要性

构建页面骨架：标题标签 (<h1>-<h6>) 定义了内容的层级结构，如同文章的章节，对SEO和可访问性至关重要。段落标签 (<p>) 则将文本组织成易于阅读的单元。

实现互联与展示：链接标签 (<a>) 是互联网超链接特性的核心，让网页彼此相连。图像标签 (<img>) 则将视觉元素引入页面，丰富内容表现力，二者共同构成基础的用户交互与内容呈现。

理解属性概念：通过 <a> 的href和 <img> 的src、width等属性，你能初步掌握HTML标签如何通过属性进行配置和扩展，这是学习更多复杂元素的基础。

请在你的HTML编辑器（如记事本或VS Code）中创建一个新文件，跟随以下实例逐一编写并观察效果。

标题标签定义了内容的层级，<h1> 最重要，<h6> 最不重要。

<!DOCTYPE html>
<html>
<body>
  <h1>这是一级标题 (最重要)</h1>
  <h2>这是二级标题</h2>
  <h3>这是三级标题</h3>
  <!-- 你可以继续尝试 h4, h5, h6 -->
</body>
</html>

动手实验：将 <h1> 中的文字改为你的网页主标题，并尝试调整使用不同级别的标题。

<p> 标签定义一个文本段落，浏览器会自动在段落前后添加一些空白间距。

<p>这是一个独立的段落。它包含了若干句子，并在视觉上形成一个文本块。</p>
<p>这是另一个新的段落。它与上一个段落之间会有一定的间距。</p>

动手实验：在两个 <p> 标签之间再添加一个新的段落。

<a> 标签定义超链接，href属性指定链接要跳转的目标地址。

访问 <a href="https://www.w3school.com.cn">W3School 学习网站</a> 以获取更多教程。
这是一个<a href="https://www.example.com">指向示例网站的链接</a>。

动手实验：将href的值改为你喜欢的网站地址，并将链接文字改为你想显示的文字。

<img> 标签用于嵌入图像，src属性指定图像路径，width和height定义尺寸（单位是像素）。

<img src="picture.jpg" width="200" height="150" alt="图片描述">
<!-- 注意：src属性中的“picture.jpg”需要替换为你实际图片的文件名和路径 -->

关键提示：alt属性用于为图像提供替代文本，当图片无法加载时会显示，这对可访问性和SEO非常重要，务必养成添加的习惯。

将以上所有标签组合在一个HTML文件中练习：

创建一个完整的HTML文件结构（包含<!DOCTYPE html>， <html>， <body>）。
依次添加一个主标题 <h1>、几个段落 <p>、一个指向外部网站的链接 <a>，以及一个引用本地图片的 <img> 标签（需准备一张图片与HTML文件放在同一目录下）。
在浏览器中打开该文件，检查所有元素是否正确显示。如果图片不显示，请检查文件名和路径是否正确。

评论已关闭