HTML基础标签详解：从DOCTYPE到表单的完整指南与避坑手册-代码聚汇网

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

HTML标签HTML入门img标签

|难度：普通|阅读约 31 分钟

我刚接触前端那会儿，在搜索引擎里看到特别有意思的现象：很多人搜索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虽然不影响视觉，但搜索引擎经常会把它抓取成搜索结果里的摘要。也就是说，用户要不要点进你的页面，有时就取决于这一句话写得吸不吸引人。

需要模型API调用？免费领10W Token，多模型网关一键接入 Claude、DeepSeek 等主流模型。

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。这个习惯特别重要，因为项目后期改样式时，页面里全是br会导致间距完全失控，一行一行删到你怀疑人生。

2.3 strong、em、del等文本修饰标签：语义大于外观

文本修饰类的标签很容易被当成"样式标签"来记，但实际上它们都带有语义。拿strong和b来说，很多老教程把b当成加粗来教，但HTML5规范里b表示"与上下文无关的粗体文字"，而strong表示"重要的内容"。视觉上看两者都是加粗，但对搜索引擎和读屏软件来说，strong的语义更加明确。

我现在的习惯是：

想强调某段内容，用<strong>；
纯粹为了给某个词换个视觉样式，用CSS的font-weight；
基本上不再使用<b>和<i>。

类似的还有em与i，em表示强调语气，i只是斜体外观；del表示删除的文字；ins表示插入的文字；mark表示高亮标记；sub和sup分别表示下标和上标，比如化学式H₂O、数学公式x²。

还有一个容易被忽略的标签是blockquote，它表示大段引用内容。写文章、写博客时，引用别人的话用这个标签比手动加引号更符合语义。

3. 图片与链接：img和a的高频问题与加载失败排查

3.1 a标签：链接的href、target和"新标签页"这件事

链接是整个互联网的基础，a标签的常用写法大家都见过：

html复制<a href="https://example.com" target="_blank" rel="noopener noreferrer">点击访问</a>

href是"链接去哪里"的地址。除了常见的https和http外，href还可以写相对路径，比如./about.html表示当前目录下的about页面；也可以写成锚点#section，点击后页面滚动到对应id的位置；还可以写mailto:user@example.com来唤起邮件客户端。这些写法在不同场景下各有用途。

target属性控制页面在哪里打开。_self是默认值，在当前页面跳转；_blank在新标签页或新窗口打开。为什么很多人搜"谷歌浏览器新标签页"？一是因为每次点击链接都开新页，标签页多到崩溃；二是因为浏览器新标签页被某些插件和主页设置改成了其他网址，这种情况基本不是网页代码的问题，而是浏览器自身的主页、搜索引擎设置或扩展程序被改了。在代码层面，只要记住target="_blank"加rel="noopener noreferrer"这个组合就行——前者防止新页面通过window.opener反向控制原页面，后者是安全和性能的双重保障。

3.2 img标签：src、alt、width/height、loading

img标签是最常用的图片标签，用法如下：

html复制<img src="images/photo.jpg" alt="照片描述文字" width="400" height="300" loading="lazy">

src是图片地址，可以是相对路径、绝对路径，也可以是完整的URL；
alt是图片加载失败或读屏软件无法显示图片时展示的文字；
width和height控制显示尺寸，建议写，因为浏览器会根据宽高预留空间，防止图片加载时页面内容跳动；
loading="lazy"表示懒加载，页面滚动到图片附近才开始加载，很适合长页面，能显著减少初始流量。

要特别重视alt。它不仅仅是为了"图片挂了显示文字"，更是无障碍访问的关键：视障用户依赖读屏软件把alt读出来，才能知道图片内容是什么。哪怕没有实际内容，也要用alt=""明确表示"装饰性图片，不需要朗读"。

3.3 图片加载失败的全链路排查

"img标签图片加载失败的"是搜索热词，说明这是一个高频问题。我每次遇到图片不显示，都会按下面这个顺序排查：

路径对不对。相对路径是从当前HTML文件出发找图片，./表示当前目录，../表示上一级目录；绝对路径可以写/images/photo.jpg（站点根目录）或完整的https://地址。最容易出的问题是不确定当前文件在哪一层目录，路径写错一格图片就加载不出来。
文件名大小写对不对。本地Windows文件系统不区分大小写，但部署后很多服务器是Linux，Photo.JPG和photo.jpg是不同文件。本地能显示、上传后挂了，多半是这个问题。
文件本身有没有损坏。可以先把图片地址直接粘到浏览器地址栏打开，能正常显示说明文件没问题，不能显示就要怀疑文件损坏或路径不对。
是否被盗链拦截。有些网站设置了防盗链，只有从允许的来源访问才返回图片，直接引用时浏览器控制台会报403。这种情况没有太好的办法，要么下载到本地，要么换成有授权的图源。
本地文件协议限制。浏览器直接双击打开HTML时走的是file://协议，如果页面引用了本地文件、加载外部模块或者发起fetch请求，浏览器安全策略可能直接阻止。这种情况建议起一个本地静态服务器：python -m http.server或npx serve，用http://localhost访问，问题基本消失。

