黑马前端——days24_总结

一、HTML

1.1 语义标签

• 标题 h1 - h6
• 段落 p
• 换行 br

1.2 文本格式化标签

• 加粗 strong 或 b
• 倾斜 em 或 i
• 删除线 del 或 s
• 下划线 ins 或 u

1.3 辅助标签

• 盒子 div 或 span
• 图像 img scr=“图像路径” alt=”替换文本“ title=“提示文本“
• 超链接 a href=“链接” target=“是否打开新页面(_self / _blank)”
  • 外部链接 https://www.baidu.com
  • 内部链接 index.html
  • 空链接 #
  • 下载链接 文件地址或压缩包地址
  • 网页元素链接 各种网页元素
  • 锚点链接 href=‘”#名字“ + id=“名字”
• 注释
• 特殊字符

1.4 表格标签

• 表格 table -> 行 tr -> 列 td
• 表头 th
• 表格结构 表格头部区域thead 表格主体区域tbody
• 合并单元格 colspan=”合并单元格的个数“ 和 rowspan=”合并单元格的个数“

1.5 列表标签

• 无序列表 ul -> li
  • 去掉项目符号 list-style: none;
• 有序列表 ol -> li
• 自定义列表 dl -> 标题 dt -> 项目 dd

1.6 表单标签

• 表单域 form action=“url地址” method=“提交方式” name=“表单域名称”
• 表单控件
  • (1) 输入 input type=“控件类型” value=“显示文字” （label for属性 + id属性）
  • (2) 下拉 select -> option
  • (3) 文本域 textarea

1.7 HTML5新特性

• 语义化标签
  • 头部标签 header
  • 导航标签 nav
  • 内容标签 article
  • 定义文档某个区域 section
  • 侧边栏标签 aside
  • 尾部标签 footer
• 多媒体标签
  • 音频 audio src=“文件地址”
  • 视频 video src=“文件地址”

二、CSS

2.1 选择器

• 基础选择器
  • 标签选择器
  • 类选择器 .class属性 (多类名 class=“类名1 类名2”)
  • id选择器 #id属性 (id属性只能使用一次)
  • 通配符选择器 * (选取所有元素)
• 复合选择器：基础选择器组合形成
  • 后代选择器 标签1/选择器 标签2/选择器 标签3/选择器
  • 子选择器 标签1/选择器 > 标签2/选择器
  • 并集选择器 标签1/选择器, 标签2/选择器
  • 链接伪类选择器 标签: 方式
    • （1）a: link 选择未被访问的链接
    • （2）a: visited 选择已被访问的链接
    • （3）a: hover 选择鼠标位于其上的链接
    • （4）a: active 选择鼠标按下未弹起的链接
  • focus 伪类选择器（选取获得焦点的表单元素）input: focus

2.2 字体属性

• 字体系列 font-family
• 字体大小 font-size (给body指定整个页面大小)
• 字体粗细 font-weight
• 文字样式 font-style (标准normal 斜体italic)
• 字体复合属性（font: font-style font-weight font-size/line-weight font-family）

2.3 文本属性

• 文本颜色 color (预定义 或 十六进制 或 RGB)
• 文本水平对齐 text-align (left 或 right 或 center)
• 文字垂直居中（文字的行间距=盒子的高度）
• 装饰文本 text-decoration (none 或 underline 或 overline 或 line-through)
• 文本缩进 text-indent (单位：px 或 em)
• 文本行间距 line-height

2.4 元素属性

• 转换为块级元素 display: block;
• 转换为行内元素 display: inline;
• 转换为行内块元素 display: inline-block;

2.5 背景属性

• 背景颜色 background-color: 颜色值;（transparent 透明）
• 背景图片 background-image: url(地址);（none 无背景）
• 背景平铺 background-repeat: repeat / no-repeat / repeat-x; repeat-y;
• 背景图片位置 background-position: x, y;
  • length(百分数 / px)
  • position(top / center / bottom / left / right)
• 背景图像固定 background-attachment: scroll / fixed;（是否随着页面滚动而滚动）
• 背景复合性写法 background: 背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置;
• 背景色半透明 background: rgba(0, 0, 0, 0.3);

2.6 引入样式表

• 行内样式表（行内式）标签内部style属性
• 内部样式表（嵌入式）style
• 外部样式表（链接式）link

2.7 Emmet语法

