目录
[一、什么是 HTML？](#一、什么是 HTML？)
[二、HTML 的基本结构](#二、HTML 的基本结构)
你好！欢迎来到网页开发的世界。如果你完全不懂代码，没关系，这篇教程将手把手教你写出第一个属于自己的网页。我不讲复杂的理论，只讲最实用的东西，让你立刻上手。
一、什么是 HTML？
HTML 的全称是 HyperText Markup Language（超文本标记语言）。它是网页的骨架------就像盖房子时的钢筋水泥，决定了网页里有什么内容（标题、文字、图片、链接等）。
HTML 不是编程语言，它是由一系列 标签（tags） 组成的。每个标签告诉浏览器："这里应该放一个标题"、"这里应该放一张图片"。浏览器读到这些标签，就会把它们渲染成好看的页面。
二、HTML 的基本结构
任何一个 HTML 页面，都有固定的基本结构。就像一封信必须有开头、正文和落款一样，HTML 页面也必须有下面这几部分：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>我的第一个网页</title>
</head>
<body>
这里放网页上能看到的所有内容
</body>
</html>我们逐行解释一下这些"神秘代码"：
-
<!DOCTYPE html>：文档类型声明，告诉浏览器"这是一个 HTML5 文件"。必须写在第一行。 -
<html lang="zh-CN">：HTML 文档的根标签，所有内容都包在里面。lang="zh-CN"表示页面语言是中文。 -
<head>：头部区域，存放网页的 元信息（比如字符编码、页面标题、CSS 样式等）。这部分内容一般不会直接显示在网页上。-
<meta charset="UTF-8">：声明文档使用 UTF-8 编码，这样才能正确显示中文和特殊符号。 -
<title>：定义浏览器标签页上显示的标题，非常重要，也是搜索引擎抓取的关键词之一。
-
-
<body>：主体区域，网页上所有可见的内容（文字、图片、按钮等）都写在这里。
💡 小知识 ：标签通常是成对出现的，比如
<html>开头，</html>结尾。单标签如<meta>是自闭合的。
三、最常用的几个标签（新手必学）
现在我们来认识一下 body 里最常用的标签。它们是构建网页的基本积木。
| 标签名 | 作用 | 示例 |
|---|---|---|
<h1> ~ <h6> |
标题，<h1> 最大最重要，<h6> 最小 |
<h1>欢迎来到我的网站</h1> |
<p> |
段落，包裹一段文字 | <p>这是我的第一个网页。</p> |
<a> |
超链接，点击跳转到另一个页面 | <a href="https://www.baidu.com">去百度</a> |
<img> |
插入图片 | <img src="photo.jpg" alt="我的照片"> |
<ul> + <li> |
无序列表（带圆点） | <ul><li>苹果</li><li>香蕉</li></ul> |
<div> |
容器，用来分组其他元素，方便布局 | <div> ... </div> |
注意 ：
<img>标签的src属性指定图片的路径，alt属性是图片无法显示时的替代文字，对 SEO 和无障碍访问很重要。
四、动手写第一个网页------自我介绍页面
好了，理论知识够了，我们来写一个真正的网页。这个页面将包含：一个大标题、一段自我介绍、一张照片（用占位图代替）、一个爱好列表、以及一个链接。
请打开你的电脑，新建一个文本文档，把下面的代码完整复制 进去，然后保存为 my-first-page.html（注意扩展名是 .html 而不是 .txt）。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<!-- 头部：定义网页的元数据和标题 -->
<meta charset="UTF-8"> <!-- 支持中文 -->
<title>小白的第一个网页</title> <!-- 浏览器标签页标题 -->
</head>
<body>
<!-- 主体：所有可见内容 -->
<!-- 一级大标题：我的名字 -->
<h1>你好，我是小明！</h1>
<!-- 一段自我介绍 -->
<p>
欢迎来到我的第一个网页！我是一个编程小白，正在学习 HTML。
这就像用积木搭建我的第一个小房子，真有趣！
</p>
<!-- 插入一张图片（这里用网络占位图） -->
<img src="https://picsum.photos/200/150" alt="随机风景图"
style="width:200px; border-radius:10px;">
<!-- 无序列表：我的爱好 -->
<h2>我的爱好</h2> <!-- 二级标题 -->
<ul>
<li>读书 📚</li>
<li>打篮球 🏀</li>
<li>学编程 💻</li>
</ul>
<!-- 超链接：点击联系我（新窗口打开） -->
<p>
如果你想联系我，可以给我发邮件：
<a href="mailto:xiaoming@example.com" target="_blank">xiaoming@example.com</a>
</p>
<!-- 一个简单的分割线 -->
<hr>
<!-- 页脚：版权信息 -->
<p style="color: gray; font-size: 0.9rem;">
© 2025 小明 · 第一个网页
</p>
</body>
</html>代码里的"小心机"注释
我在代码里加了很多 <!-- --> 注释，它们不会被浏览器显示，只给开发者看。你可以通过注释了解每一行的作用。
-
<!-- 头部：... -->和<!-- 主体：... -->把代码分成两大块，清晰明了。 -
在
<img>标签里，我还用了一个style属性给图片加了一点简单的样式（宽度和圆角）。这是内联样式，后面我们会学更规范的方法。
五、如何查看你的网页？
-
将上面的代码保存为一个文件，比如
my-first-page.html。 -
双击这个文件，它就会在默认浏览器中打开。
-
恭喜！你看到了自己亲手写的第一个网页！🎉
你可以尝试修改文字、图片链接，保存后刷新浏览器，看看有什么变化。
六、进阶一点点：用 <style> 添加样式
刚才我们在标签里直接写 style 属性，这叫"内联样式"。当样式多的时候，代码会显得乱。更优雅的方式是在 <head> 里写一个 <style> 标签，集中定义样式。
例如，给所有段落文字变成深灰色，给链接加个颜色：
<head>
<style>
p {
color: #333; /* 深灰色文字 */
line-height: 1.6; /* 行高 */
}
a {
color: #0077cc; /* 链接蓝色 */
text-decoration: none; /* 去掉下划线 */
}
a:hover {
text-decoration: underline; /* 鼠标悬停时出现下划线 */
}
</style>
</head>把这部分加到 <head> 里，你的页面就会更漂亮。你可以自由尝试修改颜色、字体大小等。
七、重要概念：结构、内容、表现
-
结构 ：HTML 提供（比如
<h1>表示标题，<p>表示段落）。 -
内容：你放在标签里的文字、图片等。
-
表现：CSS 负责（颜色、大小、布局等）。
刚开始学习时，先把结构 和内容做好，再慢慢美化。这个理念很重要。
八、下一步学什么？
你已经能写出一个简单的网页了！接下来可以尝试：
-
学习更多标签：
<strong>（加粗）、<em>（斜体）、<table>（表格）、<form>（表单）。 -
学习 CSS 基础，让网页更好看。
-
学习如何用
<div>和 CSS 实现布局（比如左图右文）。 -
把多个页面用链接连接起来，做成一个小网站。
记住，最好的学习方法就是动手写。不断模仿、修改、创造，你一定会越来越熟练。
恭喜你！你已经迈出了成为网页开发者的第一步。 如果有任何疑问，欢迎随时搜索或请教他人。编程的世界广阔而有趣，祝你玩得开心！