前端-回声每周任务总结

Week2（基础表单+鱼）

需加强的点

1. <label>  标签的  for  属性需要与对应表单元素的  id  属性值匹配才能建立关联，否则点击文字不会触发单选按钮的选中状态。
2. 对于单选按钮（type="radio"），需要给同一组选项设置相同的  name  属性（如name="gender"），这样它们才能选了一个就不能选另一个。
3. 下拉框选择：

<label for="direction">选择方向：</label>
<select id="direction" name="direction">
  <option value="web-frontend">Web 前端组</option>
  <option value="web-backend">Web 后端组</option></select
><br />

• <select>  标签是下拉选择框的容器，需要通过  id  属性与  <label>  的  for  属性关联（这里  id="direction"  与  for="direction"  匹配）
• name  属性用于表单提交时标识该字段的名称
• 每个  <option>  是下拉选项，value  是提交时实际发送的值，标签内的文字是显示给用户的选项文本

4. 背景渐变（硬停止）

background: linear-gradient(
  to bottom,
        #b0b0b0 50%,
  /* 顶部 50% 灰色  */         #000000 50%,
        #000000 calc(50% + 2px),
  /* 黑线持续 2px  */         #ffffff calc(50% + 2px)   /* 白色从黑线结束后开始 */
       
);

Week3（骰子+专辑）

需加强的点

1. 圆形设置

.pip {
        display: block;//块级元素
        width: 24px;
        height: 24px;

        border-radius: 50%;//设置圆角，当宽与高相同时，50%会使正方形变成圆形
        margin: 4px;
        background-color: #333;
        box-shadow: inset 0 3px #111, inset 0 -3px #555;
      }

2. [class$='face']：选择所有 class 属性值以 'face' 结尾的 HTML 元素。
3. :nth-child(n)

/* 选择third-face的class选择器，查找里面的pip的class选择器，定位里面的第二个pip*/
   .third-face  .pip:nth-child(2){
        margin:auto;
      }

4. flex-wrap: wrap; 时，元素只有在主轴（水平方向）空间不足时才会换行。
5. 关于 margin

• 在常规的块级元素（display: block;）中：margin-left: auto; 和 margin-right: auto; 会平均分配父容器的剩余水平空间，从而实现块级元素的水平居中。
• margin: auto 在 Flexbox 中的特殊作用：在 Flexbox 容器内，margin: auto 的功能被扩展了，margin: auto; 会吞噬元素周围的所有可用空间。

例如：如果你只设置 margin-left: auto，它会把该元素左侧的所有剩余空间都占据，将该元素推到最右侧。

6. box-sizing: border-box;改变元素的盒模型计算方式。weight和height会包含内容、内边距和边框，避免因添加 padding 或 border 导致元素实际尺寸超出预期。

7. flex-wrap: wrap;控制弹性容器内的子元素是否换行。

   在弹性布局（display:flex;）中，子元素默认会在一行内排列，若总宽度超过容器宽度，会被压缩。

   设置(flex-wrap:wrap;)后，当子元素总宽度超过容器宽度时，会自动换行到下一行，避免元素被挤压变形。

8. 小屏适配

/* 小屏适配（宽度≤490px时） */
@media (max-width: 490px) {
}

Flex 布局

基础概念

Flex 叫做弹性容器：设置  display: flex  的父元素，其子元素称为“弹性项（Flex item）”。

主轴与交叉轴：与主轴垂直的轴就叫交叉轴。若  flex-direction  为  row（默认，水平方向为主轴），则交叉轴为垂直方向；若  flex-direction  为  column（垂直方向为主轴），则交叉轴为水平方向。

容器属性

