模块一：javaScript

二、知识大纲 - 图1

  1. 用原型思想奠定了js的设计蓝图。
  2. 两个顶级原型奠定了对象的基础（实现了所有数据类型的原型），实现了js中一切皆是对象。
  3. 由于模拟面向对象思想，采用基于原型的模拟类的语法，引入new、this,并实现了类的继承。
  4. 引入了特殊对象函数，函数是一级公民。函数采用了词法形式的作用域。
  5. 实际开发中，会用到一些性能函数，最常见的防抖节流。对于引用类型数据的复制，会使用到深浅拷贝
  6. es6新语法新增很多特性，让js变得更加强大。

模块二： HTML+CSS

二、知识大纲 - 图2

at-rule

@counter-style

  1. // 自定义有序列表图标
  2. @counter-style circled-alpha {
  3.   system: fixed;
  4.   symbols: Ⓐ Ⓑ Ⓒ Ⓓ Ⓔ Ⓕ Ⓖ Ⓗ Ⓘ Ⓙ Ⓚ Ⓛ Ⓜ Ⓝ Ⓞ Ⓟ Ⓠ Ⓡ Ⓢ Ⓣ Ⓤ Ⓥ Ⓦ Ⓧ Ⓨ Ⓩ;
  5.   suffix: " ";
  6. }
  8. // 使用图标
  9. .items {
  10.    list-style: circled-alpha;
  11. }

image.png

@support

  • @support主要是用于检测浏览器是否支持CSS的某个属性，其实就是条件判断，如果支持某个属性，你可以写一套样式，如果不支持某个属性，你也可以提供另外一套样式作为替补。
  • @support有兼容性 ```css @support(prop:value){ /自己的样式/ } @supports (display: flex) { div { display: flex; }}
  1. <a name="J8Dvd"></a>
  2. ### @namespace
  3. [https://cloud.tencent.com/developer/section/1072304](https://cloud.tencent.com/developer/section/1072304)<br />用于跟 XML 命名空间配合的一个规则，表示内部的 CSS 选择器全都带上特定命名空间。
  4. <a name="kkVhg"></a>
  5. ### @ viewport
  6. 已废弃。用于设置视口的一些特性，不过兼容性目前不是很好，多数时候被 HTML 的 meta 代替。
  7. <a name="PjoIf"></a>
  8. ### @fontface
  9. fontface 用于定义一种字体，icon font 技术就是利用这个特性来实现的。
  10. ```css
  11. @font-face {
  12.   font-family: Gentium;
  13.   src: url(http://example.com/fonts/Gentium.woff);
  14. }
  16. p { font-family: Gentium, serif; }

@charset、@import

@media、@key-frames

qualified rule 普通规则

组成要点

  1. 选择器
    • 叠加规则
  2. 声明列表
    • 属性
    • 值（值的类型、函数）

      选择器

  • 复杂选择器
    • 符号 combinator
      五种：空格、>、+、~、||
    • 复合选择器 compound selector
      三种：类型选择器、子类选择器、伪元素
      • 子类选择器(简单)
        四种：id、class、属性、伪类

        声明：属性和值

属性是由中划线、下划线、字母等组成的标识符，CSS 还支持使用反斜杠转义。我们需要注意的是：属性不允许使用连续的两个中划线开头，这样的属性会被认为是 CSS 变量。

CSS 属性值可能是以下类型。

  1. CSS 范围的关键字：initial，unset，inherit，任何属性都可以的关键字。
  2. 字符串：比如 content 属性。
  3. URL：使用 url() 函数的 URL 值。
  4. 整数 / 实数：比如 flex 属性。
  5. 维度：单位的整数 / 实数，比如 width 属性。
  6. 百分比：大部分维度都支持。
  7. 颜色：比如 background-color 属性。
  8. 图片：比如 background-image 属性。
  9. 2D 位置：比如 background-position 属性。
  10. 函数：来自函数的值，比如 transform 属性。

CSS 支持一批特定的计算型函数：

  • calc()、max()、min()、clamp()
  • toggle()
  • attr()

HTML

语义类标签

元信息类标签

特点介绍

  • 一般都不会在页面被显示出来
  • 元信息多数情况下是给浏览器、搜索引擎等机器阅读的

  • 元信息类标签数量不多

    head

  • 本身并不携带任何信息

  • 盛放其它语义类标签的容器使用。
  • 必须是 html 标签中的第一个标签
  • 内容必须包含一个 title(如果文档作为 iframe，或者有其他方式指定了文档标题时，可以允许不包含 title 标签。)

  • 最多只能包含一个 base

    title

  • heading 和 title 两个英文单词意义区分十分微妙

  • title 应该是完整地概括整个网页内容的。

  • h1 则仅仅用于页面展示，它可以默认具有上下文，并且有链接辅助，所以可以简写，即便无法概括全文，也不会有很大的影响。

    base

  • base 标签最多只有一个，是个历史遗留标签

  • 给页面上所有的 URL 相对地址提供一个基础。

  • 它改变全局的链接地址，它是一个非常危险的标签，容易造成跟 JavaScript 的配合问题，所以在实际开发中，我比较建议你使用 JavaScript 来代替 base 标签。

    meta

  • meta 标签是一组键值对，它是一种通用的元信息表示标签

  • head 中可以出现任意多个 meta 标签。
  • 一般的 meta 标签由 name 和 content 两个属性来定义。name 表示元信息的名，content 则用于表示元信息的值。
    1. <meta charset="UTF-8" >
    charset 型 meta 标签非常关键，它描述了 HTML 文档自身的编码形式。因此，我建议这个标签放在 head 的第一个。