前端第二阶段

HTMLday1
1. WEB基础知识
  1. Web与Internet
    1. Internet简介
      1. Internet 是一个全球性的计算机网络，也成为"因特网"等
      2. 主要服务
      3. Telnet
      4. Email
      5. WWW
      6. BBS
      7. FTP
      8. 基本实现技术
      9. 分组交换原理
      10. TCP/IP协议簇
    2. Web简介
      1. 又称为万维网，即WWW
      2. 将各种类型的信息和服务无缝连接，并提供界面
      3. 万维网其实就是无数WEB文档的集合
    3. Web与Internet
      1. Web是Internet上的最流行的应用
      2. Internet为Web运行提供了网络环境
  2. Web的工作原理
    1. Web的工作原理
      1. 基于Internet的一个多媒体信息服务系统
      2. B/S模式
      3. 由Web服务器，浏览器，通信协议组成
    2. Web服务器
      1. 功能
      2. 存储WEB上的内容信息（图像，音视频等）
      3. 响应浏览器的请求，执行服务器端程序
      4. 具备一定安全性功能
      5. 产品
      6. TOMCAT
      7. IIS
      8. APACHE
      9. ……
    3. Web浏览器
      1. 功能
      2. 提交用户请求
      3. 作为HTML和JS的解释器
      4. 用图形化的方式显示HTML文档
      5. 产品
      6. Microsoft IE
      7. Mozilla Firefox
      8. Google Chrome
      9. Apple Safari
      10. Opera
  3. Web的相关技术
    1. 服务器端技术
      1. 运行于服务器端
      2. 提供了数据库访问能力
      3. 技术
      4. PHP（Hypertext Preprocessor）
      5. JSP（Java Server Page）
      6. ASP（Active Server Page）
    2. 客户端技术
      1. 运行与客户端，由浏览器解释运行
      2. 技术
      3. HTML（Hyper Text Markup Language）
      4. CSS（Cascading Style Sheets）
      5. JS（Javascript）
2. HTML快速入门
  1. HTML概述
    1. 什么是HTML
      1. Hyper Text Markup Language
      2. 超文本标记语言,用来设计网页
      3. 用该语言编写的文件，以.html 或 .htm为后缀
      4. 由浏览器解释运行
      5. 可以嵌入脚本语言编写的程序片段，如JS
  2. HTML基础语法
    1. 标记语法
      1. HTML用于描述功能的符号成为“标记”
      2. 标记使用时必须使用尖括号(<>)括起来
      3. 有封闭类型标记，也有非封闭类型的标记
      4. 双标记
      5. 必须成对出现
      6. <标记>内容</标记>
      7. 注意：封闭类型标记必须成对出现
      8. 单标记
      9. 非封闭类型，也叫做空标记
      10. <标记> 或 <标记/>
      11. <br>
      12. <hr>
      13. <img>
      14. <input>
      15. <meta>
    2. 元素
      1. 即标记，指尖括号及尖括号所包围的内容部分
      2. 元素可以包含文本内容和其他元素，也可以是空的
    3. 元素嵌套
      1. 元素可以相互嵌套形成更为复杂的语法
      2. <div> <p></p> </div>
      3. 注意：
      4. 嵌套顺序（完整嵌套）
      5. 代码缩进（保证代码可读性）
    4. 属性和值
      1. 属性是用来修饰元素的
      2. 语法
      3. <标记属性="值" 属性="值">
      4. ex:<p align="center" id="p1">
      5. 标准属性
      6. id
      7. 定义元素在页面中的唯一标识
      8. title
      9. 鼠标移入到元素上时提示的文本
      10. class
      11. 样式中，定义元素引用的类选择器
      12. style
      13. 样式中，定义元素的行内样式
    5. 注释
      1. 在源码中编写，但不会被浏览器所解释的内容，成为注释
      2. 可以将对代码的解释说明放在注释中
      3. 语法
      4. 
      5. 注意
      6. 注释不可以嵌套注释
      7. 注释不可以位于<>中
  3. 文档结构
    1. 文档结构
      1. 文档类型声明
      2. 指定HTML的版本和风格
      3. <!DOCTYPE html>
      4. HTML页面
      5. 表示HTML页面的开始与结束
      6. <html></html>
    2. HTML页面
      1. 页面头部
      2. 定义页面全局信息
      3. <head></head>
      4. 子元素
      5. 网页标题
      6. <title></title>
      7. 页面内容编码格式
      8. <meta charset="utf-8">
      9. 页面主体
      10. 网页显示主体内容
      11. <body></body>
      12. 属性
      13. 文本颜色
      14. text
      15. 背景颜色
      16. bgcolor
3. 文本
  1. 特殊字符
    1. 空格
      1.  
    2. <
      1. <
    3. >
      1. >
    4. ©
      1. ©
  2. 文本标记
    1. 文本样式
      1. 斜体：<i></i>
      2. 粗体：<b></b>
      3. 删除线：<s></s>
      4. 下划线：<u></u>
      5. 上标：<sup></sup>
      6. 下标：<sub></sub>
    2. 标题元素
      1. 标记
      2. <h1></h1>
      3. <h2></h2>
      4. <h3></h3>
      5. <h4></h4>
      6. <h5></h5>
      7. <h6></h6>
      8. 表现形式
      9. 改变字号（一级最大，六级最小）
      10. 加粗显示
      11. 上下有垂直的空白距离
      12. 独立成行
      13. 属性
      14. align
      15. 标题文本水平排列方式
      16. 取值
      17. left
      18. center
      19. right
    3. 段落元素
      1. 标记
      2. <p></p>
      3. 表现形式
      4. 默认文字大小
      5. 独立成行
      6. 上下垂直空白
      7. align：left / center / right;
      8. 注意
      9. p标记中不允许嵌套块级元素
    4. 换行元素
      1. 标记
      2. <br>
    5. 分隔线元素
      1. 标记
      2. <hr>
      3. 属性
      4. 尺寸：size
      5. 取值单位为 px（像素），可以省略
      6. 宽度：width
      7. 取值单位为px（像素）可以省略或百分比
      8. 颜色：color
      9. 水平对齐方式：align
      10. left
      11. center
      12. right
    6. 预格式化
      1. 标记
      2. <pre></pre>
      3. 特点
      4. 保留源文档中的回车和空格
    7. 分区元素
      1. 块分区元素
      2. 标记
      3. <div></div>
      4. 表现形式
      5. 独立成行
      6. 作用
      7. 页面布局
      8. 行内分区元素
      9. 标记
      10. <span></span>
      11. 表现形式
      12. 多个元素在一行内显示
      13. 作用
      14. 设置同一行文字内的不同格式
    8. 行内元素与块级元素
      1. 块级元素
      2. 元素会独占一行，即元素前后都会自动换行
      3. 主要用于网页布局
      4. display:block
      5. 行内元素
      6. 不会换行，多个元素会在一行内显示
      7. 包裹文本并处理样式
      8. display:inline;
4. 图像和链接
  1. URL
    1. 目录结构
      1. 目录就是Web站点中文件夹的名称
      2. Web站点的主目录，称为Web站点的根目录
    2. URL
      1. Uniform Resource Locator（统一资源定位器），用来标识网络中的任何资源
      2. 三种表现形式
      3. 绝对路径
      4. 定义：从文件所在的最高级目录下开始查找资源文件所经过的路径
      5. 网络资源
      6. 协议名
      7. http / https
      8. 主机名（IP地址/域名）
      9. www.baidu.com
      10. 目录路径
      11. img
      12. 资源名称
      13. bg_logo1.png
      14. 相对路径
      15. 定义：从当前文件位置处开始查找资源文件所经过的路径
      16. 同目录，直接用
      17. a.jpg
      18. 子目录，先进入
      19. img/a.jpg
      20. img/index/a.jpg
      21. 父目录，先返回
      22. ../a.jpg
      23. ../../a.jpg
      24. ../img/a.jpg
      25. 根相对路径
      26. 定义：从Web站点所在的根目录处开始查找
      27. 通过 / 表示根目录
  2. 图像
    1. 图像格式
      1. JPEG
      2. jpg
      3. jpeg
      4. GIF
      5. PNG
    2. 图像元素
      1. 标记：<img>
      2. 属性
      3. src
      4. 要显示的图像的路径（绝对/相对/根相对）
      5. width
      6. 图像宽度，如果width 和 height 只设置一个属性时，另外一个将等比缩放
      7. height
      8. 图像高度
  3. 链接
    1. 标记：<a>内容</a>
    2. 属性
      1. href
      2. 链接URL
      3. target
      4. 含义：目标，打开新网页的形式
      5. 取值
      6. _blank
      7. 在新标签页中打开
      8. _self
      9. 在自身页面中打开
      10. ...
      11. name
      12. 定义页面锚点
    3. 链接的表现形式
      1. 目标文档为下载资源
      2. <a href="XXX.rar / XXX.zip"></a>
      3. 电子邮件链接
      4. <a href="mailto:xxx@xxx.com"></a>
      5. 返回页面顶部的空链接
      6. <a href="#"></a>
      7. 链接到JavaScript
      8. <a href="javascript:js脚本"></a>
    4. 锚点
      1. 定义：锚点就是文档中某行的一个记号，通常用于链接到这个记号位置处
      2. 使用方式
      3. 定义锚点
      4. 通过 a 标记的 name 属性
      5. <a name="name1">锚点</a>
      6. 其他元素使用 id 属性
      7. <ANY id="anchor">
      8. 链接到锚点
      9. <a href="#锚点名称"></a>
      10. <a href="页面URL#锚点名称"></a>
