if 多分支语句和 switch的区别：
共同点
都能实现多分支选择， 多选1
大部分情况下可以互换
区别：
switch…case语句通常处理case为比较确定值的情况，而if…else…语句更加灵活，通常用于范围判断(大于，等于某个范围)。
switch 语句进行判断后直接执行到程序的语句，效率更高，而if…else语句有几种判断条件，就得判断多少次
switch 一定要注意 必须是 === 全等，一定注意 数据类型，同时注意break否则会有穿透效果
结论：
当分支比较少时，if…else语句执行效率高。
当分支比较多时，switch语句执行效率高，而且结构更清晰。
for 语句
掌握 for 循环语句，让程序具备重复执行能力
for 是 JavaScript 提供的另一种循环控制的话句，它和 while 只是语法上存在差异。
for语句的基本使用
实现循环的 3 要素
1234567891011121314<script> // 1. 语法格式 // for(起始值; 终止条件; 变化量) { ...
理解什么是流程控制，知道条件控制的种类并掌握其对应的语法规则，具备利用循环编写简易ATM取款机程序能力
运算符
语句
综合案例
运算符算术运算符数字是用来计算的，比如：乘法 * 、除法 / 、加法 + 、减法 - 等等，所以经常和算术运算符一起。
算术运算符：也叫数学运算符，主要包括加、减、乘、除、取余（求模）等
运算符
作用
+
求和
-
求差
*
求积
/
求商
%
取模（取余数），开发中经常用于作为某个数字是否被整除
注意：在计算失败时，显示的结果是 NaN （not a number）
12345678910111213141516// 算术运算符console.log(1 + 2 * 3 / 2) // 4 let num = 10console.log(num + 10) // 20console.log(num + num) // 20// 1. 取模(取余数) 使用场景： 用来判断某个数是否能够被整除console.log(4 % 2) // 0 console.log(6 % 3) // ...
了解变量、数据类型、运算符等基础概念，能够实现数据类型的转换，结合四则运算体会如何编程。
体会现实世界中的事物与计算机的关系
理解什么是数据并知道数据的分类
理解变量存储数据的“容器”
掌握常见运算符的使用，了解优先级关系
知道 JavaScript 数据类型隐式转换的特征
介绍
掌握 JavaScript 的引入方式，初步认识 JavaScript 的作用
引入方式JavaScript 程序不能独立运行，它需要被嵌入 HTML 中，然后浏览器才能执行 JavaScript 代码。通过 script 标签将 JavaScript 代码引入到 HTML 中，有两种方式：
内部方式通过 script 标签包裹 JavaScript 代码
1234<script> alert('嗨，欢迎来传智播学习前端技术！') </script>
外部形式一般将 JavaScript 代码写在独立的以 .js 结尾的文件中，然后通过 script 标签的 src 属性引入
12// demo.jsdocument.write('嗨，欢迎 ...
响应式布局方案
媒体查询
Bootstrap框架
01-媒体查询基本写法
max-width：最大宽度（小于等于）
min-width：最小宽度（大于等于）
书写顺序
min-width（从小到大）
max-width（从大到小）
案例-左侧隐藏需求：网页宽度小于等于768px则隐藏左侧区域
HTML 结构
123456<div class="box"> <div class="left">left</div> <div class="main"> 响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式 ...
01-vw适配方案vw和vh基本使用vw和vh是相对单位，相对视口尺寸计算结果
vw：viewport width（1vw = 1/100视口宽度 ）
vh：viewport height ( 1vh = 1/100视口高度 )
vw布局vw单位的尺寸 = px 单位数值 / ( 1/100 视口宽度 )
vh问题vh是1/100视口高度，全面屏视口高度尺寸大，如果混用可能会导致盒子变形
02-综合案例-酷我音乐
准备工作
HTML 结构
12<link rel="stylesheet" href="./iconfont/iconfont.css"><link rel="stylesheet" href="./css/index.css">
less 样式
123// out: ../css/@import "./base";
头部布局
HTML 结构
12345 ...
less太好用了😋
01-移动 Web 基础谷歌模拟器模拟移动设备，方便查看页面效果
屏幕分辨率分类：
物理分辨率：硬件分辨率（出厂设置）
逻辑分辨率：软件 / 驱动设置
结论：制作网页参考 逻辑分辨率
视口作用：显示 HTML 网页的区域，用来约束 HTML 的尺寸
123456789101112131415<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <!– 视口标签 --> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</t ...
01-空间转换空间转换简介
空间：是从坐标轴角度定义的 X 、Y 和 Z 三条坐标轴构成了一个立体空间，Z 轴位置与视线方向相同。
空间转换也叫 3D转换
属性：transform
平移 1234transform: translate3d(x, y, z);transform: translateX();transform: translateY();transform: translateZ();
取值与平面转换相同
默认情况下，Z 轴平移没有效果，原因：电脑屏幕默认是平面，无法显示 Z 轴平移效果
视距作用：指定了观察者与 Z=0 平面的距离，为元素添加透视效果
透视效果：近大远小、近实远虚
属性：(添加给父级，取值范围 800-1200)
1perspective: 视距;
旋转
Z 轴：rotateZ()
X 轴：rotateX()
Y 轴：rotateY()
左手法则作用：根据旋转方向确定取值正负
使用：左手握住旋转轴, 拇指指向正值方向, 其他四个手指弯曲方向为旋转正值方向
rotate3d-了解
rotate3d(x, y, ...
使用位移、缩放、旋转、渐变效果
01-平面转换简介作用：为元素添加动态效果，一般与过渡配合使用
概念：改变盒子在平面内的形态（位移、旋转、缩放、倾斜）
平面转换也叫 2D 转换，属性是 transform
平移1transform: translate(X轴移动距离, Y轴移动距离);
取值
像素单位数值
百分比（参照盒子自身尺寸计算结果）
正负均可
技巧
translate() 只写一个值，表示沿着 X 轴移动
单独设置 X 或 Y 轴移动距离：translateX() 或 translateY()
定位居中
方法一：margin
方法二：平移 → 百分比参照盒子自身尺寸计算结果
案例-双开门
HTML 结构
1234<div class="father"> <div class="left"></div> <div class="right"></div></div>
CSS 样式
12345678910 ...
01-搭建项目目录
xtx-pc
images 文件夹：存放固定使用的图片素材，例如：logo、样式修饰图等等
uploads 文件夹：存放非固定使用的图片素材，例如：商品图、宣传图需要上传的图片
iconfont 文件夹：字体图标素材
css 文件夹：存放 CSS 文件（link 标签引入）
base.css：基础公共样式
common.css：各个网页相同模块的重复样式，例如：头部、底部
index.css：首页 CSS 样式
index.html：首页 HTML 文件
引入样式表1234<link rel="stylesheet" href="./iconfont/iconfont.css"><link rel="stylesheet" href="./css/base.css"><link rel="stylesheet" href="./css/common.css"><link rel="st ...
页面-学成在线01-项目目录网站根目录是指存放网站的第一层文件夹，内部包含当前网站的所有素材，包含 HTML、CSS、图片、JavaScript等等。
首页引入CSS文件
123<!-- 顺序要求：先清除再设置 --><link rel="stylesheet" href="./css/base.css"><link rel="stylesheet" href="./css/index.css">
02-版心居中
12345678.wrapper { margin: 0 auto; width: 1200px;}body { background-color: #f3f5f7;}
03-布局思路
布局思路：先整体再局部，从外到内，从上到下，从左到右
CSS 实现思路
画盒子，调整盒子范围 → 宽高背景色
调整盒子位置 → flex 布局、内外边距
控制图片、文字内容样式
04-header区域-整体布局
H ...
