一、先搞懂：三个核心技术到底是什么？
你可以把网页想象成「一家线下小店」，三个技术各司其职，缺一不可：
| 技术 | 比喻角色 | 核心作用 | 日常对照 |
|---|---|---|---|
| HTML5 | 房子的「钢筋骨架」 | 搭建网页的所有模块（导航栏、图片区、文字区） | 店铺的墙体、门窗、货架框架 |
| 原生 CSS | 房子的「装修风格」 | 给骨架穿衣服（颜色、字体、间距、布局） | 刷墙、铺地板、摆货架样式 |
| 原生 JavaScript | 房子的「电器 + 互动装置」 | 让网页「动起来」（导航折叠、滚动动画、按钮反馈） | 自动门、感应灯、收银机功能 |
核心逻辑：先搭骨架（HTML），再做装修（CSS），最后装互动装置（JS），三者配合就是完整网页！
二、操作攻略（5 步搞定，全程复制粘贴 + 简单替换）
准备工具：只需要 1 个「免费编辑器」
就像写作文需要笔记本，开发网页需要「代码编辑器」，推荐小白用：
- 工具名称：VS Code（免费、简单、支持中文）
- 下载地址：https://code.visualstudio.com/（打开直接点「Download」，默认安装就行）
- 简单设置：安装后打开，点击左侧「扩展」，搜索「Chinese」安装中文插件，重启就是中文界面啦～
步骤 1：搭建「文件文件夹」（给房子准备好施工场地）
就像盖房子要先圈地、分区域，我们先建一个「统一文件夹」，避免文件混乱（必须按这个结构建，不然网页会 "找不到东西"）：
- 在电脑桌面（或任意地方）新建一个文件夹，命名为「feature-tec-about」（随便改也行，但最好和代码对应）
- 打开这个文件夹，新建 3 个子文件夹 + 1 个主文件：
- 子文件夹 1：命名为「css」（放装修样式文件）
- 子文件夹 2：命名为「js」（放互动功能文件）
- 子文件夹 3：命名为「resources」（放图片资源）
- 主文件：右键「新建文本文档」，重命名为「index.html」（注意：把「.txt」改成「.html」，这是网页的核心文件）
最终文件夹结构（对照检查）：
plaintext
feature-tec-about/
├─ index.html （核心骨架文件）
├─ css/ （装修文件夹）
│ └─ style.css （后续新建）
├─ js/ （互动文件夹）
│ └─ script.js （后续新建）
└─ resources/ （图片文件夹）
├─ logo.png （后续放LOGO图）
├─ banner.jpg （后续放Banner图）
└─ 其他图片...步骤 2：写「骨架」（HTML 文件）------ 复制粘贴就行！
HTML 是网页的 "承重墙 + 货架"，我们直接用现成的代码，不用自己写：
- 打开 VS Code，点击「文件」→「打开文件夹」，选择刚才建的「feature-tec-about」文件夹
- 在左侧文件列表里，双击「index.html」打开（默认是空白的）
- 把之前给的「index.html 完整代码」全选复制，粘贴到这个空白文件里
- 点击 VS Code 顶部「文件」→「保存」（或按 Ctrl+S）
小白注意：粘贴后不用改任何内容！如果看到代码里有红色波浪线，不用慌，是编辑器暂时没识别，后续打开网页会正常显示～
步骤 3：做「装修」（CSS 文件）------ 给骨架穿衣服
CSS 负责网页的 "颜值"，比如颜色、字体大小，操作和 HTML 一样简单：
- 在左侧「css」文件夹上右键→「新建文件」，命名为「style.css」（后缀必须是.css，不能错）
- 双击打开「style.css」，把之前给的「css/style.css 完整代码」全选复制粘贴进去
- 按 Ctrl+S 保存
比喻理解：这一步就像给房子刷墙、定家具位置，代码里已经写好了 "墙要刷白色、标题要加粗、按钮要蓝色"，我们直接用现成的 "装修方案"～
步骤 4：装「互动装置」（JS 文件）------ 让网页动起来
JS 是网页的 "感应门 + 自动灯"，操作同上：
- 在左侧「js」文件夹上右键→「新建文件」，命名为「script.js」（后缀必须是.js）
- 双击打开「script.js」，把之前给的「js/script.js 完整代码」全选复制粘贴进去
- 按 Ctrl+S 保存
小白注意：JS 代码里有很多 "功能开关"（比如滚动时导航栏变色、点击按钮回到顶部），我们不用懂原理，粘贴后自动生效～
步骤 5：替换「图片资源」------ 给房子换 "专属家具"
之前的代码用的是 "占位图"（别人的图片），我们要换成自己的图片（或原网站图片），这是唯一需要手动替换的步骤：
- 打开原网站「https://www.feature-tec.cn/about.html」，右键点击需要的图片（LOGO、Banner 图、公司简介图等），选择「图片另存为」，保存到电脑上的「resources」文件夹里
- 按之前的「资源替换指南」，修改「index.html」里的图片地址：
- 比如 LOGO 图：找到代码里
<img src="https://picsum.photos/id/237/180/60" alt="Feature-Tec 菲尼特克" class="header__logo-img"> - 把
https://picsum.photos/id/237/180/60改成resources/logo.png（前提是你保存的 LOGO 图命名为 logo.png）
- 比如 LOGO 图：找到代码里
- 所有图片替换完后，按 Ctrl+S 保存「index.html」
小白技巧：图片命名要和代码里的一致（比如 banner.jpg、team-1.jpg），如果图片尺寸不一样，网页会自动适配，不用手动调整大小～
最终步骤：预览网页 ------ 看看你的「线上小店」成了！
- 在 VS Code 左侧，右键点击「index.html」→「复制路径」
- 打开浏览器（Chrome、Edge、360 都行），把复制的路径粘贴到地址栏，按回车
- 恭喜！你已经成功用 HTML5+CSS+JS 做出了和原网站一样的网页～
三、常见问题排查（小白避坑指南）
- 网页显示空白？
- 检查文件结构：必须是「index.html」在根文件夹，css 和 js 文件夹和它同级
- 检查代码粘贴：有没有漏粘贴部分代码？重新复制粘贴一次试试
- 图片不显示？
- 图片路径错了：比如图片放在 resources 文件夹，代码里要写「resources / 图片名.jpg」，不能直接写「图片名.jpg」
- 图片格式错了：确保图片是.jpg、.png 格式，不要是.webp 等特殊格式
- 网页样式错乱？
- 检查「style.css」是否完整粘贴：有没有漏复制末尾的代码？
- 浏览器缓存：按 Ctrl+F5 刷新网页，清除缓存
四、核心逻辑
- HTML5：告诉浏览器 "这里有导航栏、那里有文字区"，是「结构基础」
- CSS：告诉浏览器 "导航栏要黑色、文字要 16 号大小"，是「样式美化」
- JavaScript：告诉浏览器 "点击汉堡菜单要展开、滚动时导航栏要变色"，是「交互功能」
整个过程就像「搭积木 + 装修 + 装玩具」，我们不用自己设计积木形状（HTML 代码现成），不用自己想装修风格（CSS 代码现成），不用自己做玩具（JS 代码现成），只需要按步骤 "拼起来、换自己的图案"，就能完成一个专业网页！