01 2022 档案
摘要：JavaScript 进阶2 BOM 浏览器对象模型 BOM 概述 什么是 BOM BOM（Browser Object Model）即浏览器对象模型，它提供了独立于内容而与浏览器窗口进行交互的对象，其核心对象是 window。 BOM 由一系列相关的对象构成，并且每个对象都提供了很多方法与属性。
阅读全文
摘要：JavaScript 进阶1 Web APIs 简介 Web APIs 和 JS 基础关联性 JS 的组成 JS 基础阶段以及 Web APIs 阶段 JS 基础阶段 学习的是 ECMAScript 标准规定的基本语法 掌握 JS 基础语法 只学习基本语法，做不了常用的网页交互效果 目的是为了 JS
阅读全文
摘要：JavaScript 基础6 JavaScript 内置对象 内置对象 JavaScript 中的对象分为3种：自定义对象 、内置对象、 浏览器对象 前面两种对象是JS 基础 内容，属于 ECMAScript； 第三个浏览器对象属于我们JS 独有的， 我们JS API 讲解 内置对象就是指 JS 语
阅读全文
摘要：JavaScript 基础5 JavaScript 作用域 作用域 作用域概述 通常来说，一段程序代码中所用到的名字并不总是有效和可用的，而限定这个名字的可用性的代码范围就是这个名字的作用域。作用域的使用提高了程序逻辑的局部性，增强了程序的可靠性，减少了名字冲突。 JavaScript（es6前）中
阅读全文
摘要：JavaScript 基础4 JavaScript 数组 数组的概念 问：之前学习的数据类型，只能存储一个值。如果我们想存储班级中所有学生的姓名，那么该如何存储呢？ 答：可以使用数组(Array)。数组可以把一组相关的数据一起存放，并提供方便的访问(获取）方式。 问：什么是数组呢？ 答：数组是指一组
阅读全文
摘要：JavaScript 基础3 JavaScript 流程控制-循环 循环 循环目的 在实际问题中，有许多具有规律性的重复操作，因此在程序中要完成这类操作就需要重复执行某些语句 JS中的循环 在Js 中，主要有三种类型的循环语句： for 循环 while 循环 do...while 循环 for 循
阅读全文
摘要：JavaScript 基础2 JavaScript 运算符 运算符 运算符（operator）也被称为操作符，是用于实现赋值、比较和执行算数运算等功能的符号。 JavaScript中常用的运算符有： 算数运算符 递增和递减运算符 比较运算符 逻辑运算符 赋值运算符 算数运算符 算术运算符概述 概念：
阅读全文
摘要：JavaScript 基础1 初识JavaScript JavaScript 是什么 JavaScript 是世界上最流行的语言之一，是一种运行在客户端的脚本语言 （Script 是脚本的意思） 脚本语言：不需要编译，运行过程中由 js 解释器( js 引擎）逐行来进行解释并执行 现在也可以基于 N
阅读全文
摘要：前端基础进阶 响应式 响应式网页 一套代码适配不同的屏幕设备 媒体查询 基本语法 根据设备宽度的变化，设置差异化样式 开发常用写法 媒体特性常用写法 max-width min-width <!DOCTYPE html><html lang="en"><head> <meta charset="UT
阅读全文
摘要：前端基础进阶 长度单位 vw / vh 使用vw单位设置网页元素的尺寸 相对单位 相对视口的尺寸计算结果 vw：viewport width 1vw = 1/100视口宽度 vh：viewport height 1vh = 1/100视口高度 <!DOCTYPE html><html lang="e
阅读全文
摘要：前端基础进阶 移动适配 移动适配 rem ： 目前多数企业在用的解决方案 vw / vh：未来的解决方案 rem移动适配 使用rem单位设置网页元素的尺寸 长度单位 网页效果 屏幕宽度不同，网页元素尺寸不同（等比缩放） px单位或百分比布局可以实现吗？ px单位是绝对单位 百分比布局特点宽度自适应，
阅读全文
摘要：前端基础进阶 Flex布局 主轴方向 使用flex-direction改变元素排列方向 Flex布局模型中，弹性盒子默认沿着哪个方向排列？ 水平方向。 如何实现内容垂直排列？ 主轴默认是水平方向, 侧轴默认是垂直方向 修改主轴方向属性: flex-direction <!DOCTYPE html><
阅读全文
摘要：前端基础进阶 移动端特点 头脑风暴 PC端网页和移动端网页的有什么不同？ PC屏幕大，网页固定版心 手机屏幕小， 网页宽度多数为100% 如何在电脑里面边写代码边调试移动端网页效果？ 谷歌模拟器 谷歌模拟器 使用谷歌模拟器调试移动端网页 屏幕尺寸 概念 指的是屏幕对角线的长度，一般用英寸来度量 分辨
阅读全文
摘要：前端基础进阶 空间转换 使用transform属性实现元素在空间内的位移、旋转、缩放等效果 空间：是从坐标轴角度定义的。 x 、y 和z三条坐标轴构成了一个立体空间，z轴位置与视线方向相同。 空间转换也叫3D转换 属性：transform 空间位移 使用translate实现元素空间位移效果 语法
阅读全文
摘要：前端基础进阶 字体图标 — Iconfond 使用字体图标技巧实现网页中简洁的图标效果 案例：淘宝购物车 布局标签 li > span * 3 字体图标 引入字体图标样式表 购物车和箭头span调用字体图标类名 <!DOCTYPE html><html lang="en"><head> <meta
阅读全文
摘要：CSS补充样式 CSS精灵图 精灵图的使用步骤： 1、创建一个盒子，设置盒子的尺寸和小图尺寸相同 2、将精灵图设置为盒子的背景图片 3、修改背景图位置 通过PxCook测量小图片左上角坐标，分别取负值设置给盒子的background-position: x y <!DOCTYPE html><htm
阅读全文
摘要：CSS定位装饰 定位 网页常见布局方式 标准流 1、块级元素独占一行 → 垂直布局 2、行内元素/行内块元素一行显示多个 → 水平布局 浮动 可以让原本垂直布局的 块级元素变成水平布局 定位 1、可以让元素自由的摆放在网页的任意位置 2、一般用于 盒子之间的层叠情况 定位的常见应用场景 可以解决盒子
阅读全文
摘要：CSS浮动 结构伪类选择器 结构伪类选择器 通过标签的关系去找标签 注意点 <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge
阅读全文
摘要：CSS盒子模型 CSS三大特性 优先级的介绍 特性：不同选择器具有不同的优先级，优先级高的选择器样式会覆盖优先级低选择器样式 优先级公式： 继承 < 通配符选择器 < 标签选择器 < 类选择器 < id选择器 < 行内样式 < !important 注意点： 1、!important写在属性值的后面
阅读全文
摘要：进阶认知 选择器进阶 后代选择器：空格 作用：根据 HTML 标签的嵌套关系，选择父元素后代中满足条件的元素 选择器语法：选择器1 选择器2 { css } 结果： 在选择器1所找到标签的后代（儿子、孙子、重孙子…）中，找到满足选择器2的标签，设置样式 注意点： 后代包括：儿子、孙子、重孙子…… 后
阅读全文
摘要：基础认知 CSS简介 层叠样式表 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="view
阅读全文
摘要：1、列表--无序 无序列表--ul标签：表示无序列表的整体。li标签：表示无序列表的每一项 显示特点： 列表的每一项前默认显示圆点标识 注意点： ul标签中只允许包含li标签 li标签可以包含任意内容 <ul> <li>榴莲</li> <li>香蕉</li> <li>苹果</li></ul> 2、列
阅读全文
摘要：基础认知 Web标准 构成：结构、表现、行为 HTML标签的结构 需要确定开始结束包裹内容的选择双标签 文字要加粗 不需要开始结束的选择单标签 HTML标签与标签之间的关系 父子关系（嵌套关系） <head> <title></title> </head> 兄弟关系（并列关系） <head></he
阅读全文