为了不让一个坏掉的图片影响页面整体观感，可以在img标签上挂onerror事件：

html复制<img src="photo.jpg" alt="照片" onerror="this.onerror=null;this.src='fallback.png';">

this.onerror=null这步很关键，可以防止备用图也加载失败时陷入无限循环。这种"设置兜底图"的思路，在真实项目里非常实用。

4. 列表与表格：ul、ol、table，以及合并单元格的colspan/rowspan

4.1 三类列表：无序、有序、定义

列表标签在网页里无处不在。导航菜单、商品参数、文章目录，底层都是列表结构。

无序列表ul是最常见的，每一项用li包起来：

html复制<ul>
    <li>苹果</li>
    <li>香蕉</li>
    <li>橙子</li>
</ul>

有序列表ol适合有先后顺序的内容，比如操作步骤、排行榜：

html复制<ol>
    <li>第一步：打开编辑器</li>
    <li>第二步：新建HTML文件</li>
    <li>第三步：写入代码</li>
</ol>

定义列表dl由dt（术语名）和dd（术语描述）组成，适合做名词解释、问答列表、产品参数说明。它不像ul和ol那么常用，但碰到"名词+解释"这种结构时，语义比用div硬拼干净得多。

这里有个细节：列表可以嵌套。导航菜单里"父菜单+子菜单"就是典型的ul嵌套li再嵌套ul的结构。写嵌套列表时，ul一定要放在li里面，不能直接放在ul底下，否则结构不合法。

4.2 表格的完整组成结构

表格曾经是网页布局的主力，现在早已被CSS布局取代，但数据展示场景下表格仍然不可替代。一个规范表格应该长这样：

html复制<table>
    <caption>本周销售数据</caption>
    <thead>
        <tr>
            <th>商品</th>
            <th>数量</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>苹果</td>
            <td>3</td>
        </tr>
        <tr>
            <td>香蕉</td>
            <td>5</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>合计</td>
            <td>8</td>
        </tr>
    </tfoot>
</table>

thead放表头，tbody放数据行，tfoot放汇总。浏览器在渲染时会把这三个区域按顺序自动排列，所以你在源码里先写tbody再写tfoot也没问题。th表示"表头单元格"，默认加粗居中；td是普通数据单元格。caption是表格的标题，虽然很少见，但加上之后表格语义更完整。

4.3 colspan与rowspan：合并单元格的实操逻辑

"colspan标签是什么"这个热搜说明很多人卡在了合并单元格上。colspan其实是td或th上的一个属性，不是独立标签，功能是让单元格横向合并跨越多列；rowspan同理，让单元格纵向跨越多行。

我写一个三行三列的课程表示例：

html复制<table border="1">
    <tr>
        <th>时间段</th>
        <th>周一</th>
        <th>周二</th>
    </tr>
    <tr>
        <td>上午</td>
        <td colspan="2">数学（连堂）</td>
    </tr>
    <tr>
        <td>下午</td>
        <td>语文</td>
        <td rowspan="2">体育</td>
    </tr>
    <tr>
        <td>晚上</td>
        <td>自习</td>
    </tr>
</table>

注意第三行和第四行：体育这个单元格设置了rowspan="2"，它占据第三行和第四行的第三列，所以第四行只需要再写两个单元格就够了。如果多写一个，表格就会错位。这个"少写一个单元格"的细节，是所有合并单元格新手最容易翻车的地方。我的经验是：合并前先在纸上画出网格图，标清楚每个单元格跨几行几列，再动手写代码。

另外说一句，虽然表格布局现在很少用了，但有一个领域至今还在用它——HTML邮件。邮件客户端大多不支持div和CSS布局，很多邮件模板依然用表格嵌套来做版式。如果你将来要做邮件组件，这里学的表格基础还能派上大用场。

5. 表单标签：input、label、button这些高频控件的正确姿势

5.1 form与input：GET和POST的直观区别

表单是网页和用户交互的主要入口。登录、注册、搜索、留言全是表单。一个完整表单的基本结构是：

html复制<form action="/search" method="get">
    <input type="text" name="keyword" placeholder="请输入关键词">
    <button type="submit">搜索</button>
</form>

