一、本周学习总览
本周系统学习了HTML基础标签与CSS核心样式，覆盖网页结构搭建、样式美化、布局基础及交互效果入门，为后续前端开发打下了扎实基础。
二、HTML核心知识点归纳
- 基础布局标签
- span ：行内元素，用于包裹文本，不独占一行
- div ：块级元素，用于划分网页区域，独占一行，是布局核心容器
- ul / li ：无序列表，用于展示并列内容
- ol / li ：有序列表，用于展示有顺序的内容
- 链接与跳转
- 外部链接： 跳转至其他网站
- 内部链接：跳转至本站其他页面
- 空链接： 点击后不跳转，保留当前位置
- 下载链接： 点击后下载文件
- 描点链接： 跳转到页面指定位置（对应元素设置 id ）
- target ：属性： _blank 表示在新窗口打开链接， _self （默认）在当前窗口打开
- 表格相关
- 合并单元格： rowspan （跨行合并）、 colspan （跨列合并）
- 边框与间距： border （表格边框）、 cellpadding （内容与边框间距）、 cellspacing （边框间空隙）
- 相邻边框合并： border-collapse: collapse; 消除表格边框重叠
- 表单基础
- form ：表单容器，用于收集用户数据
- 常用表单元素：输入框 input 、文本域 textarea、按钮 button 等
- 表单优化： outline: none→取消输入框轮廓，resize: none→防止文本域拖拽
三、CSS核心知识点归纳
- 基础样式与引入
- 文本样式： color （文字颜色）、 font-size （字体大小）、 text-decoration （文本装饰，如下划线）
- 样式引入方式：
- 行内样式： <标签 style="样式">
- 内部样式表： style 标签写在 head 中
- 外部样式表：单独 .css 文件，通过 link 引入
- 选择器基础：
- 标签选择器：直接写标签名（如 div ）
- 类选择器： .类名 （可复用，支持多类名）
- 复合选择器：组合多种选择器实现精准匹配
- 盒子模型
- 核心组成： content （内容）、 padding （内边距，内容与边框空隙）、 border （边框）、 margin （外边距，元素与元素间距）
- 清除内外边距： * { margin: 0; padding: 0; } 重置默认样式
- border-radius ：设置圆角，可实现圆形、圆角按钮等效果
- list-style ：清除列表默认样式（如小圆点）
- 元素显示模式
- 块级元素：独占一行（如 div 、 p ），可设置宽高
- 行内元素：不独占一行（如 span 、 a ），宽高由内容决定
- 转换方式： display: block/inline/inline-block; 改变元素显示模式
- 隐藏显示： display: none; 隐藏元素（不占位置）， visibility: hidden; 隐藏元素（占位置）
- 链接伪类（鼠标状态）
- a:link ：未访问的链接样式
- a:visited ：已访问的链接样式
- a:hover ：鼠标悬停时的链接样式
- a:active ：鼠标点击时的链接样式
- 背景与视觉效果
- 背景图： background-image 设置背景图片， background-repeat 控制平铺， background-position 控制位置
- 透明度： opacity 设置元素整体透明度
- 阴影： text-shadow （文字阴影）、 box-shadow （盒子/图片阴影）
- 鼠标样式： cursor: pointer; 悬停时变成手型，还有其他样式如 move 、 text 等
- 布局与过渡
- 网页布局方法：标准流、浮动、定位
- 浮动： float: left/right→实现元素并排；clear: both等方法清除浮动影响
- 定位：
- 相对定位 relative ：相对于自身原位置偏移
- 绝对定位 absolute ：相对于最近的已定位父级偏移
- 固定定位 fixed ：相对于浏览器窗口固定位置
- 过渡效果： transition 实现属性变化的平滑过渡（如图片缩放、颜色变化）
- content 属性：配合伪元素 ::before / ::after 添加内容
- pre: 复制保留空格与行空白，实现文本间空白效果
- 精灵图：将多张小图合并为一张，减少网络请求
- 字体图标：使用图标字体替代图片，更清晰且易修改样式
- 文本溢出处理： text-overflow: ellipsis; 实现单行文本自动省略号，配合 white-space: nowrap; 和 overflow: hidden; 使用
- margin负值：实现元素位置偏移、边框重叠等布局效果
四、问题与反思
遇到的问题
1.
2.
3.区别浮动和绝对定位和普通流的覆盖功能
下周计划
1. 深入学习Flex布局，掌握更高效的网页排版方法 2. 练习制作简单的响应式页面，适配不同设备尺寸 3. 尝试结合JavaScript实现简单的交互效果（如点击事件）
