DCDC前馈电容选型与环路稳定性实战指南
2026/9/20 14:08:29
先问个问题：你第一次接触HTML的时候，是不是也干过这种事——打开教程，满屏都是<html>、<head>、<body>，跟着敲了半天，却卡在最后一步：这堆代码到底该怎么保存？保存完双击，浏览器要么显示一大段源码，要么直接变成了记事本文本，根本看不到网页效果。
别笑，我带过的零基础学员里，十个人有八个都在“创建HTML文件并保存”这一步翻过车。原因也很简单：很多教程默认你已经知道怎么新建文件、怎么选编码、怎么改后缀名，直接从语法讲起，恰恰把最基础也最关键的一步跳过去了。
HTML文件本质上就是一个包含特定标记的纯文本文件，任何一个能打字的软件都能创建它，任何一台电脑上的浏览器都能打开它。这篇文章我就从最底层的动作讲起：新建一个文件、写上几行HTML、用正确的姿势保存、再在浏览器里打开，让你亲眼看到自己的第一个网页跑起来。全程零基础，不需要安装复杂的开发环境，哪怕你电脑里只有系统自带的记事本，也能完整走完这一套流程。
1. 动手之前，先把HTML这回事弄清楚
1.1 HTML不是编程语言，它是网页的骨架
很多人一听到“学HTML”，下意识觉得是在学一门编程语言，心里先怵了三分。其实HTML的全称是HyperText Markup Language，翻译过来是“超文本标记语言”，重点在“标记”两个字。它没有变量、没有循环、没有判断，做的唯一一件事就是：用一对一对的标签，告诉浏览器“这段文字是标题”“那块区域是图片”“这个部分是链接”。
用一个生活里的类比：你把网页想象成一栋房子。HTML是房子的结构和毛坯墙体，决定了哪里是客厅、哪里是卧室、哪里是厨房；CSS是装修，决定墙刷什么颜色、地板铺什么材质、家具摆哪里；JavaScript则是水电和智能设备，负责让灯能亮、门铃会响、点击开关有反应。所以HTML是网页最底层的骨架，所有你看到的网页，最终都能翻译成一份HTML文档。
对零基础来说，好消息是：HTML的入门门槛极低。你不需要懂算法，不需要配环境，甚至不需要会英文——标签就那么几十个，常用的更少，多写几次自然就记住了。坏消息是：正因为基础，很多人容易轻视它，觉得“不就几个标签嘛”，结果后面布局一复杂就乱了套。我的建议是，第一次学就把每个标签的含义和结构关系搞清楚，别急着炫技。
1.2 HTML、CSS、JavaScript到底怎么分工
我刚学前端时也懵过：这三个东西混在一起，到底谁管谁？后来带项目多了，总结成一句特别直白的话：HTML管“有什么”，CSS管“长什么样”，JavaScript管“能干什么”。
举个例子，一个网页上的登录按钮：
- HTML写的部分是这样的：
<button>登录</button>，它只是告诉浏览器，这里有一个按钮，按钮上的文字是“登录”。 - CSS负责把它变得好看：红色背景、白色文字、圆角、鼠标移上去变亮。没有CSS，这个按钮就是浏览器默认的灰不溜秋的样子。
- JavaScript负责让它真正“干活”：点击之后去校验用户名密码、弹出提示、跳转页面。没有JS，按钮只是个摆设。
所以你现在学HTML，学的就是网页的内容层和结构层。等你把HTML写顺了，再去碰CSS和JS，会轻松很多。这也是为什么很多前端学习路线都把HTML放在第一站。
1.3 为什么说浏览器就是最好的“运行环境”
写C++要装编译器，写Python要装解释器，写Java要装JDK，但写HTML什么都不用装。因为每台电脑、每部手机里的浏览器，本身就内置了HTML解析引擎。你只要把一个后缀是.html的文件丢给浏览器，它就会自动把里面的标签“翻译”成你看到的页面。
这就带来两个好处：第一，零成本，你不需要为学HTML额外购买或安装任何专业软件；第二，反馈快，写完保存，刷新浏览器，立刻看到结果。这种即时反馈对新手太重要了，它能让你清楚地知道自己每一步写对了没有。我经常跟人说，HTML是学习网页开发性价比最高的一门“语言”，门槛低到几乎不存在，但它是整个前端大厦的第一块砖。
2. 准备工作：选一个顺手的编辑工具
2.1 记事本也能写，但我更推荐这几个编辑器
理论上，只要能输入文字的软件都能写HTML。系统自带的记事本完全可以完成创建和保存，我也确实见过用记事本写出整个企业官网的老前辈。但对新手来说，记事本有几个硬伤：没有代码高亮、没有自动补全、括号不匹配时很难看出来。所以我的建议是：先用记事本跑通一次全流程，感受一下原理，然后立刻换一个趁手的编辑器。
以下是几款常见的编辑器对比：
| 编辑器 | 适合人群 | 优点 | 缺点 |
|---|---|---|---|
| 系统记事本 | 只想体验一下 | 零安装、系统自带 | 无高亮、无补全、容易保存错格式 |
| Notepad++ | Windows用户 | 轻量、有高亮、打开快 | 界面较旧，插件生态一般 |
| Sublime Text | 追求轻量和速度 | 启动快、界面美观 | 长期使用需付费授权提示 |
| VS Code | 绝大多数新手和开发者 | 免费、插件丰富、功能强大 | 安装包稍大，初次启动较慢 |
我个人最推荐VS Code，原因有三个：一是免费开源，不用担心授权问题；二是内置终端，以后学Node.js、Git都用得上；三是插件市场里有大量前端辅助工具，比如自动重命名标签、实时预览等。安装流程也很简单：去官网下载对应系统的安装包，一路点“下一步”就行，不需要改任何配置。
如果你实在不想装软件，用记事本也完全可以跟上这篇文章的节奏，保存时的注意事项我会在后面的章节里专门强调。
2.2 新手最容易栽的坑：文件扩展名被隐藏了
在Windows系统里，默认设置是“隐藏已知文件类型的扩展名”。什么意思？就是你在文件夹里看到一个文件叫index.html，实际上它的完整名字可能是index.html.txt，只是系统把.txt藏起来了。这个坑特别坑新手：你在记事本里写了一堆HTML，保存的时候输入index.html，记事本默默地在后面加了个.txt，于是文件全名变成index.html.txt。你双击它，系统认为它是个文本文件，直接用记事本打开了，满屏的代码，自然看不到网页效果。
解决方法是先把扩展名显示出来。Windows 10/11操作如下：打开任意文件夹，点击顶部菜单栏的“查看”，然后勾选“文件扩展名”。Mac系统的操作是：打开“访达”，按快捷键Cmd+Shift+.（点号）就可以切换显示隐藏文件。设置好之后，你再去看文件名，是不是多了后缀？这时候手动把.txt改成.html，回车确认，文件图标就会变成浏览器默认图标。
这一步值得你花两分钟提前做好，它能避免后面90%的“保存成功但打不开”问题。
2.3 文件命名和目录：从第一个文件开始养成好习惯
建网页文件时，命名看似小事，其实很影响后期的使用。我见过有人把文件命名为我的网页!.html，结果在服务器上死活打不开，就是因为文件名里带了特殊符号。这里分享几条经验：
- 首页文件建议叫
index.html，这是全世界Web服务器默认的首页文件名，以后你上传到服务器，访问域名直接就能加载它。 - 文件名一律用英文小写字母、数字和连字符，多个单词用
-连接，比如about-me.html，不要用空格、中文和感叹号等特殊符号。 - 每个项目单独建一个文件夹，把HTML文件、CSS文件、JS文件、图片放在一起。新手先把目录结构理顺，后面学相对路径时会省很大力气。
你可以在电脑桌面上新建一个文件夹，名字叫my-web，以后所有网页练习都放里面。这样即使文件多了，也不会乱成一锅粥。
3. 一步步写出并保存你的第一个HTML文件
3.1 最小可用模板：每个标签都是干嘛的
打开你的编辑器，新建一个空白文件，先别急着写内容，把下面这个最小模板敲进去。这是目前最标准、最通用的HTML起始模板，比远古时期的写法要规范很多：
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>我的第一个网页</title> </head> <body> <h1>你好，HTML</h1> <p>这是我用HTML写出的第一句话。</p> </body> </html>逐行拆开看：
<!DOCTYPE html>：文档类型声明，告诉浏览器“请按现代标准解析这个页面”。没有它，浏览器可能会进入古老的“怪异模式”，导致样式和你预期的不一致。<html lang="zh-cn">：HTML文档的根标签，lang属性声明页面语言是简体中文，方便浏览器和搜索引擎识别。<head>：头部区域，这里的内容不会直接显示在网页上，主要放页面的元信息、标题、引用的CSS和JS文件。<meta charset="UTF-8">：字符编码声明，这句话对中文网页极其重要，少了它，浏览器可能把UTF-8编码的中文解码成乱码。<meta name="viewport" ...>：视口设置，让页面在手机和平板上能自适应宽度，做响应式页面必备。<title>：浏览器标签页上显示的标题。<body>：主体区域，用户能在页面上看到的所有内容都写在这里。<h1>：一级标题，通常一个页面只用一个，既方便用户阅读，也利于SEO。<p>：段落标签，包裹一段普通文字。
这套结构就是HTML的“标准骨架”：外层是<html>，里面分<head>和<body>两个区域，一个管“配置”，一个管“内容”。以后你写的所有网页，基本都是在这个骨架上添砖加瓦。
3.2 加点真东西：标题、段落、图片和超链接
光是“你好，HTML”太单薄了，咱们往里面加点常用的标签，让页面丰满起来。下面这个示例，我加入了链接、图片，以及一个有序列表：
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>我的第一个网页</title> </head> <body> <h1>欢迎来到我的主页</h1> <p>我是一个正在学习HTML的新手。</p> <h2>我最近在学什么</h2> <ul> <li>HTML骨架标签</li> <li>CSS美化样式</li> <li>JavaScript交互</li> </ul> <h2>推荐一个学习网站</h2> <p>你可以去 <a href="https://developer.mozilla.org/zh-CN/" target="_blank">MDN Web Docs</a> 查标签的详细用法。</p> <h2>这是我的头像占位图</h2> <img src="https://picsum.photos/200/200" alt="随机图片"> </body> </html>这里面新出现的标签你也要熟悉：
<h2>：二级标题，h1到h6一共六级，数字越小权重越高。<ul>和<li>：无序列表，ol和li则是有序列表。导航菜单、功能列表通常都用它们。<a href="..." target="_blank">：超链接，href写目标地址，target="_blank"表示在新标签页打开。<img src="..." alt="...">：图片标签，src写图片地址，alt是图片加载失败时显示的替代文字，网页可访问性必备。
写代码的时候注意标签的嵌套关系：先开标签后关标签，比如<p>文字</p>，不允许交叉嵌套。你可以把标签想象成盒子，大盒子套中盒子，中盒子套小盒子，顺序不能乱。写完之后，就进入最关键的保存环节了。
3.3 保存的标准姿势：后缀、编码、文件类型一个都不能少
保存HTML文件，看起来简单，实则坑最多。我在线下教学时，几乎每期都会遇到“保存完打不开”的学员。下面你直接照做：
现在编辑器里按Ctrl+S（Mac按Cmd+S）。如果是第一次保存，会弹出“另存为”窗口。这时候注意三点：
第一，文件名输入index.html，注意后缀一定要手动打出来。在VS Code里，如果你新建的是纯文本文件，可能会默认保存成没有后缀的文件，所以务必在文件名末尾加上.html。
第二，编码格式一定要选UTF-8。在系统记事本里，保存窗口的右下角会有一个“编码”下拉框，默认可能是“ANSI”，你把它改成“UTF-8”。这一步能避免中文乱码。在VS Code里，默认就是UTF-8，不需要额外设置。
第三，在记事本里保存时，把“保存类型”从“文本文件（*.txt）”改成“所有文件”，防止系统自动帮你加上.txt后缀。如果是VS Code，会自动识别语言类型，不需要纠结这个选项。
保存完之后，回到文件夹，确认这个文件的图标是不是变成了浏览器图标（一般是一个彩色的小圆球），名字是不是index.html。如果图标还是记事本的样子，说明后缀名不对，赶紧右键重命名，把.txt去掉或改成.html。
到这里，你已经成功创建并保存了一个HTML文件。接下来，就是见证奇迹的时刻。
4. 在浏览器里预览：看到你的第一个网页
4.1 三种打开方式，总有一种顺手
保存好的HTML文件，打开方式有几种，各有讲究：
- 直接双击：最推荐新手使用。如果文件后缀正确，双击后会自动用系统默认浏览器打开。如果双击出来的是记事本，见第5章的问题排查。
- 拖拽到浏览器：打开任意浏览器，把桌面的
index.html文件直接拖进浏览器窗口，松开鼠标就能看到页面。 - 右键打开方式：右键文件，选择“打开方式”，再选择Chrome、Edge或Firefox。
打开之后，你会看到页面上显示出“欢迎来到我的主页”标题，下面还有列表、链接和一张随机图片。虽然朴素，但这是你亲手写出来的网页，意义完全不一样。
4.2 修改代码后，为什么浏览器里没变化
第一次修改网页内容时，新手常遇到一个困惑：我在编辑器里把文字改成“我更正了一下”，保存之后，切回浏览器刷新，怎么还是老内容？
原因多半是浏览器缓存。浏览器为了保证加载速度，会缓存本地的HTML、CSS、JS文件。当你重新打开文件时，它可能直接用了缓存。解决办法很简单：
- Windows/Linux下按
Ctrl+F5强制刷新。 - Mac下按
Cmd+Shift+R强制刷新。 - 或者直接把浏览器标签页关掉，重新双击打开文件。
还有一种情况：你改了文件，但保存到了桌面上的另一个文件里，而不是浏览器打开的那个。所以修改前，先确认编辑器打开的文件路径和浏览器打开的文件路径是同一个，尤其是桌面文件多了之后特别容易搞混。
4.3 用开发者工具“偷看”网页的真实结构
第一次看到自己写的网页渲染出来之后，请一定要打开浏览器开发者工具看一眼。按F12，或者右键页面选择“检查”，会弹出开发者面板。
重点看两个东西：
- Elements（元素）面板：左边显示的就是浏览器解析后的HTML结构。你会发现它和你写的源码很相似，但可能多了一些浏览器自动补充的东西，比如
<tbody>标签。这是浏览器“好心”修正的结果。 - Console（控制台）面板：这里显示页面运行时的错误信息。以后写JavaScript时，你最需要的就是它。
还有一个功能是“查看网页源代码”：在页面空白处右键，选择“查看页面源代码”，浏览器会新开一个标签页，展示这个页面最原始的HTML代码。如果是别人的网站，你也可以这样“偷师”，看看人家的页面结构是怎么写的。这个方法我强烈推荐新手多试，看不懂没关系，看多了就有感觉了。
5. 常见问题与排查技巧实录
5.1 文件图标是白纸，双击打开变成记事本
这是最典型的新手问题，原因只有一个：文件扩展名不对。系统认为它是一个文本文件，而不是HTML文件。解决流程：
先确认扩展名是否显示。打开任意文件夹，点击“查看”，勾选“文件扩展名”。然后把文件名从index.html.txt改成index.html。如果文件名没有txt后缀但图标还是白纸，再检查是不是文件名本身就少了.html。改完后，图标通常立刻变成浏览器图标。
5.2 页面上中文全是乱码，英文正常
几乎都是编码问题。HTML文件本身是UTF-8编码，但浏览器解码时用了其他方式，或者保存时编码选错了。解决分两步：
第一步，确认文件头部有<meta charset="UTF-8">，这行代码相当于告诉浏览器“用UTF-8解码我”。第二步，在记事本里重新打开这个文件，按Ctrl+S另存为，右下角编码选择“UTF-8”，覆盖保存原文件。在VS Code里，右下角状态栏会显示当前文件编码，点它也可以手动切换。
5.3 标签写错了，浏览器却照样显示内容
HTML的容错机制非常强，即使你漏写了闭合标签，浏览器也会自动帮你补全，页面通常还能正常渲染。这既是好事也是坏事：好处是新手不会因为一个标签写错就白屏，坏处是你可能一直没发现自己写错了，等后面学CSS时，样式对不上，怎么排查都找不到原因。
我见过一个学员把<p>标签写成了<div>，页面看起来没任何区别，但他用CSS设置段落间距时，效果全部失效。所以我的建议是：刚开始写代码时严格要求自己，每个标签都成对出现，写完一段就检查一遍。不要依赖浏览器的“包容”。
5.4 代码明明没错，图片就是不显示
图片不显示，先看src属性里的路径对不对。如果你用的是网络图片地址，检查网络是否正常；如果你用的是本地图片，就要理解相对路径和绝对路径的区别。简单说：src="images/pic.jpg"表示相对于当前HTML文件所在的目录，去找images文件夹下的pic.jpg。新手最常犯的错误是图片路径写错，比如把图片放在了桌面，却写成了images/pic.jpg，肯定找不到。这时候右键点击那个破图图标，选择“在新标签页中打开图片地址”，看浏览器提示的错误，能快速定位问题。
5.5 我想继续学CSS和JS，什么时候开始合适
这个问题几乎每个学员都会问。我的回答是：等你把HTML常用标签用熟了，就可以开始CSS，马上就能感受到“装修”的乐趣。但建议CSS和JS不要一起学，先把HTML和CSS跑通，再碰JavaScript。
其实你不用专门去找“下一门课”，直接在HTML文件里加一点CSS和JS就能体验。把文件改成这样：
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <title>体验CSS和JS</title> <style> button { background-color: #42b983; color: #fff; border: none; padding: 10px 20px; border-radius: 8px; cursor: pointer; } </style> </head> <body> <button id="btn">点我</button> <script> document.getElementById('btn').onclick = function () { alert('你点了我一下'); }; </script> </body> </html>看到没，<style>标签里是CSS，<script>标签里是JavaScript，他们都嵌在同一个HTML文件里。保存刷新，你会得到一个绿色圆角按钮，点一下会弹出提示框。这个小小的正反馈，会给你带来巨大的学习动力。
如果你对某些方向特别感兴趣，比如做表格、玩盒子布局、写爱心代码、搞一个一键返回顶部的小功能，这些其实都是HTML+CSS+JS的经典练习，等你入门后完全可以一个个复现出来。搜索引擎里那些热门的HTML代码片段，也基本都是在这个基础骨架上玩花样。
6. 给零基础新手的几条避坑建议
6.1 每天写一个十行小页面，比看十篇教程都管用
编程这东西，眼睛会了不代表手会了。我当初学HTML时，每天强迫自己写一个十行以上的小页面，内容随便，比如“我的书单”“今天吃什么”“喜欢的电影”，目的就是把手里的标签用熟。你写第一遍可能还要查标签，写到第十遍，很多标签就是肌肉记忆了。零基础阶段，速度不重要，重复很重要。
6.2 遇到不懂的标签，先看MDN再问搜索引擎
浏览器地址栏输入developer.mozilla.org，这是前端领域最权威的文档之一，每个标签的用法、属性、兼容性都写得很清楚。刚学的时候，我不建议你直接搜“xx标签怎么用”，很容易搜到过时信息。MDN的示例非常规范，照着抄一遍，比自己瞎改强得多。
6.3 所有网页练习，统一用UTF-8和标准缩进
中文网页最怕乱码，而UTF-8就是目前最通用的解决办法。还有个细节是缩进：<html>里的子标签统一缩进两个空格或一个Tab，代码的可读性会大幅提升。以后你和别人合作，或者自己回来改代码，看到整齐的缩进会舒服得多。
6.4 不要一上来就折腾复杂工具和框架
现在前端工具链很多，什么Vue、React、Webpack，名字听起来很酷，但零基础阶段碰它们就是给自己挖坑。先把HTML、CSS、JS这三样基本功练扎实，再学框架会轻松很多。工具只是辅助，底层逻辑才是核心。如果你想体验Webpack之类的，至少要有一定的JavaScript基础再说。
6.5 用“分屏工作流”提升学习效率
最后分享一个我至今仍在用的工作习惯：把编辑器窗口放在左边，浏览器窗口放在右边，两个窗口并排显示。写完代码，Ctrl+S保存，切到浏览器按F5刷新，立刻看到效果。整个过程不到两秒，反馈越快，学习越有劲。很多新手把这一幕叫做“快乐循环”，我就是靠着这个循环，在刚入行的几个月里，每天晚上都能写出一个小页面，从丑到好看，从静态到动态，进步肉眼可见。
我在实际教学中还发现，很多学员卡住的不是因为某个标签太难，而是因为最基础的“保存文件”这个动作出了问题。所以写这篇文章时，我把所有能预判到的新手坑都列了出来。你如果按照上面的步骤走一遍，大概率不会遇到什么大的阻碍。万一真的翻车了，对着第5章的排查表逐一检查，基本都能解决。HTML的学习就是这样：先会跑通流程，再不断扩展细节，最后形成自己的知识体系。你现在已经迈出了最扎实的第一步，剩下的，就是多写、多试、多折腾。