• 生成标签 div+Tab
• 多个相同标签 div*3
• 父子级关系标签 ul>li
• 兄弟关系标签 div+p
• 带id/class属性的标签 标签名.属性名/#属性名+Tab
• 类名自增 标签名.属性名/#属性名$数量
• 内部自带文字 标签名{}
• 注释 /* 注释 */

2.8 盒子模型

• border边框
  • border-width边框粗细 border-style边框样式(实线solid) border-color边框颜色
  • 复合属性：border: 样式1 样式2
  • 选择边框：border-(top / bottom / left / right)
  • border-collapse: collapse; 合并相邻的边框
• content内容
• padding内边距
  • 选择内边距：padding-(top / bottom / left / right)
  • 复合属性：padding: 上 右 下 左
  • 当盒子设定高度和宽度时，内边距会撑大盒子
  • 如果盒子没有指定高度和宽度时候，内边距不会撑开盒子
• margin外边距
  • 选择外边距：margin-(top / bottom / left / right)
  • 复合属性：margin: 上 右 下 左
  • 水平居中：指定宽度 + margin: 0 auto;
  • 外边距合并
    • 相邻块元素垂直外边距的合并 (尽量只给一个盒子添加margin值)
    • 嵌套块元素垂直外边距的塌陷（给父元素定义上边框 / 上内边距 / overflow:hidden）
  • 清除内外边距 * { padding: 0; margin: 0; }
• 其他
  • 圆角边框 border-radius: 数值 or 百分比;
  • 盒子阴影 box-shadow: 水平阴影 垂直阴影;
  • 文字阴影 text-shadow: 水平阴影 垂直阴影;

2.9 浮动

• float: none / left / right;
• 清除浮动 clear: left / right/ both;
  • 额外标签法
  • 父级添加 overflow: hidden / auto / scroll;
  • :after 伪元素法
  • 双伪元素（:before / :after​）
• CSS属性书写属性（布局定位属性 / 自身属性 / 文本属性 / 其他属性）

2.10 定位

• 定位模式 position
  • 静态定位static（无定位）
  • 相对定位relative（相对于原来位置 / 继续占有原先位置）
  • 绝对定位absolute（相对于祖先元素 / 不再占有原先位置）
  • 固定定位fixed（固定于浏览器可视区的位置 / 不再占有原来位置）
  • 粘性定位sticky（固定于浏览器可视区的位置 / 继续占有原来位置）
  • 定位叠放次序z-index（控制盒子的前后次序）
• 边偏移
  • 顶端偏移量top 底部偏移量bottom 左侧偏移量left 右侧偏移量right
• 元素的显示与隐藏
  • display: none(隐藏对象 不再占有原来的位置) / block(显示元素);
  • visibility: visible(元素可视) / hidden(元素隐藏 继续占有原来的位置);
  • overflow溢出: visible / hidden / scroll / auto;

2.11 用户界面

• 鼠标样式 cursor: default / pointer小手 / move移动 / text文本 / not-allowed禁止
• 轮廓线 outline: none;
• 防止拖拽文本域 resize: none;
• 文字与图片垂直对齐 vertical-align: middle;
• 溢出的文字省略号显示
  • 单行文本
    • 强制一行显示文本 white-space:nowrap;
    • 超出的部分隐藏 overflow: hidden;
    • 文字用省略号替代超出的部分text-overflow: ellipsis;
  • 多行文本
    • 超出的部分隐藏 overflow: hidden;
    • 文字用省略号替代超出的部分text-overflow: ellipsis;
    • 弹性伸缩盒子模型显示 display: -webkit-box;
    • 限制在一个块元素显示的文本的行数 -webkit-line-clamp: 2;
    • 子元素的排列方式 -webkit-box-orient: vertical;

2.12 CSS3新特新

• 选择器
  • 属性选择器
  • 结构伪类选择器
  • 伪元素选择器
• 盒子模型 box-sizing
• 滤镜或模糊 filter
• 计算函数 calc
• 过渡 transition: 过度属性 花费时间 运动曲线 何时开始;

三、JavaScript

3.1 JavaScript 介绍

• ECMAScript：规定了 js 基础语法核心知识
• Web APIs
  • DOM：操作文档
  • BOM：操作浏览器