action表示数据提交到哪个地址，method表示用什么方式提交。GET会把参数拼在URL后面，比如/search?keyword=html，适合搜索、筛选这类不敏感的操作；POST把数据放在请求体里，适合登录、注册、支付这类敏感操作。两种方式没有绝对好坏，但选错会出问题：搜索用POST，用户刷新页面时会提示重新提交；密码用GET，密码直接暴露在URL历史记录里。

input是表单里最常见的标签，type不同，控件的形态和验证规则也不同。我把常用的列一下：

type	作用	备注
text	单行文本	默认类型
password	密码输入	输入内容被掩藏
email	邮箱输入	移动端会弹出带@的键盘，自动校验格式
number	数字输入	移动端弹出数字键盘
radio	单选按钮	同name的radio只能选一个
checkbox	复选框	可以多选
file	文件上传	可以选择本地文件
date	日期选择器	现代浏览器自带日历控件
color	颜色选择器	弹出取色器
range	滑块	配合JS实时取值
hidden	隐藏字段	不显示但会随表单提交

input的几个关键属性要分清：name是提交给服务器的字段名，没有name的input不会被提交；value是控件的初始值或提交值；placeholder是输入框内的灰色提示文字；required表示必填；disabled表示禁用；readonly表示只读。disabled和readonly看似差不多，但disabled的字段不参与提交，readonly参与提交，这个区别在实际开发中很常用。

5.2 label与input的绑定：不只是for和id

很多新手不知道label是干嘛的，以为它只是一个普通文本标签。其实label的核心作用是"点击文字也能选中或聚焦控件"。两种写法：

html复制<!-- 第一种：for绑定id -->
<label for="username">用户名</label>
<input type="text" id="username" name="username">

<!-- 第二种：label包裹input -->
<label>
    用户名
    <input type="text" name="username">
</label>

第二种写起来更省事，但在复杂布局里，第一种更灵活。为什么要这么绑定？举个最直观的例子：单选按钮和复选框的可点击区域特别小，鼠标很难点准。绑定了label之后，用户点击"我同意用户协议"这行文字，就能直接勾选复选框。这个细节对提升表单体验特别重要，尤其在移动端，手指点击的精准度远不如鼠标。

5.3 button与select、textarea：容易被忽略的坑

button在表单里承担着提交、重置、普通点击三种角色，通过type区分：

html复制<button type="submit">提交</button>
<button type="reset">重置</button>
<button type="button" onclick="alert('test')">普通按钮</button>

这里有一个全网高频坑：写在form里的button如果不写type，默认就是submit。很多人只是想在表单里放一个"保存草稿"按钮，结果一点击整个页面就刷新了，所有填好的数据全没了。所以只要button放在form内，建议永远显式写上type，除非你确实需要它提交表单。

下拉选择select和textarea也不难：

html复制<select name="city">
    <option value="beijing">北京</option>
    <option value="shanghai">上海</option>
</select>

<textarea name="remark" rows="4" cols="30" placeholder="请输入备注"></textarea>

textarea是一个双标签，内容写在标签之间。select的multiple属性可以让下拉支持多选，但用户体验比较差，实际项目中一般会用checkbox列表或自定义组件替代。

6. 结构容器：div、span与HTML5语义化标签的分工

6.1 div和span：块级与行内的分界

div和span是HTML里最"没个性"的两个标签，自带样式为零，但它们是页面布局的基础容器。div是块级元素，独占一行，默认宽度撑满父容器；span是行内元素，在一行里和周围内容排在一起，宽度由内容决定。

一个常用的类比是：div是集装箱，span是箱子里的一个小格子。集装箱用来划分区域，小格子用来圈出区域内的一段文字或一部分内容。把一段文字整体变成红色时：

html复制<p>今天的<span style="color: red;">分享</span>就到这里</p>

如果这里用div，文字会被强制换行，页面结构就变了。所以记住：区分块级和行内，是选择div还是span的第一原则。

6.2 HTML5语义化标签：header、nav、main、article、aside、footer

HTML5推出了一批语义化结构标签，作用是用标签名字直接表达"这个区域是什么"。我平时写页面骨架是这样的：

html复制<body>
    <header>网站页头，放logo和标题</header>
    <nav>主导航菜单</nav>
    <main>
        <article>
            核心文章内容
        </article>
        <aside>
            侧边栏，放相关推荐或广告
        </aside>
    </main>
    <footer>页脚，放版权信息</footer>
</body>

语义化标签的好处有三个。第一，搜索引擎能更快理解页面结构，哪些是重点内容、哪些是辅助内容；第二，读屏软件能根据标签把网页朗读得更准确，无障碍访问体验会好很多；第三，代码可读性大幅提升，别人接手你的项目时，看一眼标签就知道布局是什么样子。

