前端课程笔记

本文将持续更新至课程结束

---

1. 前端基础

1. B/S
   只需要服务器端

2. C/S
   开发客户端与服务端

3. URL
   [协议://] [用户名[:密码]@]服务器地址[:端口号][/资源路径]

4. URI（Uniform Resource Identifier，统一资源标识符）
   URI > URL

5. 路径

6. MIME

   1. 格式：一级类型/二级类型 例：image/png
7. 网络呈现过程
   1. URL 解析：检查 URL 格式是否正确
   2. DNS 解析：解析域名，获取资源所在服务器的 IP 地址
   3. TCP 连接：在 TCP 三次握手之后与服务器建立连接
   4. 发送请求：浏览器发送 HTTP 请求给服务器
   5. 处理请求并响应：服务器处理请求并返回 HTTP 报文
   6. 显示网页：浏览器解析返回的数据并渲染页面
   7. 断开连接：TCP 四次挥手，然后与服务器断开连接

---

HTML

1. 超文本标记语言
2. html 标记构成：开始标记、结束标记、属性、属性值、文本
3. html 网页组成：版本声明、html、head、body
4. 语法特点：
   1. 不需要编译，由浏览器解释执行
   2. 标签不区分大小写，建议小写
   3. 不可见字符被解释为空白符
   4. 标签要正确嵌套

常用标记

1. div
   . 独占一行，默认宽度窗口宽度，默认高度为内容高度
2. span
   . 共用一行
3. h1 ~ h6
   . 标题标记，默认为块级元素
4. p
   . 段落标记，

5. code：代码文本；sub：下标；sup：上标
6. 转义字符：
   1. 空格： 
   2. 与：&
   3. 小于：<
   4. 大于：>
   5. 版权：©
   6. 注册商标：®

列表

1. 有序列表
   ol>li
2. 无序列表
   ul>li
3. 定义列表
   dl>dt+dd
4. 嵌套列表
   ul>li>ul>li

图像

1. 1. src：图像的url
   2. alt：图像无法显示的替代文字
   3. title：鼠标悬停的提示文字
   4. width：图像的宽度
   5. height：图像的高度

超链接

1. 标记 a
2. 属性
   1. _blank 新窗口打开
   2. _self 所在窗口打开
3. 书签链接
   建立书签名
   链接书签名
   or
   为目标元素附加 id
   链接 id
4. top or bottom
5. 空白链接
   1. href=""
   2. href="#"
   3. href="javascript:void(0);"
6. 热区链接
   在一张图上链接多个超链接
7. email 链接
   联系我们
8. javascript 链接

表格

1. 作用
   1. 展示信息
   2. 排版（现在不用，主要用 div）
2. 常用标记
   1. table 表
   2. caption 标题
   3. tr (table row)
   4. td 表格
   5. th (table head)
3. 属性
   1. border 边框
   2. width 宽度
   3. height 高度
   4. cellpadding 内边距
   5. cellspacing 外边距
   6. align 水平 v-align 垂直 top bottom middle
4. 表格和单元格合并
   在 td 中合并
   1. rowspan 合并行
   2. colspan 合并列
5. 表格结构标记
   多行结构处理
   1. thead
   2. tbody
   3. tfoot

表单

1. 作用
   1. 收集用户数据
2. 标记
   form
3. 属性
   1. action 提交的地址，数据处理地址
   2. method 指定数据的提交方式
      1. get
      2. post
      3. 文件上传必须设置为 post 且 enctype 必须设置为 multipart/form-data
   3. enctype 编码
   4. name 配合 js
4. get 与 post 的区别
5. input 控件
   
   1. input 类型：
      1. 4 个框：
         1. 文本框：text
         2. 密码框：password
         3. 单选框：radio 设置相同 name 属性
         4. 多选框：checkbox 设置相同 name 属性
      2. 4 个按钮：
         1. 提交：submit
         2. 重置：reset
         3. 普通：button
         4. 图像提交：image
      3. 两个域：
         1. 文件域：file
         2. 隐藏域：hidden
   2. 属性：
6. 其他控件：
   1. button
   2. select
      1. 在标签中使用 option 标记来洞一列表项，用 optgroup 和 label 来对列表进行分组
      2. 属性：
         1. name：用于设置列表的名称，用于提交时设置参数的名称。
         2. multiple：用于设置列表是下拉列表（单选）还是滚动列表（可多选） ，一般写作 multiple="multiple"。
         3. size：用于设置列表项显示数量，取值为正整数，下拉列表默认为 1，滚动列表默认为 4。
         4. selected：用于设置当前列表项被默认选中，一般写作 selected="selected"。
         5. value：用于设置列表项的值，便于表单提交时传递所选值。
         6. optgroup：用于对列表项进行分组，方便分组查看。
         7. lable：用于设置分组的名称。
   3. textarea
7. filedset & label
   1. filedset：框
      1. legend 框的标题
   2. label：焦点
      用 for 关联相应 id

框架

1. 框架集：frameset 不能与 body 一起用
2. 框架：iframe

---

CSS

[重点]CSS 声明编写规则

1. 外链式
   
2. 导入式
   在 style 标记中使用 import 导入 css
3. 内联式
   
4. 行内式 style:""

---

选择器

1. 选择器
   1. 通配符选择器：*；常用于清除默认样式
   2. 元素选择器(标记选择器)：直接用 html 标签作为选择器
   3. id 选择器：附加 id 值<id="123"> #123
   4. class 选择器：附加 class 值，<class="123"> .123

背景

1. 背景颜色 backgroud-color
2. 背景图 background-image
3. 背景图处理 background-repeat
   1. 默认值为 repeat（沿着 x 轴和 y 轴重复），
   2. 其取值可以设置为
      1. repeat-x（只在 x 轴重复）
      2. repeat-y（只在 y 轴重复）
      3. no-repeat（不重复）
4. 背景图大小 background-size
5. 背景图固定 background-attachment

列表

1. list-style-type
   1. list-style-type 用于设置列表项的标记类型，默认值为 disc（实心圆）
      1. 其取值还有:
         1. circle（空心圆）
         2. square（实心方块）
         3. decimal（阿拉伯数字）
         4. low-roman（小写罗马数字）
         5. upper-roman（大写罗马数字）
         6. low-alpha（小写字母）
         7. upper-alpha（大写字母）
         8. none（无标记）等。
2. list-style-image
3. list-style-position
4. list-style

表格

1. border-collapse 边框合并
2. border-spacing
3. caption-side
4. empty-cells
5. table-layout

光标

1. cursor
   1. auto: 浏览器决定适当的光标。
   2. default: 标准箭头光标。
   3. pointer: 手型光标，表示链接。
   4. text: 文本光标，表示可编辑文本。
   5. move: 移动光标，表示可拖动。
   6. not-allowed: 禁止光标，表示不允许某种操作。
   7. url()：设置光标为自定义图像。

盒子

CSS 盒子模型（Box Model）包含的要素有

1. 元素内容（content）
2. 内边距（padding）
   1. 属性：
      1. padding-top 用于设值元素内容与边框顶部的距离
      2. padding-right 用于设值元素内容与边框右侧的距离
      3. padding-bottom 用于设值元素内容与边框底部的距离
      4. padding-left 用于设值元素内容与边框左侧的距离
      5. padding 复合属性，可以同时设置多个方向内边距
         1. 顺序：上右下左
3. 外边距（margin）
4. 边框（border）
   1. 属性：
      1. 颜色：
         1. border-top-color 用于设置元素顶部边框的颜色
         2. border-right-color 用于设置元素右侧边框的颜色
         3. border-bottom-color 用于设置元素底部边框的颜色
         4. border-left-color 用于设置元素左侧边框的颜色
         5. border-color 用于批量设置元素边框的颜色
      2. 宽度：
         1. border-top-width 用于设置元素顶部边框的宽度
         2. border-right-width 用于设置元素右侧边框的宽度
         3. border-bottom-width 用于设置元素底部边框的宽度
         4. border-left-width 用于设置元素左侧边框的宽度
         5. border-width 用于批量设置元素边框的宽度
      3. 样式：
         1. border-top-style 用于设置元素顶部边框的样式
         2. border-right-style 用于设置元素右侧边框的样式
         3. border-bottom-style 用于设置元素底部边框的样式
         4. border-left-style 用于设置元素左侧边框的样式
         5. border-style 用于批量设置元素边框的样式
      4. 复合属性:
         1. border-top
         2. border-right
         3. border-bottom
         4. border-left
         5. border-style

CSS 布局与显示

1. css 定位（position）子绝父相
   1. static：默认定位，元素出现在正常位置，此时元素的偏移属性、堆叠顺序属性无效。
   2. relative：相对定位，此时元素的偏移属性生效，偏移时根据其默认位置进行定位。
   3. absolute：绝对定位，此时元素脱离文档流，且元素的偏移属性生效，偏移时根据其具有特殊定位（relative、absolute、fixed）的父元素进行定位。若父元素没有特殊定位，则继续向根追溯；若到根元素都无特殊定位，则偏移时根据窗口进行定位。
   4. fixed：固定定位，此时元素脱离文档流，且元素的偏移属性生效，偏移时根据窗口进行定位。
2. 偏移属性：
   1. left：设置元素距离左侧的偏移量，数值越大，距左侧越远。允许设置值为负数，正数向右移动，负数向左移动。
   2. top：设置元素距离顶部的偏移量，数值越大，距顶部越远。允许设置值为负数，正数向下移动，负数向上移动。
   3. right：设置元素距离右侧的偏移量，数值越大，距右侧越远。允许设置值为负数，正数向左移动，负数向右移动。
   4. bottom：设置元素距离底部的偏移量，数值越大，距底部越远。允许设置值为负数，正数向上移动，负数向下移动。
3. 堆叠次序
   1. z-index: 必须脱离文档流生效；数字大的在上层
4. 浮动
   1. float
      1. 取值：
         1. none
         2. left
         3. right
   2. clear
      1. 取值：
         1. none
         2. left
         3. right
         4. both
5. 显示属性
   1. overflow
      1. visible
      2. hidden
      3. scroll
      4. auto
   2. visibility
      1. visible
      2. hidden
   3. display
      1. block
      2. inline
      3. inline-block
      4. none

css3 新特性

1. 圆角：border-radius
2. 图像边框：border-image
   1. border-image-source：设置边框图像的地址；URL
   2. border-image-slice：设置如何分割图像；长度/百分比
   3. border-image-width：设置图像边框的宽度；长度/百分比
   4. border-image-repeat：设置边框填充方式；stretch/repeat/round
   5. border-image：复合属性
3. 盒子阴影：
   1. box-shadow
      1. x：必须，表示水平方向偏移量，正数向右，负数向左。
      2. y：必须，表示垂直方向偏移量，正数向下，负数向上。
      3. blur：可选，表示阴影模糊半径，默认为 0，不模糊，数值越大，阴影越模糊。
      4. spread：可选，表示阴影传播范围，即额外增加的尺寸，负数表示减小尺寸。
      5. color：可选，表示阴影的颜色，默认为黑色。
      6. inset：可选，表示是否切换为内部阴影。
4. resize 调整尺寸
5. filter 滤镜
6. css 变形：
   1. 位移
      1. translate(x,y) 元素水平方向移动 x，垂直方向移动 y(可省略)
      2. translateX(x) 元素水平方向移动 x
      3. translateY(y) 元素垂直方向移动 y
   2. 旋转
      1. rotate(angle) 元素顺时针旋转 angle 度，角度单位为 deg 或弧度
      2. rotateX(angle) 元素沿着 x 轴旋转 angle 度
      3. rotateY(angle) 元素沿着 y 轴旋转 angle 度
      4. rotateZ(angle) 元素沿着 z 轴旋转 angle 度
   3. 缩放
      1. scale(x,y) 元素水平方向缩放比为 x，垂直方向缩放比为 y(可省略)
      2. scaleX(x) 元素水平方向缩放比为 x
      3. scaleY(y) 元素垂直方向缩放比为 y
   4. 倾斜
      1. skew(x,y) 元素沿 x 轴方向倾斜 x 度，沿 y 轴方向倾斜 y 度(可省略)
      2. skewX(x) 元素沿 x 轴方向倾斜 x 度
      3. skewY(y) 元素沿 y 轴方向倾斜 y 度
   5. 变换
      1. matrix(a,b,c,d,x,y) 使用矩阵对元素进行复合变换
7. 过渡属性
   1. transition-delay 设置过渡的延迟时间 time
   2. transition-duration 设置过渡的持续时间 time
   3. transition-timing-function 设置过渡的时间曲线 关键字/贝塞尔曲线
   4. transition-property 设置需要过渡的 CSS 属性 all/none/属性名称
   5. transition 复合属性，设置多个过渡属性 多个属性值
8. 动画属性
   1. @keyframes 定义动画关键帧 由动画名、时间点、CSS 样式组成的声明
   2. animation-name 引用@keyframes 定义的动画名 动画名/none
   3. animation-delay 设置动画的延迟时间 time
   4. animation-duration 设置动画的持续时间
   5. animation-timing-function 设置动画的时间曲线 关键字/贝塞尔曲线
   6. animation-iteration-count 设置动画的播放次数 数字/infinite
   7. animation-direction 设置动画的是否轮流反向播放。 none/alternate
   8. animation-play-state 设置动画的播放状态 paused/running
   9. animation 复合属性，设置多个动画属性 多个属性值