零基础学 HTML 的朋友是不是总遇到这些情况？看着别人写的网页代码满屏标签，不知道从哪下手；自己写的文字总是堆在一起，不会换行分段；好不容易加了图片，要么不显示要么大小乱套。其实啊，HTML 没那么难，它就像网页的 “骨架”，用对标签就能搭出整齐的页面。今天兔子哥就从基础标签讲到网页布局，带大家零基础入门 HTML，新手常问的 “标签怎么记”“布局怎么排” 这些问题，咱们一个个说清楚，还有粉丝的真实学习经历，一起往下看吧！

先搞懂：HTML 到底是啥？新手别被 “代码” 吓到

很多人一听 “HTML” 就觉得是复杂的编程，其实它全称是 “超文本标记语言”，说白了就是用标签给内容做标记，告诉浏览器 “这是标题”“这是段落”“这是图片”。比如你写一篇文章，用

标标题，

标段落，浏览器就知道该怎么显示，就这么简单。
有个粉丝刚开始学的时候，把 HTML 和编程混为一谈，紧张得不行。后来发现，HTML 连计算都不用，就是写标签套内容，练了两天就敢自己写简单页面了。所以啊，新手别被 “代码” 两个字吓到，HTML 是网页入门最容易的一步，就像学写字先学笔画一样。

基础标签入门：这 10 个核心标签，先记牢再练熟

HTML 的核心就是标签，就像盖房子的砖瓦，先把常用的学会，搭简单页面完全够用。兔子哥整理了新手必学的 10 个标签，附用法和例子：

标签	作用说明	代码示例	新手易错点
-	标题标签，h1 最大 h6 最小	我的第一个网页	忘记闭合标签，少写
	段落标签，自动换行分段	这是一段文字	用多个 代替 分段
	强制换行	第一行 第二行	加了闭合标签（不需要）
	插入图片		src 路径写错导致图片不显示
	超链接，跳转到其他页面	跳转	href 没写全路径跳不过去
	块级容器，用来分组布局	这是一个区块	忘记闭合，导致后面布局混乱
	行内容器，用来修饰文字	高亮文字	和 div 乱用，分不清块级和行内
	无序列表，带圆点的列表	项目1	忘记嵌套， 没放在 里
	有序列表，带数字的列表	步骤1	和无序列表标签记混
	表格标签，用来做表格	单元格	行列嵌套错，表格变形

逐个拆标签：怎么用？为什么这么用？

挑几个最常用的标签详细说说，每个标签的用法、效果和避坑点都讲清楚：

1. 标题和段落：让文字有层次

到

是标题标签，h1 最大最醒目，适合网页主标题；h2 其次，适合小标题。比如写一篇文章，结构可以是：
plaintext

我的旅行日记
第一天：出发去海边
早上8点的火车，阳光特别好...
第二天：沙滩散步
海边的风很大，沙子软软的...

浏览器会自动给标题加间距，段落之间也会有空隙，比纯文字堆在一起清爽多了。新手常犯的错是用 h1 当普通文字加粗，其实标题标签不光是样式，还影响网页的 “语义”，告诉搜索引擎这是重要内容，所以别乱用。

2. 图片标签：让网页有 “颜值”

标签能插入图片，核心是src属性写对图片路径。比如图片和 HTML 文件在同一个文件夹，就直接写文件名；如果在 “images” 文件夹里，就写。
有个粉丝图片总不显示，后来发现是文件名带了空格，比如 “风景 1.jpg”，浏览器识别不了，改成 “fengjing1.jpg” 就好了。还有啊，加个alt属性很重要，，图片加载失败时会显示文字，对新手很友好。

3. 超链接：让网页 “连” 起来

标签能做链接，点一下跳转到其他页面或网站。href后面写目标地址，比如跳转到百度就写去百度；跳转到自己的页面就写文件名关于我。
想在新窗口打开链接？加个target="_blank"就行，比如新窗口打开百度。新手常忘写http://或https://，导致链接失效，记得外部网站一定要加！

