html菜鸟教程零基础入门：30个标签实战+完整网页制作步骤

admin HTML教程 2025-10-24 3

是不是很多零基础的朋友想学 HTML 做网页，却总被这些问题困住？看着满屏的尖括号标签就头晕，不知道哪个标签该用在哪；好不容易记住几个标签，拼起来的网页要么歪歪扭扭，要么图片不显示；学了半天，连个简单的个人介绍页都做不出来？其实啊，HTML 入门不难，关键是掌握常用标签的用法，再跟着步骤做完整网页。今天兔子哥就带菜鸟朋友们从零开始，先讲 30 个核心标签的实战用法，再一步步教你做完整网页，跟着练，你会发现做网页没那么难，一起往下看吧！

一、先搞懂：HTML 标签到底是啥？为啥学网页必须学它？

核心问题：HTML 标签长啥样？它是怎么让网页有结构的？
简单说，HTML 标签就是网页的 “积木”，用尖括号<>包裹，比如，它们告诉浏览器 “这是标题”“这是段落”“这是图片”。网页的文字、图片、链接都是靠这些标签 “搭” 起来的。
标签分两种：单标签（自己就能用，比如换行

）和双标签（有开头有结尾，比如段落内容），结尾标签前面多一个/，千万别漏了 —— 新手最容易犯的错就是忘写结尾标签，导致网页结构乱套。
之前带过的小李，刚开始把写成

，没加闭合的>，结果整个段落都显示不出来，后来发现就差一个符号，你说气人不气人？所以写标签一定要仔细，少个尖括号都不行。

二、30 个核心标签实战：按功能分类，新手记这些就够了

核心问题：标签那么多，哪些是必须记的？怎么用才对？
不用记 30 个，先掌握这几类核心标签，覆盖 80% 的网页需求，剩下的用到再查就行。

1. 基础结构标签（5 个）—— 网页的 “骨架”

每个网页都得有这些标签，就像盖房子先搭框架：

：整个网页的根标签，所有内容都放这里面
：网页的 “脑袋”，存标题、编码这些看不见的设置
：网页标题，显示在浏览器标签栏，比如我的第一个网页
：网页的 “身体”，所有看得见的内容（文字、图片）都放这里
：告诉浏览器用 utf-8 编码，避免中文乱码，必须放里

2. 文本标签（8 个）—— 让文字有层次

网页里的标题、段落靠这些标签：

到：标题标签，h1 最大，h6 最小，比如一级标题
：段落标签，自动换行，比如这是一段文字
：换行标签，单标签，在段落里强制换行
：加粗文字，比更推荐（有语义），比如重要内容
：斜体文字，比更推荐，比如强调内容

标签	作用	例子
	二级标题	`我的兴趣爱好`
	段落	`我喜欢编程和看书。`
	换行	`第一行第二行`

3. 链接和图片标签（4 个）—— 网页的 “桥梁” 和 “装饰”

链接文字：超链接，点文字跳转到指定网址，比如百度一下
：插入图片，src 是图片地址，alt 是图片加载失败时显示的文字，比如
target="_blank"：加在里，让链接在新窗口打开，比如新窗口打开

4. 列表标签（3 个）—— 让内容更整齐

：无序列表，项目前有圆点，配合

<ul><li>苹果li><li>香蕉li>ul>

：有序列表，项目前有数字，用法和 ul 类似

5. 表格标签（4 个）—— 展示数据专用

：表格容器
：表格的行
：表格的单元格

：表头单元格，文字自动加粗居中
例子：html

<table border="1">  <tr><th>姓名th><th>年龄th>tr><tr><td>张三td><td>20td>tr>table>

剩下的标签（比如表单、分区标签）不用急着记，先把这些练熟，后面做网页时慢慢加。

三、完整网页制作步骤：从 0 到 1 做出个人介绍页

核心问题：标签学会了，怎么把它们拼起来做完整网页？
跟着这 5 步走，新手也能做出像样的网页，以 “个人介绍页” 为例：

步骤 1：规划网页结构 —— 先想清楚要放啥

个人介绍页一般有这些部分：

标题（我的个人介绍）
头像（一张照片）
基本信息（姓名、年龄、爱好）
个人简介（一段文字）
联系方式（链接到微信、邮箱）

步骤 2：新建文件 —— 准备 “画布”

在电脑上新建一个 txt 文档，改名为 “index.html”（必须是.html 结尾），用 Notepad++ 打开，这就是写代码的地方。

步骤 3：写基础结构 —— 搭骨架

先把基础标签写上，确保中文不乱码：
html

DOCTYPE html><html><head><meta charset="utf-8"><title>我的个人介绍title>head><body>body>html>

步骤 4：填充内容 —— 用标签搭内容

按规划好的结构，把标签一个个填进去：
html

<body><h1>我的个人介绍h1>  <img src="myphoto.jpg" alt="我的头像" width="200">  <h2>基本信息h2><ul>  <li>姓名：张三li><li>年龄：22岁li><li>爱好：编程、打篮球、看电影li>ul><h2>个人简介h2><p>大家好，我是张三，一名<span strong>零基础学HTML的菜鸟span>。<br>  希望通过学习做出好看的网页，欢迎和我交流！p><h2>联系方式h2><p>微信：<a href="weixin://xxx">扫码加好友a>p>  <p>邮箱：<a href="mailto:zhangsan@xxx.com">zhangsan@xxx.coma>p>  body>

步骤 5：预览和调整 —— 看看效果

保存文件后，双击 “index.html” 用浏览器打开，就能看到网页效果了。如果图片不显示，检查src里的图片路径对不对；如果文字乱码，看看有没有漏写。

四、新手常见问题：这些坑别再踩了！

1. 标签没闭合，网页结构乱套？

比如写了段落没加，浏览器就不知道段落在哪结束，导致后面的内容都乱了。解决方法：写双标签时，先敲开头，马上补结尾，再在中间填内容。

2. 图片不显示，只看到叉号？

90% 是src路径错了。图片和 HTML 文件放同一文件夹，直接写文件名；不在同一文件夹，写相对路径（比如images/photo.jpg）；别用中文文件名，容易出错。小李之前把图片名叫 “我的照片.jpg”，结果一直不显示，改成 “photo.jpg” 就好了。

3. 链接点了没反应？

检查href里的网址对不对，比如少了http://或https://，应该写成。

4. 网页在不同浏览器显示不一样？

HTML 标签在不同浏览器基本兼容，但别用太偏门的标签，比如（滚动文字），有些浏览器不支持。尽量用标准标签，安全又稳定。

最后说几句实在的

学 HTML 就像学搭积木，标签是积木块，网页是成品。刚开始不用追求记住所有标签，用到哪个查哪个，多写几个网页自然就熟了。兔子哥刚开始学的时候，连标签的src和alt都记混，做了三个网页后，闭着眼都能写出来 —— 熟能生巧，真的没错。
别害怕代码写错，浏览器就是你的 “试错神器”，写完就预览，有错就改，改着改着就有感觉了。按今天的步骤做一个个人介绍页，做好后发给朋友看看，那种成就感能让你更有动力学下去。
记住，做网页最重要的是 “动手做”，光看教程不动手，永远停留在 “我好像会了” 的阶段。拿起编辑器，从第一个标签开始，你会发现自己真的能做出属于自己的网页！

标签：从零开始歪歪扭扭