我早些年带新人的时候发现很多零基础的朋友第一次在浏览器里按 F12 看网页源代码都会产生一个错觉眼前这些密密麻麻的尖括号内容是什么天书写网页的人一定都是编程大佬。其实真相挺反直觉的——HTML 在整个网页技术栈里恰恰是最不编程的那一层。它不处理逻辑、不算数据、不做判断它只做一件事把标题、段落、图片、按钮、输入框这些内容用约定的记号框起来告诉浏览器这段是标题那张是图片这里要摆个输入框。这就是为什么我说HTML 基础入门是所有想学网页制作的人最没有门槛的一步哪怕你连变量是什么都不知道也能在一两天内亲手做出一个像模像样的网页。这篇文章我就按自己带新人的顺序来写从零开始讲 HTML 是什么、工具怎么选、标签怎么用再延伸到表格、表单、CSS 美化、JavaScript 交互最后用一个生日祝福页面把前面所有知识串起来。不管你是完全没接触过代码的纯小白还是想系统补一遍基础的半路出家党只要照着敲一遍当天就能看到成果。1. HTML的本来面目它不是编程语言而是文档的骨架1.1 先破除一个误解学HTML不需要会编程每次开课我都先让学员放下心理包袱HTML 的全称是 HyperText Markup Language中文叫超文本标记语言。注意重点在标记语言这四个字上它和 C、Java、Python 那类编程语言完全是两回事。编程语言要处理数据、写逻辑、控制流程而标记语言只负责给内容做标记就像你在纸质文稿上用荧光笔把标题画上线、把重点词圈出来——HTML 就是网页世界的荧光笔和便签条。我常用一个比喻来解释如果网页是一栋房子HTML 是墙体和房间结构CSS 是装修风格JavaScript 是水电网络。房子不能只有精装修没有承重墙所以你要学网页第一步永远是 HTML。一个做 HTML 的从业者本质上干的活是内容结构化把文字、图片、视频、表单这些原材料按浏览器能理解的方式摆放清楚。这个定位决定了它的学习曲线非常平缓不需要数学基础不需要英文好到能读文档认识 26 个字母就能上手。1.2 准备工具系统记事本也能写但我建议你用VS Code有些教程会告诉你用记事本就能写网页这话是对的但只对了一半。记事本确实能写 HTML它是纯文本编辑器保存成 .html 后缀后浏览器就能打开。但对新手来说没有代码高亮、没有自动补全、没有格式化写错一个标签名半天发现不了体验实在太劝退了。我建议直接上 VS Code免费跨平台Windows、macOS、Ubuntu 都有版本属于现在网页开发的事实标准。安装完之后做三件事第一装一个叫 Live Server 的插件它能在本地起一个小服务器保存文件后浏览器自动刷新写代码的反馈速度比手动刷新快一个量级第二在 VS Code 里按快捷键 CtrlN 新建文件再按 CtrlS 保存文件名取 index.html注意编码选 UTF-8第三直接输入一个英文感叹号!再按 Tab编辑器会自动生成一份完整的 HTML 骨架。这个骨架就是我们下一节要拆解的东西。1.3 写下第一个页面认识标签的成对结构在 VS Code 里用 ! Tab 生成的骨架大概长这样这也是全网热搜里出现频率最高的代码片段!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这段代码里的每一对标签名内容/标签名就是一个元素。比如h1和/h1包起来的是一级标题p和/p包起来的是一段文字。绝大多数 HTML 标签都是这种成对出现的写法前一个是开始标签后一个带斜杠的是结束标签两个标签夹住的部分就是该标签的领地。你不管写什么页面最外层一定是html里面分两部分head是不显示在页面上的配置区body是真正展示给用户的内容区。把这段代码保存成 index.html双击用浏览器打开你就能看到页面上显示了那行标题和段落。这个小成果比任何理论都能建立信心。2. 骨架解剖HTML文档的标准结构与必会标签2.1 文档声明与头部信息到底写了什么很多新手看骨架代码时总觉得head里的东西有股玄学味道今天我就把每行拆开讲透。第一行的!DOCTYPE html是文档类型声明它的作用是告诉浏览器我这个文件是用 HTML5 标准写的你按现代模式渲染别给我开兼容老古董的怪异模式。没有这行页面在不同浏览器里可能出现排版错乱所以以后你写任何 HTML 文件第一行必须是它。html langzh-cn里的 lang 属性是声明页面语言是简体中文网页是写给谁看的屏幕上不会有任何变化但会影响搜索引擎理解页面语种和屏幕阅读器的发音方式属于一个容易被忽略的细节。meta charsetUTF-8则是字符编码设置如果漏了这行代码里的中文在浏览器里就会变成一堆乱码这是新手最经常踩的坑之一。meta nameviewport contentwidthdevice-width, initial-scale1.0是移动端适配的关键它告诉移动浏览器按设备宽度来渲染页面没有这行手机打开网页会出现奇怪的横向缩放。最后title里的文字就是浏览器标签页上显示的名字它也是网页被收藏时默认显示的书签名。2.2 高频标签实操标题、段落、图片、链接、列表老实说HTML 的标签上百个但没有谁会把它们一次背完常用的其实就那一二十个。我把最高频的这几类整理一下你照着敲一遍基本就记住了。标题标签是h1到h6一共六级从大到小。一个页面一般只放一个h1因为它在搜索引擎眼里代表页面主旨放多了权重会分散。段落标签p用来包一段文字。图片标签img特殊一点它是少见的单标签没有结束标签通过属性来工作img srcimages/photo.jpg alt一张风景照片 width600src 属性是图片路径alt 属性是图片加载失败时显示的文字这既是用户体验也是 SEO 的一部分。链接用a标签核心属性是 hrefa hrefhttps://example.com target_blank打开新窗口访问/atarget 属性_blank表示在新标签页打开不加这个属性则在当前页跳转。列表情形也很常见无序列表用ul配li有序列表用ol配li。你只要把上面这些放到 body 里保存刷新马上就能看到效果。2.3 块级元素与行内元素理解布局的起点学 HTML 时如果不理解元素类别后面写 CSS 会一头雾水。HTML 元素大致分成两种块级元素和行内元素。块级元素的特点是独占一行像一块一块的积木上下堆叠宽度默认撑满父容器。div、p、h1到h6、ul、li 都是块级。行内元素的特点是在一行内排列像一段文字里加粗的词它们不会把前后内容挤到下一行。a、span、strong、em 都是行内元素。我经常遇到的新手问题就是明明我写了两个图片标签它们的间距怎么那么难调原因就是img是行内替换元素它和文字在同一行排列默认会有基线空隙。理解了这个分类你调整布局时才有思路——想控制宽高和独占一块区域优先选块级元素想让多个小元素排在一排就要用行内或后面要讲的 Flex 布局。2.4 语义化为什么大家都说div一把梭是坏习惯在早期网页开发里几乎所有人都是div一把梭整个页面用一堆 div 嵌套。这种写法的缺点是代码没有语义搜索引擎抓取页面时分不清哪里是导航哪里是正文屏幕阅读器读起来也很吃力。现代 HTML5 提供了语义化标签来解决这个问题header表示页头nav表示导航区main表示主体内容article表示独立文章块section表示章节footer表示页脚。用语义化标签写的页面即使不看 CSS光读 HTML 结构就能知道每个区域是干什么的。比如我做一个个人博客页面结构就是header站点标题/header nav导航菜单/nav main article一篇文章/article article另一篇文章/article /main footer版权信息/footer这样写对搜索引擎更友好也对团队协作更友好。当然我不是让你完全不用 divdiv 仍然是通用的中性容器只是在有合适语义标签的时候优先用它就好。不过这阶段的建议是先能用 div 拼出布局再逐步换成语义化标签一步到位对新手反而不容易掌握。3. 表格与表单让页面承载数据与交互3.1 表格tr、td、th与合并单元格表格在热搜里占了很大一块说明很多人学 HTML 时都会碰它。表格的作用是展示结构化数据比如课程表、成绩单、价目表。基本结构是table包里tr行每行里再放td单元格。如果要做表头用th默认加粗居中。更规范一点会用thead包表头行、tbody包数据行。举一个销售数据的例子table border1 thead tr th商品/th th价格/th th销量/th /tr /thead tbody tr td键盘/td td199/td td120/td /tr tr td鼠标/td td99/td td210/td /tr /tbody /table合并单元格是表格里有点绕的部分。colspan 表示横向合并几列rowspan 表示纵向合并几行。比如成绩单里语文这一列下面连着两行都是同一个老师的名字就可以在第一个单元格写rowspan2然后删掉下一行的对应单元格。这个逻辑光看文字容易晕建议自己拿一张小表试两次就能摸熟。另外要特别注意表格是用来展示数据的不要用表格去拼页面布局。二十年前确实流行表格布局但今天布局有 CSS 的定位、Flex、Grid 等更灵活的方案表格布局已经被淘汰了。3.2 表单input、textarea、select与label如果说表格是网页的数据展示表单就是网页的数据收集入口。注册、登录、搜索、填写问卷都离不开表单。form 标签本身是表单容器里面放各种表单控件。最核心的控件是input它通过 type 属性改变形态form action/register methodpost label forusername用户名/label input typetext idusername nameusername placeholder请输入用户名 label forpassword密码/label input typepassword idpassword namepassword label forintro个人简介/label textarea idintro nameintro rows3/textarea select namecity idcity option valuebeijing北京/option option valueshanghai上海/option option valueguangzhou广州/option /select button typesubmit提交/button /formtypetext 是单行文本框typepassword 输入的内容会变成圆点textarea 是多行文本域select 是下拉选择。每个控件最好配一个label标签用 for 属性指向对应控件的 id这样点击文字时也能聚焦到输入框对移动端体验和屏幕阅读器都很重要。曾经的按钮写法是input typesubmit value提交今天我更建议用button typesubmit因为它内部可以放任何 HTML 内容方便你在按钮上堆图标、加样式。3.3 表单提交的原理form的action和name值很多新手写完表单后困惑明明填了数据点击提交后却什么都没发生或者 URL 变得很怪。这是因为表单要真正提交到服务器需要配置 action 和 method 属性。action 指定数据发送到哪个后端地址method 指定用什么 HTTP 方法常见的有 GET 和 POST。GET 适合搜索这类非敏感请求数据会拼在 URL 后面显示出来POST 适合注册、登录这类敏感操作数据放在请求体里对用户不可见。表单里还有一个极容易被忽略的关键点每个控件必须写 name 属性浏览器才会提交这个字段。你可以把表单理解成一张需要填的快递单action 是收件地址method 是快递方式name 是每个格子上的标签——没有 name 的控件后端只会收到一堆没有标签的数字根本不知道它对应的是用户名还是年龄。我在检查学员代码时发现一半以上的表单提交问题都是忘了写 name。4. CSS盒子模型让页面从乱到好看的第一课4.1 三种样式写法内联、内部、外部用 HTML 写完内容之后页面的颜值可以说基本为零接下来要聊的就是热搜里的 html 盒子 这个话题。盒子模型是 CSS 最重要的一个概念但在讲它之前得先知道样式写在哪儿。CSS 有三种书写位置第一种是内联样式直接写在标签的 style 属性里比如p stylecolor: red;优点是直观缺点是复用性几乎为零改一个颜色要把每个标签都翻一遍第二种是内部样式写在 HTML 文件的style标签里适合单页小项目第三种是外部样式单独建一个 .css 文件用link relstylesheet hrefstyle.css引入这是正式项目的推荐做法一个网站的几百个页面可以共用一份样式文件改一处全局生效。4.2 盒子模型content、padding、border、margin在 CSS 的世界里几乎每一个元素都是一个矩形盒子这个盒子由四层构成从内到外分别是content 内容区文字、图片所在的位置、padding 内边距内容与边框之间的距离、border 边框、margin 外边距盒子与盒子之间的距离。我上课时喜欢用一个相框来类比照片是 content照片和相框内框之间的空隙是 padding相框本身的木条是 border相框和墙上其他相框之间的间距是 margin。记住这个比喻盒子模型就不会忘。代码里经常能看到这样的写法.box { width: 300px; padding: 20px; border: 2px solid #333; margin: 10px auto; }这里 margin 的第二个值 auto 是一个常用的水平居中技巧但注意它只对块级元素且设置了宽度的盒子有效。新手最容易算错的就是元素实际占用的总宽度因为 width 默认只算 content 的宽padding 和 border 还要另加。想让宽度的计算别这么绕就在最外层设置一个口诀式的属性box-sizing: border-box;这样宽度和高度就直接包含 padding 和 border 了。这个属性现在几乎已经是业界标配所有新建项目我都会先加上一条全局样式。4.3 给页面一个能看的布局Flex布局入门盒子模型解决的是单个盒子长什么样但一个页面上有几十个盒子怎么摆放它们才是布局问题。新手最早接触的布局方案是 float 浮动但 float 的设计初衷本来就是让文字绕图拿来布局会派生出一堆清除浮动的坑学习曲线不友好。我建议零基础同学直接从 Flex 布局入门它的核心概念只有一句话在父容器上写display: flex;里面的子元素就会变成沿主轴排列的弹性项目。Flex 最常用的三个属性是 justify-content、align-items 和 flex-direction。justify-content 控制子元素在主轴上的对齐方式比如 center 居中、space-between 两端对齐且间距相等align-items 控制子元素在交叉轴上的对齐方式center 就实现了垂直居中flex-direction 控制主轴方向默认 row 是水平排列改成 column 就变成垂直排列。我给一个最简单的案例.container { display: flex; justify-content: center; align-items: center; height: 300px; border: 1px solid #ccc; }这段代码能做到一件曾经用传统方案折腾很久的事让盒子在横向和纵向都居中。看到这一幕你大概率会觉得 Flex 有点意思它就是现代 CSS 布局的起点之一。5. 加一点JavaScript页面从静态到动态的实战5.1 事件机制为什么点一下才有反应只靠 HTML 和 CSS 做出来的页面是静态的它不是死的而是不会动。要让页面响应用户的点击、输入、滚动就要请出 JavaScript。很多新手害怕 JS其实入门阶段只需要抓住一个概念事件。浏览器的交互模型可以概括成一句话用户做了什么操作就触发什么事件事件被监听后执行对应函数。事件可以由用户触发比如点击按钮触发 click 事件、键盘输入触发 keydown 事件也可以由浏览器触发比如页面加载完成触发 load 事件。给按钮绑定点击事件有两种常见写法一种是直接在 HTML 里写 onclick 属性button onclickshowMessage()点我/button另一种是在 script 标签里用 addEventListener 监听这种更符合现代推荐document.getElementById(btn).addEventListener(click, function() { alert(你点了我); });初学时这两种都会见到区别不大但养成用 addEventListener 的习惯更好它把 HTML 结构和交互逻辑分开了页面代码一多优劣非常明显。5.2 一键返回顶部用小功能看懂DOM操作热搜里那条html一键返回顶部算法其实是 JavaScript 入门的一个经典小项目它让你理解什么是 DOM 操作。DOM 就是浏览器把 HTML 文档转成的树状结构对象你可以通过 JS 读取和修改这棵树的任意节点。返回顶部功能的核心代码不难思路是监听滚动事件判断滚动距离达到一定值后显示按钮点击按钮平滑滚回顶部。一个简化的完整实现是script window.onscroll function() { var btn document.getElementById(backTop); if (document.documentElement.scrollTop 200) { btn.style.display block; } else { btn.style.display none; } }; function backToTop() { window.scrollTo({ top: 0, behavior: smooth }); } /scriptscrollTo 方法里的 behavior: smooth 就是我们说的平滑效果非常丝的。通过这个小功能你已经接触到了变量、函数、条件判断、事件、DOM 操作这五个 JavaScript 最核心的组成部分后面再学语法细节时就不会觉得陌生。之前还看到热搜里有人问页面打开后几秒自动关闭怎么写这也是一段常见的 JS 片段script window.onload function() { setTimeout(() { window.close(); }, 500); }; /scriptsetTimeout 是延迟执行的定时器第一个参数是回调函数第二个是毫秒数。这个片段只能用于由脚本打开的窗口普通地址栏打开的页面出于浏览器安全策略往往关不掉。我把这个案例放这里是想说明JS 的学习路径从来不是先把语法背完再上手而是遇到一个具体需求在解决中学会。返回顶部、自动关闭、点击弹窗都远比抄语法书有效。5.3 一个真实的场景注册成功后自动跳转很多做 HTML 表单的初学者学到后端交互时会搜到html/php 注册成功后跳转这背后就涉及前端跳转和后端跳转的差异。如果注册逻辑由后端的 PHP或任何其他后端语言处理注册成功后会执行一个重定向命令把浏览器带到登录页这种跳转对用户来说非常自然。而如果你只想在前端做演示比如模拟一个填写完表单后跳到新页面的效果可以直接调用window.location.href welcome.html;这行代码的作用等同于用户在地址栏敲入了新地址。理解了这两条路径的区别你在做项目时就能想清楚跳转动作用谁来做取决于业务逻辑写在前端还是后端。这个阶段不需要深入后端细节但先知道有这么一回事后面学时就不会被搞糊涂。6. 编辑器选择与实际项目中的常见坑6.1 VS Code新建HTML的正确流程与常用插件热搜里有不少 visual studio code 新建 html 的词条说明大家第一步就被拦住了。在 VS Code 里新建一个 HTML 项目我推荐这样操作先在资源管理器里用打开文件夹打开一个项目目录比如你桌面上的 my-web 文件夹然后点击新建文件图标输入 index.html回车后在文件里输入一个英文感叹号再按 Tab骨架就自动生成了。为什么不建议直接在默认的 Untitled 文件里写因为后续引用的图片路径、CSS 文件路径、Live Server 的根目录都要依托于项目文件夹从一开始就养成文件放进项目里的习惯能少踩很多坑。除了前面提到的 Live Server我还建议装 Prettier它能在你保存文件时自动格式化代码让缩进统一、排版干净。配合浏览器打开 HTML 预览时新手最好养成用 Chrome 或 Edge 调试的习惯因为它们内置的开发者工具F12能直接看到元素的盒模型和错误信息是学习排查效率的利器。6.2 Ubuntu下写HTML的编辑器选择热搜里有 ubuntu 的 html 编辑器这个热搜很实际Linux 环境下很多新手会困惑开发工具怎么选。如果不想折腾Ubuntu 自带的文本编辑器 gedit 写好 HTML 保存后直接用浏览器打开就能预览但它和 Windows 记事本一样没有高亮和补全。日常我更推荐在 Ubuntu 上也用 VS Code安装方法是从官网下载 .deb 包双击安装或者用命令sudo snap install code --classic。整一套流程和 Windows 上完全一致Live Server 插件也都有。如果电脑配置偏低Sublime Text 也是一个轻量选择界面简洁、打开大文件响应快写 HTML 同样顺手。注意在 Linux 下文件的权限问题如果你的 HTML 文件没有读权限浏览器打开会转到错误页而不是显示内容检查一下目录权限通常就能解决。6.3 HTML文件预览失败的可能原因html文件无法预览这个热搜词下通常聚集了几类完全不同的状况我来逐个排一下。第一种是双击 HTML 文件后被系统用别的软件打开比如用记事本打开了——这是文件关联问题右键文件选择打开方式改成 Chrome 或 Edge 即可。第二种是文件内容在浏览器里全是乱码大概率是meta charsetUTF-8没写或者 VS Code 的编码不是 UTF-8在 VS Code 右下角状态栏点一下编码就能切换。第三种是文件能打开但 CSS 和图片不生效这时候要检查的是路径问题CSS 文件在 css 文件夹里HTML 在根目录就需要用hrefcss/style.css的相对路径而不是hrefD:/css/style.css这种绝对路径。第四种是使用 Live Server 后浏览器 404通常是因为 HTML 文件没有放在你打开的那个项目文件夹里Live Server 默认从项目根目录提供文件移动过去刷新即可。6.4 把HTML转成其他格式的实用方案热搜里的html格式转换wps表格和html转为md都属于技术人在日常办公中遇到的奇奇怪怪需求。如果你的工作是把网页里的表格数据导入到 WPS 表格或其他表格软件最省事的方法不是写脚本直接在浏览器里打开 HTML 页面用鼠标框选表格内容按 CtrlC再到表格软件里 CtrlV绝大多数情况下格式和数值都能正确保留用选择性粘贴为文本还可以去掉样式干扰。如果是整站转换、批量转换再考虑用 Python 的 pandas.read_html 或 BeautifulSoup 做数据提取。把 HTML 转成 Markdown 也是类似的思路少量文章用浏览器阅读模式后复制正文再到 Typora 或 VS Code 的 Markdown 编辑器里粘贴很多编辑器会自动把格式转好。批量场景可以用 Python 库 html2text它能在几秒内把整个网页正文变成 .md 文件。另外如果是在做桌面应用开发热搜里的 pyqt5 显示 html 也不是难题Qt 的 QWebEngineView 可以直接把 HTML 字符串加载进来当成窗口内容渲染很多本地工具的小界面都是这么做的。这些知识不属于入门阶段必须掌握的范围但它们共同说明一件事HTML 这个格式的通用性远超你的想象。7. 综合实战30分钟做出一个生日祝福页面7.1 需求与结构拆解纸上谈兵到这儿已经够多了最后我们动手做一个完整的页面。热搜里反复出现html生日祝福代码教师节代码html看来想用代码表达心意的人不少。这个实战我就以生日祝福页面为例教你 30 分钟内把前面的知识点全部串起来。先拆需求页面要有一个醒目的标题、一张祝福蛋糕插画区域、一段手写风的祝福语、一张背景卡片再加一个点击按钮弹出彩蛋。对应的 HTML 结构就很清晰了header标题/header main section classcake蛋糕区域/section section classmessage祝福语区域/section button idsurpriseBtn点击开启惊喜/button /main7.2 核心代码把结构、样式、交互写完整下面是整个页面的完整代码你可以直接新建一个 birthday.html 复制进去用浏览器打开看效果里面的每一行都对应前面几节讲过的知识点!DOCTYPE html html langzh-cn head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title生日祝福/title style body { font-family: Microsoft YaHei, sans-serif; margin: 0; min-height: 100vh; background: linear-gradient(135deg, #fbc2eb, #a6c1ee); display: flex; justify-content: center; align-items: center; } .card { box-sizing: border-box; width: 420px; max-width: 90%; background: #fff; border-radius: 16px; padding: 40px 30px; text-align: center; box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15); } .cake { font-size: 72px; line-height: 1.2; margin-bottom: 16px; } h1 { color: #e75480; margin: 10px 0; } p { color: #555; line-height: 1.8; } button { margin-top: 20px; padding: 10px 26px; font-size: 16px; border: none; background: #e75480; color: #fff; border-radius: 30px; cursor: pointer; } button:hover { background: #cf3f6a; } .hidden { display: none; } .surprise { margin-top: 20px; font-size: 20px; color: #e75480; } /style /head body div classcard div classcake/div h1生日快乐/h1 p愿所有的美好都如期而至愿你每天都有好心情。/p button idsurpriseBtn点击开启惊喜/button div idsurpriseText classsurprise hidden祝你新的一岁健康、快乐、心想事成/div /div script var btn document.getElementById(surpriseBtn); var text document.getElementById(surpriseText); btn.addEventListener(click, function() { text.classList.toggle(hidden); }); /script /body /html这个页面同时用到了 HTML 的语义化结构、CSS 的盒子模型card 里的 padding 和边框圆角、flex 布局完美居中、渐变背景、box-shadow 阴影以及 JavaScript 的点击事件和 classList.toggle 切换隐藏状态。哪怕作为一个成品页面送给朋友也完全拿得出手。7.3 美化与细节调整的关键点如果你想让这个页面更像一个作品而不是练习稿还有几个容易忽略的细节可以优化。第一emoji 蛋糕字符在不同系统里的显示效果不同Android 和 iOS 上的渲染差别挺大如果追求统一效果可以换成一张蛋糕图片img 的 alt 属性别忘写。第二文字颜色的选取要有对比度现在 h1 用了粉色正文用深灰色这个搭配在白色卡片上足够了但如果你把背景改得更花记得检查文字是否还看得清。第三按钮的 hover 效果虽然只是一个颜色的变化但它是用户感知页面可交互的重要反馈没有 hover 的按钮看起来像死的。第四移动端适配有一个简单的验证方法打开开发者工具的响应式模式把窗口宽度拖到 375px 左右看是不是仍然完整。因为页面里有 max-width: 90% 和 max-width: 420px 这两层限制所以窄屏下卡片会自动缩窄这就达到了基本的移动端可用状态。7.4 进阶练习从生日页到教师节页再到个人作品站做完生日祝福页面你的能力已经足够支撑好几个方向的进阶练习。最简单的是把文案改一下底色换一换就做成了教师节祝福页面——热搜里那些教师节代码html基本就是这个套路。往上一个难度你可以把整个页面从单卡片改成多区块长页面加一个头部导航区、一个照片廊、一个祝福语留言表单这就成了一个小型专题页也正好实践结构里的语义化标签。再往后把背景渐变色改成从一张图片模糊铺底把蛋糕图标换成 CSS 动画的小蜡烛把按钮点击改成弹出一段音乐这个项目的复杂度会一点点逼近你在热搜里看到的html css 网页制作成品。我个人的建议是完成这个生日页之后先别急着学框架给自己定三个小挑战第一个挑战把这个页面改成介绍你自己个人介绍的页面第二个挑战加一个顶部导航点击后能平滑滚动到页面对应区域第三个挑战在页面里放一个表格和一个表单分别展示你的技能清单和访客留言入口。三个挑战全部通关你的 HTML 基础才算真的扎实了。最后再分享一个我觉得很受用的学习心法学 HTML 最忌讳的就是想太多、做得太少。我见过太多零基础朋友拿到教程后先把标签库从头到尾背一遍结果背到一半就没有然后了。正确姿势是打开编辑器从今天最简单的结构开始敲敲错了就打开开发者工具看报错卡住了就搜索关键词做出来一个哪怕很丑的页面获得的正反馈比看十个视频都强。浏览器里的 F12 开发者工具会是你最忠实的老师每一次右键检查都能看到别人的页面是怎么搭出来的多拆多抄多改你很快就会发现自己已经不再需要这篇入门教程了。