有人会问：那我是不是以后都用section和article，不用div了？不是。语义化标签只在"内容有对应语义"的时候才使用。如果你只是为了包一个容器、方便写样式，div依然是最合适的选择。一个页面如果全是section和article，反而跟全用div一样没有信息量。

网上关于"tabs标签页"和"Vue3修改tabs标签页样式"的搜索热度很高，这里我多说一句：浏览器里的"标签页"和网页组件里的"标签页"是两码事。网页里的tabs在HTML里其实没有原生标签，它就是一组按钮加一个内容容器，由div、ul、li组合出来，再通过CSS和JavaScript实现切换效果。在Vue、React里，tabs也只是一套现成组件的封装。所以不管用哪种框架，HTML基础结构和语义化思路都绕不开。

7. 新手最容易踩的坑：文件无法预览、font标签、一键返回顶部

7.1 html文件为什么无法预览

"html文件无法预览"也是常见搜索词。这个问题有不同的场景，我分别说一下：

双击.html文件，操作系统默认会用浏览器打开，这是最标准的预览方式。如果双击后打开的是记事本，说明文件关联被改了。右键文件，选择"打开方式"里的浏览器即可。
文件扩展名被隐藏了。有人新建了一个"index.html"，实际文件名是"index.html.txt"，内容显示没问题，但浏览器不把它当网页处理。解决方法是打开系统的"显示文件扩展名"选项，确认文件真实扩展名是.html。
代码编辑器里的预览插件，比如VSCode的Live Server，是边改边刷新的开发工具，不是浏览器本身。如果没装插件，按右键"Open with Live Server"是找不到这个选项的。
页面代码里用了ES Module或者fetch加载本地文件时，可能被浏览器的CORS策略拦截。这种问题不是"预览不了"，而是"预览出来有些功能不生效"。最稳妥的办法是起一个本地静态服务器，用npx serve或python -m http.server，然后用http://localhost:端口号访问页面。

7.2 font标签为什么被淘汰

font标签是HTML老版本里用来设置字体、大小、颜色的标签，写法是这样：

html复制<!-- 老写法，HTML5已废弃 -->
<font size="4" color="red">这段文字大小4、颜色红</font>

现在写的话建议换成CSS：

html复制<span style="font-size: 18px; color: red;">这段文字是红色的</span>

font标签被淘汰的根本原因，是它把"内容"和"样式"混在了一起。HTML负责规定内容的结构和语义，样式应该由CSS负责。如果每一个地方都用font去写死颜色和大小，一旦产品要改成全局换色，就得把整个页面里所有font标签挨个改一遍，这种维护成本在后来的大型项目中完全不可接受。所以对任何标签，都建议先想一想：这个标签表达的是"它是什么"还是"它长什么样"？后者应该交给CSS。

7.3 一键返回顶部的现代写法

"html一键返回顶部算法"这个热搜有点意思。老式做法是用锚点：

html复制<a href="#top">返回顶部</a>
<!-- 页面顶部放一个name="top"或id="top"的锚点 -->

这种写法能用，但体验比较生硬，点击后页面瞬间跳上去，没有平滑过渡。现代做法是CSS和JavaScript组合：

css复制html {
    scroll-behavior: smooth;
}

javascript复制// 点击按钮时
document.getElementById('backTop').addEventListener('click', function () {
    window.scrollTo({ top: 0, behavior: 'smooth' });
});

scroll-behavior: smooth让页面内所有锚点跳转都变得平滑，scrollTo是JavaScript里控制滚动位置的底层方法，behavior: 'smooth'负责平滑过渡。如果想更精细地控制滚动距离感，比如滚动超过一屏才显示返回按钮，还需要一个scroll事件监听来判断显示和隐藏。核心逻辑也就两三个if判断的事，但比"跳锚点"的体验好太多。这里强调一下：这类交互其实已经涉及CSS和JavaScript了，HTML标签只是其中的一个触发容器，比如按钮用<button>就行。

在我实际写页面的过程中，最受益的一个习惯是：每接触一个新标签，先问三个问题——它是什么语义？它是块级还是行内？它在什么场景下最合适？把这三个问题想清楚，基本就掌握了这个标签的用法。HTML的标签数量虽然不少，但日常开发里反复用的也就二十来个，真正把它们理解透彻，比背完所有标签但不懂语义要有效得多。

另外分享一个小经验：刚开始学的时候，尽量不要复制粘贴，把骨架代码一个一个字符敲出来，敲一遍和复制一遍的记忆深度完全不一样。等手熟了，再用编辑器自带的自动生成功能或者各种模板去提效。基础阶段慢一点，后面反而会快很多。