带过不少零基础转行前端的人我观察到一个特别普遍的现象第一周劝退大部分人的不是 HTML 语法有多难而是编辑器还没用顺手。有人在 Word 里写代码有人用记事本写完直接拖进浏览器等看到中文乱码、布局乱成一片已经开始怀疑自己适不适合学编程。其实前端入门没有你想象的那么玄乎起点就两步第一把 VSCode 这个编辑器装好、调好第二搞定 HTML 基础这门标记语言。VSCode 管你的写码环境HTML 管网页的骨架结构两件事一起学效率最高。这篇文章就是按这个节奏来的适合完全没有编程基础、准备从前端开发开始学起的人。1. 为什么前端入门先把 VSCode 和 HTML 绑在一起学1.1 先把工作流跑通再谈背语法很多人学前端的方式是买一本书或者跟一套视频从第一节课开始跟着敲。结果往往是视频里讲了 20 分钟标签语法自己动手时却连新建文件、在浏览器打开都不会。真正的问题不是理解力而是缺少一条完整的工作流写代码、保存、预览、看报错。VSCode 恰好能把这条工作流压缩到最小。你在左边写一行代码保存的瞬间浏览器里的页面就已经更新这种即时反馈对新手来说极其重要它让“我写的东西生效了”这件事变得特别具体。先学会用工具再学知识不是走捷径而是把学习成本降到最低。我自己带新人的时候第一节课从来不先讲标签而是让他们先跟着我把 VSCode 装好、跑通一个最简单的页面。只要这个流程跑通了后面学什么都有底气。1.2 VSCode 为什么值得花一篇文章去学写 HTML 能用的工具有很多你可能在网上看到过各种推荐。我把常见的几个都对比过身边新人实际用下来的感受差别很大记事本或系统自带的文本编辑器完全免费但没有任何语法高亮和自动补全写一个标签忘闭合得自己盯半天。如果连缩进都要手动加空格学习效率会非常低。Sublime Text、Notepad轻量、启动快但插件生态和社区活跃度目前都不如 VSCode而且新手搜问题的时候能搜到的教程大部分都默认用 VSCode 截图。工具选得跟教程不一致照着做时容易对不上。WebStorm功能确实强大重构和调试都是 IDE 级别但比较重、收费首次启动也慢给零基础的人推荐它容易打击信心。HBuilderX针对国内生态做了不少优化如果你以后完全在国内技术栈里工作也能用。但想要查英文文档、看 Stack Overflow、用通用的社区方案时VSCode 的通用性高得多。所以我的建议一直很明确新手入门前端直接用 VSCode。它是微软做的免费开源编辑器当前前端开发事实上的主流选择。它启动速度够快插件市场极其丰富而且不绑定语言。今天用它写 HTML明天写 CSS、JavaScript、Vue 甚至写 Python、写后端都不用换工具。这意味着你入门阶段投入的学习成本后面全都能复用。1.3 这篇文章适合谁学完能到什么程度如果你是没有任何编程基础、想转行前端或者是刚进入大学准备系统学开发的学生这篇内容就是为你准备的。整篇文章不涉及 CSS 美化也不碰 JavaScript 逻辑只做两件事把 VSCode 配置成一个顺手的 HTML 编辑器再把 HTML 最核心的标签和文档结构讲明白。跟着实操一遍你至少能做到独立下载、安装并配置好 VSCode用快捷键快速新建文件看得懂 HTML 文档结构里每一行代码的含义会使用最常见的标签搭出一个带标题、段落、图片、链接、列表的静态网页还能通过 Live Server 在浏览器中实时预览。这些就是你学习前端开发的第一块基石。2. VSCode 下载安装与首启设置新手最容易卡住的地方2.1 官网下载与安装选项勾选先说一个很多人踩过的坑在搜索引擎里搜“vscode 下载”结果点进了第三方下载站下载下来一个带捆绑软件、甚至改了名字的安装包。最稳妥的方式是直接访问 Visual Studio Code 官网域名是 code.visualstudio.com。打开之后首页正中就是下载按钮它会根据你的操作系统自动推荐版本Windows 用户一般会拿到一个 .exe 安装包。双击安装时有几个勾选项需要特别注意“通过 Code 打开”操作建议勾上。这样在文件夹上右键时会出现“通过 Code 打开”以后打开项目目录会很方便。“添加到 PATH”一定要选。这样可以在终端里面直接输入 code . 打开当前文件夹对后续学习和开发都很有用。“添加到资源管理器上下文菜单”和第一条配套也建议勾上。创建桌面快捷方式看个人习惯经常用就创建。安装过程中系统会问你是装“User Installer”还是“System Installer”。零基础用户我建议选 User Installer它装在当前用户目录下不需要管理员权限后续升级也更方便。Mac 版下载的是 zip 包解压后把 Visual Studio Code.app 拖进 Applications 文件夹就能用。现在很多正规教程会提供一键配置脚本或者推荐装全家桶插件但那是给有经验的人准备的。零基础阶段还是自己一步一步点安装比较好每一步都知道自己在干什么后面出了问题也更容易排查。2.2 打开后的界面布局先认得五个区域第一次打开 VSCode很多人会被界面吓到——密密麻麻的面板不知道从哪下手。其实你只需要知道五个区域活动栏最左边的一行图标用来切换资源管理器、搜索、源代码管理、运行与调试、扩展。它在默认布局下常驻显示。侧边栏显示当前文件夹里的文件树对应活动栏里的“资源管理器”。没有打开文件夹时这里基本是空的。编辑器中间最大的一块区域所有代码都在这里编辑。面板编辑器下方默认可能是折叠状态终端、输出、问题列表都在这里。状态栏最底部显示当前文件的编码格式、行列号、Git 分支等信息。建议你写代码之前先用“打开文件夹”的方式打开一个项目目录这样左侧资源管理器里才能看到文件树后续 Live Server 预览也依赖这个文件夹边界。直接在单个文件上右键“用 VSCode 打开”也可以用但这种方式没有项目目录的概念跑 Live Server 时会遇到问题。2.3 中文界面设置VSCode 默认是英文界面。对初学者来说把菜单翻译成中文能省不少事。操作路径是按 CtrlShiftP 打开命令面板输入 Configure Display Language选择 Install additional languages在左侧搜索框里输入 Chinese找到“中文(简体)”语言包并点击 Install。安装完成后右下角会弹出提示点击“Change Language and Restart”重启就生效了。有个细节经常有人忽略只安装语言包不代表切换成功一定要执行切换动作。如果你安装完重启后还是英文重新打开命令面板输入 Configure Display Language在列表里选中“zh-cn”再重启一次就行。这里多说一句界面中文和写代码用不用英文没关系。HTML 标签、属性本来就是英文单词界面翻译不影响学习。反而早期就把英文界面看习惯了后面查英文资料会更轻松。不过我尊重习惯第一步用中文界面完全没问题。3. 写 HTML 前把 VSCode 调顺手5个设置6个插件10个快捷键3.1 四个基础设置先改再写新装的 VSCode 建议先改四个设置这样写起来才顺手。按 Ctrl, 打开设置界面在搜索框里输入关键词就能定位Auto Save搜 files.autoSave建议改成 afterDelay。这样你写完代码停顿几秒文件会自动保存配合 Live Server 刷新时不会因为忘了保存而一直看旧页面。Word Wrap搜 editor.wordWrap改成 on。否则一行很长的代码会在水平方向滚动新手容易看晕也容易在看结构时迷失位置。Font Size搜 editor.fontSize按屏幕和视力调整为 16 到 18。默认 14 在部分高分屏上偏小长时间盯代码容易累。Tab Size搜 editor.tabSize前端社区普遍用 2 个空格作为缩进也可以统一为 4。关键是整个项目保持一致不要混用空格和 Tab否则格式化时会很痛苦。另外记一个快捷操作Ctrl加号 和 Ctrl减号 可以快速缩放编辑器字号。给别人演示代码或者投屏时这个操作非常实用不用每次都进设置改。3.2 插件清单按需装别贪多VSCode 的扩展市场是它最强大的地方但新手插件装多了并没有好处。界面会变得杂乱启动会变慢插件之间还有可能互相冲突。这里我只推荐写 HTML 阶段真正用得上的几个插件名作用建议Live Server本地启动一个开发服务器保存文件后自动刷新浏览器必装开发阶段离不开Auto Rename Tag修改开标签时自动同步修改闭标签必装省大量重复操作HTML CSS Support写 class 属性时自动提示可用的 CSS 类名必装学到 CSS 后会更强Prettier - Code formatter一键格式化代码统一缩进、引号、换行风格建议在设置里打开 Format On Savevscode-icons给不同类型的文件显示不同图标可选能让文件树更好认Chinese (Simplified) Language Pack中文界面语言包前面已经用到了安装方式很简单点击活动栏第五个图标进入扩展商店搜索插件名点 Install。这里提醒一句安装时留意一下发布者名称比如 Live Server 的发布者是 Ritwick DeyPrettier 的发布者是 Prettier。看到完成安装之后VSCode 通常不需要手动重启但个别插件例外如果发现没生效重启一下编辑器再试。3.3 快捷键只记这 10 个快捷键不需要死记硬背用一个月自然就记住了。但下面这 10 个使用频率极高建议你刻意练一练因为它们直接关系到写代码的流畅度。快捷键作用CtrlN新建文件CtrlS保存CtrlShiftP打开命令面板几乎所有功能都能在这里搜到Ctrl/注释或取消注释当前行在 HTML 里会生成Alt↑ / Alt↓当前行整体上移或下移不用再复制粘贴CtrlD选中下一个相同的单词连续按时可以实现多光标批量修改CtrlShiftK删除当前整行CtrlB显示或隐藏侧边栏CtrlK CtrlO打开文件夹CtrlShiftI在浏览器里打开开发者工具还有一个操作不算快捷键但写 HTML 时非常关键在空文件里输入英文感叹号 !然后按 TabVSCode 会自动生成完整的 HTML 骨架。这个操作能帮你省去手敲骨架的时间后面的实战部分我会再演示一次。4. HTML 骨架拆解一段标准文档到底在说什么4.1 HTML 不是编程语言它是网页的骨架很多人听到“编程语言”四个字就被吓住了后来一查才发现HTML 的英文全称是 HyperText Markup Language超文本标记语言。它没有 if/else没有循环也不做计算。它的工作只有一件事用标签把内容“框”起来告诉浏览器这部分是标题、那部分是段落、哪里是链接、哪里是图片。我常用一个类比来解释网页像一个人HTML 是骨骼决定了身体有哪些部位以及它们的位置CSS 是皮肤、衣服和妆容决定好不好看JavaScript 是肌肉和神经决定能不能动、能不能交互。入门篇只学 HTML但你心里要清楚后面还有两层在等着你。你可以先只搭骨架这已经是半个网页了。4.2 标准文档结构逐行解释在 VSCode 里新建一个 index.html输入 ! 后按 Tab生成的代码是这样的!DOCTYPE html html langzh-cn head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title我的第一个网页/title /head body /body /html逐行拆开看!DOCTYPE html告诉浏览器当前文档用的是 HTML5 标准。它不是标签而是一份声明。html langzh-cn根标签包裹整个文档。langzh-cn 表示页面主要语言是简体中文对搜索引擎和屏幕阅读器友好。head头部区域存放浏览器和搜索引擎需要的信息这些信息不会显示在页面主体里。meta charsetUTF-8指定文档的字符编码为 UTF-8。缺了它浏览器可能会用系统本地编码去解析中文几乎一定会乱码。meta nameviewport ...设置手机浏览器里的视口宽度让页面适应移动设备。删掉它手机打开网页时会像缩小的电脑版一样。title我的第一个网页/title显示在浏览器标签页上的文字。body用户能看到的全部内容都写在这里。有一个新手常有的误解head里写的所有东西都不会出现在网页正文里。你在页面上看到的文字、图片、按钮全部都要放在body内。4.3 标签的语法共性成对出现与属性绝大多数 HTML 标签是成对出现的比如title.../title由开标签、内容、闭标签三部分组成这种结构叫作“元素”。有一些标签是自闭合的比如meta、img、br它们没有内容不需要闭标签。标签上可以写属性用来补充信息。例如html langzh-cnlang 是属性名zh-cn 是属性值a hrefhttps://example.comhref 表示链接目标。属性写在开标签里面多个属性之间用空格隔开。新手最容易犯的错是漏掉右引号或者把属性写进闭标签里。这两类错误浏览器通常都不会报错但结果就是不生效查起来只能靠肉眼。5. 高频标签逐个拆文本、链接、图片、列表、表单5.1 标题和段落不要只看字号标题标签是 h1 到 h6从大到小。但选 h2 不是因为字号合适而是因为语义层级上它属于 h1 下面的子标题。搜索引擎和屏幕阅读器会把 h1 理解为页面的主标题所以一页最好只有一个 h1下面用 h2 分区块更小的细节用 h3。如果你只是想让字变大正确做法是后面用 CSS 控制而不是写一堆标签去硬撑字号。段落用p包裹浏览器会自动在段落前后加间距。还有两个高频文本标签strong表示重要内容默认加粗em表示强调默认斜体。另外是span它是一个行内的“无含义容器”不写样式时看不出任何变化但它常被用来给一句话中的某个词做标记方便后续用 CSS 单独调整。5.2 超链接和图片网页最重要的两个标签超链接是a基本写法是a hrefhttps://example.com target_blank访问示例网站/a。href 是链接地址target_blank表示在新标签页打开。用的时候不要省略 href否则 a 标签就跟普通文本一样点不动。图片标签是自闭合的img srcphoto.jpg alt一张风景照片 width300。src 是图片地址alt 是图片无法加载时显示的替代文本也是屏幕阅读器会朗读的内容。写 alt 不要偷懒再简单也建议写一句描述这是网页可达性的一部分。width 可以直接写在标签里但更推荐以后用 CSS 控制尺寸这里先知道有这个属性就行。说到图片路径你会看到两种常见写法绝对路径和相对路径。绝对路径就是完整的网址比如https://a.com/pic.jpg相对路径是相对于当前文件的路径比如images/1.jpg。初学者先用相对路径等学完项目部署后对绝对路径的体会会更深。别小看这种基础页面很多系统里的邮件模板、活动落地页本质上也是一份独立的 HTML 文档。5.3 列表和容器列表分两种无序列表ul前面是圆点有序列表ol前面是 1、2、3 编号。列表项都用li并且li应该直接放在ul或ol里面不要在中间塞div之类的其它标签。结构写错了浏览器虽然不会报错但后面的 CSS 样式很容易出问题。容器标签要先认识div和span。div是块级盒子的万金油用来把一组相关元素包起来形成布局上的区块span是行内容器。这里还牵出一个非常重要的概念块级元素和行内元素。h1、p、div这类块级元素默认占满整行宽度各自独占一行而span、a、img属于行内元素会连着排在同一个水平线上。这个 block 和 inline 的区别后面学 CSS 布局时几乎天天都要用到现在先有一个印象。5.4 表单基本套路表单是网站收集用户输入的入口。一个最基础的表单长这样form action/submit methodpost div label foremail邮箱/label input typeemail idemail nameemail placeholder请输入邮箱 /div div label forpassword密码/label input typepassword idpassword namepassword /div button typesubmit登录/button /form这里几个点需要理解。label的 for 属性和input的 id 关联作用是点击“邮箱”这个文字时也能聚焦到输入框既提升体验对屏幕阅读器也友好。type 决定输入框的类型email 会触发浏览器的邮箱格式校验password 会把输入内容显示成圆点。placeholder 是灰色的占位提示不是真实的值。name 属性是提交到服务器时的字段名以后学 JavaScript 和后端时会真正用到它。6. 实战用 VSCode 写一个能实时预览的个人主页6.1 新建项目文件夹和 index.html现在把前面讲的东西串起来做一个完整的个人主页。打开 VSCode先创建一个项目文件夹。建议单独建一个 frontend 目录里面每个小项目一个子文件夹比如 01-first-page。文件路径和文件名尽量只用英文、数字和横杠不要用中文和空格。这一点现在可能体会不到等后面用到命令行工具或者把项目部署到服务器上你会发现纯英文路径能避免很多不必要的坑。在 VSCode 里按 CtrlK 再按 CtrlO 选择这个文件夹可以看到左侧资源管理器中出现了一个空的文件夹。点击资源管理器顶部的“新建文件”按钮输入 index.html。注意index.html 是网站默认首页的约定文件名需要放在项目根目录以后学 Vue、React 这些框架时也仍然延续这个规则。在 index.html 里输入英文感叹号 !再按 Tab骨架就会自动生成。写到这里你应该已经发现前面的快捷键和插件铺垫全都在为这一步服务。工具用熟了动手写页面只是时间问题。6.2 完整小页面带标题、简介、图片、列表和链接我们把 body 里面的内容替换成下面这样。这里先不加任何 CSS纯粹验证 HTML 结构对不对h1你好我是小周/h1 p一个正在学习前端开发的新人目标是能独立做出好用的网页。/p h2关于我/h2 p我目前在自学前端先从 HTML 和 CSS 开始之后会学习 JavaScript。/p img srchttps://picsum.photos/200/200 alt随机占位图片 h2我常用的工具/h2 ul liVSCode 编辑器/li liChrome 浏览器/li liGit 版本管理后面会学/li /ul h2我的练习作品/h2 p还没有作品先放一个学习进度记录/p ol li完成 VSCode 安装和配置/li li学会 HTML 基础标签/li li做第一个个人主页/li /ol h2联系方式/h2 p欢迎通过 a hrefhttps://github.com target_blank我的 GitHub/a 找到我。/p这里用到的标签前面都讲过可以对照着理解。图片地址我随手用了 picsum.photos 提供的随机占位图如果你的网络访问不到它就换成本地图片在项目文件夹里建一个 images 目录把图片放进去src 写成images/你的图片文件名.jpg这就是相对路径。6.3 用 Live Server 和开发者工具验证效果页面写完后在编辑器空白处右键选择 Open with Live Server。浏览器会自动打开一个类似http://127.0.0.1:5500/index.html的地址页面上就是你刚写的内容。现在回到 VSCode 把 h1 里的文字改一下按 CtrlS 保存浏览器里的页面会自动刷新。这个“保存即刷新”的体验就是 Live Server 提供的也是前端开发中最高频的操作。你还可以在浏览器里按 F12 或 CtrlShiftI 打开开发者工具切到 Elements 面板这里能看到浏览器把 HTML 解析后的完整 DOM 结构。在 Elements 面板里可以临时修改文字、删除元素来看效果也可以检查一个标签的父级和子级关系。排查“为什么这个内容没有出现在我想让它出现的位置”时这个面板是最直接的答案来源。7. 入门期踩过的坑和反复使用的经验7.1 标签不闭合引发的连锁反应新手经常写下p文字就忘了写/p然后发现整个页面的布局都乱了。关键是浏览器面对不合法 HTML 时会尽力容错它可能自动帮你补上闭标签也可能把后面的一大堆内容都当成这个 p 的内容而且全程不报任何错误。这里有一个真实场景有人写了一个p里面又套了一个h1标题。HTML 规范不允许块级元素嵌在p里面结果浏览器自动把p拆开了页面顶部莫名多出大量空白怎么看都找不到原因。遇到这种问题时打开开发者工具的 Elements 面板看一眼 DOM 树的实际嵌套结构哪一层跟你预期的不一样问题基本就在那里。很多看起来玄秘的 CSS 问题根源其实是 HTML 结构不规范所以写标签时养成随手闭合的习惯会省掉大量排查时间。我推荐的做法是先写p/p再往中间填充内容而不是先写p再写一堆内容最后补/p。7.2 中文乱码和图片不显示的排查思路中文乱码几乎都是编码问题。排查顺序是先看head里有没有meta charsetUTF-8再看 VSCode 右下角显示的文件编码是不是 UTF-8。如果文件本身被存成了 GBK即使声明了 UTF-8 也照样乱码。修复方法很简单点击右下角的编码按钮选择“通过编码重新打开”或者“保存时使用 UTF-8”即可。图片不显示最常见的是路径错误。按 F12 打开开发者工具切到 Network 面板刷新页面后看到状态码404 表示文件找不到403 通常是服务器拒绝访问如果是 200 但仍然看不到图才需要去看是不是有样式把它们隐藏了。路径排查记住一条src 是相对于当前文件的位置photos/1.jpg是当前目录下 photos 目录里的 1.jpg../1.jpg是上一级目录里的 1.jpg。文件名大小写也要严格区分。本地 Windows 文件系统不区分大小写可能没感觉一旦部署到 Linux 服务器上这个问题立刻就会暴露出来。7.3 从第一天就该养成的三个习惯第一个习惯每个练习都用独立文件夹命名用英文和数字。学了一两周之后你手里会攒出好几个小项目文件夹分开管理回看和对比都很方便。即使以后学框架一个项目一个目录的习惯也会贯穿始终。第二个习惯改一行、保存一行、在浏览器里看一行。别闷头写一大坨再一次性调试那样报错时你根本不知道是哪一行的问题。前端开发的调试成本比其他很多领域都低因为你随时能看到效果要善用这个正循环。我见过很多新人花两小时写了一整页代码打开浏览器发现什么都对不上最后只能删掉重写就是因为没有小步迭代。第三个习惯遇到报错先读浏览器 Console 里的英文信息再复制关键词去搜索。很多人一出问题就截图问人但大部分常见错误只要把报错原文粘到搜索引擎里就能找到答案。学着和英文报错共处是程序员的基本功不要指望每个问题都有人替你盯着看。最后再说一点我的实际感受。VSCode 你现在花两小时配置好以后写 Python、写后端、写各种配置文件都能继续用属于一次投入长期受益。而 HTML 是你写的第一个能通过浏览器立即看到结果的东西它给你的反馈是即时、可见的。只要把这两件事跑通后面哪怕前端的内容再难你都已经有“我能自己找到答案”的底气了。
VSCode配置与HTML基础入门：零基础前端开发第一步
带过不少零基础转行前端的人我观察到一个特别普遍的现象第一周劝退大部分人的不是 HTML 语法有多难而是编辑器还没用顺手。有人在 Word 里写代码有人用记事本写完直接拖进浏览器等看到中文乱码、布局乱成一片已经开始怀疑自己适不适合学编程。其实前端入门没有你想象的那么玄乎起点就两步第一把 VSCode 这个编辑器装好、调好第二搞定 HTML 基础这门标记语言。VSCode 管你的写码环境HTML 管网页的骨架结构两件事一起学效率最高。这篇文章就是按这个节奏来的适合完全没有编程基础、准备从前端开发开始学起的人。1. 为什么前端入门先把 VSCode 和 HTML 绑在一起学1.1 先把工作流跑通再谈背语法很多人学前端的方式是买一本书或者跟一套视频从第一节课开始跟着敲。结果往往是视频里讲了 20 分钟标签语法自己动手时却连新建文件、在浏览器打开都不会。真正的问题不是理解力而是缺少一条完整的工作流写代码、保存、预览、看报错。VSCode 恰好能把这条工作流压缩到最小。你在左边写一行代码保存的瞬间浏览器里的页面就已经更新这种即时反馈对新手来说极其重要它让“我写的东西生效了”这件事变得特别具体。先学会用工具再学知识不是走捷径而是把学习成本降到最低。我自己带新人的时候第一节课从来不先讲标签而是让他们先跟着我把 VSCode 装好、跑通一个最简单的页面。只要这个流程跑通了后面学什么都有底气。1.2 VSCode 为什么值得花一篇文章去学写 HTML 能用的工具有很多你可能在网上看到过各种推荐。我把常见的几个都对比过身边新人实际用下来的感受差别很大记事本或系统自带的文本编辑器完全免费但没有任何语法高亮和自动补全写一个标签忘闭合得自己盯半天。如果连缩进都要手动加空格学习效率会非常低。Sublime Text、Notepad轻量、启动快但插件生态和社区活跃度目前都不如 VSCode而且新手搜问题的时候能搜到的教程大部分都默认用 VSCode 截图。工具选得跟教程不一致照着做时容易对不上。WebStorm功能确实强大重构和调试都是 IDE 级别但比较重、收费首次启动也慢给零基础的人推荐它容易打击信心。HBuilderX针对国内生态做了不少优化如果你以后完全在国内技术栈里工作也能用。但想要查英文文档、看 Stack Overflow、用通用的社区方案时VSCode 的通用性高得多。所以我的建议一直很明确新手入门前端直接用 VSCode。它是微软做的免费开源编辑器当前前端开发事实上的主流选择。它启动速度够快插件市场极其丰富而且不绑定语言。今天用它写 HTML明天写 CSS、JavaScript、Vue 甚至写 Python、写后端都不用换工具。这意味着你入门阶段投入的学习成本后面全都能复用。1.3 这篇文章适合谁学完能到什么程度如果你是没有任何编程基础、想转行前端或者是刚进入大学准备系统学开发的学生这篇内容就是为你准备的。整篇文章不涉及 CSS 美化也不碰 JavaScript 逻辑只做两件事把 VSCode 配置成一个顺手的 HTML 编辑器再把 HTML 最核心的标签和文档结构讲明白。跟着实操一遍你至少能做到独立下载、安装并配置好 VSCode用快捷键快速新建文件看得懂 HTML 文档结构里每一行代码的含义会使用最常见的标签搭出一个带标题、段落、图片、链接、列表的静态网页还能通过 Live Server 在浏览器中实时预览。这些就是你学习前端开发的第一块基石。2. VSCode 下载安装与首启设置新手最容易卡住的地方2.1 官网下载与安装选项勾选先说一个很多人踩过的坑在搜索引擎里搜“vscode 下载”结果点进了第三方下载站下载下来一个带捆绑软件、甚至改了名字的安装包。最稳妥的方式是直接访问 Visual Studio Code 官网域名是 code.visualstudio.com。打开之后首页正中就是下载按钮它会根据你的操作系统自动推荐版本Windows 用户一般会拿到一个 .exe 安装包。双击安装时有几个勾选项需要特别注意“通过 Code 打开”操作建议勾上。这样在文件夹上右键时会出现“通过 Code 打开”以后打开项目目录会很方便。“添加到 PATH”一定要选。这样可以在终端里面直接输入 code . 打开当前文件夹对后续学习和开发都很有用。“添加到资源管理器上下文菜单”和第一条配套也建议勾上。创建桌面快捷方式看个人习惯经常用就创建。安装过程中系统会问你是装“User Installer”还是“System Installer”。零基础用户我建议选 User Installer它装在当前用户目录下不需要管理员权限后续升级也更方便。Mac 版下载的是 zip 包解压后把 Visual Studio Code.app 拖进 Applications 文件夹就能用。现在很多正规教程会提供一键配置脚本或者推荐装全家桶插件但那是给有经验的人准备的。零基础阶段还是自己一步一步点安装比较好每一步都知道自己在干什么后面出了问题也更容易排查。2.2 打开后的界面布局先认得五个区域第一次打开 VSCode很多人会被界面吓到——密密麻麻的面板不知道从哪下手。其实你只需要知道五个区域活动栏最左边的一行图标用来切换资源管理器、搜索、源代码管理、运行与调试、扩展。它在默认布局下常驻显示。侧边栏显示当前文件夹里的文件树对应活动栏里的“资源管理器”。没有打开文件夹时这里基本是空的。编辑器中间最大的一块区域所有代码都在这里编辑。面板编辑器下方默认可能是折叠状态终端、输出、问题列表都在这里。状态栏最底部显示当前文件的编码格式、行列号、Git 分支等信息。建议你写代码之前先用“打开文件夹”的方式打开一个项目目录这样左侧资源管理器里才能看到文件树后续 Live Server 预览也依赖这个文件夹边界。直接在单个文件上右键“用 VSCode 打开”也可以用但这种方式没有项目目录的概念跑 Live Server 时会遇到问题。2.3 中文界面设置VSCode 默认是英文界面。对初学者来说把菜单翻译成中文能省不少事。操作路径是按 CtrlShiftP 打开命令面板输入 Configure Display Language选择 Install additional languages在左侧搜索框里输入 Chinese找到“中文(简体)”语言包并点击 Install。安装完成后右下角会弹出提示点击“Change Language and Restart”重启就生效了。有个细节经常有人忽略只安装语言包不代表切换成功一定要执行切换动作。如果你安装完重启后还是英文重新打开命令面板输入 Configure Display Language在列表里选中“zh-cn”再重启一次就行。这里多说一句界面中文和写代码用不用英文没关系。HTML 标签、属性本来就是英文单词界面翻译不影响学习。反而早期就把英文界面看习惯了后面查英文资料会更轻松。不过我尊重习惯第一步用中文界面完全没问题。3. 写 HTML 前把 VSCode 调顺手5个设置6个插件10个快捷键3.1 四个基础设置先改再写新装的 VSCode 建议先改四个设置这样写起来才顺手。按 Ctrl, 打开设置界面在搜索框里输入关键词就能定位Auto Save搜 files.autoSave建议改成 afterDelay。这样你写完代码停顿几秒文件会自动保存配合 Live Server 刷新时不会因为忘了保存而一直看旧页面。Word Wrap搜 editor.wordWrap改成 on。否则一行很长的代码会在水平方向滚动新手容易看晕也容易在看结构时迷失位置。Font Size搜 editor.fontSize按屏幕和视力调整为 16 到 18。默认 14 在部分高分屏上偏小长时间盯代码容易累。Tab Size搜 editor.tabSize前端社区普遍用 2 个空格作为缩进也可以统一为 4。关键是整个项目保持一致不要混用空格和 Tab否则格式化时会很痛苦。另外记一个快捷操作Ctrl加号 和 Ctrl减号 可以快速缩放编辑器字号。给别人演示代码或者投屏时这个操作非常实用不用每次都进设置改。3.2 插件清单按需装别贪多VSCode 的扩展市场是它最强大的地方但新手插件装多了并没有好处。界面会变得杂乱启动会变慢插件之间还有可能互相冲突。这里我只推荐写 HTML 阶段真正用得上的几个插件名作用建议Live Server本地启动一个开发服务器保存文件后自动刷新浏览器必装开发阶段离不开Auto Rename Tag修改开标签时自动同步修改闭标签必装省大量重复操作HTML CSS Support写 class 属性时自动提示可用的 CSS 类名必装学到 CSS 后会更强Prettier - Code formatter一键格式化代码统一缩进、引号、换行风格建议在设置里打开 Format On Savevscode-icons给不同类型的文件显示不同图标可选能让文件树更好认Chinese (Simplified) Language Pack中文界面语言包前面已经用到了安装方式很简单点击活动栏第五个图标进入扩展商店搜索插件名点 Install。这里提醒一句安装时留意一下发布者名称比如 Live Server 的发布者是 Ritwick DeyPrettier 的发布者是 Prettier。看到完成安装之后VSCode 通常不需要手动重启但个别插件例外如果发现没生效重启一下编辑器再试。3.3 快捷键只记这 10 个快捷键不需要死记硬背用一个月自然就记住了。但下面这 10 个使用频率极高建议你刻意练一练因为它们直接关系到写代码的流畅度。快捷键作用CtrlN新建文件CtrlS保存CtrlShiftP打开命令面板几乎所有功能都能在这里搜到Ctrl/注释或取消注释当前行在 HTML 里会生成Alt↑ / Alt↓当前行整体上移或下移不用再复制粘贴CtrlD选中下一个相同的单词连续按时可以实现多光标批量修改CtrlShiftK删除当前整行CtrlB显示或隐藏侧边栏CtrlK CtrlO打开文件夹CtrlShiftI在浏览器里打开开发者工具还有一个操作不算快捷键但写 HTML 时非常关键在空文件里输入英文感叹号 !然后按 TabVSCode 会自动生成完整的 HTML 骨架。这个操作能帮你省去手敲骨架的时间后面的实战部分我会再演示一次。4. HTML 骨架拆解一段标准文档到底在说什么4.1 HTML 不是编程语言它是网页的骨架很多人听到“编程语言”四个字就被吓住了后来一查才发现HTML 的英文全称是 HyperText Markup Language超文本标记语言。它没有 if/else没有循环也不做计算。它的工作只有一件事用标签把内容“框”起来告诉浏览器这部分是标题、那部分是段落、哪里是链接、哪里是图片。我常用一个类比来解释网页像一个人HTML 是骨骼决定了身体有哪些部位以及它们的位置CSS 是皮肤、衣服和妆容决定好不好看JavaScript 是肌肉和神经决定能不能动、能不能交互。入门篇只学 HTML但你心里要清楚后面还有两层在等着你。你可以先只搭骨架这已经是半个网页了。4.2 标准文档结构逐行解释在 VSCode 里新建一个 index.html输入 ! 后按 Tab生成的代码是这样的!DOCTYPE html html langzh-cn head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title我的第一个网页/title /head body /body /html逐行拆开看!DOCTYPE html告诉浏览器当前文档用的是 HTML5 标准。它不是标签而是一份声明。html langzh-cn根标签包裹整个文档。langzh-cn 表示页面主要语言是简体中文对搜索引擎和屏幕阅读器友好。head头部区域存放浏览器和搜索引擎需要的信息这些信息不会显示在页面主体里。meta charsetUTF-8指定文档的字符编码为 UTF-8。缺了它浏览器可能会用系统本地编码去解析中文几乎一定会乱码。meta nameviewport ...设置手机浏览器里的视口宽度让页面适应移动设备。删掉它手机打开网页时会像缩小的电脑版一样。title我的第一个网页/title显示在浏览器标签页上的文字。body用户能看到的全部内容都写在这里。有一个新手常有的误解head里写的所有东西都不会出现在网页正文里。你在页面上看到的文字、图片、按钮全部都要放在body内。4.3 标签的语法共性成对出现与属性绝大多数 HTML 标签是成对出现的比如title.../title由开标签、内容、闭标签三部分组成这种结构叫作“元素”。有一些标签是自闭合的比如meta、img、br它们没有内容不需要闭标签。标签上可以写属性用来补充信息。例如html langzh-cnlang 是属性名zh-cn 是属性值a hrefhttps://example.comhref 表示链接目标。属性写在开标签里面多个属性之间用空格隔开。新手最容易犯的错是漏掉右引号或者把属性写进闭标签里。这两类错误浏览器通常都不会报错但结果就是不生效查起来只能靠肉眼。5. 高频标签逐个拆文本、链接、图片、列表、表单5.1 标题和段落不要只看字号标题标签是 h1 到 h6从大到小。但选 h2 不是因为字号合适而是因为语义层级上它属于 h1 下面的子标题。搜索引擎和屏幕阅读器会把 h1 理解为页面的主标题所以一页最好只有一个 h1下面用 h2 分区块更小的细节用 h3。如果你只是想让字变大正确做法是后面用 CSS 控制而不是写一堆标签去硬撑字号。段落用p包裹浏览器会自动在段落前后加间距。还有两个高频文本标签strong表示重要内容默认加粗em表示强调默认斜体。另外是span它是一个行内的“无含义容器”不写样式时看不出任何变化但它常被用来给一句话中的某个词做标记方便后续用 CSS 单独调整。5.2 超链接和图片网页最重要的两个标签超链接是a基本写法是a hrefhttps://example.com target_blank访问示例网站/a。href 是链接地址target_blank表示在新标签页打开。用的时候不要省略 href否则 a 标签就跟普通文本一样点不动。图片标签是自闭合的img srcphoto.jpg alt一张风景照片 width300。src 是图片地址alt 是图片无法加载时显示的替代文本也是屏幕阅读器会朗读的内容。写 alt 不要偷懒再简单也建议写一句描述这是网页可达性的一部分。width 可以直接写在标签里但更推荐以后用 CSS 控制尺寸这里先知道有这个属性就行。说到图片路径你会看到两种常见写法绝对路径和相对路径。绝对路径就是完整的网址比如https://a.com/pic.jpg相对路径是相对于当前文件的路径比如images/1.jpg。初学者先用相对路径等学完项目部署后对绝对路径的体会会更深。别小看这种基础页面很多系统里的邮件模板、活动落地页本质上也是一份独立的 HTML 文档。5.3 列表和容器列表分两种无序列表ul前面是圆点有序列表ol前面是 1、2、3 编号。列表项都用li并且li应该直接放在ul或ol里面不要在中间塞div之类的其它标签。结构写错了浏览器虽然不会报错但后面的 CSS 样式很容易出问题。容器标签要先认识div和span。div是块级盒子的万金油用来把一组相关元素包起来形成布局上的区块span是行内容器。这里还牵出一个非常重要的概念块级元素和行内元素。h1、p、div这类块级元素默认占满整行宽度各自独占一行而span、a、img属于行内元素会连着排在同一个水平线上。这个 block 和 inline 的区别后面学 CSS 布局时几乎天天都要用到现在先有一个印象。5.4 表单基本套路表单是网站收集用户输入的入口。一个最基础的表单长这样form action/submit methodpost div label foremail邮箱/label input typeemail idemail nameemail placeholder请输入邮箱 /div div label forpassword密码/label input typepassword idpassword namepassword /div button typesubmit登录/button /form这里几个点需要理解。label的 for 属性和input的 id 关联作用是点击“邮箱”这个文字时也能聚焦到输入框既提升体验对屏幕阅读器也友好。type 决定输入框的类型email 会触发浏览器的邮箱格式校验password 会把输入内容显示成圆点。placeholder 是灰色的占位提示不是真实的值。name 属性是提交到服务器时的字段名以后学 JavaScript 和后端时会真正用到它。6. 实战用 VSCode 写一个能实时预览的个人主页6.1 新建项目文件夹和 index.html现在把前面讲的东西串起来做一个完整的个人主页。打开 VSCode先创建一个项目文件夹。建议单独建一个 frontend 目录里面每个小项目一个子文件夹比如 01-first-page。文件路径和文件名尽量只用英文、数字和横杠不要用中文和空格。这一点现在可能体会不到等后面用到命令行工具或者把项目部署到服务器上你会发现纯英文路径能避免很多不必要的坑。在 VSCode 里按 CtrlK 再按 CtrlO 选择这个文件夹可以看到左侧资源管理器中出现了一个空的文件夹。点击资源管理器顶部的“新建文件”按钮输入 index.html。注意index.html 是网站默认首页的约定文件名需要放在项目根目录以后学 Vue、React 这些框架时也仍然延续这个规则。在 index.html 里输入英文感叹号 !再按 Tab骨架就会自动生成。写到这里你应该已经发现前面的快捷键和插件铺垫全都在为这一步服务。工具用熟了动手写页面只是时间问题。6.2 完整小页面带标题、简介、图片、列表和链接我们把 body 里面的内容替换成下面这样。这里先不加任何 CSS纯粹验证 HTML 结构对不对h1你好我是小周/h1 p一个正在学习前端开发的新人目标是能独立做出好用的网页。/p h2关于我/h2 p我目前在自学前端先从 HTML 和 CSS 开始之后会学习 JavaScript。/p img srchttps://picsum.photos/200/200 alt随机占位图片 h2我常用的工具/h2 ul liVSCode 编辑器/li liChrome 浏览器/li liGit 版本管理后面会学/li /ul h2我的练习作品/h2 p还没有作品先放一个学习进度记录/p ol li完成 VSCode 安装和配置/li li学会 HTML 基础标签/li li做第一个个人主页/li /ol h2联系方式/h2 p欢迎通过 a hrefhttps://github.com target_blank我的 GitHub/a 找到我。/p这里用到的标签前面都讲过可以对照着理解。图片地址我随手用了 picsum.photos 提供的随机占位图如果你的网络访问不到它就换成本地图片在项目文件夹里建一个 images 目录把图片放进去src 写成images/你的图片文件名.jpg这就是相对路径。6.3 用 Live Server 和开发者工具验证效果页面写完后在编辑器空白处右键选择 Open with Live Server。浏览器会自动打开一个类似http://127.0.0.1:5500/index.html的地址页面上就是你刚写的内容。现在回到 VSCode 把 h1 里的文字改一下按 CtrlS 保存浏览器里的页面会自动刷新。这个“保存即刷新”的体验就是 Live Server 提供的也是前端开发中最高频的操作。你还可以在浏览器里按 F12 或 CtrlShiftI 打开开发者工具切到 Elements 面板这里能看到浏览器把 HTML 解析后的完整 DOM 结构。在 Elements 面板里可以临时修改文字、删除元素来看效果也可以检查一个标签的父级和子级关系。排查“为什么这个内容没有出现在我想让它出现的位置”时这个面板是最直接的答案来源。7. 入门期踩过的坑和反复使用的经验7.1 标签不闭合引发的连锁反应新手经常写下p文字就忘了写/p然后发现整个页面的布局都乱了。关键是浏览器面对不合法 HTML 时会尽力容错它可能自动帮你补上闭标签也可能把后面的一大堆内容都当成这个 p 的内容而且全程不报任何错误。这里有一个真实场景有人写了一个p里面又套了一个h1标题。HTML 规范不允许块级元素嵌在p里面结果浏览器自动把p拆开了页面顶部莫名多出大量空白怎么看都找不到原因。遇到这种问题时打开开发者工具的 Elements 面板看一眼 DOM 树的实际嵌套结构哪一层跟你预期的不一样问题基本就在那里。很多看起来玄秘的 CSS 问题根源其实是 HTML 结构不规范所以写标签时养成随手闭合的习惯会省掉大量排查时间。我推荐的做法是先写p/p再往中间填充内容而不是先写p再写一堆内容最后补/p。7.2 中文乱码和图片不显示的排查思路中文乱码几乎都是编码问题。排查顺序是先看head里有没有meta charsetUTF-8再看 VSCode 右下角显示的文件编码是不是 UTF-8。如果文件本身被存成了 GBK即使声明了 UTF-8 也照样乱码。修复方法很简单点击右下角的编码按钮选择“通过编码重新打开”或者“保存时使用 UTF-8”即可。图片不显示最常见的是路径错误。按 F12 打开开发者工具切到 Network 面板刷新页面后看到状态码404 表示文件找不到403 通常是服务器拒绝访问如果是 200 但仍然看不到图才需要去看是不是有样式把它们隐藏了。路径排查记住一条src 是相对于当前文件的位置photos/1.jpg是当前目录下 photos 目录里的 1.jpg../1.jpg是上一级目录里的 1.jpg。文件名大小写也要严格区分。本地 Windows 文件系统不区分大小写可能没感觉一旦部署到 Linux 服务器上这个问题立刻就会暴露出来。7.3 从第一天就该养成的三个习惯第一个习惯每个练习都用独立文件夹命名用英文和数字。学了一两周之后你手里会攒出好几个小项目文件夹分开管理回看和对比都很方便。即使以后学框架一个项目一个目录的习惯也会贯穿始终。第二个习惯改一行、保存一行、在浏览器里看一行。别闷头写一大坨再一次性调试那样报错时你根本不知道是哪一行的问题。前端开发的调试成本比其他很多领域都低因为你随时能看到效果要善用这个正循环。我见过很多新人花两小时写了一整页代码打开浏览器发现什么都对不上最后只能删掉重写就是因为没有小步迭代。第三个习惯遇到报错先读浏览器 Console 里的英文信息再复制关键词去搜索。很多人一出问题就截图问人但大部分常见错误只要把报错原文粘到搜索引擎里就能找到答案。学着和英文报错共处是程序员的基本功不要指望每个问题都有人替你盯着看。最后再说一点我的实际感受。VSCode 你现在花两小时配置好以后写 Python、写后端、写各种配置文件都能继续用属于一次投入长期受益。而 HTML 是你写的第一个能通过浏览器立即看到结果的东西它给你的反馈是即时、可见的。只要把这两件事跑通后面哪怕前端的内容再难你都已经有“我能自己找到答案”的底气了。
