如果你想学网页开发，无论是想写一个个人主页、做一个前端项目、还是参与任何和网页有关的工作，HTML都是绕不开的第一站。它也是我教过这么多零基础学员里，被认为"上手最快"的语言——没有变量、没有逻辑、没有API，只有一套清晰的标签体系，把内容按结构组织起来。写这篇文章是想把HTML从入门到进阶的完整路径一次性讲透，配合大量程式码示例，让零基础的人能照着敲出第一个页面，也让已经入门的同学找到查漏补缺的方向。
先给你一个总体的认知：HTML（HyperText Markup Language，超文本标记语言）不是编程语言，它没有变量、没有逻辑判断、没有循环，它做的事情是用一套预定义的标签来描述文档结构。你可以把它理解成一篇作文的提纲，或者一栋房子的钢筋混凝土框架。网页的内容是什么、大致轮廓长什么样、各个部分如何排列，都由HTML决定；至于房子怎么装修（颜色、字体、间距），那是CSS的事；房子里装什么智能家居、开关怎么联动（交互、动画、数据请求），那是JavaScript的事。这个"结构-表现-行为"三层模型，是前端开发的根本逻辑，搞清楚这一点，后面学什么都不会乱。
HTML能做什么？往小了说，它可以是你简历上的一个加分项；往大了说，它是整个互联网内容展示的基础。新闻页面、购物页面、视频网站、管理后台，哪怕是最简单的个人博客，底层都是HTML文件在发挥作用。任何人只要打算接触网页开发、前端方向、自媒体排版、文档处理，都可以从HTML入手，它不需要编程基础，门槛极低，但天花板很高。
1. 先搞清楚：HTML到底是个什么东西
1.1 浏览器里渲染的"骨架"
要理解HTML，建议你先做一个小实验：随便打开一个网站，在页面上点击右键，选择"查看网页源代码"。你会看到一大片尖括号包裹的内容——那就是这个网站的HTML代码。浏览器做的事情，本质上就是下载这些HTML文件，然后把里面的标签翻译成屏幕上你看得见、点得着的页面。
这个过程在内部是怎么走的？浏览器拿到HTML文本后，会先做词法分析，把文本拆成一棵树——DOM树（文档对象模型）。每个标签对应树上的一个节点，比如<html>是根节点，<head>和<body>是它的两个子节点。DOM树既是浏览器渲染页面的依据，也是后面JavaScript操作页面的入口。理解"标签生成节点、节点组成树"这个模型，比记住一百个标签都重要，因为所有前端框架、组件库、自动化测试工具，底层都在操作这棵DOM树。
我见过不少新手把HTML当成"文本格式"来学，觉得它跟Word里的样式差不多。这个理解虽然不精确，但方向上是对的。HTML确实是在描述"这段文字是标题、这段文字是段落、这张图放这里"，只不过它用的是纯文本的标记方式，而不是图形界面。顺便说一句，现在很多有意思的HTML应用其实被压缩成了"单文件离线版"，比如某些音乐播放器、工具页面，整个应用只有一个HTML文件，逻辑、样式、脚本全封装在里面，这恰恰说明HTML本身的承载能力被很多人低估了。
1.2 版本演进：你现在学的是哪个HTML
HTML的历史非常长，从1993年的HTML 1.0开始，经历HTML 4.01、XHTML，到现在主流的HTML5。你不需要记住所有历史版本，但有三个概念值得知道。
第一，HTML 4.01年代的DOCTYPE声明写起来非常啰嗦：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">到了HTML5，这一行简化为：
<!DOCTYPE html>为什么简化？因为以前浏览器厂商各自为政，DOCTYPE的写法影响浏览器用哪种模式解析页面，写错就会进入"怪异模式"，导致同一份代码在不同浏览器里显示完全不一样。HTML5统一了标准，DOCTYPE就变成了一个极简的"引子"，目的是告诉浏览器：请用标准模式渲染我。
第二，HTML5已经不再只是标记语言了。它加入了原生视频音频标签、Canvas绘图、本地存储、拖拽API等一系列新能力。所以现代前端开发里，HTML5往往和CSS3、JavaScript ES6+组合在一起，被称为"前端三剑客"。
第三，HTML规范到现在仍然在迭代。HTML Living Standard由WHATWG维护，每年都会有微小的更新。比如最近几年新增的<dialog>弹窗标签、loading="lazy"属性、<picture>响应式图片等，都是规范持续演进的例子。所以"学完HTML"这件事是不存在的，跟着规范走、保持技术嗅觉才是常态。
1.3 第一个页面逐行拆解
不管学什么语言，第一个程序都是"Hello World"。HTML的Hello World其实非常朴素：
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8"> <title>我的第一个页面</title> </head> <body> <h1>你好，世界</h1> <p>这是一个HTML页面。</p> </body> </html>把这段代码保存为index.html，双击用浏览器打开，你就能看到效果。逐行说：
- 第1行
<!DOCTYPE html>：文档类型声明。必须放在第一行，它告诉浏览器使用标准模式，而不是怪异模式。 - 第2行
<html lang="zh-cn">：根标签，包裹整个页面。lang属性告诉浏览器这个页面用的是简体中文，这对搜索引擎和屏幕阅读器都很有意义，所以别漏了它。 - 第3-5行：
head区域放的是"页面的自我介绍"，标题、字符编码、给搜索引擎看的描述、引用的样式文件都在这里，用户不会直接看到。 - 第4行
<meta charset="utf-8">：字符编码声明。如果不写这一行，浏览器可能用系统默认编码去解析你的中文，直接乱码。UTF-8是目前通用标准，能覆盖几乎所有语言的字符集。 - 第6-9行：
body区域才是用户真正看到的内容。h1是一级标题，p是段落。
这一个页面麻雀虽小五脏俱全。你在浏览器里按F12打开开发者工具，选"Elements"面板，看到的DOM树结构和代码里的嵌套关系完全一致。这就是HTML的"所见即所得"——虽然它本身是文本，但它的含义是结构。
2. 文档结构与基础语法：万丈高楼的地基怎么打
2.1 第一行代码为什么必须是DOCTYPE
前面已经提到DOCTYPE会触发标准模式，这里再把"怪异模式"背后的机制说透一点。早期的浏览器对CSS和HTML的解析跟标准规范有不少出入，开发者为了让网站兼容不同浏览器，有时候会故意根据某些非标准行为来写代码。后来W3C标准逐步完善，但老页面又需要继续运行，于是浏览器做了个妥协：如果页面写了完整的DOCTYPE，就用标准模式；没写或写错，就进入怪异模式，尽可能按古老的IE 5时代规则渲染。
这会有什么严重后果？最经典的区别出现在CSS盒模型上：标准模式下，一个元素的width指的是内容区宽度，padding和border是额外加出来的；怪异模式下，width包含padding和border。同一套代码在两套模式下的页面宽度、位置都会错位。所以DOCTYPE漏写、错写，在如今的多浏览器环境下几乎等于给自己挖坑。
这也是我强烈建议你用VS Code这类现代编辑器创建HTML文件的原因：新建文件后输入一个英文感叹号再按回车（快捷键是!+ Tab），编辑器会自动帮你在第一行生成<!DOCTYPE html>，还会补全head里的charset、viewport等基础结构，省去手打的麻烦。
2.2 head标签里的四个高频成员
head里的内容不显示在页面上，却决定了这个页面"在外面表现如何"。最常见的四个成员是：
<meta charset="utf-8">：字符编码。中文页面漏掉它，出现乱码的概率极大。注意这一行必须放在head的前部，因为浏览器在解析后续内容时已经需要知道用什么编码来解码了。<meta name="viewport" content="width=device-width, initial-scale=1.0">：移动端适配。它告诉浏览器按照设备宽度来渲染页面，初始缩放比例为1。没有它，手机上看网页会变成全局缩小的桌面版，字小得没法看。这个meta在响应式开发里是标配。<title>页面标题</title>：浏览器标签页上显示的文字，也是搜索引擎结果里的标题。一个页面最好只有一个title，长度控制在60个字符以内，因为搜索引擎只会展示前面一段。<link rel="stylesheet" href="style.css">：引入外部CSS文件。rel是relation的缩写，表示当前文件与外部文件的关系是样式表，href是文件路径。把样式单独抽出来而不是写在HTML里，是为了让HTML专注结构，样式可以复用，也方便浏览器缓存。
另外别忘了description，虽然它不是"必需品"，但对SEO友好：
<meta name="description" content="HTML入门到进阶教程，包含完整代码示例和实战经验">搜索引擎在展示搜索结果时，会优先使用description作为摘要。很多人会忽略这个标签，但在内容营销、个人网站推广的场景里，一行好的description能明显提升点击率。
2.3 块级元素与行内元素：布局的第一规律
HTML的标签数量不少，但你可以按照显示特性把它们分成两大类，这是理解布局的关键。
块级元素（block）像一个个"大箱子"：独占一行，宽度默认撑满父容器，高度由内容决定，可以设置margin和padding来改变它在页面中的占位。div、h1~h6、p、ul、ol、li、table、form都是典型的块级元素。
行内元素（inline）像文字里的"词"：不会独占一行，多个行内元素会并排排列，宽度由内容决定，直接设置width和height无效，但可以设置水平方向的margin和padding。span、a、strong、em、img（实际是替换元素，但常按行内处理）、input都属于这一类。
举个例子，如果你写：
<p>第一段</p><p>第二段</p>这两个p会上下排列。但如果写：
<span>一号</span><span>二号</span>这两个span会肩并肩排在同一个水平线上。
理解这个规律以后，很多"为什么我写的div会换行""为什么img不换行"的困惑就自动解决了。至于"怎么让块级元素并排""怎么让行内元素支持宽高"，那是后面CSS里display属性要做的事，但你需要先分清楚它们默认的状态。
3. 高频标签拆解：从文本排版到表单交互
3.1 文本排版：标题、段落、换行、分割线
页面最基本的素材是文字，所以先从文本标签说起。
标题标签有6个级别：h1到h6，重要性依次递减。一个页面建议只出现一个h1（通常是logo或文章主标题），h2、h3用来组织章节层次。搜索引擎会把标题层级当作页面内容结构的判断依据，所以标题不要乱用——你为了字号大而用h1，本质上是在对搜索引擎撒谎。字大不大是CSS的事，标题标签表达的是"这里是重点、这里是大章节"。
段落标签<p>是承载普通文本的主力，但它有几个特性你要知道：p标签会在前后自动产生一些间距；p里面可以放行内元素，但不能嵌套块级元素。比如p里再放一个div，浏览器会自动截断解析，导致布局错乱。这个坑后面调试时经常遇到。
换行标签<br>是行内元素，作用是手动换行。很多人一开始分不清p和br的区别：p是"分段"，段落之间是逻辑上的不同段落；br是"软换行"，同一段内容里换到下一行，不产生段落间距。比如写一段歌词或地址，就应该用br。
水平分割线<hr>用来在视觉上分隔内容区域，它也是块级元素，自带上下间距。HTML5之后hr被赋予语义"段落级主题分隔"，不只是画一条线，不过日常使用中大家还是当分隔线看。
其他常用文本标签：
<strong>表示重要，浏览器默认加粗；<em>表示强调，默认斜体；<mark>表示高亮标记；<del>表示删除线；<ins>表示插入内容（默认下划线）；<sub>和<sup>分别表示下标和上标。
这些标签不只为样式存在，更重要的是补充语义。屏幕阅读器朗读strong时语调会变化，搜索引擎也会识别strong的强调含义。如果你想在页面里展示一段代码或保留多行空格，普通p加不断输入 会非常痛苦，这时候可以用<pre>标签，它会保留文本里所有空格和换行，呈现在页面上就是"所见即所得"的等宽字体文本，配合<code>标签可以做很标准的代码展示效果。
3.2 链接与图片：路径写不对，什么都白搭
链接是HTML最核心的特性，没有链接，也就没有万维网。链接标签<a>的常用属性：
href：跳转目标，可以是网址、相对路径、锚点、邮箱地址。mailto:开头的href会唤起邮件客户端。target：打开方式。_blank新窗口、_self当前窗口（默认）。给_blank配合rel="noopener noreferrer"可以避免新开页面被恶意页面通过window.opener操作原页面，这是安全常识。title：鼠标悬停时显示的提示文字。
锚点跳转是链接的一个重要应用。假如你的页面有一个很长的文档，顶部放目录，每个目录项链接到对应的章节位置，怎么做？给目标元素加一个id，然后在href里用#id引用：
<a href="#section2">跳到第二节</a> ... <h2 id="section2">第二节</h2>图片标签<img>是void元素，没有结束标签。关键属性：
src：图片来源路径。alt：图片无法加载时显示的替代文字，也是屏幕阅读器读图的依据。alt不应该被当成摆设，它对SEO和无障碍都很重要。width/height：建议写成数字，不要带单位，因为这里的单位默认是像素。实际开发中更推荐用CSS控制图片尺寸，HTML属性只是初始值。loading="lazy"：懒加载，页面滚动到图片位置时才去加载，对长页面性能优化非常有效。
路径问题是新手最容易踩的坑之一。src和href里的路径有三类：绝对URL（http://开头）、绝对路径（/images/a.png，从域名根目录算起）、相对路径（./images/a.png或../images/a.png，从当前文件所在目录算起）。最容易出错的是相对路径里../表示"上一级目录"，经常被少写漏写。我的调试习惯是：先看地址栏里当前的URL是什么，再对照路径推导，实在不行就打开Network面板看图片请求的完整地址，一目了然。
3.3 表格：别再拿div硬拼了
在CSS还不发达的年代，很多人用table来拼页面布局，这已经成了历史的眼泪。现在的原则是：表格只用来展示表格数据（成绩单、价格表、排班表），页面布局用div或语义化标签加CSS完成。
一个标准表格的结构：
<table> <thead> <tr> <th>姓名</th> <th>年龄</th> </tr> </thead> <tbody> <tr> <td>张三</td> <td>25</td> </tr> </tbody> </table>table是表格容器，tr是行，th是表头单元格（默认加粗居中），td是数据单元格，thead/tbody/tfoot分别表示表头、表体、表尾。用这三个分区的好处是：浏览器可以独立滚动表体，打印分页也更合理。
当单元格需要跨行或跨列时，用colspan和rowspan。colspan="2"表示这个单元格横跨两列，rowspan="2"表示纵跨两行。合并的顺序建议：先理清最终的网格结构，从左上角开始逐个单元格设置合并属性，否则后面很容易数错列数。如果表格列数不一致，浏览器会自动补出空的网格，看起来就像表格错位。
3.4 表单：收集用户信息的核心手段
表单是HTML里功能最丰富的部分，因为它的目标是"把用户输入的数据交给服务器处理"。一个基础表单是这样的：
<form action="/api/login" method="post"> <label for="username">用户名</label> <input type="text" id="username" name="username" required> <label for="password">密码</label> <input type="password" id="password" name="password" required> <button type="submit">登录</button> </form>form标签的action指定数据提交到哪个后端地址，method指定请求方式。post通常用于提交数据，get会把数据拼在URL后面。input标签的type属性决定控件类型：
text：单行文本；password：密码框，输入内容打码；email：邮箱输入，带格式校验；number：数字输入，可控制min、max、step；checkbox：复选框，多个同name的checkbox可以多选；radio：单选按钮，同name的一组只能选一个；file：文件选择器；date、color、range：HTML5新增的日期、颜色和滑块控件；hidden：隐藏字段，用户看不见但会随表单提交。
每种type背后，浏览器都实现了对应的交互逻辑和原生校验规则，这能帮你省大量时间。但请记住：浏览器的校验只是体验优化，并不是安全边界，后端依然要做完整校验，这是开发常识。
input还有一个name属性，很多人会漏掉。name是提交数据的"键名"，后端靠它来识别"这个值对应哪个字段"。没有name的input，数据根本不提交。我排查表单问题的第一件事，就是检查每个需要提交的控件是否都有name。
另外label标签很重要：它把文字说明和对应控件绑定在一起。绑定的方法是for属性指向控件的id。这样做的好处是点击label文字就等于点击了控件，对触摸设备和屏幕阅读器都非常友好，也是无障碍开发的基础要求。
select下拉框和textarea多行文本框也经常和form配合使用：
<select name="city"> <option value="hangzhou">杭州</option> <option value="beijing">北京</option> </select> <textarea name="remark" rows="4" cols="30"></textarea>注意：select的name写在select上，option的value才是提交的数据；textarea没有value属性，它标签之间的文本就是它的值。
4. HTML5新能力：语义化、多媒体与Canvas绘图
4.1 语义化标签：让搜索引擎和无障碍工具看懂页面
HTML5之前，开发者手里只有div，于是整个页面全靠div加id硬撑，代码看起来满屏都是<div>，别人很难从标签本身看出每个区块的含义。HTML5引入的语义化标签，本质上是给div起的"更具体的名字"：
header：页头区域；nav：导航区域；main：主体内容区域；article：独立的文章或内容块；section：内容的分区；aside：侧边栏、辅助信息；footer：页脚区域；figure/figcaption：配图及图注；time：时间。
这些标签的渲染效果和div一模一样，都是块级元素、默认无样式，真正的价值在语义层面。搜索引擎的爬虫在抓取页面时，可以更准确地识别哪里是导航、哪里是正文，从而提升搜索排名；屏幕阅读器可以把这些区域快速暴露给视障用户；后续维护时别人看代码也能一秒钟知道页面结构。
我建议你把语义化当成一种习惯而不是加分项。当你要在页面上画一个区域，先问自己：它是什么？是导航就用nav，是文章就用article，只是一个通用容器才用div。这跟你给变量起有意义的名称是一个道理。
4.2 音视频嵌入：三行代码搞定播放器
在HTML5以前，网页里嵌入视频基本只能靠Flash插件，运行慢还有安全风险。HTML5标准的一个重大贡献，就是原生video和audio标签。一个最简单的视频播放器：
<video controls width="640"> <source src="movie.mp4" type="video/mp4"> 你的浏览器不支持video标签。 </video>controls属性让浏览器显示播放、暂停、音量、进度条等控件；如果不加，整个视频区域就像一张静止图片，只能用JS控制播放。src指向视频文件，type声明MIME类型，帮助浏览器快速判断能否播放。source支持多个，浏览器会从第一个开始按顺序尝试，直到找到它能解码的格式。
音频的写法几乎一样，把video换成audio就行。注意autoplay属性在主流浏览器里基本都被禁用了（至少会静音后再尝试播放），这主要是用户体验和流量消耗的考虑，所以别指望页面一打开就自动播放带声音的视频。muted和autoplay一起用，在某些场景下可以绕过自动播放限制。
4.3 Canvas入门：亲手画第一个图形
Canvas是HTML5里最强大的绘图能力之一，它提供了一块你可以用JavaScript画图的面板。几乎所有在线图表库、小游戏、图像处理工具，底层都是Canvas。它的基本用法分三步：写一个canvas标签，拿到画布上下文，调用绘图API。
<canvas id="myCanvas" width="400" height="300"></canvas>然后在script里：
const canvas = document.getElementById('myCanvas'); const ctx = canvas.getContext('2d'); ctx.fillStyle = '#ff6600'; ctx.fillRect(20, 20, 150, 100);getContext('2d')是"画笔工具"，2d表示二维绘图上下文；fillStyle设定填充色；fillRect画一个从(20, 20)开始，宽150、高100的矩形。坐标原点在canvas左上角，x向右增长，y向下增长，这个坐标系是Canvas乃至几乎所有前端图形库的基础。
画文字、画圆、画贝塞尔曲线、读取像素做滤镜效果，这些都属于Canvas的高级玩法。对于初学者，先把坐标系、路径、填充和描边的概念搞清楚，后续学图表库、游戏引擎都会很顺畅。另外提醒一句：canvas的width和height属性写在HTML里，纯数字就行；如果你在CSS里设置宽高，记得它和canvas内部像素坐标系是独立的，稍不注意就会出现模糊或拉伸变形的问题。
5. 进阶整合：HTML+CSS+JS是怎么协同工作的
5.1 CSS怎么把HTML变好看：选择器与盒模型
到了这里，你的HTML已经搭起了骨架，但页面还是黑白原生的样子。CSS（层叠样式表）就是用来"化妆"的。CSS选择器决定"给谁加样式"，声明块决定"加什么样式"。
三种基本选择器：标签选择器（p { color: red }给所有p加红色）、类选择器（.box { border: 1px solid #ccc }给所有class为box的元素加边框）、ID选择器（#logo { width: 100px }给id为logo的唯一元素设定宽度）。类可以重复使用，ID一个页面只能有一个，所以实际项目中类选择器占绝大多数。
CSS的盒模型（Box Model）是理解布局的核心概念。每个元素都是一个"盒子"，从内到外依次是：内容（content）、内边距（padding）、边框（border）、外边距（margin）。默认情况下，你设置的width只作用于内容区，所以一个宽300px、padding 20px、border 1px的盒子，总宽度是300+202+12=342px。这个计算方式常常让新手感到"我的盒子怎么变宽了"。用box-sizing: border-box可以改变计算方式，让width包含padding和border，布局更可控。很多组件库干脆把所有元素都设成border-box，就是这个原因。
样式代码可以写在三个地方：内联样式（style属性）、内部样式（<style>标签）、外部样式表（<link>引入）。推荐用外部样式表，因为HTML负责结构，CSS负责表现，职责分离之后可以复用、可以缓存，也不会让标签变得臃肿。
5.2 JS怎么让HTML动起来：DOM操作入门
JavaScript是让页面"活"起来的语言。前面说过，HTML会被浏览器解析成DOM树，JS能对这棵树进行增删改查。一个最典型的交互是"点击按钮，改变页面文字"：
const btn = document.getElementById('myButton'); const text = document.getElementById('myText'); btn.addEventListener('click', function() { text.textContent = '你点击了按钮'; });addEventListener给按钮绑定了click事件，每次点击执行回调函数。这和HTML里写onclick="..."相比，JS和HTML彻底分离，代码更干净，还能绑定多个处理函数。
页面加载的时机是个经典陷阱：如果你把script标签放在body末尾，DOM已经解析完毕，直接用没问题；如果放在head里，这时浏览器还没解析到body的元素，getElementById会返回null。解决办法是等DOM就绪事件，或者干脆把script放到body结束标签之前——这也是我推荐新手形成的习惯。
5.3 实战：5分钟实现一个返回顶部按钮
现在把三剑客串起来做一个完整功能：页面内容较长时，右下角出现一个"返回顶部"按钮。完整代码如下：
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8"> <style> #backTop { position: fixed; right: 30px; bottom: 60px; display: none; padding: 10px 16px; background: #333; color: #fff; border: none; cursor: pointer; border-radius: 6px; } </style> </head> <body> <div style="height: 2000px; background: linear-gradient(#eee, #fff);"> 内容很长的区域 </div> <button id="backTop" type="button">返回顶部</button> <script> const backTopBtn = document.getElementById('backTop'); window.addEventListener('scroll', function() { if (window.scrollY > 400) { backTopBtn.style.display = 'block'; } else { backTopBtn.style.display = 'none'; } }); backTopBtn.addEventListener('click', function() { window.scrollTo({ top: 0, behavior: 'smooth' }); }); </script> </body> </html>拆解一下每一步的逻辑：
position: fixed让按钮固定在视口右下角，不随页面滚动。- 窗口的
scroll事件监听滚动，window.scrollY返回当前滚过的垂直距离，超过400px就显示按钮，否则隐藏。 - 点击按钮时用
window.scrollTo平滑滚动到顶部，behavior: 'smooth'会让动画过渡，而不是瞬间跳变。
这里面有一个容易踩的细节：为什么按钮用type="button"？因为默认的button在form里会提交表单，显式声明type="button"可以避免歧义。另外，动态设置display只改变了内联样式，如果按钮原本有其他类样式，可能被覆盖，但在这个简单例子里不成问题。
5.4 综合实战：从零写一个带导航和样色的个人主页
把这一章的内容汇总到一起，做一个完整的小页面。它包含语义化结构、CSS样式和一点点JS交互，这也是一个"HTML+CSS+JS"三剑客集成的最简范例，类似你在网上下载的那些"前端页面设计模板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> <style> * { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: system-ui, sans-serif; line-height: 1.6; color: #333; } header { background: #2c3e50; color: #fff; padding: 20px; text-align: center; } nav a { color: #fff; margin: 0 12px; text-decoration: none; } main { max-width: 800px; margin: 30px auto; padding: 0 20px; } .card { border: 1px solid #e0e0e0; border-radius: 8px; padding: 16px; margin-bottom: 20px; } .card h2 { margin-bottom: 8px; } #themeBtn { display: block; margin: 0 auto 30px; padding: 8px 18px; cursor: pointer; } footer { text-align: center; padding: 20px; color: #888; } </style> </head> <body> <header> <h1>阿杰的博客</h1> <nav> <a href="#about">关于我</a> <a href="#projects">项目</a> <a href="mailto:me@example.com">联系我</a> </nav> </header> <main> <section class="card" id="about"> <h2>关于我</h2> <p>一个热爱网页开发的学习者，正在从HTML开始逐步走向全栈。</p> </section> <section class="card" id="projects"> <h2>项目</h2> <p>这里展示我写过的小页面和实验，包括个人主页、指南页、趣味特效等。</p> </section> <button id="themeBtn" type="button">切换背景色</button> </main> <footer>© 2025 阿杰的博客</footer> <script> const btn = document.getElementById('themeBtn'); let light = true; btn.addEventListener('click', function() { document.body.style.background = light ? '#fdf6e3' : '#fff'; light = !light; }); </script> </body> </html>这个页面虽然简单，但已经把语义化header/nav/main/section/footer全部用上了，CSS盒模型也在.card上体现得很清楚，JS则完成了一个小交互。如果要做成多页面站点，只需要把公共部分抽出来，页面之间用<a>互相链接，再把所有HTML文件放在同一个目录或同一个项目文件夹里，就成了一个最简单的"打包多个HTML"站点。
6. 拓展场景：HTML不止是网页——Markdown转换、邮件模板与桌面嵌入
6.1 HTML与Markdown相互转换：文档写作的高效组合
不少同学会问：我已经会写Markdown了，为什么还要会HTML？其实两者各有所长。Markdown语法简单、可读性好，适合快速记录和写作；HTML最终渲染能力更强，适合复杂排版。在实际工作中，这两个格式经常需要互相转换：博客系统的Markdown文档要一键导出为HTML发布；收到的HTML内容（比如网页正文、邮件）要转成Markdown放进自己的笔记库。
前端工具链里有一个成熟的方案叫Turndown，它能把HTML转成Markdown；反过来Markdown转HTML，主流方案是Marked或Pandoc。以Turndown为例，用法非常简洁：
import TurndownService from 'turndown'; const turndownService = new TurndownService(); const markdown = turndownService.turndown('<p>你好，世界</p><ul><li>条目</li></ul>'); console.log(markdown); // 输出: 你好，世界\n\n- 条目做转换时容易踩的坑是：表格、代码块、图片这类复杂元素，默认规则不一定覆盖得好。比如Turndown对table的转换依赖特定选项，可能需要手动开启。我的建议是转换前先检查目标工具链是否支持这些复杂结构，否则转出来的Markdown会丢信息。同理，如果你写的工具要"HTML格式转换WPS表格"，本质也是把HTML里的表格数据抽取出来，转成CSV或Excel可识别的结构，思路是一致的：先定位到table节点，再逐行逐格提取文本。
6.2 邮件模板开发：为什么回到表格布局
如果你需要写HTML邮件（营销邮件、通知邮件、周报邮件），你会碰到一个完全不同的世界。主流的邮件客户端（Outlook、Gmail、Apple Mail）对CSS的支持千差万别，很多现代CSS特性在邮件里根本无法使用。最稳妥的方案反而是"回到20年前"：用表格布局、用内联样式、不用JS。
具体来说，HTML邮件的几大铁律：
- 外层用table嵌套，最常见的是600px~700px宽的单列表格。
- 所有样式写内联style，因为很多客户端会拦截
<style>标签里的样式。 - 图片要写alt，很多邮件客户端默认不加载图片。
- 字体尽量用系统通用字体栈，避免自定义字体。
- 尽量避免
div和CSS float，因为Outlook对它们的支持惨不忍睹。
写HTML邮件确实痛苦，但理解了"客户端兼容性"这个制约因素之后，你会发现所有设计都在向它妥协。这其实是HTML应用的另一个侧面：同一个语言，在不同运行环境里，最佳实践可能完全相反。做网页时大家都在推进语义化，做邮件时却得老老实实回到表格。
6.3 把HTML跑在桌面应用里：PyQt5与WebView2
HTML不止能在浏览器里运行。很多桌面应用会把HTML作为一种界面渲染方案，因为它天然具有富文本排版能力，也比桌面原生控件更容易做出炫酷的界面。
Python的PyQt5里嵌入网页，通常用QWebEngineView：
from PyQt5.QtWidgets import QApplication from PyQt5.QtWebEngineWidgets import QWebEngineView import sys app = QApplication(sys.argv) view = QWebEngineView() view.setHtml(''' <!DOCTYPE html> <html> <head><meta charset="utf-8"></head> <body><h1>你好，桌面的HTML</h1></body> </html> ''') view.resize(600, 400) view.show() sys.exit(app.exec_())Windows的C++/MFC程序里，则可以使用WebView2（基于Chromium内核）把HTML当作主界面，甚至可以在MFC界面里让HTML全覆盖作为主视图。这种方案特别适合"内部工具软件"场景：业务逻辑用C++写，界面用HTML+CSS+JS写，渲染能力强，改界面还不用重新编译。另一个典型的跨平台方案是Electron，VS Code、Notion桌面版都是这么做的。
这对网页开发者是个好消息：HTML的技能栈可以沉淀到桌面端。遇到"这个界面不好看"的抱怨时，多一个手段就多一条出路。
6.4 趣味案例：爱心、烟花、倒计时页面的本质
你大概率刷到过类似"爱心代码HTML""烟花代码HTML""放假倒计时HTML"这样的热词。这些页面的本质并不神秘——它们都是标准的HTML文件，只不过在body里引入了CSS做视觉特效、用JavaScript做动画和逻辑计算。
比如一个"烟花"页面，核心就是canvas加上一个粒子系统：每次烟花爆炸生成几十个粒子对象，粒子的位置和速度在requestAnimationFrame循环里更新，然后在canvas上重新绘制。一个"倒计时"页面，核心是计算目标时间戳与当前时间戳的差值，用setInterval每秒刷新一次DOM文本，最后把天、时、分、秒分别拆出来显示。
这些趣味项目很适合用来练习"从看到效果，到拆解原理"的能力。拿到一个现成的HTML特效文件，右键查看源代码，看看它的结构、脚本、每一帧画了什么，你的HTML+CSS+JS综合能力会提升得非常快。脱离教程，能自己改一个参数、换一种颜色，才算真正学会。
另外，做这类页面时选择编辑器是有讲究的。Windows和macOS直接用VS Code就很顺手；如果你是Ubuntu用户，VS Code依然是首选，如果不习惯图形界面，也可以用Sublime Text或者Vim。无论用哪个编辑器，只要支持语法高亮、自动补全、实时预览，就足够了。编辑器不决定你的水平，你对HTML结构的理解才决定。
7. 排查与调试：页面出问题时的自救指南
7.1 页面乱码、样式失效：80%是这两点
页面出现乱码，99%是charset没有声明，或者声明的位置不对、编码和文件实际保存编码不一致。解决办法：确保文件以UTF-8编码保存，确保<meta charset="utf-8">出现在head前部。我见过一个案例：文件确实是UTF-8，但meta写成了gb2312，浏览器按gb2312解码UTF-8的中文字节流，结果一片问号。记住，meta声明必须和文件的真实编码一致。
样式失效或"部分样式没有生效"，先按这三个顺序排查：一是CSS文件有没有被正确引入（Network里看CSS请求是否200）；二是选择器有没有匹配到目标元素（开发者工具Elements里检查计算后的样式）；三是有没有被更高优先级或更靠后的样式覆盖。优先级规则可简记为：内联样式 > ID选择器 > 类选择器 > 标签选择器，同优先级下后写的覆盖先写的。遇到"内联 style 和外部样式冲突"，通常是内联赢，因为它的优先级最高。
7.2 标签嵌套错误：布局乱掉的隐形元凶
浏览器对HTML的容错率其实非常高，但它会"自作主张"地修复嵌套错误，而这种修复往往不是你想要的结果。最经典的错误是p标签里嵌套div：
<p>这是一个段落 <div>我本来想在段落里放一个容器</div> </p>浏览器解析时会把div当作块级元素，在p开始标签之后隐式关闭p，导致结构变成"p + div + 无意义的空p"。于是布局多了两个块级元素，样式错乱。
规则说得很清楚：块级元素不能嵌套在p里；a标签不要嵌套a标签；ul的直接子元素必须是li；table的直接子元素应该是thead/tbody/tr等。这些都算HTML的"语法红线"。排查时最有效的办法是打开开发者工具Elements面板，看DOM树实际长什么样——浏览器修复后的结构和你的预期不一致，一眼就能发现。
7.3 开发者工具三板斧
不管你用什么浏览器，F12打开开发者工具永远是调试的第一步。三个最常用的面板：
- Elements：查看DOM结构和样式。可以临时修改HTML属性、CSS属性，页面立马刷新效果，非常适合调试时"试一试行不行"。
- Console：JavaScript运行日志和错误信息。红色报错是排查JS问题的第一线索，点开能看到具体文件和行号。
- Network：所有网络请求的列表。页面加载慢、图片不显示、CSS文件404，先来这个面板看请求状态码（200正常、304缓存、404找不到、500服务器错误）。
对于刚入门的人来说，开发者工具不是"高级功能"，而是日常操作。打开任何网站，按下F12，看看别人家的网页结构是怎么写的，可能是性价比最高的学习方式。
7.4 新手避坑清单
最后整理一份"踩坑清单"，都是我从各种大大小小的项目里总结出来的：
| 常见问题 | 原因 | 解决方案 |
|---|---|---|
| 中文乱码 | charset缺失或与文件编码不一致 | 文件存UTF-8，meta放head前部 |
| 图片不显示 | 路径拼错或src指向404 | Network面板查看请求地址 |
| 表单提交后没数据 | 控件缺少name属性 | 检查每个需要提交的控件name |
| 样式不生效 | 选择器错误或CSS未引入 | 检查Elements计算样式与Network请求 |
| 页面在手机上看很丑 | 缺少viewport meta | 添加viewport声明 |
| 点击按钮页面刷新了 | button默认type是submit | 显式写type="button" |
| 图片过大加载慢 | 没有压缩和懒加载 | 压缩图片 + loading="lazy" |
| 链接新开却被劫持 | 缺少rel="noopener" | _blank链接加noopener noreferrer |
| CSS总宽度超预期 | 盒模型计算方式问题 | 全局使用box-sizing: border-box |
| console获取元素为null | script放在head且DOM未就绪 | script放body末尾或等DOMContentLoaded |
回到开头的问题：HTML到底算不算编程？学到现在你应该有自己的答案了——它是编程世界最友善的入口，没有复杂的逻辑，没有抽象的概念，却有实实在在的结构之美。我见过太多人从写第一个HTML页面开始，一步步走进前端开发的大门。HTML就像那个"最简单的支点"，只要你对它足够熟悉，以后学CSS、学JavaScript、学各种框架，都会觉得地基稳、心里有底。
最后再分享一个我个人的学习技巧：不要死记标签和属性，去读别人的页面。打开你喜欢的网站，F12看一眼，再问自己"如果让我从零写这个结构，我会怎么写"。把看到的优秀做法抄下来，改一改造型，最后加上自己的想法。这个"模仿-修改-创造"的循环，是我见过的人里成长速度最快的路径。好了，教程就到这里，剩下的全靠多写多练——HTML这东西，写够1000行之前，谁也别说自己学废了。