5. 表格
  1. 表格的作用
    1. 按照一定的结构来显示数据
    2. 由单元格按照从左到右，从上到下的方式排列到一起
    3. 数据都保存在单元格中
    4. 表格可以显示数据，也可以设置页面的布局
  2. 使用表格
    1. 创建表格
      1. 创建表格
      2. <table></table>
      3. 创建表行
      4. <tr></tr>
      5. 创建单元格
      6. <td></td>
    2. 属性
      1. table
      2. width :设置表格的宽度
      3. height:设置表格的高度
      4. align:设置表格的对齐方式
      5. left
      6. center
      7. right
      8. border:设置表格边框宽度
      9. cellpadding:内边距（单元格边框与内容之间的距离）
      10. cellspacing:外边距（单元格之间的距离）
      11. bgcolor:设置表格的背景颜色
      12. tr
      13. align:该行内容水平对齐方式
      14. valign:该行内容的垂直对齐方式
      15. top
      16. middle
      17. bottom
      18. td/th
      19. align：内容水平对齐方式
      20. valign：内容垂直对齐方式
      21. width ：宽度
      22. height ：高度
      23. colspan:设置单元格跨列
      24. rowspan:设置单元格跨行
    3. 注意
      1. 传统的表格，每行的列数都是统一化的（每行的列数都相同）
      2. 一行中所有的单元格的高度都是相同的，默认下以最高的单元格为主
      3. 每行中相同列的宽度都是相同的，默认以最宽的单元格为主
    4. 表格标题
      1. <caption></caption>
      2. 注意：标签必须紧随在<table>之后，并只能有一个
  3. 表格的复杂应用
    1. 行分组
      1. 表头行分组：<thead></thead>
      2. 表主体行分组：<tbody></tbody>
      3. 注意：如果不显示指定行分组的话，那么默认都在tbody中
      4. 表尾行分组：<tfoot></tfoot>
    2. 不规则表格
      1. 跨列
      2. 从指定单元格位置处，横向向右合并几个单元格
      3. 被合并掉的单元格要删除
      4. colspan=值;
      5. 跨行
      6. 从指定单元格位置处，纵向向下合并截个单元格
      7. 被合并调的单元格要删除
      8. rowspan=值;
    3. 表格的嵌套
      1. 表格是允许被嵌套的，但嵌套的表格必须要放在td中
HTMLday2
1. 列表
  1. 列表的作用
    1. 列表是将一组具有相似特征或者具有先后顺序的内容按照从上到下的顺序排列在一起
    2. 组成
      1. 列表类型
      2. 有序列表<ol></ol>
      3. 无序列表<ul></ul>
      4. 列表项
      5. <li></li>
  2. 使用列表
    1. 有序列表
      1. 特点：按照一定的顺序将列表项标识出来
      2. 语法：<ol></ol>
      3. 只能包含列表项<li></li>
      4. 属性
      5. type
      6. 作用：有序列表的类型
      7. 取值
      8. 1
      9. a
      10. A
      11. i
      12. I
      13. start
      14. 作用：起始编号
      15. 取值：数字
    2. 无序列表
      1. 特点：用于列出页面上没有特定次序的一些内容
      2. 语法：<ul></ul>
      3. 只能包含列表项<li></li>
      4. 属性
      5. type
      6. 作用：指定无序列表的列表项标识
      7. 取值：
      8. disc，默认，实心圆
      9. circle，空心圆
      10. square，实心矩形
      11. none，不显示标识
    3. 列表的嵌套
      1. 列表中允许嵌套列表以形成更为复杂的结构
      2. 但被嵌套的列表必须要放在 <li></li>中
  3. 定义列表
    1. 定义：定义列表往往用于要给出一类事物的定义的情形
    2. 标记
      1. 定义定义列表
      2. <dl></dl>
      3. 定义定义列表中的术语
      4. <dt></dt>
      5. 定义对属于的解释
      6. <dd></dd>
    3. 使用场合：图文混排时使用
2. 结构标记
  1. 作用
    1. HTML5所提供的结构标记，专门用于表示常见的网页结构（即布局）
  2. 常见结构标记
    1. header元素
      1. 作用
      2. 用于定义文档的页眉即页面顶部信息
      3. 在页面上允许出现多次，可以作为任何部分的头部定义
      4. 标记
      5. <header></header>
    2. nav元素
      1. 作用
      2. 用来定义页面的导航链接部分
      3. 标记
      4. <nav></nav>
    3. section元素
      1. 作用
      2. 用于定义文档中的节，也可以表示文档中的一个具体的部分即主体内容
      3. 标记
      4. <section></section>
    4. article元素
      1. 作用
      2. 用于定义独立于文档的其他部分内容
      3. 如：论坛中的帖子，报纸的文章，博客条目或微博信息等
      4. 标记
      5. <article></article>
    5. footer元素
      1. 作用
      2. 用于定义某区域的脚注信息
      3. 一般靠近于某区域底部或页面底部内容
      4. 标记
      5. <footer></footer>
    6. aside
      1. 作用
      2. 定义页面的额外组成部分
      3. 一般多用于侧边栏和相关引用信息等
      4. 标记
      5. <aside></aside>
3. 表单
  1. 表单概述
    1. 表单的作用
      1. 用于显示、收集信息，并提交信息到服务器
      2. 两个基本部分
      3. 实现数据交互的可视化界面元素（前端）昀ꗗߐĀ퇐荁
      4. <form></form>
      5. 表单控件元素
      6. 提交后的表单处理（服务器端）
    2. 表单元素(form)
      1. 作用
      2. 收集用户信息并提交给服务器
      3. 里面包含与用户交互的表单控件元素
      4. 注意：表单元素在页面是不可见的，但不能省略
      5. 语法
      6. 标记
      7. <form></form>
      8. 属性
      9. action
      10. 作用
      11. 定义表单被提交时发生的动作，即要提交的服务器地址
      12. 取值
      13. 服务器端的处理程序地址，如*.jsp,*.php,*.do等
      14. 需要与服务器端开发人员沟通
      15. method
      16. 作用
      17. 表单数据提交的方式
      18. 取值
      19. get
      20. 明文提交，提交的数据是可以显示在地址栏上的
      21. 安全性较低
      22. 大小限制为2KB
      23. post
      24. 隐式提交，所提交的数据是不显示在网页上的
      25. 安全性较高
      26. 无大小限制
      27. ……
      28. enctype
      29. 作用：指定表单数据的编码方式
      30. 取值
      31. application/x-www-form-urlencoded
      32. multipart/form-data
      33. text/plain
  2. <input>元素
    1. 用户收集用户信息并提供不同的输入字段昀ꗗߐĀ灐菏
    2. 语法
      1. 标记
      2. <input>
      3. 主要属性
      4. type
      5. 根据不同的type属性值可以创建各种类型的输入字段
      6. text
      7. password
      8. submit
      9. reset
      10. button
      11. file
      12. hidden
      13. radio
      14. checkbox
      15. value
      16. 最终提交给服务器的值
      17. name
      18. 控件的名称，提供给服务器使用
      19. disabled
      20. 禁用控件，该属性没有值
    3. 表现形式
      1. 文本框与密码框
      2. 标记
      3. 文本框
      4. <input type="text">
      5. 密码框
      6. <inpuit type="password">
      7. 属性
      8. name
      9. 名称
      10. value
      11. 提交给服务器的值，可以是用户输入的数据
      12. maxlength
      13. 限制输入的字符数
      14. readonly
      15. 设置文本控件只读
      16. placeholder
      17. 占位符，默认显示在控件上的文本
      18. 单选按钮和复选框
      19. 标记
      20. 单选按钮
      21. <input type="radio">
      22. 复选框
      23. <input type="checkbox">
      24. 属性
      25. name
      26. 设置名称，并用于分组，一组单选按钮或复选框我名称必须相同
      27. value
      28. 控件的值
      29. checked
      30. 设置默认被选中
      31. 按钮
      32. 标记
      33. 提交按钮
      34. <input type="submit">
      35. 重置按钮
      36. <input type="reset">
      37. 普通按钮
      38. <input type="button">
      39. 属性
      40. name
      41. value
      42. 按钮上的文本
      43. 隐藏域和文件选择框
      44. 标记
      45. 隐藏域
      46. <input type="hidden">
      47. 文件选择框
      48. <input type="file">
      49. 属性
      50. 隐藏域
      51. name
      52. value
      53. 文件选择框
      54. name
      55. 注意
      56. 文件选择框
      57. form的method必须为post
      58. form的enctype必须为multipart/form-data昀ꗗߐĀⅰ胈
  3. textarea 元素
    1. 标记
      1. <textarea></textarea>
    2. 属性
      1. name
      2. 名称
      3. cols
      4. 指定文本区域的列数
      5. rows
      6. 指定文本区域的行数
      7. readonly
      8. 只读
  4. select 和 option 元素昀ꗗߐĀ菈
    1. 选项框
      1. 标记
      2. <select></select>
      3. 属性
      4. name
      5. 名称
      6. size
      7. 默认显示的选项数量，大于1，则为滚动列表
      8. multiple
      9. 设置多选，该属性没有值
    2. 选项
      1. 标记
      2. <option></option>
      3. 属性
      4. value
      5. 选项的值
      6. selected
      7. 预选中
  5. 其他元素
    1. label元素
      1. 作用
      2. 关联文本与表单控件
      3. 关联后，点击文本如同点击表单控件
      4. 语法
      5. 标记
      6. <label>文本</label>
      7. 属性
      8. for
      9. 与该元素相联系的控件ID值
    2. fieldset
      1. 作用
      2. 为控件分组
      3. 标记
      4. <fieldset></fieldset>
      5. <legend></legend>
    3. 浮动框架
      1. 作用
      2. 可以在一个浏览器窗口中同时显示多个页面文档
      3. 语法
      4. 标记
      5. <iframe>内容</iframe>
      6. 注意
      7. 内容，可以为普通的文本描述，当浏览器不支持<iframe>元素时，将显示该文本描述信息
      8. 属性
      9. src
      10. 浮动框架中的网页URL
      11. width
      12. 宽度
      13. height
      14. 高度
      15. frameborder
      16. 浮动框架边框
  6. 新表单元素
    1. 新的input类型
      1. 电子邮件：type="email"
      2. 搜索类型：type="search"
      3. URL类型：type="url"
      4. 电话号码类型：type="tel"
      5. 数字类型：type="number"昀ꗗߐĀ㿐蠓
      6. min
      7. max
      8. step
      9. 范围类型：type="range"
      10. min
      11. max
      12. value
      13. step
      14. 颜色类型：type="color"
      15. 日期类型：type="date"
      16. 周类型：type="week"
      17. 月份类型：type="month"
