HTML基础标签详解：从DOCTYPE到表单的完整指南与避坑手册

我刚接触前端那会儿，在搜索引擎里看到特别有意思的现象：很多人搜索HTML标签的时候，输入出来的往往是那一长串 <!doctype html><html lang="zh-cn"><head><meta charset="utf-8"> 开头的代码。其实这背后的问题基本是同一个——"为什么我复制别人的网页代码，第一行总是长这样？"以及"这一整串东西到底在干嘛？"

这一问就问到了点子上。HTML的所有"基础感"，恰恰就是从这一串固定开头开始的。这篇文章我打算从自己学习和写页面的经验出发，把HTML里最常用、也最容易搞混的基本标签一次性讲清楚，覆盖文本、图片、链接、列表、表格、表单、页面结构这几大核心模块，顺便把新手经常踩的坑——比如图片加载失败、网页文件无法预览、表格合并单元格、返回顶部怎么做——一并带上。如果你是零基础刚入门，或者学了一段时间但总觉得标签用法模模糊糊，这篇文章可以直接当一份带解释的参考手册来用。

1. 一个页面的起点：DOCTYPE、html、head与meta到底在跟浏览器说什么

1.1 每个HTML页面都离不开的骨架代码

先放一份我写页面时的标准起始模板，这也是大多数编辑器输入英文感叹号后回车自动生成的骨架：

html复制<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>页面标题</title>
</head>
<body>
    <!-- 页面的可见内容写在这里 -->
</body>
</html>

一句话解释：<!DOCTYPE html> 告诉浏览器"我这是HTML5文档"，html 是整个页面的根标签，head 区域放的是给浏览器和搜索引擎看的信息，body 区域才是用户真正看得见、摸得着的内容。这个结构说起来简单，但不少新手一开始分不清head和body的区别，结果把大段文字塞进head，页面直接白屏；还有人漏掉DOCTYPE，导致浏览器进入"怪异模式"，写出来的CSS在各浏览器里表现五花八门。我早年被怪异模式坑过不少次，后来养成了习惯：不管什么页面，先把骨架写好再谈别的。

1.2 meta标签：给浏览器和搜索引擎的"身份证"

meta标签不显示在页面上，但它承担着页面编码、屏幕适配、SEO描述等多种职责。这也解释了为什么很多人在搜"<meta>是什么标签"——它看不见摸不着，却在背后影响很多东西。

最常见的meta用法是这一行：

html复制<meta charset="UTF-8">

这行必须放在head尽可能靠前的位置。原因是浏览器读取文档时，如果前几个字节里找不到正确的字符编码声明，中文很可能直接变成乱码。我以前把charset写在title后面，结果页面在部分浏览器下出现乱码，排查了半天才发现是声明位置太靠后了。

还有两个高频meta需要认识：

html复制<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="页面的一句话描述">

viewport是移动端适配的基石。没有它，手机浏览器会默认把网页当桌面版缩小显示，字小到看不清；加了它之后，页面才能按照设备宽度正常排版。description虽然不影响视觉，但搜索引擎经常会把它抓取成搜索结果里的摘要。也就是说，用户要不要点进你的页面，有时就取决于这一句话写得吸不吸引人。

2. 文本排版标签：标题、段落、换行与文本修饰

2.1 h1到h6：六个层级的标题怎么分配

标题标签是很多人写HTML时第一次接触到的"有语义"的标签。h1是最高层级，h6是最低层级，从视觉上看字号依次变小、权重依次降低。但它的意义绝不只是字号大小，而是告诉浏览器和搜索引擎：这部分内容是标题，而且是这个层级的内容。

我一般这样分配：

• 一个页面只写一个h1，通常是页面的主标题，或者logo区域的文字；
• h2用作每个栏目的标题；
• h3用于栏目下面的小节；
• h4到h6往下继续分，但绝大多数页面用不到那么深。

有一个非常典型的错误：为了把某个文案变大或加粗，直接套上h1标签。从效果看确实变大了，但在语义上，这个页面突然出现了十来个"主标题"，对SEO和无障碍阅读器都是灾难。所以记住一句话：选标签先想语义，再谈样式。标题就是标题，样式交给CSS处理。

2.2 段落、换行、分割线：让文字按你的意思排列

段落标签p是文本排版的基本单位。很多新人会问：为什么我在HTML代码里写了回车换行，浏览器里却不换行？因为HTML默认会忽略代码里的连续空白字符。想在浏览器里换行显示，要么用p标签把文字包成段落，要么用br强制换行。这是新手最容易懵的一个点——你明明看到编辑器代码里换行了，浏览器里却挤在一行，其实不是浏览器出了问题，而是HTML的解析规则就是这样。

br适合用在一段文字内部的强制性换行，比如地址、歌词、诗这种段落内部的行；hr用来表示一个主题内容的结束，浏览器会渲染成一条水平分割线。

需要注意，br和hr都不是"容器"标签，没有结束标签的配对问题。br的语义是换行，不是制造间距。如果你只是为了在页面里多留点空白，正确做法是用CSS的margin或padding，而不是连续写七八个br。这个习惯特别重要，因为项目后期改样式时，页面里全是