属性	作用	常用取值	我的实例
flex-direction	定义主轴方向	row（默认，水平从左到右）、row-reverse、column（垂直从上到下）、column-reverse	按列排还是水平
justify-content	控制弹性项在主轴上的对齐方式	flex-start（默认）、center、flex-end、space-between（两端对齐）、space-around（等距分布）	骰子圆点的排列
align-content	多根轴线（换行后）在交叉轴的对齐方式	类似  justify-content，取值包括  stretch、center、space-between  等（仅当子元素换行时生效）
flex-wrap	控制弹性项是否换行	nowrap（默认，不换行）、wrap（换行，第一行在上）、wrap-reverse（换行，第一行在下）	专辑按钮压缩到一定宽度后换行处理
flex-flow	flex-direction + flex-wrap  的简写	例：flex-flow: row wrap
align-items	控制单个弹性项在交叉轴上的对齐方式	见上文 “常用取值”	骰子 1 点的圆点在垂直方向处于正中心

项目属性

属性	作用	说明	我的实例
flex	flex-grow + flex-shrink + flex-basis  的简写	常用值：flex: 1（等价于  1 1 0%，自动拉伸 / 收缩）、flex: auto（等价于  1 1 auto）。	设置专辑的三个按钮宽度比例为 2：1：1
flex-shrink	定义项目的收缩比例（空间不足时）	默认为 1（允许收缩）；值为 0 时不收缩（避免被挤压）。
flex-grow	定义项目的拉伸比例（剩余空间分配）	默认为 0（不拉伸）；值为正数时，按比例分配剩余空间（例：A 为 2，B 为 1，则 A 占 2/3）。
flex-basis	定义项目在主轴上的初始尺寸	默认为  auto（项目自身尺寸）；可设具体值（如  100px、50%）。
align-self	单独设置某个项目的交叉轴对齐方式	覆盖容器的  align-items，取值相同（auto、center、flex-start  等）。
order	定义项目的排列顺序	默认为 0，值越小越靠前（可设负数）。

应用场景

弹性布局是 “一维布局”，只能处理一行或一列的布局。
• 若设置  flex-direction: row（默认），弹性项会沿水平方向（行）  排列，布局核心是控制 “一行内” 的对齐、间距、尺寸分配。
• 即使通过  flex-wrap: wrap  实现换行，本质上也是 “多行的一维布局”，每行仍单独遵循水平方向的排列规则，无法像二维布局（如 Grid）那样直接控制行与列的交叉关系。

实际应用场景：

1. 导航栏 / 菜单
   • 水平排列的导航项，需要均匀分布、两端对齐或居中对齐。
   • 例：顶部导航栏的菜单按钮，在大屏上水平排列，小屏上自动换行。
2. 按钮组 / 操作栏
   • 多个按钮需要紧凑排列，或按比例分配宽度（如 “立即购买” 按钮比 “加入购物车” 宽）。
3. 卡片内部布局
   • 卡片内的元素（如标题、描述、图片）需要垂直居中或沿垂直方向分布。
4. 内容与侧边栏的简单布局
   • 例如：左侧固定宽度的侧边栏 + 右侧自适应宽度的内容区（水平方向一维布局）。
5. 居中对齐
   • 快速实现元素在父容器中水平 + 垂直居中（结合  justify-content: center  和  align-items: center）。
6. 响应式适配
   • 小屏幕下自动换行（flex-wrap: wrap），避免元素挤压变形。

不适合：复杂的二维网格布局（如表格、瀑布流、不规则行列排列），此时更适合用 CSS Grid 布局。

需加强的点

1. document.querySelector 也可以通过选择器获取元素，但两者的使用场景和效率有区别：

对比项	document.getElementById	document.querySelector
选择器类型	仅支持id选择（因为 id 唯一）	支持所有 CSS 选择器（如类选择器 .class、标签选择器 tag、复合选择器等）
返回结果	直接返回匹配的DOM节点（无匹配则返回null）	返回第一个匹配的 DOM 节点（无匹配则返回 null）
效率	更高（因为id是浏览器内部索引的，查询更快）	稍低（需要解析复杂选择器）

在已知元素 id 且需要精准获取单个元素的场景下，getElementById 更直接、高效。
而 querySelector 更适合 复杂选择器（如 .class、tag:nth-child 等）的场景。

2. 关于轮播

