1ssh-keygen -t rsa -C "youremail" 然后一路回车，生成了.ssh的文件夹。在你的电脑中找到这个文件夹。

通用的CSS初始化（也许有用） 什么是css初始化？ CSS初始化是指重设浏览器的样式。不同的浏览器默认的样式可能不尽相同，所以开发时的第一件事可能就是如何把它们统一。如果没对CSS初始化往往会出现浏览器之间的页面差异。 为什么要初始化css？ 因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对CSS初始化往往会出现浏览器之间的页面显示差异。

1.用vue-cli生成项目 ​ 1.1 使用 vue create 创建一个项目 ​ 1.1.1在终端/cmd输入 vue create 项目名 ​ 1.1.2按下下方向键选择自定义配置 回车（Enter） 按 空格键 选择 Router、Vuex、CSS Pre-processors、Linter / Formatter 其它按照默认即可 。选好后 回车

1.创建并进入一个新目录 1mkdir xxx && cd xxx 2.选择喜欢的包管理器进行初始化 1yarn init & # npm init 3.将Vuepress安装为本地依赖(不推荐全局安装) 1yarn add -D vuepress & # npm i -D vuepress 4.创建第一篇文档

image

此篇用于创建html代码片段，代码如下： “prefix”: “vh”,指的是你自定义的快捷代码,输入vh就会出现快速生成代码提示，也可以自定义其他字段。

此篇用于快速创建vue模板，代码如下: 管理------>用户代码片段---------->新建全局代码片段 xxx.json PS：覆盖 “prefix”: “vue”,指的是你自定义的快捷代码，输入vue就会出现快速生成代码提示，也可以自定义其他字段。

语句：使用一或多个关键字来完成给定任务 if语句：可以嵌套多个if…esle… 12345if () { ... } else { ...} do-while语句: 一种后测试循环语句 PS：最常用于循环体中的代码至少要被执行一次的情形

findIndex()方法返回数组中满足提供的测试函数的第一个元素的索引。否则返回-1。 语法： 1arr.findIndex(callback[, thisArg]) 参数： callback¹——>针对数组中的每个元素，都会执行该回调函数，执行时会自动传入三个参数:element——>当前元素。index——>元素的索引。array——>调用findIndex的...

在创建项目选择ESLint，创建项目之后会看到根目录下有个.eslintrc.js. 在vscode中对eslint进行配置：在根目录下创建一个文件夹.vscode，并在文件夹下创建一个名为settings.json的文件，填写一下内容：PS：按下ctrl + s保存代码：自动调试eslint修复 1234567{ "eslint.run":"onType", "editor.codeActionsOnSave": { "source.fixAll.eslint": true }, "eslint.alwaysShowStatus": true} 或

算术操作符（如加号和减号）、位操作符、 关系操作符和相等操作符 一元运算符：只能操作一个值的操作符 1.递增或递减 123456// 递增var age = 29; ++age;// 递减var age = 29;--age; 2.一元加和减操作符

ECMAScript的变量是松散类型：可以用来保存任何类型的数据 var let const 123var message = 'hello word' // 右边赋值到左边 var 声明语句声明一个变量let message = 'hello word' // let声明一个块级作用域的本地变量const messgae = 'hello word' // 常量是块级作用域，很像使用 let 语句定义的变量。常量的值不能通过重新赋值来改变，并且不能重新声明。 注：在严格模式下，不能定义名为 eval 或 arguments 的变量，否则会导致语法错误 数据类型： 5中简单数据类型（基本数据类型）：一种复杂数据类型

特定用途的关键字，来表示控制语句的开始或结束，或用于执行特定的操作。但是不能用作标识符 break do instanceof typeof case else new var catch finally return void continue for switch while debugger* function this with default if throw delete in try 关键字

