我最初接触HTML的时候其实是先在网上搜“HTML爱心代码”开始的——那年想给朋友做个生日页面复制了一堆代码到记事本双击打开屏幕上弹出一个带着动画特效的网页。那一刻我觉得这东西挺神奇的但完全看不懂那些尖括号里写的是什么。后来我才明白HTML是那种“看起来像天书、实际上特别简单”的东西它甚至不算编程语言而是一种标记语言。这篇是“初学HTML”系列的第一篇。我会完全站在零基础视角把HTML是什么、一份网页的标准骨架长什么样、怎么写出你的第一个页面、新手最容易在哪几个地方翻车一次讲明白。学完之后你再去网上搜那些“表白代码”“中秋节祝福页面”“生日快乐HTML”至少能看懂它们的大致结构而不是只能复制粘贴。1. 先别急着写代码HTML究竟是什么很多人一听“写网页”就觉得要学编程、要敲一堆复杂的英文命令。这个误解的第一个来源就是把HTML和JavaScript、Python这类真正的编程语言混为一谈。HTML的全称是HyperText Markup Language直译过来是“超文本标记语言”。关键在“标记”这个词。它的工作方式不是“计算”而是“标注”——就像你用荧光笔在纸质书上划重点告诉别人“这段是标题、这段是正文、这里要放一张图”。浏览器做的事情就是读取这些标记然后把它们转换成你看到的网页界面。为了更好理解可以把一个网页想象成一间毛坯房HTML是承重墙和户型图决定了房间里有哪些区域、什么结构CSS是装修风格负责墙刷什么颜色、沙发放哪里、灯什么样的JavaScript是水电和智能家居负责让房间“动”起来——按下开关灯亮、门铃响了播放音乐、点击按钮弹出一个窗口。这三者各司其职又相互配合。第一篇我只会讲HTML因为它解决的是“这页面上有什么”的问题是最先需要打好的地基。HTML本身还有一个特点它“出错也不会崩溃”。你把一段乱码扔给浏览器它大概率不会报错只是显示得乱七八糟。这种宽容性对新手很友好——你可以随便改、随便实验不会把电脑搞坏代价是遇到问题时浏览器也不会告诉你错在哪需要靠自己排查。基于这个特点我给你的第一个建议是学习阶段打开记事本或者任意文本编辑器就能开始不用急着装复杂软件。等你后面要写更复杂页面了再考虑VS Code这类的专业工具。2. 一份标准HTML文档的长相拆解最基础的骨架你去搜索引擎搜“HTML基础”十有八九会看到一段以!doctype html开头的代码。很多人第一次看到这行就懵了其实它是整个文档最没必要害怕的部分。我先把一份最简标准骨架完整展示出来然后逐行拆。!DOCTYPE html html langzh-CN head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title我的第一个网页/title /head body h1你好HTML/h1 p这是我的第一个页面。/p /body /html这块代码量很少但其中已经包含了所有HTML文档必备的组成部分。我把它们分成两类一类是“从没变过的标准结构”一类是“真正影响页面内容的标签”。2.1 文档类型声明与html标签!DOCTYPE html是给浏览器看的一句“说明书”意思是“这是一份遵循现代HTML标准编写的文档”。它不需要结束标记只在文档最顶部出现一次。忘了写它页面在大多数浏览器里依然能显示但可能在旧浏览器里触发奇怪的兼容模式。紧接着的html langzh-CN是真正的根标签所有其他标签都得包在它里面。langzh-CN声明了页面内容主要使用简体中文这对搜索引擎优化和无障碍阅读都有帮助——屏幕阅读器可以据此选择正确的发音规则。2.2 head区域网页的“后台配置”head标签里的内容都不会直接显示在页面上但它决定了浏览器怎么处理这个页面。这个区域里有三个高频出现的配置meta charsetUTF-8设置页面编码为UTF-8。这句太重要了几乎一半新手遇到的中文乱码问题都跟它有关。后面第4节我会专门展开。meta nameviewport contentwidthdevice-width, initial-scale1.0这个是给移动端浏览器看的告诉它“按手机屏幕宽度来渲染页面”而不是默认按电脑宽度缩小显示。不写这行你用手机打开自己做的页面时会发现字小得可怜需要双指缩放才能看清。title我的第一个网页/title定义浏览器标签页上显示的标题。搜索引擎搜到你页面时显示出来的标题也是它。2.3 body区域页面上能看到的一切body标签包着的内容才是你真正在屏幕上看到的。h1表示一级标题p表示段落。这里我直接用了两个最基础的标签先把“能跑起来”的成就感给到你。这一段读下来你应该已经能理解那些网上流传的“以!doctype html开头的一长串代码”是怎么回事了——它们和这里的骨架完全一样只是中间多填了很多内容而已。热搜词里经常出现“!doctype htmlhtml langzh-cnheadmeta charsetutf-8”这种搜索片段说明很多人拿到手的代码模板核心结构就是这几行。有一点值得注意HTML标签必须“成对出现”。html要有对应的/htmlhead要有/headbody要有/body。只有极少数标签可以单独使用比如meta和后面会讲的img。3. 写出你的第一个页面个人名片制作实战骨架看懂了就可以写点更有意思的东西了。我不让你写“Hello World”那太没成就感。我们直接做一个个人名片页面——包含你的姓名、简介、几张个人资料卡片、一个联系方式链接。先把完整代码贴出来再逐段解释。!DOCTYPE html html langzh-CN head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title我的个人名片/title /head body h1张三/h1 p一名对前端技术感兴趣的初学者正在努力学习HTML和CSS。/p h2基本信息/h2 ul li所在城市杭州/li li职业学生/li li邮箱zhangsanexample.com/li /ul h2个人简介/h2 p平时喜欢研究网页制作尤其对页面结构和交互效果感兴趣。正在通过动手实践的方式一步步掌握前端开发的基础知识。/p h2我的兴趣/h2 ol li学习新技术/li li阅读技术博客/li li尝试搭建个人网站/li /ol p你可以通过 a hrefmailto:zhangsanexample.com邮件/a 联系我。/p /body /html保存成一个文件命名随意但扩展名必须是.html然后双击用浏览器打开就能看到属于你的第一张网页名片了。3.1 标签嵌套的“盒子”逻辑这份代码里出现了几个新标签ul、ol、li、a、h2。我把它们归类解释h2是二级标题用来做板块小标题。标题一共有六级从h1到h6默认字号和重要性逐级递减。一个页面里通常只有一两个h1就够了后面再看你的使用目的来定。ul代表无序列表浏览器渲染时会在每个列表项前加圆点ol代表有序列表渲染时自动加数字序号。li是里面的列表项必须被包在ul或ol里。a是超链接标签href属性指定链接目标。mailto:前缀表示打开用户的邮件客户端创建一封新邮件。这里有一个关键概念嵌套。HTML是一种树状结构标签要一层层包好不能交叉。我写一个错误示例让你感受一下ul li项目一/li li项目二 /ul/li这段代码里/li被写在了/ul的后面浏览器虽然不会崩溃但解析出来的结构会乱掉极可能导致页面显示不正常。正确的思路是先关闭最后打开的标签一层一层往外关。3.2 属性和值标签的“参数配置”刚才代码中的langzh-CN、hrefmailto:...都叫属性。属性给标签补充配置信息一般写在开始标签里格式为属性名属性值。我列几个新手最常见的基础属性理解和掌握了它们后续上手会顺畅很多属性常用于作用hrefa指定链接目标地址支持网址、邮箱、锚点等srcimg、script指定外部资源的文件路径altimg图片加载失败时显示的替代文字id任意标签给标签一个唯一标识方便CSS和JavaScript定位class任意标签给标签归类方便批量设置样式第一个页面做的过程中最常见的坑有两个。一是标签拼写错误把body写成boday浏览器虽然会设法容错但页面可能不会按预期渲染你得用浏览器开发者工具F12才能发现。二是属性值没加引号写成hrefmailto:zhangsanexample.com这在多数情况下还能工作但遇到值中间包含空格或特殊字符时就会出错所以从一开始就养成加引号的习惯。4. 新手最容易踩的三个坑乱码、嵌套错乱和路径问题这个系列既然叫“初学”我就必须把新手阶段最高频的报错现场提前告诉你。很多问题不是知识量大导致的而是操作习惯上缺了某个环节。我按踩坑频率排个序。4.1 中文乱码八成是编码没对齐你新建一个HTML文件写入中文字符保存后打开发现页面里出现一堆“꿨”或者“汉嗔这就是乱码。绝大多数情况下原因只有一个保存文件时使用的编码和meta charsetUTF-8声明的不一致。前端开发里最常用的是UTF-8编码它能覆盖全球绝大部分文字。但Windows记事本默认的“另存为”编码可能是ANSI本地编码简体中文环境下是GBK两者互相不认页面就乱了。解决办法有两条路用支持选择编码的编辑器比如VS Code右下角把文件编码改成UTF-8如果是记事本保存时在“另存为”对话框里把编码选成UTF-8。顺带说明一个细节meta charsetUTF-8要尽量写在head靠前的位置保证浏览器一进入文档就拿到编码信息。如果你把它写在title标签后面有些情况下可能产生一小段乱码。4.2 标签的嵌套关系错乱结构对了显示才对前面我演示过一个“先关/ul再关/li”的错误案例。浏览器解析文档时遇到闭合错误的标签会尝试自动修正这个过程叫“容错”。但容错机制不是万能的。举一个常见的错误思路想给部分文字加粗把代码写成了下面这样p这是一段 strong加粗文字/p 的示例/strongstrong是先被打开的却最后被关闭形成了交叉嵌套。浏览器为了“自圆其说”通常会提前关闭p后续内容显示就可能跟你说想的不一样比如标题级别错乱、列表序号重排。从第一天起就养成的习惯写完一组嵌套标签先检查/结尾标签的关闭顺序再由内往外核对。VS Code这类编辑器有标签高亮和自动缩进能大大减少这类错误记事本没有这些辅助就只能靠眼力。4.3 图片显示不出来、链接打不开路径没弄明白在名片页面里如果你尝试加入一张照片最常见的问题是img srcC:\Users\张三\Desktop\我的照片.jpg在你自己电脑上这样写双击打开页面可能能显示。但如果把HTML文件发给别人他打开就看不到图了——因为那个路径存在于你的电脑上别人的电脑里根本没有这个文件。正确做法是把HTML文件和图片放在同一个文件夹里然后用src我的照片.jpg这种相对路径引用。这才是网页能“搬到别的电脑上依然正常显示”的关键。相对路径的基础规则只有几条同一个文件夹下直接写文件名文件在下一级文件夹里写images/我的照片.jpg文件在上一级文件夹里写../我的照片.jpg。链接同理。你写hrefabout.html浏览器会自动在当前目录下找about.html你写hrefhttps://example.com它才会跳到外部网站。很多新手把两种方式混着用页面一换位置就全院路断就是没理解这个基础逻辑。5. 学完第一课能干什么从网上那些花哨代码说起你可能注意到网上搜索“HTML”热门的搜索词往往是“HTML爱心代码”“生日快乐HTML网页”“中秋节快乐HTML代码”“表白代码HTML”——清一色和节日祝福、情感表达有关。这个现象背后其实透露了一个信息大部分人学HTML不是想当专业前端工程师而是想亲手做一个能拿得出手的、带心意的东西送给别人。这个需求非常真实也完全可以实现。我在这里给你做个心理建设那些花哨页面看着炫酷本质上依然是HTML骨架只不过套了两层东西——一层是CSS管颜色、字体、动画另一层是JavaScript管实时交互。比如“爱心代码”页面上飘落的爱心特效核心逻辑是用JavaScript不断创建新的div或canvas元素再用CSS控制它的位置和动画轨迹。骨架本身和你第一课看到的没本质区别。所以学完这一篇你可以做两件事打开一个你找到的HTML模板对照这篇内容把结构拆出来head里有什么、body里有哪些区块、每个区块用到了哪些标题和列表标签。能拆出来说明你的第一课真正到位了。在拆解的基础上替换里面的文字内容、修改图片路径、调整标题级别做成属于自己的版本。这是比照着抄更有价值的训练。不过也要泼一盆冷水HTML本身没有“逻辑判断”能力它只能决定“有什么”“顺序是什么”不能决定“什么条件下显示什么”。网上那些会动的页面靠的都是CSS和JavaScript。你想系统学下去第二篇我会接上CSS告诉你怎么给页面换颜色、改字体、调布局——那是从“毛坯房”走向“精装房”的关键一步。我自己当年学HTML最大体会是这个语言最大的门槛不是知识量而是“敢动手”。名词解释看十遍都不如亲手写一个标签、让浏览器显示出来一次。所以看到这里请你立刻放下文章新建一个文件把第3节的个人名片代码敲一遍改成你自己的信息再用浏览器打开看看效果。哪怕只是把名字改成你的真名也算迈出了第一步。最后送给你一个小习惯每当想验证一个标签怎么用不要只靠死记直接打开一个HTML文件写上这行代码保存刷新看浏览器显示成什么样。你亲手试过几次之后那些标签基本就忘不掉了。这也是我后来能记住这么多标签的原因。 
长河君 · 2026/10/10 12:50:27 · 阅读 1.2k 零基础学HTML：从标签到网页骨架，写出你的第一个页面
我最初接触HTML的时候其实是先在网上搜“HTML爱心代码”开始的——那年想给朋友做个生日页面复制了一堆代码到记事本双击打开屏幕上弹出一个带着动画特效的网页。那一刻我觉得这东西挺神奇的但完全看不懂那些尖括号里写的是什么。后来我才明白HTML是那种“看起来像天书、实际上特别简单”的东西它甚至不算编程语言而是一种标记语言。这篇是“初学HTML”系列的第一篇。我会完全站在零基础视角把HTML是什么、一份网页的标准骨架长什么样、怎么写出你的第一个页面、新手最容易在哪几个地方翻车一次讲明白。学完之后你再去网上搜那些“表白代码”“中秋节祝福页面”“生日快乐HTML”至少能看懂它们的大致结构而不是只能复制粘贴。1. 先别急着写代码HTML究竟是什么很多人一听“写网页”就觉得要学编程、要敲一堆复杂的英文命令。这个误解的第一个来源就是把HTML和JavaScript、Python这类真正的编程语言混为一谈。HTML的全称是HyperText Markup Language直译过来是“超文本标记语言”。关键在“标记”这个词。它的工作方式不是“计算”而是“标注”——就像你用荧光笔在纸质书上划重点告诉别人“这段是标题、这段是正文、这里要放一张图”。浏览器做的事情就是读取这些标记然后把它们转换成你看到的网页界面。为了更好理解可以把一个网页想象成一间毛坯房HTML是承重墙和户型图决定了房间里有哪些区域、什么结构CSS是装修风格负责墙刷什么颜色、沙发放哪里、灯什么样的JavaScript是水电和智能家居负责让房间“动”起来——按下开关灯亮、门铃响了播放音乐、点击按钮弹出一个窗口。这三者各司其职又相互配合。第一篇我只会讲HTML因为它解决的是“这页面上有什么”的问题是最先需要打好的地基。HTML本身还有一个特点它“出错也不会崩溃”。你把一段乱码扔给浏览器它大概率不会报错只是显示得乱七八糟。这种宽容性对新手很友好——你可以随便改、随便实验不会把电脑搞坏代价是遇到问题时浏览器也不会告诉你错在哪需要靠自己排查。基于这个特点我给你的第一个建议是学习阶段打开记事本或者任意文本编辑器就能开始不用急着装复杂软件。等你后面要写更复杂页面了再考虑VS Code这类的专业工具。2. 一份标准HTML文档的长相拆解最基础的骨架你去搜索引擎搜“HTML基础”十有八九会看到一段以!doctype html开头的代码。很多人第一次看到这行就懵了其实它是整个文档最没必要害怕的部分。我先把一份最简标准骨架完整展示出来然后逐行拆。!DOCTYPE html html langzh-CN head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title我的第一个网页/title /head body h1你好HTML/h1 p这是我的第一个页面。/p /body /html这块代码量很少但其中已经包含了所有HTML文档必备的组成部分。我把它们分成两类一类是“从没变过的标准结构”一类是“真正影响页面内容的标签”。2.1 文档类型声明与html标签!DOCTYPE html是给浏览器看的一句“说明书”意思是“这是一份遵循现代HTML标准编写的文档”。它不需要结束标记只在文档最顶部出现一次。忘了写它页面在大多数浏览器里依然能显示但可能在旧浏览器里触发奇怪的兼容模式。紧接着的html langzh-CN是真正的根标签所有其他标签都得包在它里面。langzh-CN声明了页面内容主要使用简体中文这对搜索引擎优化和无障碍阅读都有帮助——屏幕阅读器可以据此选择正确的发音规则。2.2 head区域网页的“后台配置”head标签里的内容都不会直接显示在页面上但它决定了浏览器怎么处理这个页面。这个区域里有三个高频出现的配置meta charsetUTF-8设置页面编码为UTF-8。这句太重要了几乎一半新手遇到的中文乱码问题都跟它有关。后面第4节我会专门展开。meta nameviewport contentwidthdevice-width, initial-scale1.0这个是给移动端浏览器看的告诉它“按手机屏幕宽度来渲染页面”而不是默认按电脑宽度缩小显示。不写这行你用手机打开自己做的页面时会发现字小得可怜需要双指缩放才能看清。title我的第一个网页/title定义浏览器标签页上显示的标题。搜索引擎搜到你页面时显示出来的标题也是它。2.3 body区域页面上能看到的一切body标签包着的内容才是你真正在屏幕上看到的。h1表示一级标题p表示段落。这里我直接用了两个最基础的标签先把“能跑起来”的成就感给到你。这一段读下来你应该已经能理解那些网上流传的“以!doctype html开头的一长串代码”是怎么回事了——它们和这里的骨架完全一样只是中间多填了很多内容而已。热搜词里经常出现“!doctype htmlhtml langzh-cnheadmeta charsetutf-8”这种搜索片段说明很多人拿到手的代码模板核心结构就是这几行。有一点值得注意HTML标签必须“成对出现”。html要有对应的/htmlhead要有/headbody要有/body。只有极少数标签可以单独使用比如meta和后面会讲的img。3. 写出你的第一个页面个人名片制作实战骨架看懂了就可以写点更有意思的东西了。我不让你写“Hello World”那太没成就感。我们直接做一个个人名片页面——包含你的姓名、简介、几张个人资料卡片、一个联系方式链接。先把完整代码贴出来再逐段解释。!DOCTYPE html html langzh-CN head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title我的个人名片/title /head body h1张三/h1 p一名对前端技术感兴趣的初学者正在努力学习HTML和CSS。/p h2基本信息/h2 ul li所在城市杭州/li li职业学生/li li邮箱zhangsanexample.com/li /ul h2个人简介/h2 p平时喜欢研究网页制作尤其对页面结构和交互效果感兴趣。正在通过动手实践的方式一步步掌握前端开发的基础知识。/p h2我的兴趣/h2 ol li学习新技术/li li阅读技术博客/li li尝试搭建个人网站/li /ol p你可以通过 a hrefmailto:zhangsanexample.com邮件/a 联系我。/p /body /html保存成一个文件命名随意但扩展名必须是.html然后双击用浏览器打开就能看到属于你的第一张网页名片了。3.1 标签嵌套的“盒子”逻辑这份代码里出现了几个新标签ul、ol、li、a、h2。我把它们归类解释h2是二级标题用来做板块小标题。标题一共有六级从h1到h6默认字号和重要性逐级递减。一个页面里通常只有一两个h1就够了后面再看你的使用目的来定。ul代表无序列表浏览器渲染时会在每个列表项前加圆点ol代表有序列表渲染时自动加数字序号。li是里面的列表项必须被包在ul或ol里。a是超链接标签href属性指定链接目标。mailto:前缀表示打开用户的邮件客户端创建一封新邮件。这里有一个关键概念嵌套。HTML是一种树状结构标签要一层层包好不能交叉。我写一个错误示例让你感受一下ul li项目一/li li项目二 /ul/li这段代码里/li被写在了/ul的后面浏览器虽然不会崩溃但解析出来的结构会乱掉极可能导致页面显示不正常。正确的思路是先关闭最后打开的标签一层一层往外关。3.2 属性和值标签的“参数配置”刚才代码中的langzh-CN、hrefmailto:...都叫属性。属性给标签补充配置信息一般写在开始标签里格式为属性名属性值。我列几个新手最常见的基础属性理解和掌握了它们后续上手会顺畅很多属性常用于作用hrefa指定链接目标地址支持网址、邮箱、锚点等srcimg、script指定外部资源的文件路径altimg图片加载失败时显示的替代文字id任意标签给标签一个唯一标识方便CSS和JavaScript定位class任意标签给标签归类方便批量设置样式第一个页面做的过程中最常见的坑有两个。一是标签拼写错误把body写成boday浏览器虽然会设法容错但页面可能不会按预期渲染你得用浏览器开发者工具F12才能发现。二是属性值没加引号写成hrefmailto:zhangsanexample.com这在多数情况下还能工作但遇到值中间包含空格或特殊字符时就会出错所以从一开始就养成加引号的习惯。4. 新手最容易踩的三个坑乱码、嵌套错乱和路径问题这个系列既然叫“初学”我就必须把新手阶段最高频的报错现场提前告诉你。很多问题不是知识量大导致的而是操作习惯上缺了某个环节。我按踩坑频率排个序。4.1 中文乱码八成是编码没对齐你新建一个HTML文件写入中文字符保存后打开发现页面里出现一堆“꿨”或者“汉嗔这就是乱码。绝大多数情况下原因只有一个保存文件时使用的编码和meta charsetUTF-8声明的不一致。前端开发里最常用的是UTF-8编码它能覆盖全球绝大部分文字。但Windows记事本默认的“另存为”编码可能是ANSI本地编码简体中文环境下是GBK两者互相不认页面就乱了。解决办法有两条路用支持选择编码的编辑器比如VS Code右下角把文件编码改成UTF-8如果是记事本保存时在“另存为”对话框里把编码选成UTF-8。顺带说明一个细节meta charsetUTF-8要尽量写在head靠前的位置保证浏览器一进入文档就拿到编码信息。如果你把它写在title标签后面有些情况下可能产生一小段乱码。4.2 标签的嵌套关系错乱结构对了显示才对前面我演示过一个“先关/ul再关/li”的错误案例。浏览器解析文档时遇到闭合错误的标签会尝试自动修正这个过程叫“容错”。但容错机制不是万能的。举一个常见的错误思路想给部分文字加粗把代码写成了下面这样p这是一段 strong加粗文字/p 的示例/strongstrong是先被打开的却最后被关闭形成了交叉嵌套。浏览器为了“自圆其说”通常会提前关闭p后续内容显示就可能跟你说想的不一样比如标题级别错乱、列表序号重排。从第一天起就养成的习惯写完一组嵌套标签先检查/结尾标签的关闭顺序再由内往外核对。VS Code这类编辑器有标签高亮和自动缩进能大大减少这类错误记事本没有这些辅助就只能靠眼力。4.3 图片显示不出来、链接打不开路径没弄明白在名片页面里如果你尝试加入一张照片最常见的问题是img srcC:\Users\张三\Desktop\我的照片.jpg在你自己电脑上这样写双击打开页面可能能显示。但如果把HTML文件发给别人他打开就看不到图了——因为那个路径存在于你的电脑上别人的电脑里根本没有这个文件。正确做法是把HTML文件和图片放在同一个文件夹里然后用src我的照片.jpg这种相对路径引用。这才是网页能“搬到别的电脑上依然正常显示”的关键。相对路径的基础规则只有几条同一个文件夹下直接写文件名文件在下一级文件夹里写images/我的照片.jpg文件在上一级文件夹里写../我的照片.jpg。链接同理。你写hrefabout.html浏览器会自动在当前目录下找about.html你写hrefhttps://example.com它才会跳到外部网站。很多新手把两种方式混着用页面一换位置就全院路断就是没理解这个基础逻辑。5. 学完第一课能干什么从网上那些花哨代码说起你可能注意到网上搜索“HTML”热门的搜索词往往是“HTML爱心代码”“生日快乐HTML网页”“中秋节快乐HTML代码”“表白代码HTML”——清一色和节日祝福、情感表达有关。这个现象背后其实透露了一个信息大部分人学HTML不是想当专业前端工程师而是想亲手做一个能拿得出手的、带心意的东西送给别人。这个需求非常真实也完全可以实现。我在这里给你做个心理建设那些花哨页面看着炫酷本质上依然是HTML骨架只不过套了两层东西——一层是CSS管颜色、字体、动画另一层是JavaScript管实时交互。比如“爱心代码”页面上飘落的爱心特效核心逻辑是用JavaScript不断创建新的div或canvas元素再用CSS控制它的位置和动画轨迹。骨架本身和你第一课看到的没本质区别。所以学完这一篇你可以做两件事打开一个你找到的HTML模板对照这篇内容把结构拆出来head里有什么、body里有哪些区块、每个区块用到了哪些标题和列表标签。能拆出来说明你的第一课真正到位了。在拆解的基础上替换里面的文字内容、修改图片路径、调整标题级别做成属于自己的版本。这是比照着抄更有价值的训练。不过也要泼一盆冷水HTML本身没有“逻辑判断”能力它只能决定“有什么”“顺序是什么”不能决定“什么条件下显示什么”。网上那些会动的页面靠的都是CSS和JavaScript。你想系统学下去第二篇我会接上CSS告诉你怎么给页面换颜色、改字体、调布局——那是从“毛坯房”走向“精装房”的关键一步。我自己当年学HTML最大体会是这个语言最大的门槛不是知识量而是“敢动手”。名词解释看十遍都不如亲手写一个标签、让浏览器显示出来一次。所以看到这里请你立刻放下文章新建一个文件把第3节的个人名片代码敲一遍改成你自己的信息再用浏览器打开看看效果。哪怕只是把名字改成你的真名也算迈出了第一步。最后送给你一个小习惯每当想验证一个标签怎么用不要只靠死记直接打开一个HTML文件写上这行代码保存刷新看浏览器显示成什么样。你亲手试过几次之后那些标签基本就忘不掉了。这也是我后来能记住这么多标签的原因。