HTML基础教程：从浏览器解析到语义化标签，带你完成首个网页

直接开门见山吧。最近收到不少刚接触前端的读者的私信问的问题出奇地一致看了不少HTML零基础教程但跟着敲完代码还是不知道这些标签到底在干什么也不知道做一个网页到底该从哪儿下手——更不用说那些在搜索引擎里高频出现的HTML转MDHTML邮件一键返回顶部算法之类的进阶搜索词了。这篇HTML基础教程一正是冲这个来的。我会从浏览器到底怎么读HTML这个底层逻辑讲起把文档骨架、常用标签、表单提交、单页面实战全部走一遍。这一篇不贪多只扎扎实实地把地基打好让新手能看懂、能复现、能独立做出第一个正经页面。有基础的同学也可以直接跳到自己薄弱的小节补课。1. 在敲第一个标签之前先把HTML是什么这个底层问题搞透1.1 其实HTML不玄乎它是一套给网页内容排队贴标签的规则很多人刚开始学HTML容易被一长串尖括号吓到觉得这是某种高深编程语言。我得先泼一盆冷水HTML不是编程语言它连逻辑判断都做不了它本质上是一套给内容打标记的规则。说人话就是——你写了一篇文章、一组图片、一个表格想让浏览器知道这段是标题、那段是段落、这个是可点击的链接就得在内容外面包上对应的标签告诉浏览器按这个角色来展示我。浏览器的活儿也很单纯解析HTML文档然后把它翻译成我们在屏幕上看到的页面。这就像去一家餐厅点单。菜单上的菜品就是你的内容而服务员记录时说这位要的是炒饭、这位要的是汤这些称呼就是标签。没有标签后厨拿到一桌混合食材只能抓瞎有了标签内容该怎么呈现就一目了然。所以学习HTML的核心不是背诵所有标签的写法那是查文档的事而是建立一种用标签描述内容结构的思维。带着这个思维去写代码是活的、有语义的而不是在复制粘贴。1.2 浏览器解析HTML的流程从一行文本到完整页面的幕后动作再往深走一步。你写好的HTML文件本质上就是一个纯文本文件它得经过浏览器的解析渲染才能变成可视化的页面。这个过程的完整链路大概是这样的加载Loading浏览器通过你输入的URL或者双击本地文件把HTML文档内容拉下来通常以UTF-8编码读取这就是为什么meta charsetUTF-8相当重要如果我后面讲字符乱码时你印象不深现在先记住这个细节。解析Parsing浏览器内部的HTML解析器逐行读取标签构建出一棵DOM树Document Object Model。这棵树把文档结构全部展开——html是根节点head和body是它的子节点body里的各种标签又依次挂载。渲染RenderingDOM树建立后浏览器把CSS样式计算好生成布局信息最后绘制到屏幕上。这一整套流程快得惊人通常不超过几百毫秒。搞清楚这个流程你就能明白一个很重要的道理**HTML文档的结构层级清晰浏览器解析就越快越不容易出错结构散乱渲染结果就可能莫名其妙地错位。**这也是为什么我建议所有新手从第一行代码开始就养成规范写结构的好习惯而不是先随便写能显示就行。1.3 别碰那些搜出来的火星文理解现代HTML的正确打开姿势大家在网上搜HTML基础教程的时候可能会看到很多教程开头给的示例是那种非常老的写法比如给html标签加一堆奇怪的属性或者用font标签去控制文字颜色。这些都是历史的产物今天完全不建议学。我做前端这么多年一个非常明显的体感是现代HTML的核心哲学是语义化和结构分离。所谓语义化就是选择合适的标签去表达内容的真正含义——比如nav是导航、article是文章正文、footer是页脚结构分离则是说HTML只负责结构和内容长相颜色、大小、间距全部交给CSS管、交互交给JS管。所以这篇教程里我给的每一段代码示例都是按照现代HTML5规范 语义化标签 结构清晰的标准来写的。这不仅是给新手看的也契合现在搜索热词里大量出现的HTMLCSSJS知识梳理——学主流的、学规范内的才不会越学越乱。2. 一份标准HTML文档的地段分区doctype、head与body拆开讲2.1 文档骨架速写你其实每天都在用HTML先看一个最基础的、也是网上搜索热度极高的标准模板大家总在搜!DOCTYPE html和html langzh-cn本质上都在问这份骨架的来龙去脉!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把这段代码保存成index.html双击用浏览器打开你就能看到一个最简单的页面。接下来我拆开讲每一块到底为什么必须存在。2.2!DOCTYPE html不是标签它是协议声明很多零基础教程会把它一笔带过说记住这么写就对了。但我想让你知其所以然。!DOCTYPE html并不是HTML标签它的全称是Document Type Declaration翻译过来就是这篇文档的类型描述它告诉浏览器请按现代HTML5标准来解析我这份文档千万别用跟你爷爷辈那种古老渲染模式来处理。为什么这个声明如此重要因为早期的浏览器存在不同的渲染模式quirks mode 怪异模式 / standards mode 标准模式在新版本浏览器里如果文档没有声明DOCTYPE浏览器会开启怪异模式很多CSS布局行为都会变得极其不可控——padding和border的计算方式、盒模型尺寸、甚至行高的表现都可能暗自变化。你写出来的页面可能在你的浏览器里看着正常但换台设备就崩了十有八九就是这个声明没写好。所以即便它看起来像一条不参与任何展示的注释我依然建议你在每次创建新HTML文件时首个字符就手写它。不要图省事复制一个不标准的版本比如少写了html后缀那样又会让浏览器回到混乱状态。2.3html langzh-CN一个自带好习惯的属性lang属性全称 language它的作用和解释它告诉浏览器/搜索引擎这份文档的主要内容语言是简体中文。对无障碍访问极其重要屏幕阅读器软件需要依据lang属性决定使用哪种语音库来朗读文字如果不写一些朗读工具会用默认语言去念中文页面可能被念出了一种歪果仁腔调。对SEO友好搜索引擎可以通过语言声明更准确地理解网页内容的主要受众这直接影响搜索结果的匹配质量。所以只要你的内容主体是中文就老老实实用html langzh-CN如果你的站点面向全球可以根据页面实际情况改成en-US、zh-HK等等。这是个小细节但体现着职业素养。2.4 head标签你的页面简历用户看不见但搜索引擎全看head区域是用来存放**元数据metadata**的它不直接渲染在页面上但对浏览器的行为、SEO、移动端适配都有决定性影响。一个完整的 head 区域通常包含这些内容meta charsetUTF-8这是最容易引发乱码惨案的标签。如果文件明明存的是 UTF-8 编码但浏览器不知道用了系统默认的 GBK 解码那页面上所有中文全会变成一堆乱码。位置惯例是放在 head 的第一行让浏览器最早获知编码信息。meta nameviewport contentwidthdevice-width, initial-scale1.0这是现代移动端适配的基石。它告诉浏览器页面的可视宽度应该跟随设备的屏幕宽度初始缩放比例为1.0没有这条声明手机打开的页面会被默认缩小成桌面宽度字小得跟蚂蚁一样用户体验极差。title页面的标题。它有三个作用显示在浏览器标签页上作为搜索结果的主标题是收藏夹里显示的名字。这是我建议每写一个body之前一定要把title想好的原因——它是页面的身份证。说个通俗的类比head就像简历里的个人信息栏招聘方浏览器和猎头搜索引擎先看你的基本信息再决定怎么安排你的面试展示你的 body 内容。2.5 body标签整个页面的舞台中心body里装的是用户在屏幕上能看到的一切文本、图片、视频、按钮、表单全住在这里。它是整个 DOM 树的内容主干。接下来的几个章节我们所有的标签操作基本都发生在 body 里。可以说学会了 body 里的各种布局与内容标签你就完成了网页制作 80% 的日常积累。3. 高频标签逐个过文本、列表、链接、图片与多媒体3.1 文本类标签H1到H6标题的信息层级和p、span、strong的细节差异文本是网页最基本的内容形式。我见过不少新手把标题当字体放大工具我想要大号字于是用h1小了换成h3然后又问为什么我的页面SEO这么差。因为标题标签的根本作用是定义信息层级不是调字号。h1到h6六个等级的标题h1是一级标题通常只在一页中出现一次用于承载整页的核心主题h2到h6逐层细分。搜索引擎会优先将h1内容视为该页面主题的重要信号。p段落标签浏览器会自动在段落前后添加一定的外边距。注意p里面不适合嵌套div等块级元素只放文本或行内标签比较稳妥。span行内标签没有任何默认样式。它经常被借来给一段文字画区域然后通过 CSS 去单独控制这一小块的颜色或字号是页面中非常高频使用的临时记号。strong与b视觉上都显示粗体但语义完全不同。strong表示强调这段文字很重要屏幕阅读器会以加重语气朗读b只是纯样式上的加粗无意义。所以按照语义化原则需要强调就用力用strong。em与i同理em表示着重强调i常用于表示技术术语、外文短语等视觉上都是斜体。优先使用带语义的em。3.2 列表标签有序、无序与自定义列表的结构感列表在网页里无处不在导航菜单、商品列表、排行榜、功能说明……三种列表标签的区分其实很好记无序列表ulli列表项之间没有先后顺序默认显示实心圆点。写导航菜单时最常用它。有序列表olli有明确的先后次序默认显示序号 1、2、3。比如做安装步骤、排行榜就非常适合。自定义列表dldtdd用来描述名词-释义的成对关系适合做术语表、如标题-说明这种数据对。列表标签最容易踩的坑是层级嵌套混乱。规范的写法是ul的直接子节点只能是li而li内部可以再嵌套一个完整的ul去实现多级菜单。切忌在ul中直接塞div或者其他标签浏览器虽然能勉强接受但这是一个不健康的结构既不利于网SEO也不利于代码维护。3.3 链接标签a的完整属性体系a标签应该是HTML里最常被点名的标签——毕竟整个互联网的航行全靠链接在串。基础写法a hrefhttps://example.com target_blank relnoopener noreferrer访问示例站点/a这里面有三个属性需要重点讲解href链接的目标地址可以是绝对URLhttps://开头的完整地址也可以是相对路径./about.html、../images/pic.jpg还可以是页面内的锚点#footer点击跳转页内某个ID所在的位置。target决定在哪个浏览器窗口打开链接。_self是默认值当前页跳转_blank是在新标签页打开这个值非常常用。但要注意一点_blank配上一个老旧的window.opener隐患可能会导致新页面通过JavaScript操纵原页面。所以业界通行做法是加relnoopener noreferrer它可以让新开的标签页与当前页面彻底隔离防钓鱼防篡改。title鼠标悬停时的提示文字也是辅助设备的粎名字。新手容易忽略但它对可访问性是小而重要的加分项。另外再絮叨一句搜出来的热搜里有大量HTML一键返回顶部算法核心大多也是用一个a标签加上href#top的锚点玩法后面的JS进阶篇里会给大家详细讲平滑滚动实现方案。3.4 图片与多媒体src、alt、width、height的正确打开方式图片标签是另一个绕不开的核心内容。img srcimages/logo.png alt网站Logo width200 height80 loadinglazysrc图片的路径。与链接的href类似可以写本地相对路径也可以写在线URL。alt替代文本这个属性是一票否决级的重要。当图片加载失败、网络阻塞或者用户使用屏幕阅读器时alt的内容会成为图片的代表。搜索引擎也会依据alt来理解图片内容做SEO的同学都懂它的含金量。我见过太多个人网站图片挂了之后显示一大片空白用户根本不知道这里原来有什么——写一句alt奶茶新品海报就能瞬间救回来。width 与 height建议同时给图片预留宽高尺寸。别小看这两个属性它防止了图片加载完成后页面突然跳动的尴尬——浏览器先按你设定的宽高占好位置图片下载完直接填进去布局不会闪跳。loadinglazy懒加载属性让浏览器在图片即将进入视口时才加载对长页面的首屏性能有明显改善这是HTML5时代强烈推荐的默认写法。音频与视频标签audio、video我就不展开讲细节了记住controls属性可以让浏览器提供原生播放控件加autoplay muted loop能实现自动循环播放为了用户体验自动播放一般要求静音这俩标签在现代网页里比老土的embed靠谱得多。3.5 换行、水平线与文本样式为什么我建议少用br热搜词里有HTML换行这个问题值得单独拿出来说。很多新手觉得想换行就用br因为br确实可以让文字立刻折行。但我在实际项目里对br的使用是很谨慎的原因很简单**它破坏了文本的自然流动结构。**当浏览器窗口宽度变化时应该由段落的宽度自然决定哪里换行而不是靠你是强制的br去按某种固定位置裁剪。正确做法是块级元素如段落块天然独占一行不需要你用br去制造换行同段落里出现的自然换行也尽量交给 CSS 的white-space或容器宽度去处理。只有在极少数场景下比如诗歌排版、地址块、代码示例里需要强制按行展示才应当使用br。至于hr水平线标签它表示主题内容的切分比如文章里在两个章节之间插入一条视觉分割线语义上是合理的但如果你只是想画一条装饰线那仍然建议交给CSS的border-bottom不要让装饰性元素混入结构性标签里。4. 别等到写网页才想起来学透视HTML网页制作背后的完整工作流4.1 制作网页不只是会写HTML多元支持体系的协同配合HTML网页制作这个词在网上点击率非常高但很多人理解得过于狭窄——以为只要会用几组标签就能交付一个完整网页。实际上一个可上线、可维护、体验良好的网页背后是一套完整的工作流设计稿先行无论是用设计工具出图还是直接心中画草图先明确页面包含哪些内容模块信息层级怎么安排。HTML搭建内容骨架这是本篇教程的核心把内容按语义标签放进页面。CSS控制样式与布局让内容拥有合理的外观、排版和响应式表现。JavaScript增强交互让页面活起来响应用户的点击、滚动、输入等操作。测试与迭代在多个浏览器/设备尺寸下验证效果修正兼容性问题。部署上线把网页文件放到服务器或静态托管平台上。所以对于零基础的同学我的建议是学HTML别孤立地学目标和主线是做一个完整的HTML CSS JS静态网站。每个阶段学的知识最终都能在一条主线上串起来成就感会极强。4.2 一个 HTML 文件的基本目录规划为多页面项目提前布局既然做完第一个页面就会想做第二个我强烈建议从一开始就不要新建一个文件夹里面丢一个index.html完事而是建立一个标准目录骨架比如my-site/ ├── index.html ├── about.html ├── css/ │ └── style.css ├── js/ │ └── main.js └── images/ ├── logo.png └── banner.jpg这样做的收益非常大相对路径关系清晰img srcimages/logo.png、link relstylesheet hrefcss/style.css一眼就能看到文件在哪。为后续CSS/JS扩展留好位子不会写到一半不知道style.css放哪儿。多页面共享同一套样式文件时改一个文件全部页面生效省时省力。至于相关热搜里经常出现的HTML转MDHTML格式转换WPS表格之类的需求本质上就是要处理HTML的文本结构与其他格式间的关系。如果你能清楚理解HTML是带语义标记的纯文本那么转换你手上任何工具都万变不离其宗。4.3 推荐工具链新手最省心的代码编辑器与浏览器调试方式工欲善其事必先利其器。关于编辑器我用过很多给新手的建议非常固定Visual Studio CodeVS Code免费、跨平台、插件生态极其丰富。装上Live Server插件后右键就能启动一个本地开发服务器页面修改后浏览器自动刷新效率非常高。或者选择Sublime Text/Notepad这类轻量编辑器它们启动更快但内置智能提示相对弱一些。浏览器调试工具方面Chrome DevTools是事实标准。按下 F12 可以打开控制台在Elements面板里能直观看到DOM树和样式计算简直是我日常调试的命根子。强调一个习惯保存文件的编码一定要选UTF-8。很多编辑器默认保存可能是GBK或者别的编码当你打开页面发现满屏乱码那一刻再回去找编码设置就费劲了。直接在设置里固定为 UTF-8省掉无数暗坑。5. 表单标签全家桶从输入框到提交按钮的一次性讲清5.1 form的骨架与核心属性action和method的底层语义表单是网页与用户交互的入口也是热搜词里大家单独把HTML——表单类的标签拎出来搜的原因。一个完整的表单先看骨架form action/submit methodPOST label forusername用户名/label input typetext idusername nameusername placeholder请输入用户名 required label forpassword密码/label input typepassword idpassword namepassword button typesubmit登录/button /form拆开看两个核心属性action表单数据要提交到的服务器端接口地址。没有后端开发经验的初学者经常忽略它——你写完input和button发现点击提交没反应大概率是action没填或者指向了一个不存在的接口。对于纯静态页面练习可以先把action#占位重点先放在表单控件的结构上。method指定提交数据用的HTTP方法GET会把表单数据拼接在URL查询参数里?usernamexxxpasswordxxx适合查询类的轻量数据POST会把数据放在请求体里发送适合登录、注册、提交内容等敏感场景。我见过新手把密码框放在GET表单里测试结果密码直接出现在浏览器地址栏上——这是个很有用的反面教材。5.2 input的type宇宙从text、password到checkbox、radio、file与rangeinput标签是表单家族的绝对主力它的type属性决定了一个输入框长什么样、能不能校验、移动端会弹出什么键盘。我按使用频率给大家逐一过text单行文本输入框通过placeholder给用户灰色提示文字。password密码框输入内容会以圆点掩盖。留意它只是视觉上掩盖并非加密传输真正安全要靠 HTTPS 加密通道。email/tel/url专门用于邮箱、电话、网址的输入框。浏览器会自动做基础格式校验并且移动端会弹出对应风格键盘比如邮箱会带键tel会弹数字键盘体验提升非常明显。checkbox复选框多个选项可以同时勾选同一组复选框要赋予相同的name属性各个选项用不同的value区分。radio单选框同一时刻只能选中一个同一组选项的name也必须相同否则无法互斥。给每个选项加value值同样必不可少。file文件选择控件点击可弹出文件选择窗口常用于头像上传、简历上传等。range滑动条调节数值范围常配合min、max、step使用适合音量、亮度设置场景。hidden隐藏域不出现在页面上但会随表单一起提交一些固定参数比如用户ID、来源标记等。5.3 下拉选择、文本域与标签的for/id联动机制除了input表单里还有三个高频控件的细节值得单独确认selectoption下拉选择框属于单选的进阶版本适合选项较多时节省页面空间。如果要支持多选可以加multiple属性但实用场景不多。textarea多行文本输入区域适合留言、评论、简介说明等长内容输入。它的标签是成对的与input的自闭合写法不同。label的for与控件的id联动一个很容易被新手忽略却非常重要的机制。label forusername用户名/label中的for的值必须与某个控件的id完全一致。这样当你点击用户名这个文字时焦点会自动跳到对应输入框里提升了可用性也方便屏幕阅读器把标签描述和输入框关联起来。现代浏览器还会在点击 label 时自动选中关联的 radio 或 checkbox非常顺手。5.4 表单校验的三种来源HTML5内置、JS补充、后端兜底刚接触表单很容易有一种误解前端校验完后端就不用了或者后端校验了前端就可以省了。实际上正确姿势应该是三层校验层层递进HTML5内置校验通过required必填、typeemail、minlength、maxlength、pattern等属性实现。这是最基础的一层零成本且即时反馈。JavaScript补充校验比如密码需要同时包含大小写字母且长度为8~20位这种复杂规则就得靠 JS 在提交前拦截验证。核心思想是提交前校验不过就打回。后端兜底校验这是永远不能省略的终审。前端校验很容易被绕过比如禁用JS、修改请求真正的安全边界在后端。哪怕前端的校验已经引导了绝大多数正常用户正确填写后端也不能因此放松对数据的检查。把这三层记住你在任何公司写表单都不会犯只靠前端或只靠后端这种业余错误。将来做HTML邮件PyQt5显示HTML这类偏跨端场景时对表单结构的理解同样举一反三。6. 实战把刚才学的全串起来做一个带表单的迷你页面6.1 需求与页面结构设计光学不练假把式。这一节我们做一个迷你但五脏俱全的页面一个访客留言板。需求很简单页头页眉有个页面标题主体区域展示一条简短的介绍性文字下方是一个留言表单包含用户名、留言类型下拉选择和留言内容多行文本表单提交按钮页脚放一个版权与备案占位信息。这个页面的结构规划完全可以用前面讲的语义化标签来铺开header、section、form、footer。我强烈建议你在看我的代码前先自己动脑画一个层级结构图——哪怕画在纸上。这个先思考结构再动手写标签的习惯是一个优秀前端的基础素养。6.2 完整代码与逐步注释直接上完整代码!DOCTYPE html html langzh-CN head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title访客留言板/title /head body header h1访客留言板/h1 p欢迎留下你的建议与问题我会认真阅读每一条留言。/p /header section h2写下你的留言/h2 form action# methodPOST p label forusername昵称/label input typetext idusername nameusername placeholder例如小明 required /p p label forcategory留言类型/label select idcategory namecategory option valuesuggestion建议/option option valuequestion提问/option option valueother其他/option /select /p p label formessage留言内容/label textarea idmessage namemessage rows5 cols40 placeholder想说的话... required/textarea /p p button typesubmit提交留言/button /p /form /section footer p© 2025 我的迷你站点/p /footer /body /html这个页面里用到了headersectionfooter的语义化分区、h1h2的标题层级、label for/id联动、required校验、下拉选择和多行文本域每一个知识点都在前文里讲透了。你可以把它复制保存为index.html用浏览器打开后自己玩一玩试试不填昵称直接点提交看看浏览器的内置提示长什么样再试试点击昵称文字焦点是不是会自动跳进输入框。6.3 常见运行问题排查页面空白、样式错位、表单不提交在新手练习阶段最常遇到的问题无非这么几种我直接给排查思路页面打开一片空白首先检查文件是不是完全空白其次检查代码里第一个字符是不是!DOCTYPE html偶尔有人会在它前面多打一个空格之外的隐藏字符。然后打开浏览器DevTools的Console面板看看有没有Failed to load resource之类的报错。中文显示成乱码大概率是meta charsetUTF-8这一行缺失或者放错位置也可能是编辑器保存的编码不是UTF-8。排查思路一目了然。点击提交按钮页面不受控地刷新这是初学者懵到极点的典型情况。因为button typesubmit触发了表单的原生提交行为而action#又让页面跳到了当前页并刷新。你不需要慌在没接后端接口之前这是预期内的表现。想暂时不触发提交可以把typesubmit改成typebutton这样点击按钮就不做任何提交动作了。表单在手机上布局崩掉检查meta nameviewport那行有没有漏写。把这四个问题排查完你的调试经验就已经超出只会照抄代码的初学者一大截了。7. 写在最后的开发者经验补给站7.1 好代码不是能跑就行可读性与语义化价值的现身说法很多人学会一个标签就开始狂写但代码量与质量往往成反比。我在团队里带人的时候最看重的就是对方写出来的HTML结构是否清晰到只看代码不看页面就能脑补出整个页面的内容轮廓。拿语义化来举例同样是一段导航有的新手写成div classnav.../div有的写成nav.../nav。前者对浏览器来说就是一个普通容器后者则被浏览器和辅助设备明确识别为导航区域在这种区域里屏幕阅读器用户可以直接跳到站点导航节省大量时间。搜索引擎爬虫也会优先索引nav、article、h1这些语义明确的标签。所以语义化不是一种花哨的炫技而是真正在帮助机器和弱势群体更好地理解你的页面。7.2 用规范验证器给代码做体检我见过很多自学的新手页面能显示就觉得万事大吉于是等到上线后不断冒出兼容性小毛病。这里安利一个免费工具W3C Nu Markup Validation ServiceW3C HTML验证器你也可以直接在搜索引擎搜W3C validator。把代码粘贴进去它会把所有不规范的地方比如标签没闭合、属性写错了、层级关系不对逐条列出来并附上原因说明。这个工具的作用几乎相当于代码体检不仅适合新手排查低级错误也适合老手在交付前做最后一道质量保障。我个人的习惯是任何静态页面交付前必过一遍 validator所有 Error 清零才安心。7.3 一篇讲不完下一步学什么最合理这是HTML基础教程一所以这一篇的重点是打地基文档结构、文本、链接、图片、表单以及它们背后语义化结构分离的现代HTML思维。下一篇我大概率会深入这些方向块级元素与行内元素的分类逻辑以及div和span的正确使用边界更复杂的列表嵌套与导航菜单实战Table表格的完整语义与可访问性写法iframe嵌入、音视频进阶配合第一个CSS实战给这篇的留言板页面穿上样式外衣实践演练HTML一键返回顶部这类交互把锚点、平滑滚动、JS的scrollTo全部串起来。各位如果在这篇实践过程中卡住了欢迎带着报错信息和截图来交流。这篇教程里的代码示例我都亲手跑过你可以放心复现。我们下一篇继续。