AJAXday1
1. URL
  1. URL的语法
    1. 协议
      1. SCHEME：方案，指定以哪种协议从服务器获取指定资源；方案名不区分大小写。常见方案：HTTP、HTTPS、FTP、MAILTO、RTSP、FILE、NEWS、TELNET等
    2. 主机／端口号
      1. HOST:主机名，资源所在服务器的IP地址或者域名（需要DNS转换为IP地址）
      2. PORT：端口号，每项服务在服务器上都对应一个监听端口号
      3. 常见协议指定了一些默认端口号
      4. FTP
      5. 21
      6. 文件上传、下载
      7. SSH
      8. 22
      9. 安全的远程登录
      10. TELNET
      11. 23
      12. 远程登录
      13. SMTP
      14. 25
      15. 邮件传输
      16. DNS
      17. 53
      18. 域名解析
      19. HTTP
      20. 80
      21. 超文本传输
      22. POP3
      23. 110
      24. 邮件接收
      25. HTTPS
      26. 443
      27. 加密传输的HTTPS
    3. 用户名／密码
      1. USER：用户名，某些方案访问资源时需要指定用户名
      2. PWD：密码，默认值为e-mail地址
    4. 路径
      1. PATH：路径，服务器上资源的本地名称，由一个斜杠（／）将其与前面的URL组件分隔开来。
    5. 参数
      1. PARAMS：参数，某些方案会使用参数来指定输入参数，每个参数都采用“名／值对”形式，一个URL中可以有多个这样的“名／值对”，使用分号（;）分隔
    6. 查询字符串
      1. QUERY：查询字符串，某些方案会使用查询字符串传递参数以激活应用程序。查询字符串内容没有通用格式，使用?与其它组件分隔
    7. 锚点（书签）
      1. FRAG：片段，也称为ANCHOR（锚点）、TAG（书签），指一个资源中某一部分的名字。引用对象时，不会讲frag字段传送给服务器，该字段是在客户端内部使用的，通过#与其它部分分隔。
    8. 相对URL
      1. 绝对URL
      2. 包含访问资源所需全部信息
      3. 相对URL
      4. URL本身包含的信息并不完整，必须参靠另外一个URL才能确定其完整内容信息。
2. HTTP协议
  1. 请求(Request)消息
    1. 请求起始行
      1. 请求方法
      2. GET
      3. 表示客户端想获取服务器上的资源(img/js/html/css/video)
      4. 无请求主体
      5. 靠地址栏传递数据给服务器
      6. POST
      7. 表示客户端想传递数据给服务器
      8. 请求主体
      9. PUT
      10. 表示客户端想(放置文件)到服务器(禁用)
      11. 请求主体
      12. DELETE
      13. 表示客户端想删除服务器上的指定文件(禁用)
      14. HEAD
      15. 表示客户端只想获取指定的响应头
      16. CONNECT
      17. 测试连接
      18. TRACE
      19. 追踪请示路径
      20. OPTIONS
      21. 选项，保留以后使用
      22. 请求URL
      23. 协议版本
      24. HTTP/1.1
    2. 请求头
      1. Host ：127.0.0.1
      2. 告诉服务器请求哪一个虚拟主机
      3. Connection:keep-alive
      4. 告诉服务器要持久连接
      5. User-Agent ：
      6. 告诉服务器自己的类型
      7. Accept-Language ：zh-CN
      8. 告诉服务器自己能接收的自然语言
      9. zh-CN : 简体中文
      10. Accept-Encoding ：gzip
      11. 告诉服务器自己可以接收的压缩类型
      12. Referer:http://127.0.0.1/05-PROJECT01/01-post.html
      13. 告诉服务器请求来自于哪个页面
    3. 请求主体
      1. Form Data
  2. 响应(Response)消息
    1. 响应起始行
      1. 协议版本号
      2. 响应状态码
      3. 1xx ：100-199
      4. 提示信息
      5. 2xx
      6. 成功响应
      7. 200 ：OK
      8. 3xx
      9. 需要客户端进行重定向
      10. 301 ：永久性重定向
      11. 302 ：临时重定向
      12. 304 ： Not Modified
      13. 4xx
      14. 客户端请求错误
      15. 404 ：Not Found
      16. 403 ： Forbidden
      17. 405 ： Method Not Allowed 请求方法不被允许
      18. 5xx
      19. 服务器运行错误
      20. 500 ：服务器内部错误
      21. 501 ：没有实现
      22. 原因短句
      23. 对响应状态码的简单解释
    2. 响应头
      1. Server
      2. 告诉客户端服务器的信息
      3. Last-Modified
      4. 告诉客户端网页最后一次修改的时间
      5. Content-Encoding
      6. 告诉客户端内容压缩方式
      7. Connect
      8. 告诉浏览器启动持久连接
      9. Content-Type
      10. 响应主体类型，告诉浏览器，响应数据的类型是什么
      11. text/plain
      12. 纯文本
      13. text/html
      14. 文本与网页
      15. text/css
      16. 样式
      17. application/javascript
      18. js 代码片段
      19. application/xml
      20. application/json
      21. images/jpeg
    3. 响应主体
      1. Response
3. HTTP优化
  1. HTTP性能优化
    1. HTTP连接过程
      1. （1）建立连接
      2. （2）处理请求
      3. （3）访问资源
      4. （4）构建响应
      5. （5）发送响应
      6. （6）记录日志
    2. HTTP连接性能优化
      1. （1）创建连接：努力减少连接创建次数---使用Keep-Alive避免重复连接
      2. （2）发送请求：尽力减少请求次数---合理设置缓存
      3. （3）等待响应：提高服务器端运行速度---提高数据运算及查询进度
      4. （4）接收响应：尽可能减少响应数据长度---启用压缩
  2. 安全的HTTP协议
    1. HTTPS协议
      1. 安全版本的HTTP
    2. 安全连接建立过程
      1. （1）客户端建立到服务器上的443端口上的连接
      2. （2）双方初始化SSL层，沟通加密参数，交换密钥
      3. （3）客户端发送请求消息，在SSL层加密；服务器接收到密文，在服SSL层解密，得到请求明文，对请求进行处理
      4. （4）服务器发送响应消息，在SSL层加密；客户端接收到密文，在SSL层进行解密，得到响应明文，解析响应内容
      5. （5）SSL关闭通知
      6. （6）TCP连接关闭
AJAXday2
1. 名词解释
  1. 同步
    1. 当一个任务未完成时，不能开启另一个任务
    2. 同步访问
      1. 在访问服务器时，客户端只能等待服务器的响应，不能做其他事情
  2. 异步
    1. 即便一个任务未完成，也不耽误另一个任务的执行
    2. 异步访问
      1. 在向服务器发送请求时，不耽误用户在网页上做其他的操作
2. AJAX
  1. AJAX原理
    1. 什么是AJAX
      1. Asynchronous Javascript And Xml（异步的Javascript 和 XML）
      2. 本质：使用JS提供的 XMLHttpRequest对象异步的向服务器发送请求并接收响应数据。AJAX中，服务器响应回来的是部分的数据而不是完整的页面，并且可以以无刷新的效果来更改页面中的局部内容
    2. AJAX工作原理
      1. Ajax的工作原理相当于在用户和服务器之间加了—个中间层，使用户操作与服务器响应异步化。这样把以前的一些服务器负担的工作转嫁到客户端，利于客户端闲置的处理能力来处理，减轻服务器和带宽的负担，从而达到节约ISP的空间及带宽租用成本的目的。
    3. 获取AJAX对象
      1. new XMLHttpRequest()
      2. new ActiveXObject("Microsoft.XMLHttp");
  2. AJAX对象属性和方法
    1. 异步对象的属性和方法
      1. abort()
      2. 取消请求
      3. getAllResponseHeaders()
      4. 获取响应的所有Http头
      5. getResponseHeader()
      6. 获取指定的Http头
      7. open()
      8. 创建请求
      9. xhr.open(method,url,isAsyn);
      10. method
      11. get
      12. post
      13. ...
      14. url
      15. isAsyn
      16. true : 异步
      17. false: 同步
      18. send(body)
      19. 发送请求
      20. body ：请求主体
      21. get提交方式此处为 null
      22. post提交方式则为请求的数据
      23. setRequestHeader()
      24. 指定请求的Http头
      25. onreadystatechange
      26. 发生任何状态变化时的事件控制对象
      27. 当 xhr 的readyState 发生改变时要自动激发的操作
      28. xhr.onreadystatechange = function(){ if(xhr.readyState==4&&xhr.status==200){ var resText = xhr.responseText; } }
      29. readyState
      30. 表示 xhr 的请求状态
      31. 值
      32. 0 ：请求尚未初始化
      33. 1 ：已打开连接，正发送请求
      34. 2 ：请求完成
      35. 3 ：正在接收服务器的响应
      36. 4 ：接收响应成功
      37. responseText
      38. 服务器返回的文本
      39. responseXML
      40. 服务器返回的xml，可以当做DOM处理
      41. status
      42. 服务器返回的http请求响应值常用的有：
      43. 200：表示请求成功
      44. 202：请求被接受但处理未完成
      45. 400：错误的请求
      46. 404：资源未找到
      47. 500：内部服务器错误
    2. onreadystatechange
      1. 绑定一个事件处理函数，该函数用来处理readystatechange事件
      2. 当Ajax对象的readyState的值发生了改变，比如，从0变成了1，就会产生readystatechange事件
    3. readyState
      1. 一共有五个值，分别是0，1，2，3，4，分别表示Ajax对象与服务器通信的状态，比如，当值为4时，表示Ajax对象已经获得了服务器返回的所有的数据
