就在我打开文档准备写这篇东西的时候后台还躺着几条新消息有人问“HTML怎么制作”有人把自己写的!DOCTYPE htmlhtml langzh-cn一整段贴过来问为什么页面是空白的还有人在问“HTML是不是很难”。这些问题我在不同地方见过太多次了。HTML可能是整个技术领域里门槛最低、但又被误解得最凶的一个东西。很多人把它当成需要付费软件才能打开的工程文件也有人以为必须先学会编程才能碰它结果学了两天就被各种概念劝退。这篇不是标签字典也不会给你罗列几百个标签让你背。我想带你从头走一遍“制作HTML网页”的真实流程先弄清楚HTML在网页技术链里到底是个什么角色然后把开发环境搭起来逐行看懂一份标准文档再把手上的标签拼成能用的小页面最后把新手大概率会踩的坑提前排掉。不管你是要交网页设计作业、给朋友做个生日祝福页还是认真想往前端开发方向走这条路都适用。1. 网页是怎么被浏览器拼出来的HTML在技术栈里的位置1.1 HTML不是编程语言而是一份内容结构说明书很多人第一次听到“超文本标记语言”这个全称就被吓到了其实拆开看没什么神秘的。“超文本”指的是页面里除了文字还有图片、链接、视频这些东西“标记”才是核心——用一堆尖括号标签告诉浏览器哪部分是标题、哪部分是段落、哪部分是一张图。浏览器拿到HTML文件后做的事本质上就是“照着说明书拼页面”。你在页面上看到的所有内容追根溯源都是HTML标签在告诉浏览器“这里放一个标题”“这里放一个按钮”“这里放一张图片”。HTML本身没有任何逻辑判断能力它不会算数、不会做判断所以它不叫编程语言它的定位是“内容结构说明书”。拿超市货架来类比最直观HTML是货架本身和商品标签告诉顾客“这里是饮料区这里是零食区”而后面会讲到的CSS是货架的装修风格JavaScript则是那个能根据顾客需求自动调整商品位置的服务员。1.2 HTML、CSS、JavaScript三方分工这三个东西经常被一起提起导致很多新手分不清边界。我建议你从一开始就建立这样一个心智模型HTML负责内容和结构。页面有哪些板块、每个板块里有什么都由它定义。CSS负责表现和样式。颜色、大小、间距、布局、动画都是它的活。JavaScript负责行为和交互。点击按钮弹出提示、滚动加载更多、提交表单前的校验都靠它。用盖房子来类比就是HTML是承重墙和户型结构CSS是外墙瓷砖和室内装修JavaScript是房子里水电开关这些能“动”的东西。很多新手一上来就急着学JavaScript结果连html标签的嵌套关系都没搞明白写出来的交互代码连要操作哪个元素都定位不到。所以不管你的目标是什么先把HTML这块地基打牢。1.3 学会HTML之后到底能做什么搜索引擎里那些高频词——html网页制作、html静态页面开发、html综合项目实战——已经说明答案了。纯HTML加一点CSS和JavaScript你就能做个人简历主页或作品集页面节日祝福页生日、教师节这类场景在热搜里常年有需求产品介绍静态页邮件模板很多人都不知道大部分营销邮件的正文就是用HTML写的简单的交互demo比如红绿灯模拟、倒计时、计算器要注意的是HTML能做的是“静态页面”——内容写死不跟你数据库打交道。如果一个页面需要根据用户登录状态显示不同内容、需要从服务器拉取数据那就得引入后端技术了。但即便做动态网站前端那层HTML也绕不开。2. 开工前的两件套编辑器选型与项目文件结构2.1 为什么我推荐VS Code而不是记事本先说结论直接装 VS Code它是目前做HTML开发最主流的编辑器免费、跨平台Windows和Linux都能用对应了不少人搜的“ubuntu的html编辑器”这类问题。为什么不建议用系统自带的记事本因为记事本没有语法高亮标签不自动补全括号不帮你配对等你写了几十行代码之后连找“这个div到哪结束”都会想哭。VS Code真正拉开差距的是插件生态。装好之后先补三个插件Live Server本地起一个开发服务器你保存文件浏览器自动刷新做页面调试的效率能提升一个档次。Auto Rename Tag修改开始标签时自动同步修改结束标签减少低级错误。Prettier - Code formatter自动格式化代码统一缩进和引号风格。初次打开VS Code按CtrlShiftX打开扩展商店搜名字安装就行。如果你只是临时想写个小片段也可以直接用在线工具比如JSBin或者CodePen输代码即时出效果适合验证单段代码。2.2 浏览器开发者工具是给谁用的编辑器写代码浏览器看效果中间还有个必须养成的习惯——用开发者工具看“幕后”。Chrome或Edge里按F12或者右键页面选择“检查”就会打开开发者工具面板。你至少要先认识三个标签页Elements元素查看页面渲染出来的HTML结构实时修改样式看效果。新手排查布局问题基本都靠它。Console控制台JavaScript跑出来的日志和报错都显示在这里。你写的代码如果有语法错误这里会给出具体行号。Network网络查看页面加载了哪些资源、哪些文件加载失败。CSS样式不生效、图片不显示时来这里看一眼最直接。很多新人问“为什么我的页面效果不对”我第一句话都是“你先看控制台报什么错”。养成“先看报错再动手改”的习惯比多背十个标签有用得多。2.3 项目文件结构从一开始就规规矩矩写一个独立的HTML单页你可能只需要一个index.html文件。但只要项目稍微复杂一点我建议你从一开始就用规范的目录结构my-project/ ├── index.html ├── css/ │ └── style.css ├── js/ │ └── main.js └── images/index.html这个名字有特殊含义当服务器访问一个目录时默认会去找这个文件所以它是整个站点的入口。CSS文件放css目录、JavaScript文件放js目录、图片放images目录各司其职。等你在HTML里引用这些外部资源时路径也不会乱。路径这块顺便说一下基础知识。HTML里引用外部文件有两种写法相对路径和绝对路径。相对路径是从当前文件出发找目标比如在index.html里写css/style.css意思是在当前目录下找css文件夹里的style.css绝对路径则是完整的网址或本地完整路径。自己的项目内部文件一律用相对路径这样把整个文件夹拷到别的地方也不会失效。3. 第一份HTML文档标准骨架逐行拆解3.1 别急着写标签先建一份最简骨架如果你在搜索引擎里看过html相关的高频词会发现大量结果都以同一段代码开头!DOCTYPE htmlhtml langzh-cnhead...。这不是巧合这就是HTML文档的标准骨架。先直接给你一份最简版本!DOCTYPE html html langzh-CN head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title我的第一个网页/title /head body h1你好世界/h1 p这是我用HTML制作的第一个页面。/p /body /html把这段代码保存成一个index.html文件双击用浏览器打开你就能看到一个最简单的网页。注意保存时文件后缀必须是.html或.htm不是.txt。如果文件图标还是文本文件的样子大概率是系统把后缀隐藏了需要在资源管理器里打开“显示文件扩展名”再检查一下。3.2 head区域里每一行到底在干什么很多新手复制骨架时只知道照抄完全不理解为什么要有这些行。我逐行解释一遍因为理解了之后你才不会乱删。第一行!DOCTYPE html是文档类型声明。它的作用不是定义HTML标签而是告诉浏览器“请用现代标准模式解析这个页面”。历史原因导致旧浏览器存在“怪癖模式”和“标准模式”之分不写这一行可能让布局渲染变得不可预测。现代浏览器默认行为已经很规范但这行依然是标准写法。html langzh-CN里的lang属性声明页面语言。zh-CN代表中国大陆地区的简体中文。这个属性的实际用处比想象中大浏览器翻译插件会据此判断要不要提示翻译屏幕阅读器会据此选择正确的朗读方式搜索引擎也需要它来理解页面内容语言。如果你只是练习写zh-CN就行。meta charsetUTF-8是字符编码声明。UTF-8 是目前最通用的编码格式能覆盖全球几乎所有文字。如果这行缺失或者写错中文会出现乱码——很多新手一上来就遇到“页面全是问号”的问题就是这个原因。VS Code默认按UTF-8保存文件所以只要你声明了UTF-8基本不会乱码。meta nameviewport contentwidthdevice-width, initial-scale1.0这行负责移动端适配。没有它手机浏览器会按桌面端的宽度渲染整个页面然后整体缩放字小得像蚂蚁。加了它页面宽度会跟随设备宽度。这行在纯桌面练习时看不出差别但一旦你要做能手机访问的页面它就是标配。title我的第一个网页/title则定义了浏览器标签页上显示的文字同时也是搜索引擎结果里显示的标题。它虽然写在head里但直接影响用户体验和SEO不能省。3.3 body区域的可见内容与注释的习惯body标签里放的是页面可见内容。刚才示例里的h1是一级标题p是段落这两个后面会细讲。再补充一个写代码时非常重要的习惯——注释。HTML注释的写法是!-- 这是注释浏览器不会显示它 --注释是写给开发者自己看的。新手写代码不喜欢注释过两周回来看自己的文件完全想不起来当时某段结构干嘛用的。我的建议是在写大区块之前先写一行注释标明用途比如!-- 顶部导航栏开始 --、!-- 商品列表区域 --这样文件结构一目了然调bug的时候也能快速定位区域。另外不管用哪个编辑器写HTML一定要保持缩进。每嵌套一层标签就缩进两个空格或一个Tab。这段代码对浏览器来说缩进不缩进都一样但对你和维护你代码的人来说缩进就是生命线。4. 高频标签实战文字、链接、表格与表单一次学到位4.1 文本与区块标签的分工HTML标签数量看着多但日常开发高频使用的就二三十个剩下的遇到再去查。先解决最常用的文本和区块标签。标题标签h1到h6定义了六级标题重要性逐级递减。一个规范页面一般只有一个h1通常是页面主标题或Logo不要为了字大就滥用h1。段落标签p用于普通的文字段落。strong表示重要文字默认加粗em表示强调默认斜体。换行用br注意它是自闭合标签不需要结束标签。水平分割线用hr一般是用来分隔内容区块的现在更多被CSS边框替代。区块这块div是一个无语义的通用容器用来把一组元素包起来便于整体布局。span则是行内容器常用于在一段文字里单独给某几个字设置样式。举个例子div classintro p这是介绍段落span stylecolor: red;这一小段文字/span会有单独的样式。/p /div除了divHTML5还提供了语义化标签header定义页头nav定义导航main定义主体内容section定义章节footer定义页脚。这些标签和div的作用一样都是容器但带了“名字”开发者一看就知道这块是干嘛的搜索引擎也更容易理解页面结构。能用语义化标签的地方不要都堆div。4.2 链接与图片让页面不再是孤岛一个网页之所以叫“超文本”关键就在于它可以跳转。链接用a标签a hrefhttps://example.com target_blank访问示例网站/ahref是目标地址target_blank表示在新标签页打开。做页面内跳转时href可以写成#id名点击后会滚动到页面里对应id的元素位置这个技巧在后面做“返回顶部”时会用到。图片用img标签img srcimages/photo.jpg alt一张风景照片src是图片路径alt是图片无法显示时替代文字。alt不仅能帮助视障用户理解内容也有利于SEO。我见过不少新手不写alt页面加载失败时图片位置只留一个破图标用户完全不知道这原本是什么内容。图片路径写相对路径图片放项目文件夹里的images目录。4.3 表格数据展示的标准姿势表格对应的关键词在热搜里常年有说明这确实是新手的痛点。HTML表格的基础结构是“表格、行、单元格”三层table border1 thead tr th姓名/th th分数/th /tr /thead tbody tr td张三/td td92/td /tr tr td李四/td td87/td /tr /tbody /tabletable定义表格tr定义一行th是表头单元格td是普通单元格。thead、tbody分别表示表头和主体分组之后样式控制更方便。合并单元格经常让新手卡壳。colspan让一个单元格横向跨多列rowspan让它纵向跨多行tr td colspan2这一格横跨两列/td /tr有个历史教训我必须提一下很多年前前端开发者流行用表格做整个页面布局因为当时CSS还不成熟。现在千万别这么干表格的渲染性能差、响应式适配麻烦它只适合展示真正的二维数据页面布局交给CSS。4.4 表单输入控件与标签的正确搭配表单是用户和页面交互的最基础形式也是很多新手从“看”转向“写”的关键节点。一个最简单的登录表单长这样form action/login methodpost div label forusername用户名/label input typetext idusername nameusername /div div label forpassword密码/label input typepassword idpassword namepassword /div button typesubmit登录/button /formform标签有两个关键属性action是表单提交的目标地址method是提交方式。GET会将数据拼在URL后面适合搜索这类不敏感的场景POST会将数据放在请求体里适合登录、注册这类有数据修改和敏感信息的场景。input的type属性决定了控件形态text是单行文本password是密文输入email会做邮箱格式校验radio是单选按钮checkbox是多选复选框file是文件上传。label的for属性要跟对应input的id一致这样点击文字就能聚焦到输入框这个细节对提升用户体验非常重要。下拉选择用select多行文本用textarea提交按钮用button typesubmit。关于表单提交后的跳转我在第7章会专门讲。这里有一张速查表可以收藏着用标签作用关键属性a超链接href、targetimg图片src、alttable表格容器无tr表格行无th/td表头/单元格colspan、rowspanform表单容器action、methodinput输入控件type、name、idlabel控件说明文字forselect下拉框nametextarea多行文本name5. 结构、表现、行为分离CSS与JavaScript的接入方式5.1 CSS三种引入方式行内、内部、外部写出来的HTML默认是白底黑字、从上往下排列的纯文档流要让它变得好看就得引入CSS。CSS引入有三种方式我在项目里对它们的取舍很明确。第一种是行内样式直接写在标签的style属性里p stylecolor: red; font-size: 20px;这段文字是红色/p这种方式生效最快但不推荐在项目里使用。因为样式和结构混在一起改一个颜色得去HTML文件里翻同一套样式想复用只能复制粘贴维护成本极高。它适合什么场景呢临时调试或者邮件模板里少数不能外链样式的场景。第二种是内部样式表写在head里的style标签中head style p { color: red; } /style /head这种方式适合单个HTML文件的demo比如你要做一个带完整样式的单页小案例比如生日祝福页把所有代码塞进一个文件里发给别人打开就能看。第三种是外部样式表也是正式项目里最推荐的方式head link relstylesheet hrefcss/style.css /headHTML文件、CSS文件、JavaScript文件各管各的互不干扰这就是所谓的“结构、表现、行为分离”。项目一复杂这种分离带来的好处就会非常明显地体现出来。5.2 盒模型与Flex新手必须掌握的两个布局知识CSS里第一个必须理解的概念是盒模型。页面里所有元素都是一个矩形盒子从内到外依次是内容content、内边距padding、边框border、外边距margin。你设置的width默认只作用于内容区域如果再加上padding和border元素实际占的宽度会比你设的值更大这是很多新手做布局时“明明设了宽度却溢出”的原因。解决方案是加一行全局设置* { box-sizing: border-box; }box-sizing: border-box的意思是你设置的width直接包含padding和border元素实际宽度跟预期一致布局计算时省心得多。布局方面强烈建议新手早点接触Flex布局它是目前做页面布局最高效的方案之一。典型用法是让子元素水平垂直居中.container { display: flex; justify-content: center; align-items: center; }display: flex把容器变成弹性容器justify-content: center控制水平居中align-items: center控制垂直居中。这一套组合在“元素居中”这个高频需求上比老式的margin: 0 auto加各种hack简单太多了。5.3 JavaScript脚本放哪、事件怎么写JavaScript的引入方式和CSS类似但有一个关键区别script标签的位置会影响代码能不能正常运行。body !-- 页面内容 -- script srcjs/main.js/script /body为什么通常建议把script标签放在body末尾因为JavaScript经常要操作页面上的元素比如给按钮绑定点击事件。如果脚本在head里就被解析执行此时body还没加载脚本去获取一个不存在的元素就会报错。放在body末尾等页面内容都渲染完了脚本再执行就不会有这个问题。或者你可以在head里引入时加defer属性它告诉浏览器等文档解析完再执行。一个最基础的事件示例button idmyButton点击我/button script document.getElementById(myButton).addEventListener(click, function () { alert(按钮被点击了); }); /scriptdocument.getElementById用来获取页面元素addEventListener用来监听事件这是JavaScript操作页面的最基本套路。控制台里打出来的报错会精确告诉你哪一行出了问题它就是你的第一调试工具。6. 综合小项目一个带红绿灯动画和一键返回顶部的完整页面6.1 项目目标和结构学到这里把前面的知识点串成一个完整项目才算是真正的“HTML的制作”。我设计了一个小页面它有两个功能亮点一个是红绿灯状态循环动画这是一类典型的JS定时器应用另一个是一键返回顶部按钮这是很多长页面必备的交互。它的整体效果类似一个简单个人主页加一个动态功能区。文件结构就用前面说的规范traffic-demo/ ├── index.html ├── css/ │ └── style.css └── js/ └── main.js6.2 HTML结构部分!DOCTYPE html html langzh-CN head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title个人主页与红绿灯演示/title link relstylesheet hrefcss/style.css /head body header classsite-header h1我的个人主页/h1 p一个用HTML、CSS、JavaScript做出来的演示页面/p /header main section classcard h2红绿灯模拟/h2 div classtraffic-light idtrafficLight div classlight light-red idlightRed/div div classlight light-yellow idlightYellow/div div classlight light-green idlightGreen/div /div p classstatus-text idstatusText当前状态红灯/p /section section classcard h2关于这个页面/h2 p页面里包含文字排版、列表、按钮和基本的CSS布局。你可以把它作为自己第一个综合项目的模板在此基础上继续加内容、换主题、改样式。/p p滚动页面查看右下角的“返回顶部”按钮。/p /section /main footer classsite-footer p底部信息练习项目/p /footer button classback-to-top idbackToTop顶部/button script srcjs/main.js/script /body /html这里包含了header、main、section、footer语义化标签的组合也包含了今天讲到的标题、段落、按钮元素。注意红绿灯的灯体我用了三个带独立id的div这样JavaScript才能精准控制每一盏灯。6.3 CSS样式部分/* css/style.css */ * { box-sizing: border-box; } body { margin: 0; font-family: Microsoft YaHei, sans-serif; background-color: #f5f5f5; color: #333; line-height: 1.6; } .site-header { background-color: #2c3e50; color: #fff; text-align: center; padding: 40px 20px; } .site-header h1 { margin: 0; font-size: 2rem; } main { max-width: 800px; margin: 30px auto; padding: 0 20px; } .card { background-color: #fff; border-radius: 8px; padding: 24px; margin-bottom: 24px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); } .traffic-light { width: 100px; padding: 12px; margin: 20px auto; background-color: #222; border-radius: 12px; display: flex; flex-direction: column; gap: 10px; } .light { width: 60px; height: 60px; margin: 0 auto; border-radius: 50%; background-color: #555; transition: background-color 0.3s ease; } .light-red.active { background-color: #e74c3c; box-shadow: 0 0 15px #e74c3c; } .light-yellow.active { background-color: #f1c40f; box-shadow: 0 0 15px #f1c40f; } .light-green.active { background-color: #2ecc71; box-shadow: 0 0 15px #2ecc71; } .status-text { text-align: center; font-weight: bold; } .site-footer { text-align: center; padding: 20px; color: #888; } .back-to-top { position: fixed; right: 24px; bottom: 24px; width: 56px; height: 56px; border: none; border-radius: 50%; background-color: #3498db; color: #fff; font-size: 14px; cursor: pointer; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease; } .back-to-top.show { opacity: 1; visibility: visible; }CSS部分有几个值得注意的点。红绿灯容器用flex-direction: column让三盏灯从上往下排灯的样式先写一个默认灰色再用.active类控制点亮颜色点亮时加一层box-shadow模拟发光效果这样做的好处是逻辑和样式解耦——JavaScript只需要切换类名不需要直接改颜色。transition让亮灯和灭灯之间有0.3秒的渐变动画视觉效果更自然。返回顶部按钮用position: fixed固定在页面右下角默认opacity: 0隐藏加了.show类才显示。6.4 JavaScript交互部分// js/main.js var lightState 0; var states [ { name: 红灯, duration: 5000, activeClass: light-red }, { name: 黄灯, duration: 2000, activeClass: light-yellow }, { name: 绿灯, duration: 4000, activeClass: light-green } ]; var lightRed document.getElementById(lightRed); var lightYellow document.getElementById(lightYellow); var lightGreen document.getElementById(lightGreen); var statusText document.getElementById(statusText); function clearAllLights() { lightRed.classList.remove(active); lightYellow.classList.remove(active); lightGreen.classList.remove(active); } function changeLight() { var current states[lightState]; clearAllLights(); document.querySelector(. current.activeClass).classList.add(active); statusText.textContent 当前状态 current.name; lightState (lightState 1) % states.length; setTimeout(changeLight, current.duration); } changeLight(); var backToTop document.getElementById(backToTop); window.addEventListener(scroll, function () { if (window.scrollY 200) { backToTop.classList.add(show); } else { backToTop.classList.remove(show); } }); backToTop.addEventListener(click, function () { window.scrollTo({ top: 0, behavior: smooth }); });红绿灯的逻辑核心是用setTimeout实现“递归调用”每次changeLight执行后根据当前状态的时长设置下一次切换的定时器lightState (lightState 1) % states.length让状态在0、1、2之间循环。这个模式比用setInterval更灵活因为每周期时长可以根据状态动态变化不会出现定时器错位问题。返回顶部用了window.scrollTo配合behavior: smooth这是现代浏览器原生支持的平滑滚动你完全不需要自己去写那些“每秒滚动多少像素”的旧算法。滚动监听scroll事件里判断window.scrollY 200超过200像素就显示按钮否则隐藏。把这个项目完整跑起来你就在一个真实场景里用到了前面所以知识点HTML结构、外部CSS文件、盒模型、Flex布局、类名切换、事件监听、定时器、滚动操作。7. 新手翻车现场复盘预览失败、中文乱码与格式转换7.1 为什么双击HTML文件打不开或者样式不生效“html文件无法预览”是频率极高的求助。绝大多数情况原因在三处。第一文件扩展名不对实际上存成了index.html.txtWindows默认隐藏扩展名你看着是html实际系统按文本文件处理。解决方法是打开文件资源管理器的“显示文件扩展名”改掉后缀。第二路径写错了。外部CSS和JS没有加载出来检查文件目录是否跟href、src里写的路径一致。这时候打开开发者工具的Network面板刷新一次页面哪些文件404一目了然。第三浏览器用file://协议直接打开本地文件时部分浏览器对本地资源加载有限制。碰到这种问题最省事的方法是右键页面用Live Server打开或者自己起一个本地服务# 在项目目录下执行 python -m http.server 8080然后浏览器访问http://localhost:8080。使用本地服务器开发的习惯应该从一开始就养成。7.2 中文乱码字符编码必须前后一致页面中文全部变成乱码十有八九是编码问题。HTML文件本身以什么编码保存页面声明用什么编码这两个必须一致。VS Code默认UTF-8保存页面声明也是UTF-8一般不会乱但如果HTML是用系统记事本在Windows上另存为时选了ANSI编码页面却声明了UTF-8就会冲突。排查思路很简单先确认文件编码VS Code右下角会显示当前文件编码再确认head里meta charsetUTF-8有没有写、写的是不是UTF-8。如果文件已经用其他编码保存了乱码最好的办法是用编辑器重新转成UTF-8再重新声明。7.3 HTML和Word、WPS表格、Markdown之间的互相转换很多人会搜“html格式转换wps表格”“html转为md”原因各不相同。有的是手里有一批HTML文件要整理成文档有的是做爬虫拿到表格想转成Excel。这里给你说几个我实测过的思路。HTML文件本身可以直接用浏览器打开也可以直接用WPS打开WPS会识别并渲染HTML里的表格和排版。想把HTML表格转成Excel表格最省事的办法是直接改扩展名为.xlsExcel和WPS通常能识别出HTML格式的表格内容但会弹一个格式不兼容提示不影响数据读取。更规范的做法是复制表格内容粘贴到WPS表格里或者用Python的pandas.read_html读取表格后另存为Excel。HTML转Markdown则更适合用专门工具。命令行用户推荐pandoc一句pandoc input.html -t markdown -o output.md就能完成转换它对标准HTML的解析效果很好。不习惯命令行的可以搜在线转换工具选一个支持从URL上传或者粘贴源码的即可。需要注意HTML越复杂嵌套深、样式多转出来的Markdown越乱这是格式差异导致的不是工具有问题。7.4 表单提交成功后的跳转到底谁来做“html/php 注册成功后跳转”这类问题暴露了一个常见误区以为HTML本身能控制提交后跳转。实际上表单通过action提交给服务器后后续发生什么完全由服务器决定。服务器处理完注册逻辑后通过HTTP重定向响应类似302让浏览器跳转到指定页面这才是注册成功跳转的标准做法。前端HTML做不了这件事。如果你只是在做一个前端模拟没有服务器可以用JavaScript在收到表单内容后手动跳转document.getElementById(loginForm).addEventListener(submit, function (event) { event.preventDefault(); // 这里可以做简单的本地校验 window.location.href success.html; });window.location.href是前端页面跳转的核心API。但请记住这只是模拟。真正的注册登录系统涉及用户数据安全校验必须在服务器完成前端跳转只能做体验优化。回到红绿灯这个项目如果你想验证纯前端的“跳转效果”也可以在页面里加一个按钮绑定window.location.href跳转到页面内某个#id锚点这个用法和返回顶部按钮的原理是一致的。我个人的体会是学HTML最忌讳的是“只看不写”。你可以把今天的红绿灯页面按自己的喜好改一遍——换个配色、改下文字、加个图片区块、调整红绿灯时长改完一个页面你学到的东西比刷十篇教程都多。做第一个项目时慢一点没关系控制台报错多也没关系那些报错信息其实就是最好的学习材料我遇到过的绝大多数问题在报错信息里都已经写清楚了原因和位置。
