是不是刚学 HTML 就被各种标签搞晕了？ 到底有啥区别，记了又忘；想插入图片用标签，结果要么不显示，要么页面乱套；跟着教程写文字，不知道用

还是，文字总挤成一团；看文字教程太抽象，不如视频里手把手操作来得明白？别着急，今天兔子哥就结合零基础标签用法实操视频，带大家把常用 HTML 标签吃透，从基础结构到文本、媒体标签，每个用法都有视频里的实操演示，哪怕你是纯小白，跟着练也能学会，一起往下看吧！
其实啊，HTML 标签就像积木的零件，每个标签有自己的 “脾气” 和用法，视频教程的好处就是能直观看到操作过程，比死记硬背强多了。新手学标签别贪多，先把核心的 20 个学会，足够做出简单网页了。

一、基础结构标签：网页的 “骨架”，视频里第一步就讲

做网页先搭骨架，这些标签是所有网页的基础，视频里老师开机第一件事就是写这些。

1. 必学的 4 个结构标签

• ：所有 HTML 代码都得放在这个标签里，就像房子的外墙，把所有东西包起来；
• ：放网页的 “幕后信息”，比如标题、编码，不在页面上显示内容；
• ：写在里，是网页的标题，显示在浏览器标签栏，比如 “我的第一个网页”；
• ：网页的 “舞台”，所有要显示的内容 —— 文字、图片、按钮，都得放这里。

视频里会演示：新建 HTML 文件后，输入 “!” 再按 Tab 键，这些标签会自动生成，老师会用不同颜色标出来，告诉你哪个是头哪个是身体，超直观。

2. 为什么结构标签不能少？

有新手跳过这些标签直接写内容，结果页面错乱得没法看。视频里做过对比：没有标签，浏览器可能不识别 HTML 文件；没有里的，中文会变成乱码。就像盖房子得先打地基，结构标签就是网页的地基，千万别省。

结构标签	位置	作用	视频里的实操重点
	最外层	定义 HTML 文档	所有代码必须包裹在内，视频里标红强调
	内	存放元数据	不显示内容，放标题和编码设置
	内	网页标题	演示修改标题后，浏览器标签栏的变化
	内	存放可见内容	所有文字图片放这里，视频里用箭头标注

---

二、文本标签：让文字 “站好队”，视频里反复练的基础

网页里文字最多，这些标签能让文字排版整齐，视频里光文本标签就讲了两节课。

1. 标题和段落标签

• 到
  ：标题标签，h1 最大最粗，h6 最小，用来分标题层级。视频里会演示：一篇文章的大标题用 h1，小节标题用 h2，层级分明；

• ：段落标签，把文字分成一段一段，自动换行，比用回车键换行规范多了。视频里对比过：用
  的文字段落间距均匀，不用的话文字挤成一团。

2. 文字样式标签

• ：加粗文字，比单纯的标签更有 “语义”，告诉浏览器这是重点内容；
• ：斜体文字，强调内容，视频里说和的区别是更注重语义；
• 
：换行标签，单标签不用闭合，在段落里强制换行，比如写诗的时候用。

新手常问：“

和
都能换行，有啥区别？” 视频里老师演示过：

会自动加段落间距，
只是单纯换行，间距不变。比如写文章用

分段落，在段落内换行用
。

---

三、媒体标签：插入图片和链接，视频里最容易出错的地方

想让网页有图有链接，就得学这些标签，视频里解决了超多 “图片不显示” 的问题。

1. 图片标签

这是新手最容易踩坑的标签，视频里特意强调三个关键点：

• src属性：必须写，填图片路径，比如src="pic.jpg"，路径错了图片就裂了；
• alt属性：图片加载失败时显示的文字，比如，还能帮搜索引擎识别图片；
• 尺寸调整：用width和height属性，比如width="300px"，视频里说别只改一个，不然图片会变形。

视频里的小技巧：图片和 HTML 文件放同一个文件夹，直接写文件名；放子文件夹里，路径要加文件夹名，比如src="images/pic.jpg"。

2. 链接标签

想让文字或图片能点击跳转，就用这个标签，视频里实操步骤：

• 基本用法：去百度，href填跳转地址；
• 跳转到本地页面：下一页，填本地 HTML 文件名；
• 新窗口打开：加target="_blank"，比如新窗口打开。

新手常犯的错：href后面漏写=，或者地址写错，视频里教用 “复制粘贴地址” 避免手误。

---

四、列表和表格标签：让内容更整齐，视频里做导航和数据的神器

列表能做导航，表格能展示数据，视频里用这两个标签做了很多实用案例。

1. 列表标签

• 无序列表
  +
：每个项前面有圆点，适合做导航菜单，视频里演示去掉圆点的方法；
• 有序列表
  +
：每个项前面有数字，适合排步骤，比如教程步骤；
• 定义列表
  +
  +
  ：解释说明，比如术语解释，视频里用词典案例演示。

2. 表格标签

做课程表、成绩单超方便，视频里的核心结构：

• ：表格容器；
• ：表格行；
• ：表格单元格；
• ：表头单元格，文字会加粗居中。

视频里的实操：先写，再嵌套，每行里嵌套，就像画格子一样，一行一行填内容。

---

五、表单标签：做登录和注册框，视频里交互的基础

想让用户输入信息，就得学表单标签，视频里做了完整的登录表单案例。

1. 表单容器

所有表单元素都得放这里面，视频里说要加action和method属性，新手先照写：

。

2. 输入框标签

类型超多，视频里重点讲这几个：

• type="text"：单行文本框，比如用户名输入；
• type="password"：密码框，输入的文字会变圆点；
• type="submit"：提交按钮，点了会提交表单；
• type="checkbox"：复选框，能选多个，比如爱好选择；
• type="radio"：单选按钮，只能选一个，视频里强调name属性要相同才会互斥。

---

六、自问自答：视频里新手最常问的标签问题

问：标签名大小写有关系吗？比如和？

答：HTML 不严格区分大小写，但视频里老师都用小写，说这是规范，不容易出错，而且和 CSS、JS 配合时更统一。

问：为什么有的标签要闭合，有的不用？比如

要，
不用？

答：视频里说标签分 “双标签” 和 “单标签”，内容需要包裹的用双标签（比如

包文字），不需要包裹内容的用单标签（比如
只是换行命令）。

问：学了这么多标签，怎么记住哪个是哪个？

答：视频里老师的方法是 “多用多练”，每次写网页都刻意用几个标签，用熟了自然记住。还可以把常用标签做成小卡片，贴在屏幕旁，忘了就看一眼。

兔子哥的小建议

学标签最好的方法是 “边看视频边动手”，老师演示一个标签，你就跟着敲一遍，改改属性看效果。比如学标签，故意写错路径看看什么效果，再改对，印象会特别深。
别一开始就追求学完所有标签，先把结构、文本、图片、链接这几个核心的练熟，做出一个有文字、有图片、有链接的简单网页，成就感会激励你继续学。视频里的案例可以暂停，一步步跟着做，遇到问题回头看老师怎么操作的，比自己瞎琢磨快多了。
其实 HTML 标签不难，就像学说话先学常用词，常用标签就那么几十个，用多了就像条件反射一样。重点是理解每个标签的 “作用”，而不是死记硬背，结合视频里的实操演示，你会发现标签用法其实很直观。希望你能跟着实操视频多练，早日能熟练用标签搭出自己的网页！

标签： 浏览器 零基础