3. AJAX的使用
  1. 发送异步请求的步骤
    1. （1）获取Ajax对象：获取XMLHttpRequest对象实例
    2. （2）创建请求：调用XMLHttpRequest对象的open方法
    3. （3）设置回调函数：为Ajax对象的onreadystatechange事件设定响应函数
    4. （4）发送请求：调用Ajax对象的send方法
  2. 使用AJAX发送get请求
    1. （1）获取Ajax对象
    2. （2）创建请求-GET请求
    3. （3）回调事件处理函数
    4. （4）发送请求：调用Ajax对象的send方法
  3. 使用AJAX发送post请求
    1. xhr=getXhr();
    2. xhr.open('post','xx.php',true);
    3. xhr.onreadystatechange=handle_ajax;
    4. xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
    5. xhr.send('name=value&name=value...');
AJAXday3
1. XML语法
  1. XML概述
    1. 什么是XML
      1. XML是可扩展标记语言(eXtensible Markup Language)
      2. XML是一种标记语言，类似于HTML
      3. XML的设计宗旨是传输数据，而非现实数据
      4. XML的标签没有被预定义，需要自行定义
      5. XML是W3C的推荐标准
  2. 基本语法
    1. XML声明
      1. XML声明必须为<?xml开头，以?>结束
      2. 声明必须从文档的0行0列位置开始
      3. 声明只有三个属性
      4. version
      5. 指定XML文档版本。必须属性，因为我们不会选择1.1，只会选择1.0
      6. encoding
      7. 指定当前文档的编码。可选属性，默认值是utf-8
    2. XML语法
      1. XML都是由标签组成，但是所有的XML元素必须都有关闭标签。
      2. XML标签对大小写敏感，必须使用相同大小写来编写和关闭标签
      3. XML必须正确嵌套
      4. XML必须要有根元素
      5. XML文档必须有一个元素是其他元素的父元素
      6. XML的属性值必须加引号
    3. 元素
      1. XML元素指的是从（且包括）开始标签直到（且包括）结束标签的部分。
      2. 元素可以包含其他元素、文本等。元素可以拥有属性
    4. 属性
      1. XML元素可以在开始标签中包含属性，类似HTML
      2. 属性提供关于元素的额外（附加）信息，或用于修饰元素
      3. 属性值必须用引号引起来，单双引号均可使用
2. XML解析
  1. JavaScript中的XML
    1. XML DOM对象
    2. XML DOM对象的支持
      1. XML DOM定义了访问和操作XML文档的标准方法
      2. DOM把XML文档作为树结构来查看。能够通过DOM树来访问所有元素。
    3. 加载并解析XML字符串
  2. AJAX返回并解析XML
    1. 使用XHR发送XML字符串
    2. 使用XHR接收XML字符串
3. JSON
  1. JSON概述
    1. JSON概述
      1. JSON：JavaScript Object Notation，javascript对象表示法
      2. 轻量级的文本数据交换格式
      3. 广泛使用于存储和交换文本数据领域，作用与XML类似，但比XML更简洁、更快、更容易解析
    2. JSON语法规则
      1. 数据在（属性：值）中
      2. 数据由逗号分隔
      3. 花括号保存对象
      4. 方括号保存数组
  2. 使用JSON
    1. JSON对象
      1. JSON字符串可以描述一个对象，具体语法为
      2. 书写在花括号中
      3. 可以包含任意多个使用逗号分隔的“名称／值”对；
      4. “名称“必须使用双引号括起来；值若是字符串也必须使用双引号括起来。
    2. JSON数组
      1. JSON字符串还可以描述一个数组，具体语法为：
      2. 书写在方括号中；
      3. 其中可以包含多个值或对象；
    3. JSON文档与对象的转换
      1. JSON.parse(string)
      2. 解析JSON字符串得到JavaScript对象
Project1
1. 学子商城用户模块实战-1
Project2
1. 学子商城用户模块实战-2
CSS3Basic1
1. CSS概述
  1. 什么是CSS
    1. Cascading Style Sheets
    2. 层叠样式表，级联样式表，样式表
    3. 用于HTML文档中元素的样式定义
    4. 实现了内容与表现分离
    5. 提高代码的可重用性和可维护性
  2. CSS与HTML之间的关系
    1. HTML用于构建网页的结构
    2. CSS用于构建HTML元素的样式
  3. CSS与HTML之间的使用原则
    1. W3C建议尽量使用CSS样式取代HTML属性
    2. 如果为HTML所特有属性，则使用HTML属性
