HTML菜鸟入门基础教程：零基础小白从零开始学网页制作，轻松掌握常用标签与实战技巧

admin HTML教程 2025-10-24 4

想做自己的网页却不知道从哪儿开始？打开教程看到满屏的尖括号就发怵，担心自己没编程基础学不会？其实啊，HTML 就是网页的 “骨架”，入门真没那么难。今天兔子哥就带零基础的小白们从零开始学 HTML，从最基础的标签讲到实战技巧，哪怕你之前连代码都没写过，跟着这篇菜鸟教程一步步来，也能轻松做出简单的网页，掌握常用标签的用法。

一、先搞懂：HTML 到底是啥？学它能做啥？

可能有朋友会问，HTML 听起来好专业，它到底是啥东西？简单说，HTML 就是写网页的 “说明书”，用各种标签告诉浏览器 “这里是标题”“这里是图片”“这里是按钮”。咱们平时逛的网站、看的网页，背后都有 HTML 的影子。
学 HTML 能做啥？最直接的就是做自己的网页 —— 比如个人简介页、小相册，甚至简单的博客。之前有个纯小白朋友跟着学，一周就做出了自己的作品集网页，成就感特别强。虽然现在做复杂网站还需要学 CSS、JavaScript，但 HTML 是第一步，就像盖房子得先打地基一样。
不过话说回来，HTML 只能负责网页的结构，不能让网页变漂亮，想让网页有颜色、有样式，还得学 CSS，这个后面咱们再慢慢说。

二、入门第一步：写第一个 HTML 文件，超简单！

学 HTML 不用装复杂软件，用电脑自带的记事本就行，当然用 VS Code 这类编辑器会更方便，兔子哥推荐新手用 VS Code，免费又好用。咱们来写第一个 HTML 文件，步骤超简单：

新建一个文本文档，把文件名改成 “我的第一个网页.html”（注意后缀是.html，不是.txt）；
双击打开文件，复制这段代码进去：

html

DOCTYPE html><html><head><title>我的第一个网页title>head><body><h1>你好，HTML！h1><p>这是我用HTML写的第一个网页～p>body>html>

保存后双击文件，会用浏览器打开，你会看到一个标题和一行文字，这就是你写的第一个网页啦！

是不是很神奇？这里的是标题标签，是段落标签，是网页标题，浏览器会按照这些标签的规则展示内容。有朋友可能问，这些是啥？它们是 HTML 的基本结构标签，html是根标签，head存网页的基本信息，body放网页的内容，就像一个信封，head写地址，body装信的内容。

三、常用标签大揭秘：这些标签每天都在用

HTML 标签有很多，但新手掌握几个常用的就够了，兔子哥挑最常用的来讲：

1. 标题标签：让文字变标题

从到，数字越小标题越大，比如：
html

<h1>一级标题（最大）h1><h2>二级标题h2><h3>三级标题h3>

网页的标题、章节标题都用它们，搜索引擎也会通过标题标签判断网页内容，所以重要的内容要用对标题。

2. 段落和换行：让文字有层次

标签用来包段落，段落之间会自动换行留空隙；想在段落里换行，用

标签，比如：
html

<p>这是第一段文字，用p标签包裹，段落之间有空隙。p><p>这是第二段文字，<br>这里用br标签换了一行。p>

别用多个

来换行哦，不规范，段落就用，换行就用

。

3. 链接和图片：让网页活起来

标签做链接，点一下能跳转到其他网页；标签插图片，让网页有图有文：
html

<a href="https://www.baidu.com">点我去百度a><img src="风景.jpg" alt="美丽的风景">

注意图片地址要写对，不然图片显示不出来。链接标签里的target="_blank"可以让链接在新窗口打开，比如。

4. 列表标签：让内容变整齐

分有序列表和无序列表，里面的每个项用：
html

<ul><li>苹果li><li>香蕉li><li>橘子li>ul><ol><li>第一步：打开软件li><li>第二步：新建文件li><li>第三步：保存文件li>ol>

做导航栏、步骤说明时超好用，整齐又清晰。

四、实战小案例：做一个个人简介页

光说不练假把式，咱们用学的标签做一个简单的个人简介页，代码如下：
html

DOCTYPE html><html><head><title>我的个人简介title>head><body><h1>大家好，我是小明h1><img src="头像.jpg" alt="我的头像" width="200"><h2>关于我h2><p>我是一名大学生，喜欢编程和打篮球，正在学习HTML制作网页。p><h2>我的爱好h2><ul><li>编程li><li>打篮球li><li>看电影li>ul><h2>我的作品h2><a href="我的作品.html" target="_blank">点击查看我的作品a>body>html>

这个网页有标题、图片、段落、列表和链接，是不是很完整？试着改改里面的文字和图片，做成你自己的简介页吧。有朋友反馈，做这种小案例时记得多保存，每改一点就用浏览器打开看看效果，错了能及时发现。

五、菜鸟常踩的坑：这些错误别再犯

1. 标签没闭合，网页乱糟糟

比如标题没写，浏览器可能会把后面的内容都当成标题，一定要记得闭合标签。

2. 文件名没改后缀，打不开

把 “网页.txt” 改成 “网页.html” 时，要确保文件后缀真的改了，有些电脑默认隐藏后缀，得在文件夹设置里打开 “显示文件扩展名”。

3. 图片地址写错，显示叉号

图片 src 里的地址要么是本地图片的路径（比如 “images / 风景.jpg”），要么是网上的图片链接，地址错了就会显示加载失败的叉号。
这或许暗示 HTML 入门并不难，但想熟练用好所有标签，还得花时间多练习，毕竟标签的组合用法还有很多细节需要掌握。至于某些高级布局标签（比如）的具体语义规范，我目前也只是了解基本用法，更深的原理还得进一步学习研究。

兔子哥的小建议

学 HTML 最重要的是多动手，别光看教程不动手敲代码。每天花半小时写个小网页，比如今天学了标题标签就写个带标题的页面，明天学了图片标签就加张图片进去，慢慢积累。遇到问题别慌，浏览器里按 F12 能看到报错信息，大部分问题都是标签没闭合、地址写错这些小毛病。
刚开始不用追求做复杂的网页，把基础标签练熟，理解网页的结构逻辑最重要。等你能熟练用这些常用标签做出简单网页时，再学 CSS 美化就会顺很多。HTML 就像搭积木，基础标签是积木块，多练多试，你也能搭出自己的网页城堡！

标签：从零开始学说明书

本文地址： https://www.kfyz.com/html/532.html