Week 1 学习与实践报告

概述

本周主要围绕 Web 前端开发的基础（HTML、CSS、JavaScript）进行了系统学习，并以 MDN Web Docs 为主要参考资料。在掌握理论知识的同时，我将其直接应用于《从代码到实物》课程的实践环节，初步搭建了属于自己的个人主页（王君威的个人展示页）。

HTML 是一种标记语言，它为网页提供了基本的结构和语义。在本周的学习中，我掌握了文档的基本组成部分，并将其应用到了 index.html 的编写中：

文档声明与元数据：在 index.html 的头部，正确配置了 <!doctype html> 声明，使用了 <meta charset="utf-8"> 确保中文字符正常显示，并通过 <meta name="viewport"> 标签为移动端适配打下基础。
引入外部资源：学会了如何通过 <link> 标签引入外部的 CSS 样式表（如自建的 style.css 和 card.css），以及如何接入外部图标库（Font Awesome）来美化页面元素。
语义化标签与元素：实际运用了多种 HTML 元素来组织内容。例如，使用 <h1> 和 <h2> 定义标题层级，使用 <p> 编写个人简介，使用 <img> 嵌入头像（并配置了 alt 属性以提升无障碍访问性），以及利用 <a> 标签实现博客、GitHub 页面和 Week 1 记录页面的跳转。

如果说 HTML 是骨架，那么 CSS 就是网页的皮肤。本周我深入理解了 CSS 的核心概念，并为页面编写了美观且响应式的样式。

核心理论：盒模型：理解了 CSS 中“一切皆盒子”的概念，熟悉了 margin（外边距）、border（边框）、padding（内边距）和内容本身的关系。
Flexbox 弹性布局：在 style.css 中，我为 .container 容器使用了 display: flex;。通过配置左侧头像区（.image-section）和右侧内容区（.content-section）的 flex 属性，实现了一个优雅的左右分栏布局。
响应式设计 (RWD)：考虑到不同设备的浏览体验，我使用了媒体查询 @media (max-width: 768px)。当屏幕宽度缩小至移动端尺寸时，页面会自动隐藏中间的分割线（.divider），并将左右分栏平滑折叠为上下单栏布局。
交互动效：在 card.css 中，利用 CSS 的伪类选择器 :hover，结合 transition 和 transform: translateY(-2px) 属性，为课程记录卡片添加了平滑的悬停上移与阴影效果，极大地提升了用户的交互体验。

虽然目前页面主要由 HTML 和 CSS 构成，但我也同步学习了 JavaScript 的基础语法，为后续的复杂交互做准备。

基础语法体系：学习了变量的声明（let, const）、数据类型、基本运算符以及函数的定义与调用。
DOM 操作与事件监听：理解了如何通过 document.querySelector() 获取 HTML 元素，以及如何使用事件监听器（如 onclick 或 addEventListener）来捕获用户的操作（例如点击按钮或图片）。
实践准备：在 index.html 的底部，我已经提前引入了 <script src="scripts/main.js"></script>。下一步，我计划利用 MDN 教程中的逻辑，在 main.js 中实现诸如“点击头像切换图片”或“基于 localStorage 的个性化欢迎语”等动态功能。

第一周的学习让我成功跨出了“从代码到实物”的第一步。从零开始敲下每一行代码，看着网页从纯文本变成一个带有圆角、阴影和响应式布局的精美界面，充满成就感。接下来，我将继续完善 main.js 的逻辑，让这个静态页面真正“动”起来。