2. CSS语法
  1. CSS样式表的使用方式
    1. 内联方式
      1. 将样式定义在元素的style属性里
      2. 语法
      3. <ANY style="样式声明;样式声明;">
      4. 样式声明
      5. 属性名:属性值
      6. 特点
      7. 只针对一个元素有效
      8. 不通用，无法提高可重用性和可维护性
      9. <p style="color:red;backgrond-color:yellow;"></p>
    2. 内部样式表
      1. 将样式定义在页面<style></style>中
      2. <head> <style></style> </head>
      3. <style></style>中允许包含若干样式规则昀ꗗߐĀ맀综
      4. 样式规则
      5. 选择器
      6. 规范页面中哪些元素能够使用定义好的样式
      7. 样式声明
      8. 属性:值
      9. 特点
      10. 在一个页面中能够提升可重用性和可维护性
    3. 外部样式表
      1. 允许将样式定义在外部的的样式表文件中
      2. 步骤
      3. 创建一个单独的样式表文件用来保存样式规则
      4. 纯文本文件，文件后缀为.css
      5. 该文件中只能包含样式规则
      6. 新式规则由选择器和样式声明组成
      7. 在需要使用该样式表文件的页面上，使用<link>元素链接外部样式表文件
      8. <link rel="stylesheet" type="text/css" href="css样式表URL">
  2. CSS样式表特征
    1. 继承性
      1. 大多数CSS的样式属性是可以被继承的
    2. 层叠性
      1. 可以为一个元素定义多个样式规则
      2. 样式属性不冲突时，多个样式表中的样式可以层叠为一个
    3. 优先级
      1. 样式定义冲突时，会按照不同使用方式的优先级来应用样式
      2. 浏览器缺省设置
      3. 外部样式表和内部样式表
      4. 就近原则
      5. 内联样式
    4. !important
      1. 可以显示的调整样式规则的优先级
      2. 语法
      3. 属性：值 !important;
  3. CSS基础选择器
    1. 通用选择器
      1. 作用
      2. 用于匹配页面上的每一个元素
      3. 可用于页面上所有元素的元素样式定义
      4. 语法
      5. *{ }
      6. *{ color:#666; font-size:12px; }
      7. body{ color:#666; font-size:12px; }
    2. 元素选择器
      1. 作用
      2. 用于匹配页面上指定标记的元素
      3. 通常用于设定某一种元素的默认样式
      4. 语法
      5. 元素名称{ }
    3. 类选择器
      1. 作用
      2. 可以由任意元素的class属性进行引用的选择器
      3. 在CSS中，类选择器是最灵活的选择器，应用也非常广
      4. 语法
      5. 定义
      6. .className{}
      7. .是定义类选择器的语法规范，并不是类选择器的名称
      8. 命名规范
      9. 由字母，数字，下划线，-
      10. 不能以数字开始
      11. 引用
      12. <ANY class="className">
      13. 多类选择器的引用
      14. 允许一个元素引用多个类选择器
      15. <ANY class="name1 name2 name3">
      16. 分类选择器的定义
      17. 作用
      18. 将类选择器和元素选择器结合起来使用
      19. 从而实现对某种元素中不同样式的细分控制
      20. 语法
      21. 元素选择器.类选择器{}
      22. div.redColor{ }
      23. p.important{ }
    4. ID选择器
      1. 作用
      2. 与页面指定ID值的元素进行匹配（私人定制）
      3. 语法
      4. #idValue{}
      5. #仅仅表示该选择器是ID选择器而已
    5. 群组选择器
      1. 作用
      2. 选择器声明有是以逗号隔开的选择器列表
      3. 可以将一部分样式相同的选择器放在一起定义
      4. 语法
      5. 选择器1，选择器2，选择器3{ }
      6. div,#main,.top{ color:red;}
    6. 后代选择器
      1. 作用
      2. 通过元素间的后代关系匹配元素
      3. 后代关系：出现在某元素的子元素（不限制层级）
      4. 语法
      5. 选择器1 选择器2{ }
    7. 子代选择器
      1. 作用
      2. 通过元素的子代关系匹配元素
      3. 子代关系：只存在一层子级关系的子元素昀ꗗߐĀ衪
      4. 语法
      5. 选择器1>选择器2{ }
    8. 伪类选择器
      1. 作用
      2. 用于匹配元素不同状态的选择器
      3. 链接伪类
      4. :link
      5. 适用于尚未访问的链接
      6. :visited
      7. 适用于访问过的链接
      8. 动态伪类
      9. :hover
      10. 适用于鼠标悬停在HTML元素时
      11. :active
      12. 适用于HTML元素被激活时
      13. :focus
      14. 适用于HTML元素获取焦点时
      15. ……
    9. 选择器优先级
      1. 权值
      2. 元素选择器
      3. 1
      4. 类选择器
      5. 10
      6. 伪类选择器
      7. 10
      8. ID选择器
      9. 100
      10. 内联样式
      11. 1000
      12. 选择器的权值加到一起，大的优先;如果权值相同，后定义的优先
      13. #main div.top a:hover{ /*权值：*/ }
3. 尺寸与边框
  1. 单位
    1. 尺寸
      1. %
      2. in
      3. cm
      4. mm
      5. pt
      6. px
      7. em
    2. 颜色（取值）
      1. rgb(r,g,b)
      2. rgba(r,g,b,a)
      3. a : alpha , 透明度 0-1 之间的小数
      4. #rrggbb
      5. #rgb
      6. 颜色的英文表示法
  2. 尺寸
    1. 尺寸
      1. 作用
      2. 用于设置元素的宽度和高度
      3. 单位一般为像素或百分比
      4. 宽度
      5. width
      6. min-width
      7. max-width
      8. 高度
      9. height
      10. min-height
      11. max-height
      12. 允许设置尺寸的元素
      13. 块级元素
      14. 行内块元素（radio,checkbox除外）
      15. 具备width和height属性的HTML元素
      16. img
      17. table
      18. 溢出
      19. 当使用尺寸属性限制元素的大小时，如果内容所需的空间大于元素本身的话，就会导致内容溢出
      20. 属性
      21. overflow
      22. visible
      23. hidden
      24. scroll
      25. auto
      26. overflow-x
      27. overflow-y
  3. 边框
    1. 边框
      1. 简写方式
      2. border:width style color;
      3. width:边框宽度
      4. style:边框样式
      5. solid
      6. dotted
      7. dashed
      8. color:颜色
      9. 可取值为 transparent
      10. border:none; 或 border:0;
      11. 单边定义
      12. border-方向:width style color
      13. 方向
      14. top
      15. right
      16. bottom
      17. left
      18. 单属性定义
      19. border-属性:值;
      20. 属性
      21. width
      22. style
      23. color
      24. 单边单属性定义
      25. border-方向-属性:值；
      26. 方向
      27. top
      28. right
      29. bottom
      30. left
      31. 属性
      32. width
      33. style
      34. color
      35. ex
      36. border-top-color : 上边框颜色
      37. border-bottom-style : 下边框样式
      38. border-left-color:左边框颜色
      39. 边框的组成
      40. div{ width:0px; height:0px; border:5px solid transparent; border-top-color:red; }
    2. 边框倒角
      1. 语法
      2. 属性
      3. border-radius
      4. 取值
      5. 绝对值
      6. 百分比
      7. 单独定义
      8. border-top-left-radius
      9. border-top-right-radius
      10. border-bottom-left-radius
      11. border-bottom-right-radius
    3. 边框阴影
      1. 属性
      2. box-shadow
      3. h-shadow
      4. 必需，为水平阴影的位置
      5. v-shadow
      6. 必需，为垂直阴影的位置
      7. blur
      8. 可选，模糊距离
      9. spread
      10. 可选，阴影的尺寸
      11. color
      12. 可选，阴影的颜色
      13. inset
      14. 将外部阴影(outset)改为内部阴影
    4. 边框轮廓
      1. 轮廓是绘制于元素周围的一条线，位于边框的外围
      2. 属性
      3. outline:width style color
      4. outline-width
      5. 轮廓的宽度
      6. outline-style
      7. 轮廓的样式
      8. outline-color
      9. 轮廓的颜色
      10. 取消轮廓
      11. outline:none; / outline:0;
CSS3Basic2
1. 框模型
  1. 什么是框模型
    1. 页面元素皆为框
    2. Box Model，定义了元素框处理元素内容、内边距、外边距、边框的方式
    3. width 和 height 只负责定义内容区域的尺寸
    4. 增加了外边距、内边距、边框，内容区域的尺寸不会发生改变，但会影响元素框的总尺寸
    5. 元素总宽度=左右外边距+左右边框+左右内边距+width
    6. 元素总高度=上下外边距+上下边框+上下内边距+height
  2. 外边距
    1. 什么是外边距
      1. 围绕在元素边框周围的空白区域
      2. 默认不能被其他元素所占据
      3. 外边距是透明的
    2. 属性
      1. margin
      2. 单位
      3. px
      4. %
      5. auto
      6. 设置非行内元素的水平对齐方式
      7. auto对上下外边距不起作用
      8. 元素要设置宽度
      9. 负值
      10. 将元素向着反方向移动
      11. 数量
      12. value
      13. 四个方向外边距
      14. v1 v2
      15. 上下左右
      16. v1 v2 v3
      17. 上左右下
      18. v1 v2 v3 v4
      19. 上右下左
      20. 单边设置
      21. margin-left
      22. margin-right
      23. margin-top
      24. margin-bottom
    3. 具备默认外边距的元素
      1. body
      2. h1~h6
      3. p
      4. ul,ol
      5. dl,dd
      6. pre
      7. 可以通过 CSS 重写的方式重写外边距
      8. p,h1,h2,h3,h4,h5,h6,body,ul,ol,dl,dd,pre{ margin:0; }
    4. 外边距的特殊情况
      1. 外边距合并
      2. 两个垂直外边距相遇时，他们将合并为一个，值以大者为主
      3. 外边距溢出
      4. 特殊情况下，给子元素设置外边距的时候，效果会作用在父元素上
      5. 父元素无边框
      6. 设置给第一个(最后一个)子元素时
      7. 解决方案
      8. 父元素增加边框
      9. 使用父元素的上内边距来取代子元素的上外边距
      10. 在第一个子元素位置处增加空 table
      11. 行内元素以及行内块元素
      12. 行内
      13. 只左右有效，上下无效
      14. 行内块
      15. 左右正常，上下连同该行元素都会跟着改变
  3. 内边距
    1. 什么是内边距
      1. 内容与边框之间的距离
      2. 会扩大元素边框所占用的区域
    2. 属性
      1. padding
      2. 单位
      3. px
      4. %
      5. 数量
      6. 同上
      7. padding-方向:值
    3. 特殊效果
      1. 只影响到元素本身，并不会影响到其他元素
  4. box-sizing
    1. 作用
      1. 重新指定框模型的计算模式
    2. 取值
      1. content-box
      2. 默认值
      3. border以及padding是在width和height基础之上额外计算的
      4. border-box
      5. 元素的padding和border会计算在width 和 height之内
2. 背景
  1. 背景是从边框位置开始绘制
  2. 背景颜色
    1. background-color
  3. 背景图像
    1. background-image
      1. url()
  4. 背景重复
    1. background-repeat
      1. repeat 默认值
      2. no-repeat 不重复
      3. repeat-x 横向重复
      4. repeat-y 纵向重复
  5. 背景图片尺寸
    1. background-size
      1. value1 value2
      2. value1% value2%
      3. cover
      4. 覆盖，背景图显示不完整
      5. containt
      6. 包含，背景图显示完整，覆盖不一定全面
  6. 背景图像固定
    1. background-attachment
      1. scroll
      2. fixed : 固定
  7. 背景图像定位
    1. background-position
      1. x y
      2. x : 水平偏移距离
      3. + ：右偏移
      4. - ：左偏移
      5. y:垂直偏移距离
      6. + ：下偏移
      7. - ：上偏移
      8. x% y%
      9. left、center、right、top、bottom
  8. 综合属性
    1. background：color url() repeat attachment position;
3. 渐变
  1. 什么是渐变
    1. 多种颜色平缓变化的一个效果
  2. 渐变的分类
    1. 线性渐变
    2. 径向渐变
    3. 重复渐变
  3. 语法
    1. 线性渐变
      1. background-image:linea-gradient(angle,color-point,....);
      2. angle
      3. 关键字
      4. to top
      5. to right
      6. to bottom
      7. to left
      8. 角度
      9. 0deg ~ 360deg
      10. color-point
      11. red 0px
      12. green 0%
      13. blue 50%
      14. background:linear-gradient(to top,#0aa1ed,#e4393c);
CSS3Basic3
1. 文本格式化
  1. 字体属性
    1. 字体系列 font-family
      1. 字体1,字体2
    2. 字体大小 font-size
      1. px 或 pt 或 em
    3. 字体加粗 font-weight
      1. normal
      2. bold
      3. value
    4. 字体样式 font-style
      1. normal
      2. italic
    5. 小型大写字母 font-variant
      1. normal
      2. small-caps
    6. 字体属性 font
      1. style variant weight size family;
  2. 文本属性
    1. 文本颜色 color
    2. 文本排列 text-align
      1. left
      2. center
      3. right
      4. justify
      5. 两端对齐
    3. 文字修饰 text-decoration
      1. none
      2. underline
      3. line-through
      4. overline
    4. 行高 line-height
      1. 一行数据所占的高度，如果行高大于文字本身高度，那么该行文本将在行高的范围内垂直居中
      2. 使用场合
      3. 一行文本垂直居中
      4. 将行高与元素的高度设置为一致
      5. 多行文本的行间距
      6. 取值
      7. 指定数值
      8. 无单位的数字表示当前字体大小的倍数
      9. font:12px/24px "微软雅黑";
      10. 文字大小为12px，行高为24px，字体是微软雅黑
    5. 首行文本缩进 text-indent
      1. px
    6. 文本阴影 text-shadow
      1. h-shadow v-shadow blur color
2. 表格
  1. 常用属性
    1. padding
    2. width，height
    3. 文本格式化
      1. 字体
      2. 文本
    4. background
    5. border
    6. vertical-align
      1. top
      2. middle
      3. bottom
  2. 特有属性
    1. 边框合并 border-collapse
      1. 默认值：separate
      2. collapse
    2. 边框边距 border-spacing
      1. 前提：必须为分离边框模式即 border-collapse：separate
      2. 1个值
      3. 水平和垂直间距相同
      4. 2个值
      5. 第一个值：水平间距
      6. 第二个值：垂直间距
    3. 标题位置 caption-side
      1. top
      2. bottom
    4. 显示规则 table-layout
      1. auto
      2. 自动表格布局
      3. 单元格大小会适应内容大小
      4. 复杂表格时加载速度较慢
      5. 适用于不确定每列大小时使用
      6. 传统表格体现方式
      7. fixed
      8. 固定表格布局
      9. 列宽度取决于table和td中设置的宽度，与内容无关
      10. 加速显示表格
      11. 算法较快，但是不灵活
3. 浮动
  1. 定位概述
    1. 所谓定位指的就是元素出现在网页的位置昀ꗗߐĀ㟰薮
  2. 定位的分类
    1. 普通流定位
    2. 浮动定位
    3. 相对定位
    4. 绝对定位
    5. 固定定位
  3. 普通流定位
    1. 普通流定位，又称为文档流定位，是页面元素的默认定位方式
    2. 页面中的块级元素：从上到下的方式一个接一个的排列
    3. 页面中的行内元素：从左到右的方式一个接一个的排列
  4. 浮动定位
    1. 概述（特征）
      1. 将元素排除在文档流之外即脱离文档流，元素不再占据页面空间（但依然会显示），但其他未浮动元素要目前补位
      2. 元素只会在当前行浮动
      3. 浮动元素会停靠在父元素的左边或右边，或平级的其他已浮动元素的边缘上
      4. 浮动元素依然会在包含框内
      5. 浮动元素能够让多个块级元素在一行内显示
    2. 属性
      1. float
      2. none
      3. 默认值，没有任何的浮动效果
      4. left
      5. 左浮动，让该元素停靠在父元素的左边，或停靠在左侧已有的浮动元素边缘上
      6. right
      7. 右浮动，让该元素停靠在父元素的右边，或停靠在右侧已有的浮动元素边缘上
    3. 浮动带来的特殊效果
      1. 一行内，显示不下所有的已浮动元素时，最后一个将换行（有可能被卡住）
      2. 元素一旦浮动起来之后，那么宽度将变成自适应(宽度由内容决定)
      3. 元素一旦浮动起来之后，那么就将变成块级元素,尤其对行内元素，影响最大
      4. 文本，行内元素，行内块元素时采用环绕的方式来排列的，是不会被浮动元素压在底下的，会巧妙的避开浮动元素
    4. 清除浮动
      1. 作用
      2. 清除当前元素前面元素浮动所带来的影响
      3. 语法
      4. 属性
      5. clear
      6. 取值
      7. none
      8. 默认值，不做任何清除浮动的操作
      9. left
      10. 清除前面元素左浮动带来的影响
      11. right
      12. 清除前面元素右浮动带来的影响
      13. both
      14. 清除前面元素所有浮动带来的影响
    5. 浮动元素对父元素的影响
      1. 影响
      2. 由于浮动元素会脱离文档流，所以导致不占据页面空间，所以会对父元素高度带来一定影响。如果一个元素中包含的元素全部是浮动元素，那么该元素高度将变成0
      3. 解决方案
      4. 直接设置父元素的高度
      5. 设置父元素浮动
      6. 为父元素设置overflow属性
      7. hidden
      8. auto
      9. 父元素中，追加空子元素，并设置其clear属性为both
CSS3Basic4
1. 显示
  1. 显示方式
    1. 属性：display
      1. none
      2. 让生成的元素没有框
      3. 脱离文档流
      4. block
      5. 块级元素
      6. 独占一行
      7. 允许修改尺寸
      8. 正常处理垂直外边距
      9. inline
      10. 行内
      11. inline-block
      12. 行内块
      13. 位置与行内元素一样
      14. 允许修改宽和高
      15. table
      16. 独占一行
      17. 尺寸以内容为准
      18. ... ...
  2. 显示效果
    1. 显示/隐藏
      1. 属性：visibility
      2. visible ：可见的
      3. hidden ：隐藏的
      4. 面试：display:none 和 visiblity:hidden的区别
      5. display：none ；脱离文档流，所以不占页面空间
      6. visibility：hidden；还在文档流中，所以只是隐藏了，空间还占据
    2. 透明度
      1. 属性：opacity
      2. 0~1之间的数字(小数)
      3. 数字越小透明度越高
      4. opacity：0.1；若隐若现
    3. 垂直居中对齐
      1. 属性：vertical-align
      2. 行内块元素
      3. 单元格
      4. img
      5. 取值
      6. top
      7. middle
      8. bottom
      9. baseline
  3. 光标
    1. cursor
      1. default
      2. pointer
      3. crosshair
      4. text
      5. wait
      6. help
2. 列表
  1. 列表项标志
    1. list-style-type
      1. none
      2. disc
      3. ... ...
  2. 列表项图像
    1. list-style-image
      1. url(图像路径)
  3. 列表项位置
    1. list-style-position
      1. outside
      2. inside
  4. 列表属性
    1. list-style
      1. type url() position;
    2. 常用：list-style:none;
3. 定位
  1. 定位属性
    1. position
      1. static ：静态，默认
      2. relative ：相对定位
      3. absolute ：绝对定位
      4. fixed ：固定定位
      5. 作用：实现元素的特殊定位方式，relative，absolute，fixed 称之为 “已定位元素”
    2. 偏移属性
      1. top属性
      2. 上下移动元素
      3. + ：下移动
      4. - ：上移动
      5. bottom属性
      6. 上下移动
      7. + ：上移动
      8. - ：下移动
      9. left 属性
      10. 左右移动
      11. + ：右移动
      12. - ：左移动
      13. right 属性
      14. 左右移动
      15. + ：左移动
      16. - ：右移动
    3. z-index
      1. 堆叠顺序
  2. 相对定位
    1. what？
      1. 元素框会相对于它原来的位置偏移某个距离
    2. 属性 & 值
      1. position:relative;
      2. 配合偏移属性实现位置移动
      3. 测试：对一个已定位元素实现四个偏移属性值
    3. 使用场合
      1. 自身元素的位置微调
      2. 配合着绝对定位来使用
  3. 绝对定位
    1. what ？
      1. 脱离文档流-不占据页面空间
      2. 会相对于最近的已定位祖先元素去实现定位
      3. 如果没有已定位的祖先元素，那么就相对于最初的包含块-body
    2. 属性 & 值
      1. position:absolute;
    3. 注意
      1. 绝对定位的元素都将变成块级元素
      2. margin的处理，除了 auto外，其他数值均正常显示
      3. #d1{ position:absolute; top:0; bottom:0; left:0; right:0; margin:auto; }
      4. 可以调整堆叠顺序
  4. 堆叠顺序
    1. 属性：z-index
    2. 取值：数字
    3. 注意：只有在已定位元素中才能使用
  5. 固定定位
    1. what
      1. 将元素固定在页面的某个位置处
      2. 不会随着滚动条的滚动而发生位置的变化
      3. 脱离文档流，不占据页面空间
    2. 属性 & 值
      1. position:fixed
    3. 注意
      1. 脱离文档流
      2. 会变为块级元素
      3. 永远都是相对于body实现位置初始化
CSS3Core1
1. 复杂选择器
  1. 兄弟选择器
    1. 相邻兄弟选择器
      1. 选择器1+选择器2
    2. 通用兄弟选择器
      1. 选择器1~选择器2
  2. 属性选择器
    1. [attr]
      1. 匹配页面中具备attr属性的所有元素昀ꗗߐĀ剰潵
    2. [attr1][attr2]
      1. 匹配页面中既有attr1属性同时也具备attr2属性的元素
    3. elem[attr]
      1. 匹配页面中具备attr属性的elem元素
    4. [attr=value]
      1. 匹配页面中attr属性值为value的元素
  3. 伪类选择器
    1. 目标伪类
      1. :target
      2. 匹配活动的html 锚元素
    2. 结构伪类
      1. :first-child
      2. 匹配属于其父元素中的首个子元素
      3. :last-child
      4. 匹配属于其父元素中的最后一个子元素
      5. :nth-child(n)
      6. 匹配属于其父元素中的第n个子元素
      7. :empty
      8. 匹配每个为空的元素
      9. :only-child
      10. 匹配属于其父元素中的唯一子元素
    3. 否定伪类
      1. :not(selector)
      2. 将满足selelctor选择器的元素排除出去
  4. 伪元素选择器
    1. :first-letter或 ::first-letter
      1. 首字符
    2. :first-line 或 ::first-line
      1. 首行
    3. ::selection
      1. 被用户选取的部分
2. 内容生成
  1. 伪元素择器
    1. :before 或 ::before
      1. 匹配元素的内容区域之前
    2. :after 或 ::after
      1. 匹配元素的内容区域之后
  2. 属性：content
    1. 生成内容
      1. 字符串
      2. 图像:url()
  3. 解决问题
    1. 浮动元素
      1. .clear:after{ content:""; display:block; clear:both; }
    2. 外边距的溢出
      1. 选择器:before{ content:""; display:table; }
3. 弹性布局
  1. 弹性布局
    1. 指定某元素内子元素的布局方式，为布局提供最大的灵活性
    2. 概念
      1. 弹性布局的容器
      2. 弹性布局的项目
      3. 主轴(Main Axsis)
      4. 决定项目们排列方向的一根轴
      5. 交叉轴（Cross Axsis）
      6. 与主轴相交叉轴的一根轴
    3. 语法
      1. display
      2. flex
      3. inline-flex
    4. 注意
      1. 元素设置为flex容器后，子元素的float,clear,vertical-align属性会失效
      2. 元素设置为flex容器后，子元素的尺寸允许被修改
      3. 容器text-align也会失效
  2. 容器属性
    1. flex-direction
      1. 作用
      2. 决定在主轴的排列方向
      3. 取值
      4. row
      5. 主轴为水平方向，起点在左端，默认值
      6. row-reverse
      7. 主轴为水平方向，起点在右端
      8. column
      9. 主轴为y轴，起点在上端
      10. column-reverse
      11. 主轴为y轴，起点在底端
    2. flex-wrap
      1. 作用
      2. 如果一条轴线排不下，如何换行
      3. 取值
      4. nowrap
      5. 默认值，不换行
      6. wrap
      7. 换行，第一行在上方
      8. wrap-reverse
      9. 换行，第一行在下方
    3. flex-flow
      1. 作用
      2. flex-direction 和 flex-wrap的缩写
      3. 取值
      4. direction wrap
    4. justify-content
      1. 作用
      2. 定义了项目在主轴上的对齐方式
      3. 取值
      4. flex-start
      5. 主轴的起点对齐
      6. flex-end
      7. 主轴的终点对齐
      8. center
      9. 居中对齐
      10. space-between
      11. 两端对齐，项目之间的间隔都相等
      12. space-around
      13. 每个项目两侧的间隔相等
    5. align-items
      1. 作用
      2. 定义项目在交叉轴上如何对齐（一行项目）
      3. 取值
      4. flex-start
      5. 在交叉轴的起点对齐
      6. flex-end
      7. 在交叉轴的终点对齐
      8. center
      9. 在交叉轴的中间对齐
      10. baseline
      11. 在项目的第一行文字的基线对齐
      12. stretch
      13. 默认值，如果项目未设置高度或auto，将站门整个容器的高度
  3. 项目属性
    1. order
      1. 项目排序
      2. 取值：数字，数字越大越靠后
    2. flex-grow
      1. 定义项目的放大比例，默认为0，即如果有剩余空间，也不放大
      2. 取值：整数数字
    3. flex-shrink
      1. 定义项目的缩小比例，默认为1
    4. align-self
      1. 定义项目在交叉轴上的对齐方式
      2. 取值
      3. flex-start
      4. flex-end
      5. center
      6. stretch
      7. baseline
      8. auto
4. CSS Hack
  1. CSS类内部Hack
    1. + ：IE7，6
    2. - : IE 6
    3. \0 : IE 8，9，10
    4. \9\0：IE9 ,10
  2. 选择器Hack
    1. *p{ } //IE6
  3. 头部引用Hack
    1. 
      1. 条件
      2. 省略
      3. 判断是否为指定版本或是否为 IE浏览器
      4. gt
      5. 判断是否大于条件版本浏览器(不包含)
      6. gte
      7. lt
      8. lte
      9. !
CSS3Core2
1. 转换
  1. 介绍
    1. 改变元素在页面中的位置，尺寸，角度，形状
    2. 2D转换和 3D转换
    3. 属性
      1. 转换属性
      2. transform
      3. none
      4. transform-functions
      5. 多个转换函数之间用空格隔开
      6. 转换原点
      7. transform-origin
      8. v1 v2
      9. x轴 y轴
      10. v1 v2 v3
      11. x y z
      12. 单位
      13. px
      14. %
      15. 关键字
  2. 2D转换
    1. 位移
      1. 函数：
      2. translate(x)
      3. + : 向右
      4. - ：向左
      5. translate(x,y)
      6. translateX(x)
      7. translateY(y)
      8. + ：向下
      9. - ：向上
    2. 缩放
      1. 函数
      2. scale(value)
      3. 只给一个值，相当于 x轴和y轴的缩放是相等的
      4. scale(x,y)
      5. scaleX(x);
      6. scaleY(y)
      7. 取值
      8. 小于1 大于 0
      9. 缩小
      10. 大于1
      11. 放大
      12. 小于0
      13. 水平和垂直反转
      14. 放大
    3. 旋转
      1. 函数
      2. rotate(ndeg)
      3. n 为正顺时针转
      4. n为负逆时针转
      5. 注意
      6. 1、转换原点可能影响转换效果
      7. 2、元素转换后，坐标轴一同旋转的。旋转后做位移可能会有不同的效果
    4. 倾斜
      1. 函数
      2. skew(x)
      3. 让元素向着x轴的方向(横向)倾斜，实际改变的是y轴的倾斜角度,取值为正逆时针
      4. skew(x,y)
      5. skewX(x)
      6. skewY(y)
      7. 让元素向着y轴的方向倾斜(纵向)，实际改变的是x轴的倾斜角度，取值为正，顺时针
  3. 3D转换
    1. 属性
      1. perspective：value；
      2. 注意
      3. 该属性要加在3D转换元素的父元素上
    2. 3D旋转
      1. rotatex(xdeg)
      2. rotatey(ydeg)
      3. rotatez(zdeg)
      4. rotate3d(x,y,z,ndeg)
2. 过渡
  1. 什么是过渡
    1. 使CSS属性值在一段时间内平滑过渡
    2. 主要观察的是过程和结果
  2. 属性(要素)
    1. 过渡属性
      1. transition-property
      2. 颜色属性
      3. 取值为数值
      4. 转换 - transform
      5. 渐变属性
      6. visibility
      7. 阴影
    2. 过渡时长
      1. transition-duration
      2. s | ms
      3. 1000ms = 1s
      4. 300ms / 0.3s / .3s
    3. 过渡速度时间曲线函数
      1. transition-timing-function
      2. ease
      3. linear
      4. ease-in
      5. ease-out
      6. ease-in-out
    4. 过渡延迟
      1. transition-delay
    5. 过渡属性(综合)
      1. transition：property duration timing-function delay;
3. 动画
  1. 使得元素从一种样式逐渐变化为另一种样式(复杂的过渡)
  2. 动画使用步骤
    1. 声明动画
      1. 为动画起名，并且设置关键帧
      2. 关键帧：某个时间点上，元素的特殊样式
    2. 为元素调用动画
  3. 声明动画
    1. @keyframes 名称{ 0% | from{ 样式； } ....... 100% | to{ 样式; } }
    2. @-webkit-keyframes 名称{}
  4. 使用动画
    1. animation-name
      1. 绑定的动画名称
    2. animation-duration
      1. 动画一个周期的时长
    3. animation-timing-function
      1. 速度时间曲线函数
    4. animation-delay
      1. 延迟
    5. animation-iteration-count
      1. 播放次数
      2. 具体数值
      3. infinite : 无限次
    6. animation-direction
      1. 播放方向
      2. normal
      3. 正常
      4. reverse
      5. 逆向
      6. alternate
      7. 轮流播放
    7. animation：name duration timing-function delay iteration-count direction
    8. animation-fill-mode
      1. 动画播放前后的填充状态
      2. none ：默认
      3. forwards ：动画完成后，保持在最后一个帧的状态上
      4. backwards：动画播放前（延迟时间内），保持在第一个帧的状态上
      5. both
    9. animation-play-state
      1. paused ：暂停
      2. running ：播放
4. CSS优化
  1. CSS优化概述
    1. 减轻服务器压力
    2. 缩短服务器响应时间
    3. 提高用户的体验度
  2. CSS优化原则
    1. 尽量减少HTTP请求个数
    2. 页面顶部引入CSS
    3. 将CSS和JS放到外部文件中
  3. CSS代码优化
    1. 合并样式
    2. 缩小样式文件
    3. 选择更优的样式属性值
    4. 减少样式重写
    5. 代码压缩
    6. 不要在HTML中缩放图像
    7. 避免空的src和href
Bootstrap1
1. 响应式网页
  1. 概述
    1. 什么是响应式
      1. 智能地根据用户行为或使用设备环境进行相应的布局
    2. 响应式网页的构成
      1. 流式网格布局
      2. 可伸缩的图片和文字
      3. css3 Media Query技术
  2. 测试
    1. 使用真实物理设备测试
    2. 使用第三方模拟器软件测试
    3. 使用浏览器提供的设备模拟器测试
  3. 编写
    1. head中：<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
    2. 不适用绝对宽度，相对大小的字体
    3. 流式布局
    4. 图片自适应
    5. 选择加载css
    6. css的@media规则
2. Bootstrap起步
  1. 概述
    1. 移动设备优先，兼容pc端的响应式网页
    2. 构成
      1. 起步
      2. 全局css样式
      3. 组件
      4. jQuery插件
      5. 定制
  2. 环境搭建
    1. 基本模板
      1. 声明
      2. 元数据
      3. 样式
      4. 脚本
      5. 兼容性
  3. bootstrap.css
    1. css Reset
      1. 使用css代码改写浏览器的默认设置，保证兼容性
    2. box-sizing
      1. 用于赊着元素的框模型的方式
      2. 取值
      3. content-box
      4. border-box
3. 全局css样式
  1. html5文件类型
    1. <!DOCTYPE html> <html lang="zh-cn">...</html>
  2. 移动端设备优先
    1. <meta name="viewport" content="width=deice-width,initial-scale=1">
  3. css全局样式
    1. background-color：#fff； @font-family-base、@font-size-base和@line-hieght-base
  4. 布局容器
    1. .container
    2. .container-fluid
  5. 按钮
    1. 五种颜色
      1. （首选项）Primary
      2. （成功） Success
      3. （一般信息）lnfo
      4. （警告）Warning
      5. （危险）Danger
    2. 三种尺寸
      1. （大按钮）Large button
      2. （默认尺寸）Default button
      3. （小按钮）Small button
  6. 图片
    1. 响应式图片
      1. class=“img-fluid”
    2. 图片形状
      1. rounded
      2. rounded-circle
      3. img-thumbnail
  7. 文本
    1. 对齐
      1. text-left、text-center、text-right、text-justify、text-nowrap
    2. 大小写
      1. text-lowercase、text-uppercase、text-capitallize
    3. 颜色
      1. text-success、text-warning、text-error、text-info、text-primary
Bootstrap2
1. 全局css样式
  1. 全局css样式
    1. 列表
      1. 无序列表和有序列表
      2. <ul>、<ol>
      3. 列表样式
      4. .list-unstyled
      5. .list-inline
      6. .list-group
      7. .list-group-item
      8. .active
      9. .disabled
    2. 表格
      1. 基本表格
      2. .table
      3. 条纹状表格
      4. .table-striped
      5. 带边框表格
      6. .table-bordered
      7. 鼠标悬停
      8. .table-hover
      9. 响应式表格
      10. .table-reponsive
    3. 辅助样式
      1. 浮动
      2. .float-left
      3. .float-right
      4. .clearfix
      5. 显示
      6. .visible
      7. .invisible
      8. 背景
      9. bg-success/warning/error/info/primary
      10. 边框
      11. .border/border-0/border-top/border-left/……
      12. 居中
      13. .mx-auto
      14. 尺寸
      15. .w-*/h-*/m-*/p-*
  2. 栅格布局
    1. 概述
      1. 随屏幕或者视口（viewport）尺寸的增加，系统会自动分为最多12列，通过一系列的行（row）与列（column）的组合来创建页面布局
    2. 工作原理
      1. .container/.container-fluid----》row----》column
      2. 内容放置在column中，只有列可以做row的直接子元素
    3. 布局
      1. 每行12列，通过不同的列来划分元素的占地宽度
  3. 弹性布局
    1. d-flex/d-inline-flex 类创建弹性容器
      1. 响应式布局
      2. .d-sm/md/lg/xl-flex
      3. 水平方向
      4. .flex-row
      5. .flex-row-reverse
      6. 垂直方向
      7. .flex-column
      8. .flex-column-reverse
      9. 内容排列
      10. justify-content-*
  4. 表单
    1. 垂直表单
      1. <div class="form-group"> <label></label> <input /> </div>
    2. 水平表单
      1. <form class="form-inline"><div class="form-group"></div></form>
    3. 单行输入框
      1. .form-control
    4. 多行文本域
      1. form-control
    5. 多选和单选框
      1. 内联多选和单选框
    6. 下拉列表
      1. form-control
2. 组件
  1. 常用组件
    1. 下拉菜单
      1. 基本格式
      2. <div class="dropdown|dropup"> <button data-toggle="drpdown"> <ul class="dropdown-menu">
      3. 标题
      4. <li class="dropdown-header">
      5. 分割线
      6. <li class="divider"></li>
      7. 禁用
      8. <li class="disabled">
    2. 按钮组
      1. 基本按钮组
      2. <div class="btn-group">
      3. 按钮工具栏
      4. <div class="btn-toolbar">
      5. 尺寸
      6. .btn-group-lg|sm|xs
      7. 垂直排列
      8. <div class="btn-group-vertical">
    3. 警告框
      1. <div class="alert alert-warning"></div>
      2. <div class="alert alert-success"></div>
      3. ......
      4. <a href="#" class="alert-link"></a>
Bootstrap3
1. 组件
  1. 常用组件
    1. 导航
      1. 选项卡
      2. <ul class="nav nav-tabs"> <li role="presentation" class="active">
      3. 胶囊式标签页
      4. <ul class="nav nav-pills">
      5. 垂直标签
      6. <ul class="nav nav-pills flex-column">
      7. 对齐方式
      8. <ul class="nav nav-tabs justify-content-* ">
    2. 导航条
      1. 导航条
      2. <div class="navbar navbar-expand-*" >
      3. 导航条按钮
      4. <button class="btn navbar-toggler " data-toggle="collapse" data-target="#id">
      5. 导航条项目
      6. <p class="nav-item">
      7. 非导航链接
      8. <a href="#" class="nav-link">
      9. 折叠
      10. .collapse 用于指定一个折叠元素，点击按钮后会在隐藏与显示之间切换
      11. 固定
      12. .fixed-top|bottom
    3. 卡片
      1. 创建卡片
      2. <div class="card">
      3. 卡片头部
      4. <div class="card-header">头部</div>
      5. 卡片内容
      6. <div class="card-body">内容</div>
      7. 卡片底部
      8. <div class="card-footer">底部</div>
    4. 媒体对象
      1. 结构
      2. <div class="media">
      3. 构成
      4. .media-body、align-self-*
    5. 列表组
      1. 用于显示多个条目
      2. <ul class="list-group"> <li class="list-group-item list-group-item-success">
      3. 定制内容
      4. <h4 class="list-group-item-heading"> <p class="list-group-item-text">
    6. 轮播
      1. 创建轮播 .carousel
      2. 为轮播添加指示符 .carousel-indicators
      3. 添加要切换的图片 .carousel-inner
      4. 指定每个图片的内容 .carousel-item
    7. 模态框
      1. <div class="modal">
      2. <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <div class="modal-title"> <div class="modal-body"> <div class="modal-footer"
  2. 其他组件
    1. 徽章
      1. <button class="btn btn-primary" type="button"> Messages <span class="badge">4</span> <button>
    2. 巨幕
      1. <div class="jumbotron"><h1> Hello,world</h1></div>
    3. 分页
      1. 分页条
      2. <ul class="pagination">
      3. <li class="page-item active">...</li>
      4. 尺寸
      5. .pagination-lg
      6. .pagination-sm
    4. 面包屑导航
      1. <ul class="breadcrumb"> <li class="breadcrumb-item"> <a href=“#”>…</a> </li> </ul>
    5. 缩略图
      1. <div class="img-thumbnail"> <img src="img/1.jpg" ></div>
    6. 进度条
      1. <div class="progress"> <div class="progress-bar bg-success" style="width:40%"></div> </div>
Bootstrap4
1. Bootstrap定制
  1. SCSS概述
    1. 动态样式语言
      1. 动态语言为css赋予了动态语言的特性，极大提高了样式语言的可维护性
    2. 什么是scss
      1. Scss 是一款强化 CSS 的辅助工具，它在 CSS 语法的基础上增加了变量、嵌套、混合、导入、函数等高级功能，这些拓展令 CSS 更加强大与优雅
    3. 使用scss
      1. 服务器
      2. 1.安装nodejs解释器
      3. 2.安装scss编译程序:npm install -g node-sass
      4. 3.在命令行运行scss转换程序(node-sass d:/input.scss d:/output.css)；或者把scss转换程序配置为Webstorm中的“文件监视器”(node-sass -w d:/input.scss d:/output.css )
  2. LESS语法
    1. 注释
      1. 多行注释
      2. /*多行注释，会被转换到生成的.css文件中*/
      3. 单行注释
      4. // 单行注释，不会被转换到生成的.css文件中
    2. 变量
      1. 可以将需要多次使用的数据声明为一个变量，反复使用。
      2. ex：$jd_red:#e4393c; $thin_border:2px;
    3. 嵌套规则
      1. scss可以让我们以嵌套的方式简化样式的编写且可读性更高
      2. ex： #content { div{ h1 { color: #333 } p { margin-bottom: 1.4em } } a{ background-color: #EEE } }
      3. 父选择器的标识符&
      4. div a { color: blue; &:hover { color: red } }
      5. 属性嵌套
      6. nav { border: { style: solid; width: 1px; color: #ccc; } }
    4. 导入scss文件
      1. 使用scss的@import规则导入文件，可以省略.scss文件后缀
    5. 混合器
      1. 可以通过sass的混合器实现大段样式的重用。
      2. 混合器使用@mixin标识符定义
      3. 定义混合器 @mixin rounded-corners { -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; }
      4. 使用混合器 .notice{ background-color: green; border: 2px solid #00aa00; @include rounded-corners; }
    6. 带参混合
      1. 通过参数，可以使用混合器把样式中的通用样式抽离出来，然后在其他地方重用。
      2. @mixin link-colors($normal, $hover, $visited) { color: $normal; &:hover { color: $hover; } &:visited { color: $visited; } }
      3. 使用带参混合器
      4. a { @include link-colors(blue, red, green); }
    7. 继承
      1. 继承是说一个选择器可以继承另一个选择器定义的所有样式
      2. . error{ border: 1px solid red; background-color: yellow; }
      3. .seriousError { @extend .error; border-width: 3px; }
    8. 运算
      1. 任何数字、颜色、字符串等变量都可以进行运算
      2. $base：5%; @filler:$base*2;
      3. p { color: #010203 + #040506; }
      4. font-family: sans- + "serif";
    9. 函数
      1. 颜色自定义函数
      2. rgba(red,green,blue,alpha)
      3. hsl(hue,saturation,lightness);
      4. 数字函数
      5. round($value)：将数值四舍五入，转换成一个最接近的整数；
      6. ceil($value)：向上取整；
      7. floor($value)：向下取整；
      8. min($numbers…)：找出几个数值之间的最小值；
      9. max($numbers…)：找出几个数值之间的最大值；
      10. 字符串功能
      11. unquote（$string）:删除字符串中的引号；
      12. quote（$string）：给字符串添加引号；
      13. To-upper-case（$string）：将字符串小写字母转换为大写字母
      14. To-lower-case（$string）：将字符串大写字母转换为小写字母
      15. 自定义函数
      16. Scss支持自定义函数使用关键词@function定义，需要调用 @return 输出结果。
      17. @function 函数名($n) { @return 运算表达式; }
    10. 控制指令
      1. 选择器 { @if 条件{ …… } }
      2. 选择器 { @if $变量== 值{ …… } @else if $变量== 值{ …… } @else { …… } }
boot项目3天
1. 学子商城响应式布局