一切网页都是从 HTML 开始的。它就像建房子的骨架和砖块，决定了网页的结构和内容。今天，我就把我学到的最基础、最重要的 HTML 标签整理分享出来，希望能帮到同样刚开始的你。我们不讲太深奥的理论，就用最通俗易懂的方式，一起认识这些网页世界的“小积木”！
一、HTML 是什么？为什么需要它？
想象一下你要搭建一个乐高模型：
-
你需要图纸： 告诉你哪里放窗户，哪里放门，哪里是墙。
-
你需要积木： 各种形状、颜色的砖块来构建结构。
HTML 就是网页的“图纸”和“积木”！
-
Hyper Text Markup Language：中文叫 超文本标记语言。
-
“标记” (Markup)： 就是用一些特定的符号（标签）给文本做标记，告诉浏览器：“嘿，这段是标题”、“那是个图片”、“这里要换行”。
-
“超文本” (HyperText)： 就是指网页里可以包含链接（超链接），点一下就能跳到其他页面或网站，文本不再是“死”的。
简单说：HTML 是用来描述网页结构和内容的代码。 浏览器（如 Chrome, Edge, Firefox）能读懂 HTML 代码，然后把它渲染成我们看到的漂亮网页（当然，漂亮还需要 CSS 来打扮，功能需要 JavaScript 来实现，但那是后话）。
二、准备工作：最简单的 HTML 文件长啥样？
一个最基本的 HTML 文件就像下面这样：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>我的第一个网页</title>
</head>
<body>
<h1>你好，世界！</h1>
<p>这是我的第一个HTML页面，好开心！</p>
</body>
</html>我们来拆解一下这些“积木”的作用：
-
<!DOCTYPE html>：-
作用： 这不是一个标签，而是一个声明。它像是一声大喊：“喂！浏览器！我这个文档用的是最新版的 HTML5 标准，请按这个标准来解析我！” 把它放在最开头准没错。
-
-
<html></html>：-
作用： 这是整个 HTML 页面的根元素，所有其他标签都包裹在它里面。它告诉浏览器：“从这里开始到结束，都是 HTML 内容！”
-
-
<head></head>：-
作用： 这是网页的“头部”，相当于人的大脑。里面放的东西不会直接显示在浏览器窗口给用户看，但对网页非常重要。
-
包含：网页标题 (
<title>)、字符编码声明 (<meta charset="UTF-8">，确保中文不乱码)、引入 CSS/JS 文件链接、给搜索引擎看的信息等。
-
-
<meta charset="UTF-8">：-
作用： 定义文档使用的字符编码。
UTF-8是一种包含地球上几乎所有字符的编码，写中文网页一定要加上它，否则可能会显示成乱码（比如“你好”变成“ä½ å¥½”）。它放在<head>里面。
-
-
<title></title>：-
作用： 定义网页的标题。这个标题会显示在浏览器的标签页上，也会被搜索引擎用作搜索结果中的标题。它必须放在
<head>里面。
-
-
<body></body>：-
作用： 这是网页的“身体”，也是最重要的部分！所有你希望用户在浏览器窗口里实际看到的内容（文字、图片、视频、按钮等）都要放在
<body>标签里面。
-
总结一下结构关系：
<!DOCTYPE html> --> 声明
<html> --> 根容器
<head> --> 头部 (大脑，用户看不见)
<meta> --> 重要设置 (如字符编码)
<title> --> 网页标题 (显示在浏览器标签页)
</head>
<body> --> 身体 (用户看到的所有内容都在这!)
... 你的内容标签在这里 ...
</body>
</html>三、身体里的“积木”：常用内容标签介绍
现在，我们进入 <body> 区域，看看有哪些常用的“积木”可以用来搭建内容：
1. 标题标签：<h1> 到 <h6>
-
作用： 定义标题。就像书里的章节标题一样，表示内容的重要性层级。
-
标签：
<h1>,<h2>,<h3>,<h4>,<h5>,<h6> -
特点：
-
<h1>最重要，字体最大（通常一个页面建议只用 1 个，作为主标题）。 -
<h2>次重要，<h3>再次之...<h6>重要性最低，字体最小。 -
浏览器会自动给标题加粗并添加一些上下空白。
-
-
示例：
<h1>这是最重要的主标题</h1> <h2>这是一个二级标题</h2> <h3>这是一个三级标题</h3> <p>下面是一些正文...</p> <h2>另一个二级标题</h2>2. 段落标签：
<p> -
作用： 定义一个段落。用来放一段连贯的文字内容。
-
标签：
<p>内容</p> -
特点： 浏览器会自动在段落前后添加一些空白，让文字看起来更清晰。
-
示例：
<p>这是一个段落。里面可以包含很多文字，浏览器会自动把它显示成一块一块的，方便阅读。</p> <p>这是另一个独立的段落。两个段落之间会有间距。</p>3. 换行标签：
<br> -
作用： 强制换行。在文本中需要打断当前行，从下一行开始显示时使用。
-
标签：
<br>(这是一个空标签，没有结束标签</br>！) -
特点： 不像
<p>那样会产生大的段落间距，只是简单地换到下一行。 -
示例：
<p> 第一行文字。<br> 这是被 br 标签强制换行后的第二行文字。<br> 第三行文字。 </p>效果：
-
第一行文字。
这是被 br 标签强制换行后的第二行文字。
第三行文字。
4. 水平线标签：<hr>
-
作用： 创建一条水平分隔线。通常用于在视觉上分隔内容的不同部分。
-
标签：
<hr>(也是一个空标签！) -
特点： 在页面上画一条横跨容器的横线。
-
示例：
<h2>第一部分内容</h2> <p>...一些内容...</p> <hr> <!-- 一条水平线 --> <h2>第二部分内容</h2> <p>...另一些内容...</p>5. 文本格式化标签：让文字加点“花样”
-
作用： 改变文本的外观或强调其重要性。
-
常用标签：
-
<strong></strong>或<b></b>： 使文本加粗。<strong>更强调语义上的“重要性”或“严重性”，<b>仅表示视觉上加粗。 -
<em></em>或<i></i>： 使文本倾斜。<em>强调语义上的“着重”或“重读”，<i>常用于表示技术术语、外文短语或想法等。 -
<u></u>： 给文本添加<u>下划线</u> (使用较少，因为链接默认有下划线，容易混淆)。 -
<del></del>： 给文本添加~~删除线~~，表示被删除的内容。 -
<mark></mark>： 给文本添加<mark>高亮背景色</mark>（通常是黄色），表示标记或突出显示。 -
示例：
<p>这是一段包含 <strong>重要</strong> 文字和 <em>强调</em> 文字的段落。 你可以用 <b>加粗</b> 或 <i>斜体</i> 来改变视觉效果。<del>这句话不要了</del>，<mark>这句要重点看</mark>。</p> 6. 图像标签：
<img>- 让网页有图有真相！ -
作用： 在网页中嵌入图像。
-
标签：
<img>(也是一个空标签！) -
关键属性 (必须掌握)：
-
src="图片路径"： 这是最重要的属性！告诉浏览器图片文件在哪里。路径可以是：-
本地文件：
src="images/logo.png"(假设图片和 HTML 文件在同一文件夹下的images子文件夹里) -
网络图片：
src="https://www.example.com/pic.jpg"(直接使用图片的完整网址)
-
-
alt="替代文本"： 极其重要！ 当图片无法加载时（比如网络慢、图片失效），浏览器会显示这段文字。它对于视力障碍用户使用读屏软件也非常关键，是网页无障碍的基本要求。请务必为每张图片添加有意义的alt描述。
-
-
常用可选属性：
-
width="数值"和height="数值"： 设置图片显示的宽度和高度（单位通常是像素px）。通常只需要设置其中一个，浏览器会按比例缩放另一个。设置两个可能会让图片变形。 -
title="提示文本"： 当鼠标悬停在图片上时，会显示一个小提示框（Tooltip）。
-
-
示例：
<img src="cat.jpg" alt="一只可爱的橘猫在晒太阳" title="看我的猫主子！"> <img src="https://placekitten.com/200/300" alt="随机猫咪图片" width="200">7. 链接标签：
<a>- 互联网的魔法跳转门！ -
作用： 创建超链接，点击后可以跳转到另一个页面、另一个网站、页面内的某个位置（锚点）、下载文件或发送邮件等。互联网的核心就是链接！
-
标签：
<a>链接文本或图片</a> -
关键属性：
-
href="目标地址"： 这是链接的灵魂！指定点击后要去哪里。-
其他网页：
href="page2.html"(同网站内) 或href="https://www.baidu.com"(外部网站) -
锚点 (页面内跳转)：
href="#section2"(跳转到页面内id="section2"的元素处) -
发送邮件：
href="mailto:someone@example.com" -
下载文件：
href="document.pdf"
-
-
target="_blank"： 可选属性。指定在新的浏览器标签页或窗口中打开链接。如果不加这个属性，默认在当前标签页打开。
-
-
特点： 链接文本默认显示为蓝色并带下划线。鼠标放上去会变成小手形状。
-
示例：
<!-- 文本链接 --> <p>访问 <a href="https://www.csdn.net">CSDN官网</a> 学习更多技术知识。</p> <!-- 在新标签页打开 --> <p>访问 <a href="https://github.com" target="_blank">GitHub</a> (新标签页打开)。</p> <!-- 图片链接 --> <a href="big-cat.jpg"> <img src="small-cat.jpg" alt="点击查看大猫咪图片"> </a> <!-- 跳转到本页的某个章节 (假设下面有个 <h2 id="contact">联系我们</h2>) --> <p><a href="#contact">跳转到联系信息</a></p>8. 容器标签：
<div>和<span>- 万能的“盒子”和“小包装” -
作用： 它们本身没有特定的视觉样式，主要用于组合其他元素或为它们添加样式 (通过CSS) 或添加行为 (通过JavaScript)。它们是网页布局和样式控制的基础。
-
标签：
-
<div></div>： 块级容器 (Block Container)。像一个大的、独占一行的通用盒子。浏览器会自动在它前后换行。常用于页面布局划分（如头部、导航、主体内容区、侧边栏、页脚）。 -
<span></span>： 行内容器 (Inline Container)。像一个小的、不会打断行的通用包装袋。用于包裹一小段文本或行内元素，以便单独设置样式或操作。
-
-
示例：
<!-- div 划分大的区块 --> <div id="header"> <h1>网站标题</h1> </div> <div id="main-content"> <p>这里是主要内容...</p> </div> <div id="footer"> <p>版权信息 © 2023</p> </div> <!-- span 包裹一小段文本进行特殊处理 --> <p>这段文字里有一个<span style="color: red;">红色的词</span>。</p>9. 列表标签：让内容条理清晰
-
作用： 创建有序列表或无序列表。
-
类型：
-
无序列表
<ul>： 列表项前面是项目符号（通常是圆点）。-
列表项用
<li></li>表示。
-
-
有序列表
<ol>： 列表项前面是数字或字母编号（1, 2, 3 或 a, b, c）。-
列表项用
<li></li>表示。
-
-
-
示例：
<h3>购物清单 (无序列表)</h3> <ul> <li>牛奶</li> <li>鸡蛋</li> <li>面包</li> <li>水果 <ul> <!-- 嵌套列表 --> <li>苹果</li> <li>香蕉</li> </ul> </li> </ul> <h3>学习步骤 (有序列表)</h3> <ol> <li>学习 HTML</li> <li>学习 CSS</li> <li>学习 JavaScript</li> <li>做项目练习</li> </ol>四、写在最后：你的第一个网页诞生啦！
恭喜你！你现在已经认识了 HTML 中最基础、最核心的一批“积木”标签！你现在完全有能力写出一个包含标题、段落、图片、链接和列表的简单网页了。
记住学习路径：
-
理解结构：
<!DOCTYPE>,<html>,<head>,<body>是骨架。 -
填充内容： 在
<body>里用<h1>-<h6>,<p>,<img>,<a>,<ul>/<ol>,<li>添加实际内容。 -
组织布局： 用
<div>这个大盒子把内容分区装起来。 -
细微调整： 用
<br>换行，用<hr>加分隔线，用<strong>,<em>等强调文本。 -
实践！实践！实践！ 打开记事本（或 VS Code 等代码编辑器），把上面的例子敲一遍，保存为
.html文件（比如first.html），然后用浏览器打开它看看效果！这是最有成就感的一步。 -
给第一次写代码的你一点小建议
-
别怕出错： 代码写错太正常了！浏览器不显示或者显示奇怪？检查标签是不是成对（空标签除外），属性值引号对不对，文件路径对不对。调试是程序员的家常便饭。
-
善用工具： 推荐使用免费的编辑器如 VS Code，它有代码高亮和提示，写起来更舒服。浏览器按 F12 可以打开“开发者工具”，能看到网页的 HTML 结构，是学习的神器。
-
多查多问： 遇到问题，CSDN、MDN Web Docs (最权威的 Web 技术文档) 都是好老师。社区里有很多热心人。
-
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
