从零开始用HTML，制作你的第一个网页及网页链接

2026-08-02 17:00:51 141阅读

是面向零基础用户的HTML入门指引，既包含从零构建首个网页的整体框架性思路——如梳理展示内容、准备DOCTYPE、html、head、body这类基础标签组合的代码结构，又重点明确了实操核心需求“如何用HTML制作网页链接”的具体实现方式，为纯小白提供了清晰的入门实操结合引导。

在互联网时代,网页是我们获取信息、分享内容的重要载体，而HTML（超文本标记语言）正是构建网页的“骨架”——它简单易懂，即使是零基础的新手，也能快速上手制作自己的第一个网页，我们就从最基础的步骤开始，一起探索如何用HTML制作网页。

什么是HTML？

在动手之前,先简单了解下HTML：它的全称是HyperText Markup Language，不是编程语言，而是一种“标记语言”，它通过各种“标签”来告诉浏览器“这个内容是标题”“那个是图片”“这里是链接”，浏览器读取这些标签后，就会把内容渲染成我们看到的网页。

准备工具：只需要一个文本编辑器

制作HTML网页不需要复杂的软件,你的电脑自带的工具就足够：

Windows用户：可以用“记事本”（Notepad）；
Mac用户：可以用“文本编辑”（TextEdit，记得先在设置里改成“纯文本模式”）；
如果你想要更方便的体验,也可以下载免费的编辑器，比如VS Code、Sublime Text等，它们有代码高亮功能，写起来更顺手。

第一步：创建你的第一个HTML文件

打开你的文本编辑器（比如Windows记事本）；
先不着急写内容,点击“文件”→“保存”；
文件名设置为index.html（注意后缀是.html，不是.txt！），保存位置选一个你容易找到的文件夹（比如桌面）。

第二步：HTML的基本结构

每个HTML网页都有固定的基本结构,我们先把这个“骨架”搭起来，在刚才的index.html里输入以下代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">我的第一个网页</title>
</head>
<body>
</body>
</html>

我们来解释一下每个部分的作用：

<!DOCTYPE html>：告诉浏览器“这是一个HTML5文档”，必须放在第一行；
<html>：整个网页的“根标签”，所有内容都在它里面；
<head>：放网页的“元信息”，比如标题、字符编码，这里的内容不会直接显示在网页上；
- <meta charset="UTF-8">：设置字符编码，避免中文显示乱码；
- <title>：网页的标题，会显示在浏览器的标签页上；
<body>：网页的“主体内容”，我们看到的文字、图片、链接都放在这里。

第三步：添加常用内容——学习基础标签

现在我们在<body>里加一些内容，认识几个最常用的HTML标签：

标题标签：`<h1>`到`<h6>`从`<h1>`（最大）到`<h6>`（最小）：

<body>
    <h1>欢迎来到我的网页！</h1>
    <h2>这是二级标题</h2>
    <h3>这是三级标题</h3>
</body>

段落标签：`<p>`

用来写段落文字,会自动换行：

<body>
    <h1>欢迎来到我的网页！</h1>
    <p>这是我用HTML制作的第一个网页，感觉很有趣！</p>
    <p>HTML其实并不难，只要多练习就能掌握。</p>
</body>

图片标签：`<img>`

用来插入图片,需要用src属性指定图片的地址（可以是本地图片，也可以是网络图片），alt属性是图片的说明（当图片加载失败时显示）：

<body>
    <h1>欢迎来到我的网页！</h1>
    <p>这是我用HTML制作的第一个网页，感觉很有趣！</p>
    <img src="https://via.placeholder.com/300" alt="示例图片">
</body>

（这里用了一个网络占位图，你也可以把自己的图片和index.html放在同一个文件夹，然后src写图片的文件名，比如src="myphoto.jpg"）

链接标签：`<a>`

用来添加跳转链接,用href属性指定链接地址：

<body>
    <h1>欢迎来到我的网页！</h1>
    <p>这是我用HTML制作的第一个网页，感觉很有趣！</p>
    <img src="https://via.placeholder.com/300" alt="示例图片">
    <p>想学习更多？点击<a href="https://www.w3school.com.cn/html/">这里</a>查看HTML教程！</p>
</body>

完整示例：一个简单的个人网页

把上面的标签结合起来,我们就能得到一个完整的网页，现在把你的index.html内容改成这样：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">小明的个人主页</title>
</head>
<body>
    <h1>你好，我是小明！</h1>
    <h2>关于我</h2>
    <p>我是一个喜欢学习新技术的人，最近开始学习HTML，想制作自己的网站。</p>
    <h2>我的爱好</h2>
    <ul>
        <li>读书</li>
        <li>编程</li>
        <li>旅行</li>
    </ul>
    <h2>我的照片</h2>
    <img src="https://via.placeholder.com/200" alt="小明的照片">
    <p>想和我交流？点击<a href="mailto:xiaoming@example.com">发邮件给我</a>！</p>
</body>
</html>

（这里还加了一个无序列表<ul>和列表项<li>，用来展示爱好哦！）

打开你的网页看看！

保存好index.html后，双击这个文件，它就会用你的默认浏览器打开——你就会看到自己制作的第一个网页啦！

进阶小提示

现在的网页可能有点“朴素”，接下来你可以学习CSS（层叠样式表），给网页添加颜色、字体、布局，让它更美观；
建议用VS Code这类编辑器，它的代码提示和高亮功能能帮你少出错；
保存HTML文件时,后缀一定要是.html，否则浏览器无法识别。

制作网页就是这么简单！HTML只是开始，当你掌握了它，就可以进一步探索CSS和JavaScript，做出更炫酷的网页，现在就动手试试，制作属于你的第一个网页吧！