网页布局基础：用 div 和 span 搭框架

学会单个标签后，就得学怎么把它们组合起来布局了，div和span是布局的 “神器”。

• div 是块级容器：独自占一行，适合把网页分成大区块，比如头部、内容区、底部。比如：
  plaintext

  这是头部这是内容区这是底部

  
  浏览器会让每个 div 单独占一行，自动分开，不用手动加换行。
  
• span 是行内容器：和其他内容在同一行，适合修饰文字，比如给段落里的部分文字加粗、变色（后面学 CSS 会用到）。比如：
  plaintext

  我喜欢蓝色和绿色的花

  
  “蓝色” 和 “绿色” 会和前后文字在同一行，不会换行。
  

有个粉丝刚开始分不清 div 和 span，把所有内容都用 div 包起来，结果页面全是换行，显得很松散。后来知道了 div 做大区块，span 做行内修饰，布局一下子清爽了。

实战小案例：写一个简单的个人介绍页

光说不练假把式，咱们用学过的标签做个个人介绍页，步骤拆解：

步骤 1：搭基本结构

每个 HTML 文件都得有基本结构，就像写信要有开头结尾：
plaintext

告诉浏览器这是 HTML5 文件，head里放标题和设置，body里放看得见的内容。

步骤 2：加标题和个人信息

用 h1 做页面标题，p 标签写介绍，ul 做爱好列表：
plaintext

你好，我是小明
一名喜欢编程的大学生，正在学HTML和CSS。
我的爱好
看电影
打篮球
学做网页

步骤 3：加图片和链接

插入一张照片，加个跳转到学校官网的链接：
plaintext

我的照片：
我的学校：XX大学官网

步骤 4：用 div 分区块

把内容用 div 包起来，区分头部、内容和底部：
plaintext

你好，我是小明
一名喜欢编程的大学生...
联系方式：xiaoming@example.com

这样结构更清晰，后面学 CSS 美化时也方便。

新手避坑指南：这些错误别再犯了！

整理了粉丝反馈最多的错误，新手注意避开：

• 标签没闭合：比如写了

  标题

  忘了加，会导致后面内容全变成标题样式。养成 “写开标签就补闭合标签” 的习惯，比如先写
  ，再在中间填内容。
• 路径写错：图片、链接不显示，80% 是路径问题。建议把图片放 “images” 文件夹，HTML 文件和文件夹放同一级，路径写images/图片名.jpg，不容易错。
• 语义混乱：用 h1 当普通文字，用 div 包一行文字。其实标签要 “见名知意”，标题用 h 系列，段落用 p，列表用 ul/ol，这样不仅布局整齐，对后面学 SEO 也有好处。
• 乱加换行：觉得内容挤就加一堆
，其实用 p 标签分段、用 div 分区更规范，页面也更易维护。

粉丝学习心得：从 “不会” 到 “能写页面” 的小技巧

分享两个粉丝的学习技巧，新手可以参考：

• 小张：“我把常用标签抄在卡片上，正面写标签，背面写用法，没事就翻一翻，一周就记熟了。每天写一个小页面，比如日记、书单，练得多了就顺了。”
• 小李：“刚开始图片总不显示，后来发现是文件名大小写错了，比如图片叫‘Pic.jpg’，我写成‘pic.jpg’，电脑区分大小写的！新手一定要注意文件名和路径的大小写。”

最后说点个人心得吧。HTML 入门不难，难的是刚开始的 “陌生感”，多写几个小页面就好了。标签不用死记，用得多了自然就记住，重点是理解每个标签的 “语义”—— 它代表什么内容，该用在什么地方。从简单的文字、图片开始，慢慢用 div 布局，每完成一个小页面就给自己点鼓励。兔子哥当年学 HTML，第一个页面就只是几个标题和段落，现在不也能写复杂页面了？按这个方法坚持练，你会发现 HTML 真的很有趣，看到自己写的页面在浏览器里显示出来，那种成就感，谁学谁知道！

标签： 混为一谈 浏览器