• 内部 JavaScript body内部
• 外部 JavaScript script src=“js 文件地址”
• 内联 JavaScript vue框架使用
• 单行注释 //
• 块注释 /**/
• 输出
  • document.write(“输出内容”)
  • alert(“警告对话框”)
  • console.log(“控制台日志输出”)
• 输入
  • prompt(“提示信息”)

3.2 变量、常量和数据类型

• 声明变量 let
• 声明常量 const
• 基本数据类型
  • 数字型 number
  • 字符串型 string
  • 布尔型 boolean
  • 未定义型 undefined（声明变量未赋值）
  • 空类型 null（赋值后内容为空）
• 引用数据类型 object 对象
• 运算符
  • 赋值运算符
  • 一元运算符
  • 比较运算符（值相等 两个= / 类型和值都相等 三个=）
  • 逻辑运算符 && / || / !
• 检测数据类型 typeof
• 类型转换
  • 隐式转换：系统内部自动将数据类型进行转换
  • 显示转换

3.3 控制语句和数组

• 分支语句
  • if 分支语句 单分支 / 双分支 / 多分支
  • 三元运算符 条件 ? 情况1 : 情况2
  • switch 语句
• 循环语句
  • while 循环
  • for 循环
• break / continue / return
• 数组
  • 声明 let 数组名 = [数据1, 数据2, …, 数据n]
  • 查：查询数组数据 数组名[索引]
  • 改：重新赋值 数组名[索引] = 值
  • 增：数组添加新的数据 尾部：数组名.push(内容1, 内容2) / 头部：数组名.unshift(内容1, 内容2)
  • 删：删除数组中的数据 尾部：数组名.pop() / 头部：数组名.shift() / 数组名.splice(操作下表, 删除个数)
• 数组排序 数组名.sort(function (a, b) { return a - b })

3.4 函数

• 函数的声明 function 函数名(参数列表) { 函数体 return 返回值 }
• 匿名函数 function() {}
• 对象 let obj = { usename: ’徐贵’, age: 21, gender: ’男’, 函数名: function() { 函数体 } }
  • 属性查找 对象名.属性名 / 对象名[属性名]
  • 属性增加 对象名.新属性 = 新值
  • 属性删除 delete 对象名.属性
• 对象遍历 for(let k in obj) { k: 属性名 obj[k]: 属性值}
• 内置对象Math 随机数random

3.5 DOM 获取 & 属性操作

• 获取 DOM 元素
  • 根据CSS选择器
    • 选择匹配的第一个元素 document.querySelector(‘CSS选择器’)
    • 选择匹配的多个元素 document.querySelectorAll(‘CSS选择器’)
  • 其他方式
    • 根据 id 获取一个元素 document.getElementsById(‘id名’)
    • 根据标签获取一类元素 document.getElementsByTagName(‘标签名’)
    • 根据类名获取所有元素 document.getElementsByClassName(‘类名’)
• 操作元素内容（对象.innerText / 对象.innerHTML）
• 操作元素属性
  • 常用属性 herf / title / src
  • 样式属性
    • 通过 style 对象.style.样式属性 = 值
    • 操作类名 元素.className = ‘新的类名’
    • 通过 classList
      • 元素.classList.add(‘类名’) 追加一个类
      • 元素.classList.remove(‘类名’) 删除一个类
      • 元素.classList.toggle(‘类名’) 切换一个类
  • 表单元素属性
    • 获取：DOM对象.属性名
    • 设置：DOM对象.属性名 = 新值
  • 自定义属性
    • 定义：data-自定义属性
    • 获取：DOM对象.dataset.自定义属性
• 定时器函数
  • 目标：能够使用定时器函数重复执行代码
  • 开启定时器 let 变量名 = setInterval(函数, 间隔时间(毫秒))
  • 关闭定时器 clearInterval(变量名)

3.6 DOM 事件

• 时间监听 元素对象.addEventListener(‘事件类型’, ‘要执行的函数’)
• 事件类型
  • 鼠标事件 点击click 经过mouseenter 离开mouseleave
  • 焦点事件 获得focus 失去blur
  • 键盘事件 按下Keydown 抬起Keyup
  • 文本事件 用户输入input
• 获取事件对象 元素对象.addEventListener(‘事件类型’, function (e) {})
• 对象属性
  • type 当前事件的类型
  • clientX / clientY 光标相对于浏览器左上角的位置
  • offsetX / offsetY 光标相对于DOM元素左上角的位置
  • key 用户按下的键盘值
