过去两周，我踏入前端学习大门，逐步探索网页搭建的基础奥秘，以下是学习进展汇报。
第一周：HTML 初体验——搭建网页骨架
第一周聚焦 HTML（超文本标记语言），它是网页的基础骨架。我学习了用各种标签构建页面结构：
• 用 <html> 包裹整个网页文档，<head> 存放页面元信息（如标题、编码），<body> 承载可见内容；
• 用 <h1> - <h6> 设置标题层级，<p> 写段落，<a> 做链接跳转，<img> 插入图片 ，还尝试用 <div>、<span> 划分布局区域，初步掌握从 0 到 1 搭建静态页面结构的逻辑。
第二周：CSS 进阶——赋予页面美感
第二周深入 CSS（层叠样式表），它负责给 HTML “化妆”，让页面更美观。这一周的学习重点满满：
1. 样式引入方式
• 内联样式：直接在 HTML 标签的 style 属性写样式，如 <p style="color: red;">，虽便捷但不利于复用；
• 内部样式表：在 HTML 的 <head> 里用 <style> 标签写样式，作用于当前页面，比内联更规整；
• 外部样式表：创建独立 .css 文件，通过 <link rel="stylesheet" href="样式文件路径"> 引入，能跨页面复用，是项目开发常用方式。
2. 选择器：精准定位元素
• 基础选择器：标签选择器（如 p { ... } 选所有 <p>）、类选择器（.className { ... } 选类名匹配的元素，可复用）、ID 选择器（#idName { ... } 选唯一 ID 元素 ）；
• 复合选择器：后代选择器（div p { ... } 选 div 内所有 <p>）、子选择器（div > p { ... } 选 div 直接子级 <p> ），让样式控制更精准。
3. 常用样式属性
• 盒模型：理解 width、height 是内容尺寸，padding（内边距）、border（边框）、margin（外边距） 围绕内容，通过调整它们控制元素间距与大小；
• 文本样式：color 改文字颜色，font-size 调大小，text-align 控制对齐（左、中、右），line-height 设行高优化排版；
• 布局与显示：用 display: flex 开启弹性布局，轻松实现元素水平/垂直排列、均匀分布；float 可让元素浮动，早年常用于多列布局（但需注意清除浮动问题 ）。
学习方法：边听网课边跟着老师逐行敲代码
通过第二周学习，我能给 HTML 页面添上色彩、调整布局，让单调结构变得生动。不过也发现，复杂页面布局时，CSS 调试容易出问题（比如浮动导致父元素高度塌陷 ），后续得加强实践优化。
两周学习让我明白，HTML 是基石，CSS 是美化工具，二者结合才能做出像样的网页。
附笔记：杨：
全：
扫一扫
366
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