语句以一个分号结尾;如果省略分号，则由解析器确定语句的结尾。虽然语句结尾分号不是必须的，但最好不要省略它，∵加上分号可以避免很多错误（输入不完整）压缩js的时候也不会导致压缩错误，也可以增进代码的性能。多条语句组合到一个代码块中，则需要左花括号（ { ）开头,右花括号（{）结尾

区分大小写，不能用关键字命名，标识符则指变量、函数、属性的名字，或者函数的参数： 第一个字符必须是一个字母、下划线（_）或一个美元符号（$）；其它字符可以是字母、下划线、美元符号或数字。命名的时候首字母不能是数字 PS：不能把关键字、保留字、true、false 和null 用作标识符

HTML文档模式是通过使用文档类型DOCTYPE来指定的。DOCTYPE中会引用对应的dtd文件，这个文件告诉浏览器按什么标准、规则来解析文件。html5标准不依赖于SGML规则，所以不需要引用dtd文件。 文档模式是：混杂模式（quirks mode） 和 标准模式（standards mode）以及IE提出的 准标准模 式（almost standards mode）。而准标准模式，...

javascript在html中主要使用方法是<script>元素,有6个属性： async charset defer language src type 可选 可选(少) 可选 废用 可选 可选 立即下载脚本，不妨碍页面其它操作 指定代码字符集 延迟文档完全被解析和显示之后执行外部脚本有效 执行代码的外部文件 脚本语言内容类型 两种使用方式：直接页面嵌入js代码 和引入包含外部js文件

扩展运算符(spread)：是三个点（…）。主要用于函数调用/数组构造是，将数组表达式或者string在语法层面展开，但值得注意的是如果扩展运算符后面是一个空数组，则不产生任何效果，而且只有函数调用时，扩展运算符才可以放在圆括号中，否则会报Uncaught SyntaxError: Unexpected number 语法： 函数调用 1myFunction(...iterableObj); 数组结构或字符串

width的默认值是auto。但至少包含栏4种不同的宽度表现： 1）充分利用可用空间。也叫作fill-available(了解) 2）收缩与包裹。也就是浮动、绝对定位、 inline-block元素或者table元素。 3）收缩到最小。 min-content 4）超出容器限制。max-content Ps：除非有明确的width设置，否则不会超过父容器宽度。Eg：white-space:n...

“块级元素”和“display 为 block 的元素”不是一个概念。 由于“块级元素”具有换行特性，因此理论上它都可以配合 clear 属性来清除浮动 带来的影响。 使用 block或使用 table，但不会使用list-item && Ps:设置display：list-item,会出现项目符号，他就会生成了一个附加盒子，学名“标记盒子”（marker box）用于存放原点、数字项目符号. .在此之后又增添了display：inline-block ------”内在盒子“也叫作”容器盒子“。

术语： 属性： 值：整数值，数值，百分比 ， 长度值 ，颜色值 关键字：很关键的字 变量：也可以说自定义属性或级联变量

CSS 世界的诞生就是为图文信息展示服务的，CSS世界构建的基石是HTML，而HTML最具代表的两个基石<\div>和<\span>正好是CSS 世界中块级元素和内联级元素的代表. 对 CSS2.1 的全面支持是从微软公司的 IE8 开始的

javascript由以下三个不同的部分组成：核心（ecmascript）文档对象模型（dom）浏览器对象模型（bom） 规定：语法 类型 语句 关键字 保留字 操作符 对象

​ 动态路由在Router组件的path属性: {/url/:parameter} 1<Router path='/xxx/:id' component={xxx} /> Switch组件配置404页面：

React路由基础组件: 1.路由组件(router components) <BrowserRouter> （推荐）和<HashRouter>两种路由组件 Eg: 1234567import { BrowserRouter } from "react-router-dom";ReactDOM.render( <BrowserRouter> <App /> </BrowserRouter>, document.getElementById('root')) 2.路由匹配组件（router matching components) <Route>和<Switch>路由匹配组件。

前段路由是一套映射规则，在React中，是URL路径与组件的对应关系。就是配置路径和组件（一一对应） 1.React路由安装： 1$ npm i react-router-dom 2.导入路由的三个核心组件：Router / Route / Link 1import { BrowserRouter as Router , Route, LInk } from 'react-router-dom' 3.使用Router组件包裹整个应用（重要！！！）

使用脚手架初始化项目： 1.初始化项目，命令npx create-react-app xxx 2.启动项目，在项目根目录执行命令：npm start 12345678910public/ // 公共资源 index.html // 首页（必须） manifest.jsonsrc / index.js // 项目入口文件（必须） App.js // 项目的根组件 App.test.js // App组件的测试文件 serviceworker.js // 实现pwa（可选） 扩展：

常见的动画效果：动画或效果一旦触发就会执行，如果触发多次，就造成多个动画或效果排队执行。但可以停止动画排队：stop() 显示隐藏 滑入滑出 淡入淡出 自定义动画 show() slideDown() fadein() animate() hide() slideUp() fadeOut() toggle() slideToggle() fadeToggle() fadeTo()××× [speed,[easing],[fn] [speed,[easing],[fn] [speed,[easing],[fn] [params,speed,[easing],[fn] 显示语法：show([speed,[easing],[fn] )

受控组件(双向绑定（v-model）)：

state的基本使用：状态（state）即是数据,是组件内部的私有数据，只能在组件内部使用，且state的值是对象，表示一个组件中可以有多个数据 初始语法： 123456789101112131415class KEL extends React.Component { constructor() { super () { // 初始化state this.state = { count: 0 } } render () { return { <div>有状态组件</div> } } }} 简化语法：

只有类组件下有这个问题（函数组件没有this） 利用bind修改this指向组件： 1234567891011121314class HEL extends React.Comonent { num = 0; addNum() { this.num += 1; alert(this.num) } render () { return ( <div> <h1 onClick={this.addNum.bing(this)}>数字加一</h1> </div> ) }} 利用箭头函数方法（推荐）：该语法是实验性语法，由于babel的存在可以直接使用

​ 事件绑定：React事件绑定语法与DOM事件语法相似，而语法则是on+事件名称={事件处理程序fn}需要注意的是React事件则采用小驼峰命名法：除第一个单词之外，其他单词首字母大写。 类 组件绑定： 12345678910class KL extends React.Component { headrClick () { ... } render () { return ( <button onClick={this.headrClick}></button> ) } } 函数组件绑定:

Query中常用的样式操作：Jcss()和设置类样式方法 操作css方法：JQuery使用css方法修改简单元素样式，操作类，修改多个样式 123456// 1.参数只写属性名，则返回属性值 var strColor = $(this).css('color');// 2.参数是属性名，属性值，逗号分隔（英文），设置一组样式，属性须加引号，如果是数字可不用加单位和引号 $(this).css("color", "red");// 3.参数可以是对象形式(css()用于样式少时)$(this).css({"color":"white", "font-size":"20px"}); 设置类样式：等同于classList，可以操作样式，注：操作类不加点且不会覆盖原先的类名

React组件创建：特点：复用 独立 可组合 函数创建：使用JS函数或箭头函数创建的组件 1234567891011import React from 'react';const Dnz = () => { return ( <div> <h2>函数组件</h2> <p onClick={fn}>点击</p> </div> )}ReactDOM.render(<Dnz />, root) 【注意事项： ​ 1.类与函数名称都需以大写字母开头，使用大驼峰命名法。 ​ 2.函数组件必须有返回值，表示该组件的结构，而类组件则需提供render()方法。

javascript的Array对象是用于构造数组的全局对象，数组是类似于列表的高阶对象。 创建数组：属性——Array.length于Array.prototype[] 123var fruits = ['App', 'ios']// 打印数组console.log(fruits.length) 遍历数组： 123fruits.forEach( (item, index, array) =...

Babel会把JSX转译成一个名为React.createElement()函数调用 原生创建recat元素： 1const span = React.createElement('span', null, 'span') 用JSX创建react元素： 1const ul = <div><ul><li><span>hello worde!!!</span></li></ul></div> JSX中使用JS表达式： 语法：{JavaScript表达式} 注：语法中是单大括号，不是双大括号

引入react react-dom 安装包：npm Install react react-dom react：创建元素 react-dom：渲染元素 创建元素： 1const h1 = React.createElement('h1', {classNmae: 'k', id: 'hh'}, 'hello react') 渲染元素： 1React.render(div, document...

JQuery选择器：原生 JS 获取元素方式很多，很杂，而且兼容性情况不一致，因此 jQuery 做了封装，使获取元素统一标准。 基础选择器： 1$('选择器') // 直接写css选择器，需加引号 名称 用法 描述 ID选择器 $(“#id”) 获取指定的ID的元素 全选选择器 $(‘*’) 匹配所有元素 类选择器 $(‘.class’) 获取同一类class的元素 标签选择器 $(‘div’) 获取同一类标签的全有元素 并集选择器 $(‘div,p,li’) 选取多个元素 交集选择器 $(‘li.current’) 交集元素 层级选择器：后代选择器和子代选择器

JQuery中常见的两种入口函数： 12345678第一种：简单易用$(function () { ... // 此处是页面DOM加载完成的入口})第二种：繁琐，（不推荐）$(document).ready(function() { ... 此处是页面DOM加载完成的入口}) JQuery中的顶级对象$: $是JQuery的顶级对象，相当于原生JavaScript中的window。把元素利用*包装成JQuery对象。

分词/词法分析（Tokenizing/Lexing） 将由字符组成的字符串分解成有意义的代码块，被称为词法单元 他们俩的主要差异在于词法单元的识别是通过有状态还是无状态的方式进行的 解析/语法分析（Parsing） 将词法单元流（数组）转换成一个有元素逐级嵌套所1组成的代表了程序语法结构的书，被称为抽象语法树也就是常说的AST，全名为Abstract Syntax Tree 代码生成 将AS...

响应拦截器： 处理token过期问题 替换token

防抖:抖：高频率的发送请求 思路：当函数被调用时，不立即执行，而是延迟10秒执行。 如果在这10秒内再次调用了这个函数，则从当前被调用的时间开始计算

事件总线三种方法： $on,$emit,$off 画图： 1.index.vue. 2.articleList.vue 3.moreAction.vue 4.channelEdit.vue eventBus

state：作用：定义全局数据(保存所以公共数据)。类似data 123456export default new Vue.store({ state:{ } })export default store 获取数据：state 直接使用：1.this.$store.state.自定义 映射的方式：2.computed:{...mapState([''])}

vuex独立于所有的组件 作用 对所以组件需要用到的公共数据,进行管理 是一种新的组建之间数据共享的方式 父子 eventBus Vuex payload mapMutations mapState actions 中 调用 ———————— 去修改数据？ mutation

CSS 的属性 vertical-align 用来指定行内元素（inline）或表格单元格（table-cell）元素的垂直对齐方式。 语法：vertical-align: ; 行内元素的值: ​ **相对父元素的值：**这些值使元素相对其父元素垂直对齐： baseline 使元素的基线与父元素的基线对齐。 sub 使元素的基线与父元素的下标基线对齐。

vue-router-重定向 指：访问某一个路由，自动跳转到另外一个路径 核心代码：{path:“/”,redirect:"/home} vue-touter-编程式导航 指：通过js的方式触发路由的跳转 核心代码：提供路由相关函数跳转方法this.$router.push() 注：route是获取路由相关信息路由传参 this.$route.params

​ Vue指令 1.v-model 指令是一个语法糖（简写）就是简写了：:value 与 @input 两段代码 1:value = 'msg' 与 @input = 'msg=$event.target.value' class: :class绑定类 style: 绑定行内样式

选项： el: 获取指定的容器（具体的标签）element的缩写注：不能指定html和body容器作为试图容器 data: 数据驱动视图 响应式数据必须是 显性的声明 响应式数据必须在data当中提前声明 methods: 声明函数 可以给vm使用也可以提供视图使用 不可使用箭头函数

Web 开发模式： 1**.服务器端渲染的传统模式Web开发模式** 服务器通过字符串的拼接，动态生成的 优点： ① 前端耗时少。因为服务器端负责动态生成 HTML 内容，浏览器只需要直接渲染页面即可。尤其是移动端，更省电。 ② 有利于SEO。因为服务器端响应的是完整的 HTML 页面内容，所以爬虫更容易爬取获得信息，更有利于 SEO。 缺点：

**模块的加载机制：**优先从缓存中加载 模块在第一次加载后会被缓存。这也意味着多次调用require() 不会导致模块的代码被执行多次。 **注意：**不论是内置模块、用户自定义模块、还是第三方模块，它们都会优先从缓存中加载，从而提高模块的加载效率。 **内置模块的加载机制：**内置模块的加载优先级最高。

– SELECT 和 FROM 是 SQL 中的关键字，因此被高亮了 – SELECT * FROM users – 只查询 id 和 username 两列 – 列之间使用英文的 , 进行分隔 – SELECT id, username FROM users – 向 users 表中插入一条新数据 – insert into users (？, ？) values (‘？’, ‘？’) – select * from users

初始化包的基本结构： ① 新建 itheima-utils文件夹，作为包的根目录 ② 在 itheima-utils文件夹中，新建如下三个文件： ⚫ package.json （包管理配置文件） ⚫ index.js （包的入口文件） ⚫ README.md （包的说明文档） 将不同的功能进行模块化拆分

命令： npm -v -------可以查看版本号 npm init -y --------初始化【文件夹不能是中文】package.json npm install 包的完整名 && npm i 包的名字（所以完整包） npm uninstall 包 --------卸载指定的包 npm i 包安装包 @版本号----------安装指定版本的包 npm i 包名 -D --------项目上线不使用的包记录进去 查看当前的下包的镜像源：

什么叫做包？ 就是指第三方模块，叫法同而已 ps:感觉就像是闲的无聊 包的来源？有网就可以下载，不是很麻烦 但是下载速吧。。。可能会让你抓狂 为什么需要包？ ​ 为了提高开发效率 像是JQuery和浏览器内置API的关系 官网： https://www.npmjs.com ps：没有中文请自备翻译器 初次安装包后，项目多node_module的文件夹和package-lock.json配置文件

加载其它模块，使用require()方法： 12345//加载内置的fs模块const fs = require('fs') //必须加单引号//加载用户自定义模块const cistom = require('./cistom.js')//加载第三方模块（关于第三方模块的下载和使用，会在后面的课程中进行专门的讲解） 注：使用require()方法加载其它模块时，会执行被加载模块中的代码 向外共享模块作用域中的成员： module对象：

什么是模块化？ 1-模块化是指解决一个复杂问题时，自顶向下逐层把系统划分分成若干模块的过程。对于整个系统来说，模块是可组合、分解和更换的单元。 1-编程领域中的模块化，就是遵守固定的规则，把一个大文件拆成独立并互相依赖的多个小模块。 把代码进行模块化拆分的好处: 12341. 提高了代码的复用性2. 提高了代码的可维护性3. 可以实现按需加载4. etc.... 模块化规范： 1模块化规范就是对代码进行模块化的拆分与组合时，需要遵守的那些规则 模块化规范的好处：

path.join()的方法可以把多个路径片段拼接为完整的路径字符串 Eg: const fp = path.join(__dirname, ‘/成绩.txt’) 1234path.join([...paths]) 注：__dirname参数解读： ...paths <string> 路径片段的序列 返回值: <string> ​ path.basename()的方法，可以从一个文件路径中，获取到文件的名称部分 1234Eg:const fpath = '/a/b/c/index.html'var fullName = path.basename(fpath)-->index.htmlvar fullName = path.basename(fpath,'.html')-->index 使用 path.extname() 方法，可以获取路径中的扩展名部分

在使用 fs 模块操作文件时，如果提供的操作路径是以./ 或 …/ 开头的相对路径时，很容易出现路径动态拼接错误的问题。 **原因：**代码在运行的时候，会以执行node 命令时所处的目录，动态拼接出被操作文件的完整路径。

什么是fs文件系统模块？ fs模块是Node.js官方提供的、用来操作文件的模块 ​ ●fs.readFile()方法,用来读取指定文件中的内容

什么是Node.js Node.js是一个基于chrome v8引擎的JavaScript运行环境 注：1浏览器是JavaScript的前端运行环境 ​ 2.Node.js是JavaScript的后端运行环境 3.Node.js中无法调用DOM和BOM等浏览器内置API Node.js怎么学： 浏览器中JavaScript学习路径：

引入axio文件 axios是一个用于进行ajax操作的js库 -体积小，功能独立，除了ajax以外没有其他的额外功能 ​

123456789101112131415161718192021222324252627282930313233343536373839404142434445<!-- 设置文件域和上传按钮 --> <input type="file" id="ipt"> <button id="btn">按钮</button> <div cl...

非同源地址进行跨域请求演示： 1234 var xhr = new XMLHttpRequest();xhr.open('get', '接口'); xhr.send(); http辅助演示文件： http的get请求的请求报文组成演示： ​ 第一行为请求行 GET /api/getbooksid=1&bookname=%E8%A5%BF%E6%B8%B8%E8%AE%B0 HTTP/1.1

JSONP的跨域方式： 同源策略限制了对非同源地址发送ajax请求 JSONP与ajax无关，而是借助script标签对非同源地址进行请求 步骤: 1.设置script标签 2.将接口地址设置在script标签的src属性中script接收的所有文字内容都会被自动当作js代码执行服务器中会响应某个名称的函数调用形式 3.在src的接口地址后，以get请求参数形式，手动设置callback的参数callback的值为本次设置的处理函数名称 4.在script之前，设置对应名称的处理函数并且设置形参，接收服务器真正响应的数据 5.根据需求使用响应的数据即可

​ 封装一个函数模拟$.ajax()的使用形式 –参数：配置对象形式 –option -type -url -data -success -beforeSend -copmplete 请求方式 请求地址 请求参数 请求成功时触发的回调函数 发送请求前触发的回调 响应完毕（不区分成功失败）时触发的回调 ​

可能出现的错误： 1git push 出现Everything up-to-date 解决方法 1.可能你没有git.add 和git commit 1git add . 1git commit -m 'message' 1git push origin master

如何使用Git 1234567891011#​第一步： 连接远程仓库git remote add [name] [URL仓库地址]#第二步： 初始化git init #注：隐藏.git 不要动】 #第三步：git add . #将当前目录下所有文件添加#第四步： git commit -m '描述信息' #注：初次使用会git会进行身份验证#第五步：git config --global user.email #user.email是你的邮箱地址git config --global user.name #user.name是你的GitHub上的昵称 ​

xhr的timeout和ontimeout和onload： timeout和ontimeout： 注①：-send()方法用于发送http请求，如果是异步请求（默认）则此方法会在请求后立即返回；如果是同步请求，则此方法直到响应到达后才会返回 -语法：XMLHttpRequest.send() 【xhr.send()】

12JSON.parse()将JSON转换为js对象JSON.stringify()将js对象转换为JSON 注：JSON的格式 属性名必须使用双引号包裹 字符串类型的值必须使用双引号包裹 JSON 中不允许使用单引号表示字符串 JSON 中不能写注释 JSON 的最外层必须是对象或数组格式 不能使用 undefined 或函数作为 JSON 的值

封装Ajax函数 封装准备工作_封装将对象转换为urlencoded函数 方式1： 12345678910111213 function urlencoded(obj) { 1 遍历对象obj var str = ''; for (var key in obj) { 2将当前属性拼接为 '名=值' 的格式 str += key + '=' + obj[key] + '&'; } 3将字符串最后多余的&去除 //str = str.slice(0,str.length - 1); str = str.slice(9,-1); 4设置返回值即可return str; } 方式2：

总结 get请求与post请求的区别： 1.语义区别: -get -post 请求用于获取数据 请求用于发送数据

总结 Ajax是一种技术，这种技术通过执行一段js代码就可以实现【Asynchronous JavaScript And XML（也就是异步 JavaScript和XML）】 前端、后端交互的技术也就是【发送请求】与【接受响应结果】

js的语法基础：（ECMASCRIPT） js的书写位置： 内嵌式写法： 外联式写法：【大项目】 eg：参照css的书写位置（1.行内式2.内嵌式3.外联式） 1.最好写在body的后面外联式写法：【大项目】 1.新建js文件（后缀名就是.js）【直接写js 】 1通过<script src='js文件路径'></script>引用js文件 行内式写法：（了解） 11.点击事件onclick js输出消息：

this的使用： ●this是特殊的标识符，代表某个对象值。取值根据函数的调用方式会发生变化 ●全局中直接访问this，默认window 构造函数中this，默认为实例对象 方法中的this，默认为调用者 自调用函数与模块化 模块：块、部分意思。 模块化：指的是，将没进行 依赖：就是使用的意思 【文件不能划分全局作用域】

阶段提问 项目：html css js 动画 移动端 iPad【添加后面的代码】 基础：每日反馈 学历： webapi： js高级： 动画： 矢量图标： 它们的语法格式： innerTxet 和innerHTML的区别？ 移动端的触摸事件： tranform和translate： js中注册事件：

三个对象： 1.构造函数2.原型对象3.实例对象 三者关系小结： 1.构造函数：都是prototype属性，就是原型对象 2.实例对象：都是有_ _ proto _ _属性，也是原型对象 3.原型对象：具有constructor属性，也就是构造函数 注：两个对象同名不覆盖、不冲突 对象访问规则： 对象进行属性访问，先查找自身，如果没有再找__opsiodfoa__,并一直重复此过程

注：浏览器展示的小问题： 复杂类型在控制台输出是，进行展看操作后，会读取的最新值 浏览器重要组成部分： 内核（渲染引擎）： html /css—webAPI(DOM/BOM) W3C规范 js解析器（Javascript引擎）： ECMScript

回顾 xx元素.style.left = - 200 * i + ‘px’ xx元素.style.left=‘translateX( - ’ + 24*i + ’ % )’ 定时器设置全局变量以防反复创建 assign（url） localStorage.setlten对象 sessionStorage对象

回顾 1.事件的三要素 2.BOM核心【window对象】 xx元素.onxx事件=function（）｛…｝ 增 删 查 改 xx元素.addEventListener(’xx事件‘，function（）｛｝) 1.可以多次绑定 2.可以设定冒泡或捕获【基本用不到】两种形式的事件。

BOM模型 全局变量 全局函数 123var v1 = 10是全局变量,则v1 === window.v1为真function fn1 = function(){...}是全局函数,则fn1 === window.fn1为真注:可以不使用window.前缀

事件流 a标签的链接 【】 form标签的提交 【】 return false--------其它做法 event事件: 属性:target,type,clientX/Y,pageX/Y,keyCode

事件处理 事件源：事件类型：事件处理函数： 事件三要素其实就是设定某个元素上发生了某个时间后要做什么事 事件绑定（事件注册） 常用事件概览（on） 鼠标事件： click，dblclick mouseover：鼠标进入某个盒子范围的那个时刻 mouseout：离开 mousemove：鼠标移动事件，通常是一个持续时间。

伸缩布局 什么时候使用伸缩布局: 1.如果在在网页中希望让元素一行显示,并且元素随着父元素的宽度改变布局方式不会受影响 2.使用了伸缩布局以后,还可以使用浮动,定位,margin,padding 3.伸缩布局只是一个新的布局方式,不要把伸缩布局看的太重或者太难 核心知识点 1.伸缩盒子设置 2.设置伸缩盒子主轴

节点关系获取元素 演示： 使用元素的一些关系属性获取元素。 准备的素材：一个有id的无序列表。通过children找出第2个li，然后据此演示使用其他一些关系以获取元素。

知识点(一) ​ 1.display:none *与visitibility:hidden 前者不保留位置,后者保留位置 ​ 2.额外标签法 overflow 伪元素法 ​ 3.css3盒子模型border-box中,盒子的width包含了conter+border+padding(实际宽高) ​ 4.vertical-align:middle vertical-align:top vertical-align:bottom css三种引入方式:行内式,内嵌式外联时

第一天 1.ctrl+s 保存 Lorem 乱数假文 2.英文下的 ！+Tab 注：（vs code） 3.字符集-----避免乱码(utf- 8) 注:不区分大小写 4.语言的种类-----避免编译器乱码 eg: en 、zh-CN 5.关于h1 网页只有一个标题

响应式布局写对位置 1.(同一个网页在不同设备中[布局]呈现的效果) 核心知识 ◎媒体查询 媒体查询 liagn-height 可以不用加px (一倍) 1234567@media only screen and (width:**/*不加分号*/) { /* 加空格*/ div { 宽 高 背景颜色 }} 1.媒体查询就是响应式布局实现的原理 2.总结:可以让css代码在满足某些条件的情况下才去执行

流式布局 1.ppi 像素密度(越高画质越好,相反)-----没用[设备像素] 2.dpr物理像素比(具体不能改变的比例关系–作用–适配) [硬件] 视口(viewport) 1.禁止------水平滚动—页面缩放 2.视口-----pc[浏览器的大小]----移动[移动设备的大小] 视口的设置 1<meta name="viewport" content="width=device-width, initial-scale=1.0"> 移动设备宽 ←↑ ↑→ 忘了 注: 左右固定—中自适应 **注:**精灵图----向上向左

移动回顾 1.流式布局 2.伸缩布局-----------[修改主轴的方向,设置元素在主轴方向的对齐,元素在侧轴的对齐方式] 3.响应式布局-----------[解决了同一个网页在不同设备中布局显示效果不同] 核心知识点----------媒体查询 页面适配 rem适配 -------相对html中的文字大小

修改元素内容和属性 原生html属性操作： 取值：console.log（xx元素.src） 赋值：xx元素.alt = ‘abc’; js不带单位 自定义属性 设置一个属性的值 ​ xx元素.setAttribite(‘属性名’，‘属性名’)

放大与缩小案例 123456789101112131415161718<button id='jkl'>放大</button><button id='kjl'>缩小</button><br><img src="gl.jpg" alt="" width="100"><script> var img = document.querySelector('img'); var kids = img.width; var jkl = document.querySelector('#jkl'); var kjl = document.querySekector('#kjl'); jkl.onclick = function(){ kids += 20； img.width = kids； } kjl.onclick = function（）｛ kids -= 20； img.width = kids； ｝</script>

**1.argment:**在函数中获取参数的信息----------[个数、值] (注:无法确定用argment,明确用形参(ps:缩写) ps: 本质上是个函数 **全局变量: ** 局部变量: 作用域链 可以在任何作用域使用 可以用return返回值(达到全局) 连接两个作用域链 获取对象中的值: 1.对象名.属性名 2.对象名[‘属性名’]

DOM模型 JavaScript由以下三部分构成 1.ECMAScript 2.Bom（浏览器对象） 3.Dom（文档对象） 1注：<script>放在body的最后面

第二天 json 更改 表格:跨行(rowspan)是竖着[从上往下夸] 跨列(colspan)横着 ctrl f 查找 ctrl s 保存 auto rename tag 插件 按住滚轮往下b

CSS高级用法 核心知识点 2D转化及相关属性[重要]

bootstrap框架 1.为了快速实现响应式布局和移动端页面为主. 2.全局样式[网页中常见标签的基本样式设置] 栅格系统[为实现响应式布局的]-------媒体查询

less less less去写css代码优势: 1.less中可以进行数字运算 2.less中可以支持选择器中嵌套选择器 less使用步骤: 1.新建less文件 ​ ☂ 文件名以less结尾 2.less按照css语法编写 ​ ☂ less文件中完全可以使用css原生的语法去写

less补充 引入less: 123451.通过link引入less文件Eg: <link rel="stylesheet/less" href="css/less" >2.需要在网页中引入less.js文件Eg:<script src="less.js"> <script>3.需要在服务器环境下执行

rem适配 [vw] 移动端方式 补:opacity: 透明颜色; 1.**流式布局(百分比布局)**2.**伸缩布局(弹性布局)**3.响应式布局(媒体查询) 4.**rem适配:**让元素(内容)随着设备的宽度改变,自己发生大小的改变 12计算移动端中根标签[html]文字大小=当前设备宽度(动态获取)/缩放的倍数 媒体查询----定义一个变量 12计算ui图片中测量元素的rem值=测量大小/(ui图大小/缩放倍数)rem值是根据根(html)标签的文字大小来设置的 ​ 注: UI 图中缩放的倍数必须和设备中缩放的倍数统一 @size是什么?

事件对象event属性 事件对象的使用方法 处理函数定义是作为函数的第一个形参,就代表event对象: enter编码13 123xx元素.onxx事件 = function(e){ //在此函数中,e就代表event对象} 或 123xx元素.addEventListener('xx事件',function(e)){//在此函数中,e就代表event对象} 或

js 1234行内式: 学习阶段1.先准备一个html2.在html页面中任何一个位置,添加一个<script></script>标签 3.对应代码 1234外联式: 大项目1.单独一个js文件 .js2.在js文件直接写对应的js代码3.通过<script src="js文件路径"> </script>----引用js文件 123456789101112131415当前一个值是变量不需要加单引号....console.log('要展示的信息');控制台注意:1.在程序中遇到的任何一个特殊符号,都必须是英文输入法的符号2.9.alert('新窗口'); 弹出窗口3.document.write('展示信息');网页4. 获取用户输入信息prompt('提示用户要输入的信息'); 变量:

HTML+CSS+JS代码格式规范 1.为什么要按照规范写代码 ☞代码规则 1编译器在编译时就会报错，这个规定叫作规则 ☞代码规范 1有一种规定，它是一种人为的、约定成俗的，即使不按照那种规定也不会出错，这种规定就叫作规范 ☞代码规范化的好处 1规范的代码可以减少bug处理，规范的代码可以降低维护成本，规范的代码有助于代码审查。

1.1 左侧边栏出来的话需要在同级别下 common.css(公共样式{模块化} ) 注:先引入初始化后引入公共样式 关于三大标签的SEO的优化: titile标题 description网站说明(meta name=““content=””) keywoeds(关键字) 字体不一样不要给li设置宽高（关于竖线的需要单独的小li） 关于字体图标的用...