Web学习 Day 1：从零开始的Hello World之旅

  

今日学习目标

作为一个纯小白，今天的目标很简单：

1. 搞懂Web开发是什么：听说它能做网站，但具体怎么“变”出网页的？

2. 写出第一个HTML页面：让浏览器显示一句“Hello World!”（程序员の仪式感！）。

3. 摸清基本工具：代码编辑器、浏览器开发者工具怎么用？

---

学了什么？

1. Web开发的三剑客

原来网页是由三个“魔法语言”组成的：

• HTML：骨架。负责内容结构，比如标题、段落、按钮。

• CSS：皮肤。负责美化，颜色、布局、动画全靠它。

• JavaScript：灵魂。让网页“动起来”，比如点击按钮弹出提示。

今天先攻克HTML！

---

2. 第一个HTML页面

步骤一：安装工具

• 编辑器：选了VS Code（界面清爽，插件多！）。

• 浏览器：Chrome（开发者工具强大，调试方便）。

步骤二：动手写代码
新建一个hello.html文件，输入以下内容：

    


    
Hello World! 
    
今天是学习Web开发的第一天，激动！
    点我试试？

步骤三：用浏览器打开
双击文件，看到页面的一瞬间——成就感拉满

---

3. HTML基础语法

• 标签：像

  、

  这样的“括号”，成对出现（如

  内容

  ）。

• 常用标签：

  • ~

    ：标题（数字越大字越小）。

  • ：段落。

  • ：按钮（虽然现在还点不动）。

• 属性：标签的“参数”。比如后续要学的中的href。

---

遇到的坑 & 解决

1. 中文乱码：页面显示一堆乱码！

   • 解决：在里添加，世界清净了✅。

2. 标签忘记闭合：写了个

   但没写

   ，页面排版全乱了。

   • 发现：用VS Code的代码高亮功能，一眼看出颜色不对！

3. 浏览器缓存：修改代码后刷新页面没变化。

   • 解决：按Ctrl + F5强制刷新，或者用Chrome开发者工具（F12→右键刷新按钮选清空缓存并硬性重新加载）。

---

明日计划

1. 学习CSS：给今天的丑丑页面换皮肤！

2. 让按钮真正有用：尝试用JavaScript实现点击事件。

3. 部署到网络：试试用GitHub Pages把页面发布到公网！

---

今日感悟

• 编程不是魔法：写一行代码，浏览器就乖乖显示内容，这种感觉太神奇了！

• 细节决定成败：一个符号写错，整个页面崩掉，但找到问题后的快乐也是加倍的。

• 工具很重要：VS Code的自动补全和错误提示简直是新手救星！

学习资源分享：

• MDN Web文档：权威的Web开发指南

• W3Schools：互动式练习，边学边敲

---

“Hello World” 只是开始，期待明天的CSS魔法！