特性	setTimeout（单次定时器）	setInterval（重复定时器）
执行次数	只执行一次	每隔指定时间重复执行
适用场景	单次延迟任务（如 “3 秒后变红”）	周期性任务（如 “每隔 1 秒刷新数据”）
清除方式	clearTimeout(timerId)	clearInterval(timerId)
案例：三种颜色的灯每隔三秒就切换

// TODO：完善此函数 显示红色颜色的灯
function red() {
    const defaultlight = document.getElementById('defaultlight');
    const red = document.getElementById('redlight');
    const green = document.getElementById('greenlight');

    defaultlight.style.display = "none";
    red.style.display = "inline-block";
    green.style.display = "none";
}

// TODO：完善此函数  显示绿色颜色的灯
function green() {
    const defaultlight = document.getElementById('defaultlight');
    const red = document.getElementById('redlight');
    const green = document.getElementById('greenlight');  

    defaultlight.style.display = "none";
    red.style.display = "none";
    green.style.display = "inline-block";
}

// TODO：完善此函数
function trafficlights() {
    let red2 = setTimeout(function(){
        red();
        setTimeout(green, 3000);
    },3000);
}

trafficlights();

Week4（js题目+轮播灯）

需加强的点

1. document.querySelector 也可以通过选择器获取元素，但两者的使用场景和效率有区别：

对比项	document.getElementById	document.querySelector
选择器类型	仅支持id选择（因为 id 唯一）	支持所有 CSS 选择器（如类选择器 .class、标签选择器 tag、复合选择器等）
返回结果	直接返回匹配的DOM节点（无匹配则返回null）	返回第一个匹配的 DOM 节点（无匹配则返回 null）
效率	更高（因为id是浏览器内部索引的，查询更快）	稍低（需要解析复杂选择器）

在已知元素 id 且需要精准获取单个元素的场景下，getElementById 更直接、高效。
而 querySelector 更适合 复杂选择器（如 .class、tag:nth-child 等）的场景。

2. 关于轮播

特性	setTimeout（单次定时器）	setInterval（重复定时器）
执行次数	只执行一次	每隔指定时间重复执行
适用场景	单次延迟任务（如 “3 秒后变红”）	周期性任务（如 “每隔 1 秒刷新数据”）
清除方式	clearTimeout(timerId)	clearInterval(timerId)
案例：三种颜色的灯每隔三秒就切换

// TODO：完善此函数 显示红色颜色的灯
function red() {
    const defaultlight = document.getElementById('defaultlight');
    const red = document.getElementById('redlight');
    const green = document.getElementById('greenlight');

    defaultlight.style.display = "none";
    red.style.display = "inline-block";
    green.style.display = "none";
}

// TODO：完善此函数  显示绿色颜色的灯
function green() {
    const defaultlight = document.getElementById('defaultlight');
    const red = document.getElementById('redlight');
    const green = document.getElementById('greenlight');  

    defaultlight.style.display = "none";
    red.style.display = "none";
    green.style.display = "inline-block";
}

// TODO：完善此函数
function trafficlights() {
    let red2 = setTimeout(function(){
        red();
        setTimeout(green, 3000);
    },3000);
}

trafficlights();

Week5（评论框接入后端）

需加强的点

1. box.insertAdjacentElement('afterend', commentList)是一个DOM操作方法，作用是将commentList这个元素插入到box元素的特定位置(这里是后面)。
2. box.appendChild(errorMsg) 作用是将errorMsg元素添加为box元素的最后一个子元素。

特性	box.appendChild(errorMsg)	box.insertAdjacentElement('afterend', errorMsg)
插入位置	box 内部末尾（子元素）	box 外部后面（同级元素）
元素关系	父子关系	兄弟关系
典型用途	往容器内添加子元素	在元素旁添加关联内容

3. const content = input.value.trim(); 这行代码的作用是获取输入框的内容，并去除内容前后的空白字符（空格、换行、制表符等），然后将处理后的结果保存到变量content中。
4. display: none表示元素完全隐藏（不占据页面空间）。display: block表示元素可见（以块级元素形式显示，占据一行）。
   （这里笔记还没写完）

Week6（Git操作）

详见《Git版本控制》笔记