• 环境对象 this
• 事件捕获 DOM.addEventListener(事件类型, 事件处理函数, 是否使用捕获机制)
• 阻止冒泡 事件对象.stopPropagation()
• 阻止元素默认行为 e.preventDefault()
• 解绑事件 removeEventListener(事件类型, 事件处理函数, [获取捕获或者冒泡阶段])
• 事件委托 真正触发的元素 事件对象.target.tagName
• 其他事件
  • 页面加载事件
    • load 事件：给 window 加 window.addEventListener(“load”, function() {} )
    • DOMContentLoaded：给document 加 document.addEventListener(“DOMContentLoaded”, function() {} )
  • 元素滚动事件
    • 被卷去的头部或者左侧 scrollTop / scrollLeft
    • 检测页面滚动的头部距离 document.documentElement.scrollTop
    • 将内容滚动到指定的坐标 元素.scrollTo(x, y)
  • 页面尺寸事件
    • 窗口尺寸改变时候触发事件 window.addEventListener(“resize”, function() {} )
    • 获取元素可见部分宽高（不含边框 margin 滚动条等） clientWidth / clientHeight
• 元素尺寸与位置
  • offsetLeft / offsetTop
  • element.getBoundingClientRect()

3.7 DOM节点和移动端滑动

• 日期对象
  • 实例化 new Date(“2020-12-31”)
  • 日期对象方法 getFullYear() / getMonth() / getDate() / getDay() / getHours() / getMinutes() / getSeconds()
  • 时间戳 date.getTime() / +new Date() / Date.now()
• 节点操作
  • DOM节点 元素节点 / 属性节点 / 文本节点
  • 查找节点
    • 父节点查找 子元素.parentNode
    • 子节点查找 childNodes / 父元素.children
    • 兄弟关系查找 nextElementSibling / previousElementSibling
  • 增加节点
    • document.createElement(”标签名“)
    • 父元素.appendChild(要插入的元素)
    • 父元素.insertBefore(要插入的元素, 哪个元素前面)
    • 元素.cloneNode(布尔值)
  • 删除节点 父元素.removeChild(要删除的元素)

3.8 BOM操作

• Window对象
  • BOM（浏览器对象模型）
  • 定时器-延时函数
    • setTimeout(回调函数, 等待毫秒数)
    • clearTimeout(清除延时函数)
  • JS执行机制
  • location对象
    • .href 获取完整的URL地址
    • .search 获取地址中携带的参数
    • .hash 获取地址中的啥希值
    • .reload 刷新当前页面
  • navigator对象 userAgent: 检测浏览器的版本及平台
  • history对象
• 本地存储
  • localStorage
    • 存储数据 localStorage.setItem(key, value)
    • 获取数据 localStorage.getItem(key)
    • 删除数据 localStorage.removeItem(key)
  • sessionStorage
  • 存储复杂类型数据
    • 存储数据 JSON.stringify()
    • 解析数据 JSON.parse()
• 正则表达式
  • 定义 const 变量名 = /正则表达式/
  • 判断是否有符合规则的字符串 regObj.test(被检测的字符串)
  • 检索（查找）符合规则的字符串 regObj.exec(被检测的字符串)
  • 元字符 [a-z] 等价于 abcdefg…xyz
    • 边界符 ^ 以谁开头 $ 以谁结尾
    • 量词 *零次或多次 +一次或多次 ?零次或一次 {n}n次 {n,}n次或更多 {n,m}n到m次
    • 字符类 [-]表示一个范围 [^]匹配此外字符 [.]匹配任意单个字符
    • 预定义类 \d \D \w \W \s \S
  • 修饰符
    • /正则表达式/修饰符 （i 忽略大小写 g 匹配所有结果）
    • 字符串.replace(/正则表达式/, “替换的文本”)

3.9 作用域、解构和箭头函数

• 作用域
  • 局部作用域
  • 全局作用域
  • 作用域链
  • JS垃圾回收机制 引用计数 / 标记清除
  • 闭包 = 内层函数 + 外层函数变量
  • 变量提升
• 函数进阶 函数提升 / 函数参数 动态参数 argument 剩余参数 …other / 箭头函数
• 解构赋值 数组解构 / 对象解构
• 深入对象 构造函数 / 实例成员 / 静态成员
• 内置构造函数 Object / Array / String / Number