1. 从一个最简单的网页聊起
先不扯那些复杂的概念，你打开任何一个网站，看到的页面结构、文字、图片、按钮、输入框，底层都是由一种叫HTML的东西搭建起来的。就拿你现在正在看的这个页面来说，你看到的每个标题、每个段落、每个列表项，背后都是一行一行的HTML代码在支撑。
HTML的全称是HyperText Markup Language，中文通常翻译成“超文本标记语言”。拆开来看，HyperText表示它不只是普通文字，还包括链接、图片、视频这些多媒体内容；Markup Language表示它不是一门编程语言，而是一种标记语言。这里有个关键点很多人会忽略：HTML不是编程语言，它没有逻辑判断，没有变量，没有循环。它的工作方式很简单——用一堆标签把内容包起来，告诉浏览器“这段是标题”“这段是段落”“这张是图片”。
我第一次接触HTML的时候，也觉得这个东西有点“笨”，连1+1等于几都算不了。但后来理解了，HTML承担的职责本来就不是计算，而是结构化。它就像一栋房子的框架和墙体，规定了哪里是客厅、哪里是卧室、哪里是厨房。JavaScript负责水电和智能家居，CSS负责装修和美化，而HTML把最基本的功能分区确定下来，任何人都能一眼看懂这个页面的骨架。
2. 浏览器是怎么把HTML变成你看到的页面的
要理解HTML，光知道标签是不够的，你还得知道它在浏览器里是怎么“跑”起来的。其实这个过程远比你想象的简单直接。
2.1 一次完整的页面加载过程
你在地址栏输入一个网址，按下回车。浏览器向服务器发出请求，服务器把HTML文件连同CSS、JS、图片等资源一起返回给你。浏览器拿到HTML文件之后，会从第一行开始逐行读取内容。
怎么读取？这里有一个有趣的机制。浏览器内部有几个解析器，其中HTML解析器会把文件里的标签和文字拆开，构建出一棵结构树。这棵树有专门的名称，叫做DOM树（Document Object Model）。你可以把它理解成一张组织架构图：html标签是董事长，head是幕僚团队，body是业务部门，body里的p、h1、div这些标签就是部门里的具体岗位。
构建DOM树的过程中，浏览器发现某个标签引用了外部的CSS文件，就去拉取CSS并解析；发现引用了外部JS文件，就去拉取JS并执行。等DOM树和样式都准备好，浏览器开始布局和绘制，最终把内容呈现在你的屏幕上。
2.2 为什么HTML学起来快但深入难
HTML的语法简单到几乎可以当场就学会。但真正难的是什么？是语义化，是结构的合理性，是可维护性，是在没有可视化工具辅助的情况下在大脑里构建出清晰的页面层次。
很多人会经历这样一个阶段：学了一周HTML，感觉全学会了，能写出一堆标签，页面也能显示出来了。但一接到真实的项目需求，比如把一张设计稿变成一个页面，就开始发怵。原因在于，真实的页面不是几个标签堆叠那么简单。你需要考虑：用div还是用语义化标签？导航用ul还是nav？表单的label要不要关联input？图片的alt该怎么写？这些细节决定了你的页面是“能看”还是“好用”。
也就是说，HTML的入门门槛很低，但做一个合格的HTML结构工程师，需要掌握的远不止那几十个标签。
3. 基础结构与核心标签逐个拆解
接下来进入正题。我们把这套标记语言的核心内容掰开揉碎，一步一步走。
3.1 每个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> <h1>你好，HTML</h1> <p>这是一个段落。</p> </body> </html>你想学HTML，第一步不是背标签，而是吃透这段固定的骨架。我来逐行解释。
第一行的<!DOCTYPE html>是文档类型声明。注意，它不是一个标签，而是一条声明语句。它的作用是告诉浏览器“这是一个标准的HTML5文档，用现代模式来解析我”。如果不写这一行，浏览器会进入一种叫“怪异模式”的状态，页面一些基础的样式都会出问题。这个东西平时没人注意，但漏掉之后磨很久都排查不出来。
然后是<html>标签，这是整个文档的根节点。所有的内容都包在它里面。lang="zh-CN"这个属性说明页面的主要语言是简体中文，一方面方便浏览器做出正确的语言相关行为，另一方面对无障碍访问很重要，屏幕阅读器需要知道用哪种读音规则来朗读页面。
<head>区域存放的是页面的元信息和配置信息，这些内容不会直接显示在页面上，但决定了页面如何被解析、被描述。<meta charset="UTF-8">声明字符编码。如果你的页面里不写这一行，中文很可能变成乱码。<meta name="viewport">是移动端适配的利器，它告诉移动端的浏览器页面应该按什么视口宽度来渲染，不写这个，手机上打开的页面字会缩小成一团。
<title>标签里的内容会显示在浏览器的标签页上，同时是搜索引擎结果里的标题，也是收藏夹里的名字，重要性被大多数人低估了。
进入<body>，这里才是用户能看到的全部内容。你现在打开任何一个网页，右键选择“查看网页源代码”，看到的最外层结构一定是上面这套格式。
3.2 认识三类标签：双标签、单标签、属性
HTML里的标签分为两类。双标签是有开始有结束的，比如<p>和</p>、<h1>和</h1>、<div>和</div>。单标签是自闭合的，最重要、最常用的有三个：<img>用于插入图片，<br>用于换行，<input>用于创建输入控件。
标签可以带属性。属性写在开始标签里，格式是属性名="属性值"。比如：
<img src="images/logo.png" alt="网站LOGO" width="200">src告诉浏览器图片的路径，alt是图片加载失败或屏幕阅读器朗读时显示的替代文本，width指定图片的宽度。属性之间用空格隔开，顺序并不重要。
一个最容易犯的错是：属性值漏写引号，或者单双引号混用。HTML5标准允许省略一些引号，但我强烈建议所有项目一律使用双引号，原因有两个：一是团队协作时风格统一能避免大量无意义的merge冲突；二是某些情况下单引号嵌套会直接报错，排查起来很费劲。
3.3 排版与语义化标签：从div堆砌到结构化设计
老一代网页里，你几乎只看到一种标签：<div>。它太万能了，什么场景都能包一层。但带来的问题是，到处都是没有含义的div，别人看你的代码还得猜这块区域是干嘛的。
HTML5引入了几个语义化标签，算是给这个困局开了一剂良药：
<header>：页头区域，一般放网站的LOGO和导航栏<nav>：导航区块，专门放菜单链接<main>：页面主体内容区，一个页面理论上只能有一个<article>：独立的文章或内容块<section>：通用的内容分区，类似文章里的章节<aside>：侧边栏，放相关推荐或辅助信息<footer>：页脚区域，通常放版权信息和联系方式
举个例子。没有语义化标签的时候，一个顶部导航区域大概是这样的：
<div class="header"> <div class="logo">某网站</div> <div class="nav"> <ul> <li><a href="#">首页</a></li> <li><a href="#">关于</a></li> </ul> </div> </div>用语义化标签改写后，结构一眼就能看懂：
<header> <span class="logo">某网站</span> <nav> <ul> <li><a href="#">首页</a></li> <li><a href="#">关于</a></li> </ul> </nav> </header>这两种写法在页面上的视觉效果几乎一模一样，但从代码可读性、SEO、无障碍访问三个角度来看，差异巨大。搜索引擎爬虫会优先识别语义化标签里的内容，屏幕阅读器也会根据这些标签给视障用户提供正确的页面朗读顺序。
3.4 列表、表格、表单：三个高频场景一网打尽
列表分为无序列表<ul>、有序列表<ol>和自定义列表<dl>三种，日常开发里无序列表用得最狠，导航菜单、商品列表、分类展示，清一色都是ul > li的结构。
表格在HTML里的历史很长，语法也很啰嗦，需要<table>、<tr>、<th>、<td>四个标签配合才能撑起一张最简单的表格。需要合并单元格的时候还要用到rowspan和colspan这两个属性。现在的页面布局早就不用表格做了，但在展示数据报表、日历、价目表这些结构化数据时，表格依然是不可或缺的首选。
表单是HTML里和应用交互最密切的部分，核心标签有<form>、<input>、<textarea>、<select>、<label>和<button>。写表单的时候有一个常被新手忽略但对用户体验影响极大的细节——<label>标签必须通过for属性和输入框的id关联起来，这样点击文字的时候就能自动聚焦到对应的输入框。
<label for="username">用户名</label> <input type="text" id="username" name="username">还有一个必被问到的细节：input的type属性非常多，有text、password、email、number、date、file、checkbox、radio、submit等等。不同的type会调起不同的输入框样式，比如email类型会在手机上弹出带@符号的键盘，number类型弹出数字键盘。所以写表单时，能精确设置type的尽量精确，这对移动端用户的输入体验是巨大的提升。
4. 用双手积累经验：手写一个信息展示页
理论讲完，实操跟上。我带你从头到尾手写一个简单的个人信息展示页，把上面这些标签通通用一遍。
4.1 准备工具：记事本都可以，但有更好的选择
硬件和软件条件几乎等于零门槛。一个记事本就能写HTML文件，写完了把扩展名从.txt改成.html，双击用浏览器打开就能看到效果。
但日常开发这么做效率太低。我建议装一个编辑器，选择一个免费、轻量、插件生态丰富的文本编辑器，比如VS Code。装好后可以装一个叫Live Server的插件，它能起一个本地服务，你在编辑器里每次保存文件，浏览器就自动刷新，省去手动切换窗口按F5的步骤，这个体验差异能直接影响你学习时的专注度。
4.2 照着做：5分钟搭出页面骨架
打开编辑器，新建一个文件，命名为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> <h1>我是张三</h1> <nav> <ul> <li><a href="#about">关于我</a></li> <li><a href="#skills">技能</a></li> <li><a href="#contact">联系方式</a></li> </ul> </nav> </header> <main> <section id="about"> <h2>关于我</h2> <p>我对Web开发感兴趣，正在学习HTML、CSS和JavaScript。</p> <img src="https://picsum.photos/200/200" alt="我的照片占位图"> </section> <section id="skills"> <h2>我的技能</h2> <ul> <li>熟悉HTML基础标签</li> <li>了解CSS样式入门</li> <li>正在攻克JavaScript</li> </ul> </section> <section id="contact"> <h2>联系方式</h2> <table> <tr> <th>方式</th> <th>地址</th> </tr> <tr> <td>邮箱</td> <td>zhangsan@example.com</td> </tr> <tr> <td>联系电话</td> <td>138-0000-0000</td> </tr> </table> </section> </main> <footer> <p>版权信息 © 2024 张三</p> </footer> </body> </html>你打开这个文件，页面上会显示一个标题、三个导航链接、一张图片、一个技能列表、一个联系表格和一行版权信息。整个页面的信息架构是清晰的：顶部是页头，中间是主体，底部是页脚。你看这个页面的时候，应该能有意识地感受到“哪部分结构对应哪块代码”，这就是HTML学习的最重要心法——看到页面，联想代码；看到代码，脑补页面。
4.3 给页面做一个必要的体检：验证工具的使用
写完页面之后，建议做一次HTML规范验证。业内常规做法是把这个页面里的代码贴到W3C的HTML验证工具里，它会帮你检查是否有标签不闭合、属性值不规范等错误。这个习惯从一开始就养成，能省掉后期很多兼容性的坑。
我第一次看到一个满屏红色报错的验证报告的时候，还挺受打击的。比如忘记给<html>标签加lang属性、alt属性为空、<section>缺少标题等等，都是一些细节问题。修复的过程比写页面本身更涨经验，因为你会被迫去查这些报错背后的规范到底在说什么。
5. 踩坑与避坑：想清楚这几个问题，速度会翻倍
学HTML最大的障碍不是你记不住标签，而是你陷入几个典型误区和坑里出不来。下面这几个问题和我的经验一起写出来，希望你能少走弯路。
5.1 标签为什么套错了层级就不对
这里要记住一条铁律：HTML的结构必须是一个嵌套的树，或者说像一个洋葱，一层包着一层，不能交叉。
什么叫交叉？看一个错误示例：
<p>这是一段文字 <strong>加粗的那部分</p></strong>这段代码里，<p>标签还没闭合，<strong>标签就跨出去了。浏览器面对这种代码，会启动容错机制，自己猜测你的意图去修复。不同浏览器猜测的结果可能不同，于是出现了“同一份代码在不同浏览器里显示效果不一样”的著名现象。
正确的写法是像瓶子套盖子一样一层层闭合，后开的标签先关掉：
<p>这是一段文字 <strong>加粗的那部分</strong></p>实操心得：写完一个嵌套标签，养成习惯去数一数每个标签是不是都闭合了。编辑器通常有代码缩进和颜色高亮来辅助，但最快的方法是鼠标悬停在一个标签上，看它对应的结束标签有没有被高亮出来。如果悬停半天没反应，大概率这个标签就没闭合。
5.2 中文乱码和字符编码的坑
自己本地新建HTML文件，发现浏览器里打开全是乱码，第一反应别改内容，先检查head区域有没有这一行：
<meta charset="UTF-8">如果没有，或者放在了title标签之后，浏览器默认会用系统编码去解析文件，而中文字符在错误的编码方案下就会变成一堆看不懂的符号。此外，如果你用记事本写代码然后另存，一定注意保存时把编码选为UTF-8，否则即使meta声明了UTF-8，文件本身是用别的编码保存的，照样乱。
天天和中文打交道的开发者，把这条大坑记在心里：文件保存编码、页面声明编码、服务器响应头编码，三者必须一致，缺一个中文就乱。
5.3 图片不显示：路径问题排查思路
<img>标签的src属性指向图片路径。路径有两种：绝对路径（比如https://example.com/images/pic.jpg）和相对路径（比如images/pic.jpg）。
新手最常见的问题就是相对路径写错。区分一个简单的方法：路径里开头有没有./和../。./表示当前目录，可以省略；../表示上一级目录，不可以省略。假设你的项目目录结构是这样的：
my-site/ ├── index.html └── images/ └── logo.png在index.html里引用图片，应该写images/logo.png，或者更严谨一点写./images/logo.png。如果你把HTML放在src目录下，而图片在根目录的images里，需要../images/logo.png才能找到。
如果图片就是显示不出来，优先检查三个东西：文件名的大小写（服务器上的Linux系统对大小写敏感，Logo.png和logo.png不是同一个文件）、扩展名是否正确、属性的引号是否完整。
5.4 媒体资源跨域加载与性能意识
在本地写HTML时，你会经常在src属性里写网上的图片地址，就像上面示例里用的那个占位图服务。这种跨域加载方式在开发调试阶段很方便，但放在生产环境会有两个隐患：一是图片加载依赖第三方服务，对方挂了图就没了；二是你有意识地引入了外部请求，却没想过这会给页面加载增加额外的时间开销。
养成一个习惯：正式发布的页面，图片、CSS、JS文件尽量放在自己的服务器上。这一条在刚开始学的时候不用彻底贯彻，但心里要有这层意识。
5.5 千万别直接在浏览器里打开就完事了
新手写完HTML，喜欢直接双击文件在浏览器中打开，看到页面出来就觉得完成了。这在学习初期可以，但很快就该把习惯升级为“本地起一个服务器”。为什么？因为浏览器的安全限制，很多能力只在HTTP协议下才能正常使用，直接通过文件协议打开时，一些浏览器特性会被禁用，而且模块化JavaScript、fetch请求都会出问题。
最简单的方案是刚才提到的Live Server插件。学会使用本地开发服务器，是HTML学习路线里值得尽早补上的一课。
6. 接下来该怎么走：给新手的路线建议
HTML不是终点，它是Web开发这趟旅程的起点。掌握了HTML基础之后，合理的下一步是CSS，然后是JavaScript。
- CSS负责样式。控制元素的颜色、大小、间距、布局方式，让页面从素颜变成化妆。包括Flexbox布局、Grid布局、响应式设计，都是CSS这条线里的重点。
- JavaScript负责行为。点击按钮弹出对话框、表单校验、数据的获取与渲染，这些交互逻辑都由JS完成。它是真正的编程语言，有变量、有函数、有对象，有逻辑控制。
- 浏览器开发者工具（DevTools）是你随时随地的得力助手。在页面上右键选择“检查”，你就能看到所有元素的HTML结构和对应的样式。把实操和工具结合起来，学习效率会直线上升。
如果你还想更进一步，可以了解后端开发，比如用Node.js、Python之类的语言去写接口；也可以深入前端框架，比如学习组件化的开发思路，用组件来构建大型应用。但这一切的大前提，是你对HTML有扎实的理解——知道一个页面的结构应该怎么搭，语义怎么选，层级怎么规划。地基稳了，上层建筑才立得住。
我给不少人做过上手Web开发的引路人，印象里学得最快的一批人，没有一个是一上来就闷头抄代码的。他们普遍有一个共性：会去动手改代码、拆页面、重建页面，并且长年习惯直接阅读官方文档，用第一手资料而非碎片化的二创教程来校正自己的认知。HTML领域也是这样，打开一份官方文档，把标签列表一个个看下来，再对照一个你喜欢的网站，用开发者工具拆它的结构，这一套组合拳下来，你的HTML水平会远超只刷教程视频的人。
