伦斯特每次带新人，我一般会先问一个问题：你觉得HTML难吗？大多数人会说“不难，就是些标签嘛”。但真让他们写一个页面出来，十个里有八个会把结构写得乱七八糟，div套div，h3当h2用，图片裂了也不知道怎么处理。HTML标签这东西，看着简单，但它是整个Web页面的骨架，骨架歪了，后面CSS和JS再牛也白搭。
这篇东西我结合自己这些年写页面、带项目的经验，把HTML里最基础也最常用的标签用法重新捋一遍。不搞那种一章一章的官方文档翻译，而是按“你真正写页面时会用到什么”的顺序来讲。内容覆盖文档骨架、文本排版、媒体表单、表格语义化，最后附带一个完整的个人介绍页实战和一个高频问题排查表。不管你是刚入门的新手，还是写了一两年想补基础的老手，这篇都值得收藏着慢慢看。
1. 标签的底层逻辑：先搞清楚HTML的“骨架”
很多新手学HTML最大的问题，是上来就背标签名，背完就忘。根源在于没理解标签的本质。HTML标签其实就是在给内容做“标记”，告诉浏览器“这段是标题、那段是图片、这个是输入框”。理解了这一点，你就不需要死记硬背，而是遇到需求去想“这里应该用哪个标签来标记”。
1.1 双标签与单标签：90%的人没搞清楚的分类
HTML标签从写法上分两类：双标签和单标签。双标签有开始和结束，比如<p>这是段落</p>，结束标签多了个斜杠。这类标签内部可以装内容，也可以嵌套其他标签。绝大多数标签都是双标签，比如<div>、<span>、<h1>、<a>、<table>。
单标签也叫自闭合标签，写法是<br>或者<br/>，没有结束标签，因为它本身不包裹内容，只代表一个独立的元素节点。常见的单标签有：<br>换行、<hr>水平线、<img>图片、<input>输入框、<meta>元信息。
新手最容易犯的错是把<img>写成<img></img>，虽然浏览器能容忍，但这不合规范。我这里有个简单的判断方法：你想一下这个标签是“容器”还是“内容本身”。容器类（能往里面塞东西的）就是双标签，内容本身（比如一张图、一个换行）就是单标签。
1.2 文档骨架：每个页面都逃不过的固定结构
任何一个标准HTML页面，开头都会有一段固定的结构。你在网上看到的那些<!doctype html>开头的神秘代码，就是在声明“这是一个HTML5文档”。
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>
这段结构里，<html>是整个页面的根元素，lang="zh-cn"告诉浏览器页面主语言是中文，这对屏幕阅读器和搜索引擎都很重要。<head>区域放的是“关于页面本身的信息”，比如字符编码、视口设置、标题，这些内容不会直接显示在页面上。<body>区域放的才是用户真正能看到的全部内容。
我见过不少人写页面从来不管<head>里的内容，直接<body>开写。短期看浏览器也能渲染，但会带来两个隐患：一是字符编码没声明，中文可能出现乱码；二是没有viewport设置，手机端打开页面会非常小。所以骨架这部分，我建议直接用编辑器里的快捷生成（比如VS Code输入!再按Tab），把标准结构先拉出来再写内容，别自己手敲还敲漏了。
1.3 为什么<meta>总是被忽略却又那么重要
热搜词里很多人搜“<meta>是什么标签”，这恰恰说明它是最容易被忽视、但又极其关键的一类标签。<meta>位于<head>内部，用单标签写法，通过不同的属性组合来“描述页面”。
最常用的几个：
html复制<meta charset="utf-8"> <!-- 字符编码，防止中文乱码 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- 移动端适配 -->
<meta name="description" content="页面描述"> <!-- 搜索引擎搜索结果里显示的文字 -->
<meta name="keywords" content="关键词1,关键词2"> <!-- 关键词，现在搜索引擎权重很低了 -->
其中viewport这个设置，是移动端适配的命门。没有它，手机打开PC页面会默认按980px宽度渲染，然后整体缩小，用户要不停放大才能看清内容。加了这个meta，页面宽度才会跟随设备宽度。现在做页面，只要考虑移动端兼容，这个meta基本是必加的。
description对SEO还有一定价值，搜索引擎在结果列表里展示的摘要文字，很大概率会取自这里。所以别空着，认真写一句能概括页面内容的话，对自然搜索流量是有正向作用的。
需要模型API调用？ 免费领10W Token，多模型网关一键接入 Claude、DeepSeek 等主流模型。
2. 文本与排版标签：页面内容的“词汇表”
页面里80%以上的内容都是文本。文本标签用得好不好，直接决定页面的可读性和可维护性。这块我按标题、段落、链接、列表、无语义容器来拆开讲。
2.1 标题与段落：别把h1当“放大加粗”
HTML提供了六级标题，从<h1>到<h6>，重要性逐级递减。很多人以为标题标签的作用就是“让字变大”，于是h1、h2一顿乱用，效果出来了但语义全乱了。
正确的做法是：<h1>放页面唯一的主标题（整篇内容的大主题），<h2>放主要章节，<h3>放章节下面的子标题，以此类推。搜索引擎和屏幕阅读器会依据标题层级来理解页面结构。如果一上来就<h4>、<h5>，或者页面里同时有好几个h1，对SEO都不太友好。
段落标签<p>是另一个高频标签。这里有个细节：多个<p>之间默认有垂直间距，如果发现段落之间空隙太大，别用一堆<br>去凑，该调CSS的margin就调CSS。
代码示例：
html复制<h1>HTML标签学习笔记</h1>
<p>这是一段说明文字，讲的是HTML标签的基础用法。</p>
<h2>一、文本标签</h2>
<p>文本标签负责承载页面上的文字内容。</p>
<h3>1.1 标题与段落</h3>
<p>使用h1到h6表示不同层级的标题。</p>
<br>换行和<hr>分隔线这两个单标签也提一嘴。<br>在写诗、写地址这类需要强制换行的场景有用，但注意它只是“换行”，不是“另起一个段落”。如果是为了制造间距而狂用<br>，那和用<br>调间距一样，都是反面教材，该用CSS就上CSS。<hr>默认生成一条横线，表示“前后内容主题切换”的语义分隔。
2.2 链接与列表：<a>标签和它的兄弟们
链接是HTML里“连接万物”的核心标签。基本写法就一个：
html复制<a href="https://example.com" target="_blank" rel="noopener">点击访问</a>
href是跳转目标，可以是外部网址、站内路径、锚点（#id）、还可以是mailto:xxx@xx.com邮件协议。target="_blank"表示在新标签页打开，这个属性很常用，但有个安全细节容易被忽略：跨域打开新标签页时，别忘了加rel="noopener"，防止新页面通过window.opener反向操作原页面，这是基础的安全习惯。
列表标签分三类：无序列表<ul>、有序列表<ol>、自定义列表<dl>。前端开发里ul是绝对主力，导航栏、新闻列表、功能清单基本都用它。ol适合“步骤教程”“排行榜”这类有顺序的场景。dl稍微冷门一点，但做“名词释义”“功能对比”这种结构很合适。
html复制<ul>
<li>苹果</li>
<li>香蕉</li>
</ul>
<ol>
<li>第一步：打开编辑器</li>
<li>第二步：新建HTML文件</li>
</ol>
<dl>
<dt>HTML</dt>
<dd>超文本标记语言，是网页的结构基础。</dd>
</dl>
新手容易踩的坑是用ul做着做着又想保留顺序，其实换个ol就行，没必要自己加序号或图标。浏览器的默认样式本来就区分了无序列表的点点和有序列表的数字，合理使用能省不少事。
2.3 div与span：无意义标签的“大用处”
<div>和<span>是两个没有任何语义的标签，但它们的出场率可能是所有标签里最高的。div是块级元素，默认占满整行；span是行内元素，只占自身内容的宽度，不会换行。写页面的时候，div用来划分页面的大区块，span用来包裹一段文字中的某几个字，方便单独调样式。
一个常见例子：
html复制<div class="card">
<h2>产品名称</h2>
<p>价格：<span class="price">¥199</span></p>
</div>
这里span包住了价格部分，CSS里就可以单独把价格标红、加大。要记住：div和span纯粹是“容器”，它们本身没有任何语义和样式，所有视觉表现都依赖class配合CSS完成。这就是为什么框架（比如Bootstrap、Tailwind）大量使用div嵌套的原因。
但也别走另一个极端，把整个页面写成一堆div套div。能用语义化标签表达的内容，优先用语义化标签，div只做纯粹的布局容器。
3. 媒体与表单标签：让页面“动”起来
一个纯文字的网页肯定满足不了现代网站的要求。这一节讲图片、表单、输入框这些让页面真正“可用”的标签。
3.1 img图片：加载失败也能体面收场
<img>标签负责在页面插入图片，它是个典型的单标签，核心属性有：src（图片来源）、alt（替代文字）、width/height（宽高）。
html复制<img src="images/logo.png" alt="公司Logo" width="200" height="80">
很多人会忽略alt，或者觉得“图片没加载出来才会显示，无所谓”，这个思路真得改改。alt对SEO有正向作用，搜索引擎靠它理解图片内容；对无障碍访问也重要，屏幕阅读器会读出alt文字，帮助视障用户理解页面。更重要的是，图片加载失败时alt文字会直接显示出来，至少用户知道这个位置本该是什么。
还有个常见场景是“图片裂了”——src路径写错了，或者图片格式浏览器不支持。这里有个实用兜底方案，可以在<img>标签上绑定一个onerror事件，图片加载失败时换一张备用的占位图：
html复制<img src="images/photo.jpg" alt="活动照片" onerror="this.src='images/placeholder.png';">
说到图片格式，Web上最常用的有JPG（照片类）、PNG（需要透明背景的图）、GIF（动图）、SVG（矢量图，放大不失真，适合Logo和图标）、WebP（Google推出的高压缩格式，现在主流浏览器都支持了）。做网页图片，我一般优先WebP或SVG，容量小、加载快。
3.2 input与表单：收集用户信息的核心组合
表单是网页和用户交互的最主要方式。最基础的组件就是<input>，但同一个input，通过type属性变化，能变身成文本框、密码框、邮箱输入框、单选按钮、复选框、提交按钮等等。
html复制<form action="/submit" method="post">
<input type="text" name="username" placeholder="请输入用户名">
<input type="password" name="password" placeholder="请输入密码">
<input type="email" name="email" placeholder="请输入邮箱">
<input type="radio" name="gender" value="male"> 男
<input type="radio" name="gender" value="female"> 女
<input type="checkbox" name="hobby" value="coding"> 编程
<input type="file" name="avatar"> 上传头像
<input type="submit" value="提交">
</form>
这里有几个要点。name属性是表单提交时传给后端的字段名，没写name的输入框，提交时值不会被发送。placeholder是输入框里的灰色提示文字，用户体验利器。radio单选按钮要生效，同组的name必须一致。submit类型的input会把整个表单打包提交。
<form>本身的action是提交地址，method是请求方式。搜索场景一般用get（参数拼在URL里），数据修改、密码登录这类用post（参数在请求体中）。更多类型的input包括number数字输入、date日期选择、color颜色选择器等，这些HTML5新增的类型在移动端会唤醒对应的系统键盘，比如type="email"在手机上弹的是带@的键盘，能减少用户输入成本。
3.3 label标签：提升表单可用性的关键细节
热搜词里有“熟悉include标签的用法”“label标签打印”，说明大家确实在日常使用中遇到了标签关联的问题。这里我重点讲前端场景下的<label>。
<label>标签的作用是给表单控件定义“文字说明标签”，它和<input>的关联有两种写法：
html复制<!-- 写法一：用for属性与id关联 -->
<label for="username">用户名</label>
<input type="text" id="username" name="username">
<!-- 写法二：label包裹input -->
<label>
<input type="checkbox" name="agree"> 我已阅读并同意协议
</label>
写法一是最推荐的方式，for的值必须和input的id一致。这么做的核心价值是：点击“用户名”这几个字时，输入框会自动获得焦点。特别是复选框和单选项，文字说明一般都比选择框本身大，如果不关联，用户必须精准点到那个小框框才能选中，体验很差。关联之后，点文字就能切换状态，操作面积大了好几倍，这在移动端尤其重要。
顺带提一句，热搜词里的“label标签打印”属于物联网设备标签或物流打印场景，和HTML的<label>标签不是一回事，搜索的时候注意区分上下文，别混了。
4. 表格与语义化标签：从“能用”到“好用”
基础标签用利索了，页面是能写出来了。但想要让代码结构清晰、好维护、对搜索引擎友好，表格和语义化这些进阶用法必须跟上。
4.1 table表格：别再用来做页面布局了
早年间的网页是用<table>来布局的，现在这么干的人已经很少了，但表格本身在展示数据这块依然是无可替代的。
html复制<table border="1">
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>城市</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>25</td>
<td>北京</td>
</tr>
<tr>
<td>李四</td>
<td>30</td>
<td>上海</td>
</tr>
</tbody>
</table>
表格的完整结构一般分三块：<thead>表头、<tbody>表格主体、<tfoot>表尾（统计信息那一行）。表头单元格用<th>，内容单元格用<td>。<tr>是行，<td>是列。
合并单元格这个需求也常碰到。colspan是横向合并（跨列），rowspan是纵向合并（跨行），热搜里有“colspan标签是什么”，其实就是给<td>用的属性：
html复制<td colspan="2">合并两列</td>
<td rowspan="2">合并两行</td>
比如做课程表时，上午第一、二节课合并成一个单元格，就用colspan="2"。合并时要记得：合并后该行少写一个<td>（因为被合并的单元格占了位置），不然表格会多出一列。
现在的页面布局基本全交给div+CSS的Flexbox或Grid，表格只负责“展示二维数据”。做月报、账单、对比表、日程表这些场景，用它绝对比用div模拟快得多，也更便于屏幕阅读器解析。
4.2 语义化标签：对浏览器和SEO都友好
HTML5推出一批语义化标签，本质是把“这个区块是什么”传达得更明确。常见的几个：<header>页头、<nav>导航、<main>主体内容、<article>文章、<section>章节、<aside>侧边栏、<footer>页脚。
html复制<header>
<h1>我的博客</h1>
<nav>
<a href="/">首页</a>
<a href="/about">关于</a>
</nav>
</header>
<main>
<article>
<h2>文章标题</h2>
<p>正文内容……</p>
</article>
<aside>
<p>侧边栏：热门文章推荐</p>
</aside>
</main>
<footer>
<p>版权信息</p>
</footer>
这些标签在浏览器里的视觉效果和div没有区别，真正的作用在于语义表达。搜索引擎爬虫能更准确地理解页面结构，哪些是导航、哪些是正文、哪些是版权信息，这对SEO都有隐性帮助。屏幕阅读器也会根据这些标签提示用户跳转到不同区域。
实际开发中的布局原则是“优先语义化标签，没有合适语义时再用div”。比如侧边栏用<aside>，一组导航链接用<nav>，一篇文章用<article>。如果只是单纯为了布局去包一层，那用div没问题。
5. 实战：用基础标签搭一个个人介绍页
讲再多理论，不如动手写一个。下面我从零搭一个简单的个人介绍页，把所有常用标签串起来。这也是我建议新手练习的方式：别去抄复杂网站源码，就用自己的信息写一个页面，把标签都过一遍，比看十篇教程管用。
5.1 从零搭建：页面结构设计
先想清楚这个页面要有哪些区块：顶部导航（站名+链接）、个人简介（头像+文字+技能列表）、作品展示（表格列出项目）、底部联系方式（表单）。
按这个结构，页面骨架就是：
code复制header（标题 + nav导航）
main
section#about（个人简介 + 图片）
section#skills（技能列表 ul）
section#projects（项目表格 table）
section#contact（联系表单 form）
footer（版权信息）
5.2 写代码：把标签用起来
以下是一份完整的HTML文件，把前面讲过的头部元信息、文本标签、列表、图片、链接、表格、表单全用上了：
html复制<!doctype html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="个人网站首页">
<title>Sam的首页</title>
</head>
<body>
<header>
<h1>Sam的空间</h1>
<nav>
<a href="#about">关于我</a>
<a href="#skills">技能</a>
<a href="#projects">项目</a>
<a href="#contact">联系</a>
</nav>
</header>
<main>
<section id="about">
<h2>关于我</h2>
<img src="avatar.jpg" alt="Sam的头像" width="120" height="120">
<p>你好，我是Sam，一名喜欢折腾的前端开发者。这个页面是用纯HTML写的，目的是展示基础标签的用法。</p>
</section>
<section id="skills">
<h2>技能清单</h2>
<ul>
<li>HTML / CSS</li>
<li>JavaScript</li>
<li>Vue.js</li>
</ul>
</section>
<section id="projects">
<h2>做过的小项目</h2>
<table>
<thead>
<tr>
<th>项目名</th>
<th>技术栈</th>
<th>说明</th>
</tr>
</thead>
<tbody>
<tr>
<td>个人博客</td>
<td>HTML + CSS + JS</td>
<td>一个简洁的博客页面</td>
</tr>
<tr>
<td>待办清单</td>
<td>Vue</td>
<td>支持增删改查的待办应用</td>
</tr>
</tbody>
</table>
</section>
<section id="contact">
<h2>给我留言</h2>
<form action="/submit" method="post">
<label for="name">称呼</label>
<input type="text" id="name" name="name" placeholder="怎么称呼你">
<label for="email">邮箱</label>
<input type="email" id="email" name="email" placeholder="用于回复">
<label for="message">留言内容</label>
<textarea id="message" name="message" rows="4"></textarea>
<input type="submit" value="发送">
</form>
</section>
</main>
<footer>
<p>版权 © 2024 Sam的空间</p>
</footer>
</body>
</html>
这个页面浏览器打开后，你就能看到锚点导航的效果：点击导航里的“关于我”，页面会滚动到对应section。注意<a href="#about">中的#about必须和<section id="about">的id对应。
textarea是多行文本输入框，适合留言这种场景。表单纯事件点击“发送”后会跳转到action指定的地址，但因为没有后端服务，实际会打开一个无法访问的页面。对这个现象别慌，这说明表单被正确提交了，只是没有接收端而已。
6. 常见问题与排查技巧实录
写HTML最痛苦的不是标签记不住，而是“明明写对了为什么没效果”。下面这些情况都是我实际遇到过、帮别人排查过的，按高频到低频整理出来。
6.1 HTML文件无法预览的几种情况
热搜里有“html文件无法预览”，这个太常见了。第一种是文件扩展名没显示，你把index.txt改成了index.html，但系统只是改了显示名，实际还是txt编码。解决方法是：Windows下打开“文件扩展名”显示，确认扩展名真的是.html。
第二种是编辑器没保存成功，尤其是新手用笔记本修改代码后直接右键预览，内容还是旧的。先Ctrl+S保存，再刷新浏览器，这个顺序不能乱。
第三种是文件路径里有中文或特殊字符。浏览器对URL中的中文会转码，偶发兼容问题，最省事的办法是项目文件夹一律用英文命名。
还有一种情况是HTML文件本身没问题，但打开时自动被某个程序抢占打开方式（比如被WPS表格抢占了）。右键文件，选择“打开方式”，指定为Chrome、Edge、Firefox这类浏览器即可。
6.2 图片不显示，原因可能不在图片本身
图片裂了（显示broken icon）是新手高频问题。排查顺序按概率来：
src路径写错。相对路径要注意当前文件位置。images/a.jpg表示当前文件夹下的images文件夹；../images/a.jpg表示上一级目录的images文件夹。- 图片文件名大小写对不上。很多服务器是区分大小写的，
Logo.jpg和logo.jpg是两个文件，但这个在本地Windows上不一定能暴露出来，部署上线才炸。 - 图片格式问题。浏览器对
avif、webp支持情况不一，老机型浏览器可能显示不出来。 - 跨域限制。图片放在别的服务器上（比如某些图床），对方服务器不允许跨域加载，也会有加载失败的情况。
排查的时候优先打开浏览器的开发者工具（F12），切到Network面板，刷新页面，找到那个加载失败的图片请求，看状态码。404是路径错了，403是服务器拒绝访问，这个信息最直接。
6.3 乱码、间距、默认样式：三个新手高频问题
乱码基本就是<meta charset="utf-8">没写，或者文件保存时用了系统默认的ANSI编码。解决方法是：编辑器右下角把文件编码改成UTF-8，再配合meta声明，双重保险。
间距问题分两类。一类是元素之间意外出现空白，通常是<p>标签默认上下margin、或者两个行内元素之间有换行符造成的间隔。这不是写错了，是浏览器的默认样式。处理办法是通过CSS Reset或Normalize.css统一重置默认样式。
另一类是h1、p这些标签自带边距，导致视觉上对不齐。遇到这类问题，先检查是不是没有引入CSS重置文件。我一般在每个项目开头都写：
css复制* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
这个通用重置能消除大部分“标签自带样式”造成的困扰，算是前端开发的“新手护身符”。
我个人的习惯是，写页面的时候永远开着开发者工具，选中元素看Computed样式，很多“为什么这个标签多了一块间距”的疑问，一查Computed里的margin、padding值就真相大白了。
7. 一点实操心得
HTML这块的门槛确实不高，我见过最快的初学者，半天就能写一个像模像样的页面。但它同时也是最容易被忽视的“地基”，CSS一复杂、JS一上手，回头发现结构混乱的根源全是标签选得不合适。
我的建议是：每学一个标签，就亲手去写一遍，观察它在浏览器里的默认表现，再改变一下属性看看效果差异。别只看教程，也别只用编辑器里的自动补全，多手敲几遍，记忆才扎实。等标签熟悉得差不多了，再去做语义化、SEO优化这些进阶事，速度会快很多。