南希说我是Nancy, 专业跨境电商，最近开始0基础自学前端，接下来我会把学习的笔记按照系列呈现在这里，一是自我回顾与复盘，二是万一有帮助到也想学习的小伙伴更好。
这篇文章整理于我在学习 尚硅谷WEB前端零基础课程（B站有原版视频可以观看）时的笔记，适合完全零基础的同学。
如果你从来没接触过编程，也不用担心，前端开发并没有想象中那么可怕，它其实就像拼积木，只要掌握规则，就能搭建出漂亮的网页，尤其是后期结合Ai来创建网页，非常便捷。
一、网页是怎么来的？
还记得小时候你第一次在浏览器上打开网页的感觉吗？其实网页的历史并不久远。
- 1991年8月6日
英国科学家 蒂姆·伯纳斯·李爵士（Tim Berners-Lee） 在欧洲核子研究中心上线了全球第一个网站。那时候的网页非常简单，基本就是黑底白字。 - 1994年
W3C（万维网联盟） 成立，专门制定网页开发标准。
有了标准，开发者写的网页就能在不同浏览器里显示得差不多，不再“千人千面”。
👉 所以你可以把 W3C 想象成“交通规则制定者”，而浏览器就是“司机”，开发者则是“修路工人”。
二、浏览器到底干了什么？
当你在 Chrome 或 Edge 里打开一个网址时，浏览器其实做了两件事：
- 拿到代码：网页本质上就是一堆代码文件（HTML、CSS、JS）。
- 渲染页面：浏览器把这些代码“翻译”成文字、图片、按钮……最终呈现给你。
💡 类比：
- 前端工程师 → 写食谱的人（写好怎么做菜的步骤）
- 浏览器 → 厨师（照着食谱把菜端上桌）
- 用户 → 食客（我们只管吃😋）
三、网页的“三大支柱”：结构、表现、行为
你可以把网页想象成人：
- 结构（HTML）
- 就像人的“骨骼”，支撑身体的基本框架。
- 难度：⭐（入门最友好）
- 表现（CSS）
- 就像“衣服和外貌”，决定你看到的颜色、字体、布局是否好看。
- 难度：⭐⭐
- 行为（JavaScript）
- 就像人的“动作”，可以动、可以和你互动。
- 难度：⭐⭐⭐
📌 结论：HTML+CSS+JS 缺一不可，三者配合才能构成完整的网页。
四、HTML：网页的骨架
HTML，全称 超文本标记语言（Hyper Text Markup Language）。
- “超文本”：指的是超链接功能，你点一个文字或图片，就能跳转到另一个页面。
- “标记语言”：指用 标签 来标识网页元素。
1. HTML 的基本骨架
一个网页有且仅有一个跟标签<html></html>
<html>
<head>
<title>网页的标题</title>
</head>
<body>
<h1>回乡偶书</h1>
<h2>其一</h2>
<h3>贺知章</h3>
<p>少小离家老大回</p>
<p>乡音未改鬓毛衰</p>
</body>
</html>
解释一下：
<head>：提供“幕后信息”，比如标题、编码，用户看不到。<body>：真正的主体内容，比如文字、图片、表格。<h1> ~ <h6>：标题标签，数字越小级别越高。<p>：段落。
💡 生活类比：<head> 就像电影片头字幕，观众一般不会看，但很重要。<body> 就像电影正片，大家都在盯着它。
2. 自闭合标签
有些标签天生不需要“结束符”，比如：
<img src="photo.jpg" alt="一张图片" />
<input type="text" placeholder="请输入内容" />
这些标签就像“独立的单身狗”，自己就能完成任务。3. 注释
<!-- 这是注释，不会显示在网页中 -->
注释就像写在书本边上的小笔记，只是给自己看，浏览器会忽略。五、写代码需要的工具
1. 记事本 vs Notepad++
最简单的方式是用记事本保存成 .html 文件，再双击打开浏览器查看效果。
但更推荐 Notepad++、VS Code 这类编辑器：
- 支持语法高亮（代码会自动变色）
- 自动缩进，结构更清晰
- 有插件可以提示代码，避免拼写错误
2. 文件管理
习惯养成很重要。建议：
- 新建一个
Source文件夹 - 把所有 HTML、CSS、JS 文件都放进去
- 以后找起来更轻松
六、小练习：写一个属于你的网页
你可以照着下面的代码写一个 index.html 文件：
<html>
<head>
<title>我的第一个网页</title>
</head>
<body>
<h1>欢迎来到南希说</h1>
<p>这是我用HTML写的第一个页面。</p>
<img src="https://picsum.photos/200" alt="随机图片" />
</body>
</html>保存后双击打开，你会惊喜地发现——原来自己也能做网页！✨七、总结
今天我们了解了：
- 网页的历史和 W3C 的作用
- 浏览器的本质任务
- 网页三要素：结构（HTML）、表现（CSS）、行为（JS）
- HTML 的基本语法与小练习
前端学习的关键就是多动手。看一百遍不如写一遍。
下一步，我们将进入 CSS 的世界，给网页穿上“漂亮的衣服”。
👉 如果你也是前端零基础学习者，欢迎关注「南希说」，我会继续更新更多课程笔记和学习心得。
