1. HTML 到底在学什么？先把“骨架”这件事想明白
HTML，全称 HyperText Markup Language，超文本标记语言。说人话就是：给网页内容做“结构化标注”的语言。它不是编程语言，没有变量、分支、循环，它的核心工作是告诉浏览器“这里是一个标题、那里是一段正文、这个地方插一张图”。你平时打开的任何网页，本质上都是一份 HTML 文档，浏览器负责把它渲染成可视界面。
我遇到过不少刚开始学前端的朋友，一上来就纠结“我该先学 HTML 还是先学 CSS 还是直接啃 JavaScript”，结果在标签堆里绕了半天，连一个完整的页面都拼不出来。我的建议很直接：先把 HTML 学透，不是让你背标签，而是让你理解“语义化结构”这件事。HTML 决定了页面内容的意义和层级，CSS 管视觉，JavaScript 管交互。地基没夯实，后面全是空中楼阁。
HTML 基础篇适合谁？零基础想入门前端的人，半路出家想补基本功的人，甚至做产品、运营、自媒体想看懂网页代码的人也值得读一遍。它的价值不是让你成为标签背诵机，而是让你建立起“用结构思维看网页”的能力。
2. HTML 的核心机制与开发环境
2.1 标签、元素与属性：HTML 的最小组成单元
HTML 的基本单位是元素，元素由标签包裹内容组成。比如一个段落元素：
<p>这是一个段落</p><p>是开始标签</p>是结束标签- “这是一个段落”是元素内容
标签成对出现是 HTML 最常见的形态，但也有一些自闭合标签不需要结束标签，比如<img>、<br>、<input>。它们本身不包裹文本内容，靠属性描述自身信息。
属性必须写在开始标签中，格式是“属性名="属性值"”。比如图片元素：
<img src="photo.jpg" alt="一张风景照片">src告诉浏览器图片从哪加载，alt是图片加载失败或无障碍场景下显示的替代文本。不要小看alt，它对 SEO 和可访问性都有实际影响，后面我在实操部分会展开讲。
2.2 文档结构：DOCTYPE、html、head、body
一个完整的 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>是文档类型声明，告诉浏览器“我是现代 HTML 文档”，触发现代解析模式。不写它，老浏览器可能用怪异模式解析，布局错得你想哭。<html lang="zh-CN">声明页面主要语言，辅助翻译工具和屏幕阅读器识别内容语言。<head>里放的是页面元信息，用户肉眼看不见，但浏览器、搜索引擎、社交爬虫都要读它。<body>里才是页面真正展示给用户的内容。
我见过不少初学者写代码时把<title>放在<body>里，结果页面标题不生效，浏览器标签页显示文件名。这种小问题排查起来还挺迷茫，根源就是对 head 和 body 的职责划分没概念。
2.3 开发工具怎么选：从记事本到专业编辑器
工欲善其事，必先利其器。HTML 本身是纯文本文件，理论上记事本都能写，但实际开发强烈建议用带语法高亮和代码提示的编辑器。我常用的是 VS Code 加一个 “Live Server” 插件。
Live Server 的作用是起一个本地静态服务器，你保存文件后浏览器自动刷新，不用手动切换窗口按 F5。它的原理很简单：监听文件变化，通过 WebSocket 通知浏览器重新加载页面。写 HTML 基础阶段用这个工具能极大提升反馈速度。
新建一个项目文件夹，在里面创建index.html，右键点击文件选择 “Open with Live Server”，浏览器会打开一个本地地址（通常是http://127.0.0.1:5500），后面所有修改保存后都会实时看到效果。
提示：国内网络环境访问某些 CDN 资源可能不稳定，HTML 基础学习阶段建议把资源下载到本地，用相对路径引用，避免因为网络延迟干扰学习节奏。
3. 常用标签全解析：按使用频率和场景拆开讲
3.1 文本类标签：标题、段落、强调、引用
文本是网页内容的主体，这部分标签的语义化程度最高，也是新手最容易滥用的一类。
标题标签有六个层级：<h1>到<h6>。<h1>通常一个页面只出现一次，是整页内容的最高层级主题，类似于文章大标题；<h2>是章节标题，<h3>是子章节标题，依此类推。搜索引擎爬虫会特别重视标题层级结构，把h1当作用户搜索意图对应内容的最重要信号。
段落标签<p>包裹一段文字，浏览器默认会在段落前后加间距。这里有个新手常犯的错：为了调整行距或段落间距，用<br>硬换行，甚至嵌套多个<br>。正确做法是，一个自然段就用一个<p>标签，段间距交给 CSS 的margin控制。
强调语义有两个标签：
<strong>：表示内容非常重要，默认显示加粗<em>：表示语气上的强调，默认显示斜体
它们在语义上不是“让文字变粗”和“让文字变斜”的视觉效果工具。视觉效果只是浏览器的默认呈现，具体样式后期会被 CSS 完全覆盖。如果只是为了视觉上的粗体或斜体，应该用 CSS 的font-weight和font-style，而不是滥用语义标签。
引文也有标签区分：
<blockquote cite="https://example.com/source"> 长段引用文字 </blockquote><blockquote>用于独立成块的长引用，<q>用于行内短引用。cite属性填写引用来源地址，虽然用户看不见，但对内容溯源有意义的。
3.2 链接与图片：网页互联的基本单元
链接是 HTML 的核心灵魂之一，没有链接就构不成“超文本”。
<a href="https://example.com" target="_blank" rel="noopener noreferrer">访问示例站点</a>href：目标地址，可以是绝对 URL（https://...），也可以是相对路径（./about.htmltarget="_blank"：在新标签页打开rel="noopener noreferrer"：安全属性，防止新页面通过window.opener反向操作当前页面，同时隐藏来源信息
target="_blank"如果不搭配rel="noopener noreferrer"，在某些老浏览器上存在安全漏洞，恶意页面可以拿到当前页面的部分控制权。现在主流浏览器已默认修复了一部分，但写代码时主动带上这个属性是好习惯。
相对路径的坑也不少。./表示当前目录，../表示上一级目录。项目文件层级一深，新手就容易迷路。我的建议是，基础阶段把 HTML 文件和图片放在同一目录，路径写作src="photo.jpg"即可。等后面项目大了再引入/assets/images/photo.jpg这类绝对根路径写法。
图片标签img也是高频标签：
<img src="images/logo.png" alt="公司Logo" width="200" height="100">width和height可以写数值（像素）或百分比。但基础阶段建议先不设置宽高，用图片原始尺寸，等学 CSS 再用样式控制大小。为什么？因为 HTML 属性控制尺寸会让图片缩放失真，而且没有响应式适配能力。真正讲究的做法是 CSSwidth: 100%; height: auto;保持比例，但这已经是 CSS 的范畴。
3.3 列表与表格：结构化展示信息的两种形态
列表分为无序列表、有序列表、自定义列表。
<ul> <li>苹果</li> <li>香蕉</li> <li>橙子</li> </ul> <ol> <li>第一步</li> <li>第二步</li> <li>第三步</li> </ol><ul>是无序列表，各项目之间没有先后顺序，默认前面显示圆点；<ol>是有序列表，默认显示数字序号。列表项必须用<li>包裹，不能直接把文字写在<ul>里。
自定义列表用于“术语+描述”的配对结构：
<dl> <dt>HTML</dt> <dd>超文本标记语言</dd> <dt>CSS</dt> <dd>层叠样式表</dd> </dl>表格稍微复杂一些，涉及行、列、表头、合并单元格。基础用法：
<table> <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>定义主体内容，<caption>可以加表格标题。结构分离后，屏幕阅读器等辅助工具能更好地解析数据关系。
合并单元格有两个属性：colspan合并列，rowspan合并行。举个例子，一个产品价格表中，某行商品需要横跨两列展示：
<td colspan="2">总价</td>合并单元格是表格实操里最容易出错的点，因为合并之后“格子”数量改变了，浏览器每行排列的列数必须一致，否则表格会错位。每次改完合并属性，建议数一遍每一行td加th的数量，确保一致。
3.4 表单：收集用户输入的交互入口
表单是 HTML 里交互属性最强的部分，也是后面学 JavaScript 时打交道最多的板块。一个完整的表单由<form>包裹，内部包含各种输入控件。
<form action="/submit" method="post"> <label for="username">用户名</label> <input type="text" id="username" name="username" required> <label for="email">邮箱</label> <input type="email" id="email" name="email" required> <label for="password">密码</label> <input type="password" id="password" name="password" required> <button type="submit">注册</button> </form>几个重点属性必须理解清楚：
name：控件的数据键名，表单提交后后端靠它获取对应值。没有name的控件不会随表单提交。label的for属性对应输入框的id，点击文字时能自动聚焦到输入框，对小屏用户和鼠标用户都友好。required：浏览器原生必填校验，提交时如果为空会弹出提示。type决定了输入框的类型和键盘样式：email在手机端会弹出带@的键盘，password输入内容显示为圆点，number只能填数字。
单选按钮和下拉选框也是表单高频控件：
<input type="radio" name="gender" value="male" id="male"> <label for="male">男</label> <input type="radio" name="gender" value="female" id="female"> <label for="female">女</label> <select name="city"> <option value="beijing">北京</option> <option value="shanghai">上海</option> </select>单选按钮的name必须一致，才能实现“互斥”效果。下拉选框的select和option结构简单，但 option 的值value才是提交给后端的真实数据，你看到的文本只是展示文本。
4. 语义化到底重要在哪里？为什么不能全是 div
4.1 语义化标签的价值：可访问性、SEO、可维护性
在很久以前的网页源码里，几乎全是<div>和<span>，开发者靠 class 属性区分各种区域：
<div class="header">顶部</div> <div class="nav">导航</div> <div class="main">主体</div> <div class="footer">底部</div>这种写法浏览器能渲染，用户也看不出问题，但代码的可读性极差。后来 HTML5 推出了一系列语义化结构标签：
<header>：页面头部或区块头部<nav>：导航区域<main>：页面主体内容<aside>：侧边栏或附属信息<section>：独立内容区块<article>：独立成文的内容，比如一篇博客、一条新闻<footer>：页面底部或区块底部
语义化带来的直接好处有三个。
第一，可访问性提升。屏幕阅读器通过语义标签理解页面结构，视觉障碍用户可以在不同区域间跳转。如果没有语义标签，屏幕阅读器会把所有内容当作平铺文本，使用体验堪称灾难。
第二，SEO 更友好。搜索引擎爬虫需要判断页面的内容主次。<article>里的文字通常比一堆<div>里的文字权重更高，<h1>比<h6>更能代表核心主题。
第三，代码可维护性增强。三个月后你再回来看自己写的代码，看到<nav>就知道是导航，看到<footer>就知道是底部，不用再去翻 class 命名。
4.2 div 不是不能用，而是要用对场景
有些同学学了语义化之后，开始矫枉过正，把页面里所有元素都换成语义标签。这也不对。
<div>本身没有语义，它是一个纯粹的容器，适合包裹那些没有明确语义的内容块，比如轮播图的外层容器、卡片组件的包装层。<span>是行内容器，适合在文本中局部指定样式或区域。
判断标准很简单：如果这块内容在结构上代表“导航”“文章”“侧栏”这类有名称的区块，用对应语义标签；如果只是单纯为了布局分组，就用div。
4.3 一个完整的语义化页面骨架参考
写一个典型博客页面的结构示例：
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>博客文章</title> </head> <body> <header> <nav> <ul> <li><a href="/">首页</a></li> <li><a href="/archive">归档</a></li> <li><a href="/about">关于</a></li> </ul> </nav> </header> <main> <article> <h1>如何学习 HTML 基础</h1> <p>发布时间：2024年1月1日</p> <section> <h2>什么是 HTML</h2> <p>正文内容...</p> </section> <section> <h2>标签结构</h2> <p>正文内容...</p> </section> </article> <aside> <h2>相关文章</h2> <ul> <li><a href="/post/css-basics">CSS 基础</a></li> <li><a href="/post/js-basics">JavaScript 基础</a></li> </ul> </aside> </main> <footer> <p>版权信息</p> </footer> </body> </html>注意main里包含了一个article，article里又嵌套了多个section。section用于对文章内部按主题切分，每个section通常带自己的标题。这种嵌套关系契合“整体-部分-更小部分”的逻辑，阅读和爬虫解析都很顺畅。
5. 实操过程：从零手写一个个人介绍页面
5.1 需求分析与结构规划
理论知识说得再多，不如亲手写一个真实页面。假设我们要做一个个人介绍页面，内容是：
- 顶部：头像 + 名字 + 一句话简介
- 中部：关于我、技能列表、项目经历
- 底部：联系方式
我们先用语义化思路规划结构：
body直接包含header、main、footer三大部分，这是页面最宏观的骨架。header里放头像图和标题文本，用img和h1。main里分三个section，分别对应“关于我”“技能”“项目”，每个section用h2作标题。footer里放邮箱、电话等联系链接。
5.2 逐段编写代码与关键取舍
创建index.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> <header> <img src="avatar.jpg" alt="张三的正面半身照" width="120" height="120"> <h1>张三</h1> <p>全栈开发者 / 热爱分享技术</p> </header> <main> <section> <h2>关于我</h2> <p>工作五年，从后端转全栈，写过业务系统、也维护过开源项目。平时喜欢研究性能优化和工程化方案。</p> </section> <section> <h2>技能</h2> <ul> <li>HTML / CSS</li> <li>JavaScript / TypeScript</li> <li>Node.js / 数据库</li> </ul> </section> <section> <h2>项目经历</h2> <article> <h3>某跨平台系统</h3> <p>一个基于 Web 技术实现的桌面端管理工具，支持多窗口和本地数据缓存。</p> </article> <article> <h3>某图像处理 Demo</h3> <p>纯前端实现图片滤镜和裁剪功能，核心用 Canvas 处理像素数据。</p> </article> </section> </main> <footer> <p>联系我：<a href="mailto:zhangsan@example.com">zhangsan@example.com</a></p> <p><a href="https://github.com/example" target="_blank" rel="noopener noreferrer">GitHub</a></p> </footer> </body> </html>写这段代码时，我刻意做了几个选择：
- 头像高度和宽度设置为 120 像素，这只是临时固定值，后续学 CSS 会用样式统一调整。HTML 属性里写宽高虽然不推荐，但作为初始占位完全没问题。
mailto:协议是邮箱链接的标准写法，点击后调用本地邮件客户端。article嵌套在section内，因为“项目经历”是一个区块，而每个具体项目是独立内容，用article更贴切。
在浏览器里打开这个页面，你会看到内容自上而下垂直排列，没有 CSS 的情况下这就是最朴素的表现。这个阶段的重点不是好看，而是结构正确。
5.3 用浏览器开发者工具验证结构
写完代码之后，F12 打开开发者工具，切到 Elements 面板。你能看到浏览器解析出来的 DOM 树。鼠标悬停在某个标签上，页面会高亮对应区域。这个工具是前端开发者的第二双眼睛，建议从一开始就习惯它。
验证几个点：
- 检查
h1是否只有一个 - 检查
img是否显示了正确的图片路径 - 检查
section和article的嵌套层级是否符合预期 - 检查有没有非语义的空 div 干扰结构
如果图片显示为破图，先看文件路径是否对应。比如我的avatar.jpg和index.html在同一目录，路径就写avatar.jpg。如果图片在images子目录，路径写成images/avatar.jpg。
6. 常见问题与排查技巧实录
6.1 页面显示乱码或中文变成乱码
最常见的原因就是<meta charset="UTF-8">缺失或位置不对。这个声明必须放在<head>的前几个字节范围内，最好紧跟head开始标签之后。如果文件保存时编码不是 UTF-8，也可能乱码。VS Code 右下角可以切换编码格式，统一选 UTF-8。
6.2 设置了宽高但图片变形
如果同时在 HTML 属性设置宽高，且图片原始比例不一致，浏览器会强行拉伸。比如原始图是 800x600，你设置width="200" height="200"，图片会被压扁。解决办法是只设一个值（通常是宽度），高度自适应，或者用 CSS 的object-fit: cover，不过那是后话。基础阶段保持“宽度设为需要的尺寸，不设高度”就好。
6.3 链接不能跳转或样式异常
链接不能跳转，排查顺序：
- 检查
href是否有拼写错误，最常见的如http：//全角冒号 - 检查目标地址是否真实可访问
- 检查是不是被
target="_blank"配合弹窗拦截器拦截了
样式异常指链接的颜色和浏览器默认样式不一致。新手常以为<a>一定是蓝色加下划线，其实那是浏览器默认样式。任何全局 CSS 或浏览器插件都可能改变它。基础阶段先不管样式，能跳转就说明结构没问题。
6.4 表单提交没反应
表单点击提交按钮后页面刷新或报错，但数据没到后端，这是新手最常踩的坑。看代码：
<form action="/submit" method="post"> <input type="text" name="username"> <button type="button">提交</button> </form>注意按钮的type是button，它只是一个普通按钮，不会触发表单提交。需要把type改成submit，或者去掉type属性（按钮默认就是submit）。另外，输入控件必须有name属性，否则数据不会出现在提交内容里。可以用开发者工具 Network 面板查看实际请求 payload，确认数据是否完整。
6.5 表格错位
表格错位几乎都源于合并单元格后列数不一致。举例，某行有两列被合并成了一个单元格，那么这一行相当于“少了一个格子”，如果下一行没有同样采用合并，两行的总列数就会不一致，表格整体偏移。
排查方法：从头到尾数每一行的td加th数，colspan="2"算两列，rowspan="2"在下一行也要减掉对应的列数。这个有点绕，但数几遍就有感觉了。
6.6 解决不了的“间距”问题
没有写任何 CSS，但页面元素之间总有莫名其妙的间距。那是浏览器默认样式在起作用。比如body默认有 8px 外边距，ul默认有左侧 padding。基础阶段不要试图用 HTML 属性去“清除”这些间距，老老实实学 CSS 的margin: 0; padding: 0;重置才是正路。你越早接受“HTML 管结构，CSS 管样式”，踩的坑就越少。
7. 关于学习路径和进阶方向的一点体会
掰开揉碎讲完 HTML 基础之后，我特别想聊聊下一步。
HTML 本身并不难，难点在于很多人学的时候不知道学到什么程度算“会了”。我总结一个基础阶段的验收清单，你可以拿来自测：
- 能不看文档写出标准的 HTML5 文档骨架
- 能区分块级元素和行内元素，并说出各自常见代表标签
- 能根据内容语义选择正确的标签，而不是一律
div - 能独立完成一个包含导航、正文、表格、表单的静态页面
- 能用浏览器开发者工具定位和修改页面结构
如果这五条都做到了，恭喜你，HTML 基础阶段可以结业。接下来我建议不要直接一头扎进 JavaScript，而是先花两周学 CSS。为什么？因为 CSS 能让你写的 HTML 页面“看起来像现代网页”，这种视觉反馈对学习动力很重要。你花一个下午给个人主页加上颜色、布局和响应式样式，那份成就感远比在控制台打印十遍“Hello World”来得实在。
学 CSS 的时候，你又会重新理解 HTML 的结构意义——为什么class要这样命名、为什么section和div会影响选择器权重、为什么响应式设计需要语义化标签配合媒体查询。所有知识到最后都串起来了。
我在带过的新人里见过两种极端：一种背了大量标签，却写不出一个像样的页面；另一种急着学框架，跑 demo 跑得飞起，但连form表单的name属性都讲不清。这两种都走了弯路。HTML 基础没有捷径，但也没有门槛，你只需要找一个小项目，比如这个个人介绍页，反复迭代它，把遇到的每个标签、每个属性都弄懂，基础就扎实了。
最后分享一个小技巧：遇到不确定的标签或属性，打开浏览器开发者工具，找个真实网站看它是怎么写的。很多大站出于兼容性考虑可能用了老写法，但你拆解一遍之后，对 HTML 的信任度会大幅提升。要是看到不合语义的写法，你还能反过来分析它为什么要这么做，这种对比思考是很好的进阶训练。
