COOLGuysneverSleep

2023-05-17T07:08:16.483Z

量化概念先导

2023-04-20T02:05:34.000Z

简单来讲：量化投资就是利用计算机科技并采用一定的数学模型去实现投资理念、实现投资策略的过程
—-传统的投资方法主要有基本面分析法和技术分析法

国内量化投资起步：2009年
是一种主动投资
理论基础：市场是无效的/弱有效

理论变迁—

有效市场假说EMH—在功能齐全、信息畅通的资本市场中，任何用历史价格及其他信息来预测证券价格的行为都是徒劳
期权定价模型
套利定价理论APT
VaR风险管理模型
行为金融学—吸收心理学，分析与有效市场理论不相符合的异常现象
非线性技术

—–
为何要用量化策略投资A股—A股市场就不是特别有效的市场，量化投资策略正好可以发挥其纪律性、系统性、及时性、准确性、分散化的优点而捕获国内市场的各种投资机会

量化选股

2023-04-20T01:54:15.000Z

采用数量的方法判断某个公司是否值得买入

【主要思路】
公司估值—比较理论股票价格与市场价格差异，找出被低估或高估的股票
趋势法—根据市场强势、弱势、盘整等形态作出对应投资行为
资金法—追随市场主力资金的方向（资金流入价格上涨|资金流出价格下跌）

基本面选股

多因子模型–最常用，采用一系列因子作为标准，满足则买入不满足则卖出

风格轮动模型—有时市场偏好小盘股有时偏好大盘股

行业轮动模型–类似风格轮动(市场)，对轮动的行业进行配置比买入持有更有效

市场行为选股

资金流模型—将资金流入流出编成指标，判断未来一段时间股票涨跌

动量反转模型–股票强弱变化情况

动量效应：过去一段强，未来一段继续保持

反转效应：过去一段强，未来一段会走弱

判定是动量效应持续还是反转

一致预期模型、–利用大多数分析师的看法进行买入卖出

趋势追踪模型–根据判断趋势的指标追涨杀跌（MA EMA MACD）

筹码选股模型–根据筹码分布和变动预判股票未来是上涨还是跌

如果主力资金要拉升一支股票，会慢慢收集筹码，如果主力资金要卖出一支股票，则会慢慢分派筹码

量化选股的评价指标

收益率

风险指数

《量化投资：策略与技术》读书笔记

2023-04-19T12:10:26.000Z

—其实是本书大纲
【策略篇】
判断趋势型—趋势向上则做多，趋势向下则做空(高抛低吸)
量化选股

量化择时
判断波动率型—套利【通过在不同市场上买入和卖出同一资产以利用市场价格差异，从而赚取风险较小的利润。例如，如果某个商品在两个市场上的价格不同，买入价格低的市场，并在价格高的市场上卖出，获得利润】
股指期货套利—在股票和股指期货之间的对冲操作

商品期货—在不同的期货品种之间

统计套利—在有相关性的品种之间

期权套利—在看涨看跌期权之间的对冲

降低冲击成本—买卖订单本身对市场都是有影响的，会降低投资者的收益率
被动交易算法

Django框架

2022-12-06T08:42:23.000Z

参考文档

项目结构

mysite/ # 根目录
    manage.py # Django命令行工具
    mysite/ # 项目配置目录
        __init__.py # 空文件，告诉python这个目录是python包
        settings.py # 项目配置文件
        urls.py # 项目所有urls声明汇总
        asgi.py # ASGI服务器的入口文件
        wsgi.py # WSGI服务器的入口文件

软件开发模式

==Django所采用的MVT 模型-视图-模板==

Django的MVT设计模式由Model(模型), View(视图) 和Template(模板)三部分组成，分别对应单个app目录下的models.py, views.py和templates文件夹。它们看似与MVC设计模式不太一致，其实本质是相同的。Django的MVT设计模式与经典的MVC对应关系如下。

Django Model(模型): 这个与经典MVC模式下的模型Model差不多。
Django View(视图): 这个与MVC下的控制器Controller更像。视图不仅负责根据用户请求从数据库读取数据、指定向用户展示数据的方式(网页或json数据), 还可以指定渲染模板并处理用户提交的数据。
Django Template(模板): 这个与经典MVC模式下的视图View一致。模板用来呈现Django view传来的数据，也决定了用户界面的外观。Template里面也包含了表单，可以用来搜集用户的输入内容。

Django MVT设计模式中最重要的是视图(view), 因为它同时与模型(model)和模板(templates)进行交互。当用户发来一个请求(request)时，Django会对请求头信息进行解析，解析出用户需要访问的url地址，然后根据路由urls.py中的定义的对应关系把请求转发到相应的视图处理。视图会从数据库读取需要的数据，指定渲染模板，最后返回响应数据。这个过程如下图所示：

JS异步编程

2022-11-25T08:42:23.000Z

服务器

C/S架构

B/S架构

使用 WampServer 搭建 HTTP服务

静态网站和动态网站

静态网站：

访问的是实实在在保存在服务器上的文件。静态资源包括：html页面、css文件、js文件、图片等。
当内容、图片、界面需要更新时，直接修改.html文件。

动态网站：

当用户访问网站时，根据某些逻辑,动态生成对应的HTML、CSS、JS代码给用户（这也就是web服务器开发的本质）。
通过某种手段，当有新的消息时，自动的完成网站的更新。

总结：

由于静态网站在维护的局限性，所以产生了动态网站。

实现动态网站的技术：php/jsp/.net/python等。

动态网站的原理：浏览器请求动态网站的页面（比如*.php），php拼接数据并动态生成html页面，然后将新生成的页面返回给浏览器

PHP

自己看

异步

JavaScript 语言和执行环境是单线程。即同一时间，只能处理一个任务。

同步任务：在主线程上排队执行的任务。只有前一个任务执行完毕，才能执行下一个任务。
异步任务：不进入主线程、而是进入任务队列（Event Queue）的任务，该任务不会阻塞后面的任务执行。只有”任务队列”通知主线程，某个异步任务可以执行了，该任务才会进入主线程执行。

==什么时候需要等待，就什么时候用异步==(因为需要等待的任务不能阻塞在主线程里)

1、事件监听（比如说，按钮绑定点击事件之后，用户爱点不点。我们不可能卡在按钮那里，什么都不做。所以，应该用异步）
2、回调函数：
- 2.1、定时器：setTimeout（定时炸弹）、setInterval（循环执行）
- 2.2、ajax请求。
- 2.3、Node.js 中的一些方法回调。
3、ES6 中的 Promise、Generator、async/await

执行顺序

可以看到异步任务要在主线程执行完同步任务之后再进行（不管它本身需要等待多久）

Ajax

在浏览器中，我们可以在不刷新页面的情况下，通过 Ajax 的方式去获取一些新的内容。

Ajax：Asynchronous Javascript And XML（异步 JavaScript 和 XML）。它并不是凭空出现的新技术，而是对于现有技术的结合。Ajax 的核心是 js 对象：XMLHttpRequest。

发送 Ajax 请求的五个步骤：

（1）创建异步对象，即 XMLHttpRequest 对象。

（2）使用 open 方法设置请求参数。open(method, url, async)。参数解释：请求的方法、请求的 url、是否异步。第三个参数如果不写，则默认为 true。

（3）发送请求：send()。

（4）注册事件：注册 onreadystatechange 事件，状态改变时就会调用。

如果要在数据完整请求回来的时候才调用，我们需要手动写一些判断的逻辑。

（5）服务端响应，获取返回的数据。

jQuery 中的 Ajax

JQuery 作为最受欢迎的 js 框架之一，常见的 Ajax 已经帮助我们封装好了，只需要调用即可。更为详细的 api 文档可以查阅：w3cSchool_JQueryAjax

格式举例：

$.ajax({    url: 'https://xxx.com/getUserInfo.php', // 接口的请求地址    data: 'name=fox&age=18', // 请求参数    type: 'GET', //请求的方式    success: function (argument) {        // 接口请求成功时调用        console.log('接口请求成功');    },    beforeSend: function (argument) {}, // 在发送请求之前调用,可以做一些验证之类的处理    error: function (argument) {        // 接口请求失败时调用        console.log('接口请求失败');    },});

Promise

宏任务& 微任务

JS基础

2022-11-24T10:40:23.000Z

基础部分

写在哪

行内

内联

.js文件中

区分大小写

输出

弹窗

输出至网页里

document.write("HTML");

输出至控制台

console.log();

变量

var 变量名;

let 变量名;

常量

const 常量名 = 取值;

代码块{}只用来分组在外部仍可访问内部变量

流程控制语句有if 有switch 有for 有while

面向对象

==首先明确JS中的类型都可以看作是对象==【除基本数据类型（值类型）：String 字符串、Number 数值、Boolean 布尔值、Null 空值、Undefined 未定义】

var person = {};person.name = '王二';person.age = 35;person.sex = '男';person.height = '180';

创建对象

 var obj = new Object();    obj.sayName = function () {        console.log('smyhvae');    };

 //创建对象 obj1    var obj1 = new Object();    obj1.test = undefined;    //创建对象 obj2    var obj2 = new Object();    obj2.name = "smyhvae";    //将整个 obj2 对象，设置为 obj1 的属性    obj1.test = obj2;

内置对象

除上面创建的自定义对象，还有内置对象和浏览器对象

内置对象	对象说明
Arguments	函数参数集合
Array	数组
Boolean	布尔对象
Math	数学对象
Date	日期时间
Error	异常对象
Function	函数构造器
Number	数值对象
Object	基础对象
RegExp	正则表达式对象
String	字符串对象

常用方法

==注意对字符串的修改都不是原地修改会返回修改值==

indexOf()/lastIndexOf()：获取字符串中指定内容的索引

search()：获取字符串中指定内容的索引

includes()：字符串中是否包含指定的内容

startsWith()：字符串是否以指定的内容开头

endsWith()：字符串是否以指定的内容结尾

这里的 str.charAt(index)和str[index]的效果是一样的

新字符串 = str.slice(开始索引, 结束索引); //两个参数都是索引值。包左不包右。

新字符串 = str.substring(开始索引, 结束索引);

字符串 = str.substr(开始索引, 截取的长度);

trim()：去除字符串前后的空白。

字符串的方法估计不同语言有通用的反正用到再查

html 方法-用到查

anchor() 创建 a 链接
big()
sub()
sup()
link()
bold()

Date对象

不传参返回当前时间对象

var date1 = new Date();console.log(date1);//Fri Nov 25 2022 14:11:11 GMT+0800 (中国标准时间)

传参的情况

举例1：（参数是字符串）

const date11 = new Date('2020/02/17 21:00:00');console.log(date11); // Mon Feb 17 2020 21:00:00 GMT+0800 (中国标准时间)const date12 = new Date('2020/04/19'); // 返回的就是四月console.log(date12); // Sun Apr 19 2020 00:00:00 GMT+0800 (中国标准时间)const date13 = new Date('2020-05-20');console.log(date13); // Wed May 20 2020 08:00:00 GMT+0800 (中国标准时间)const date14 = new Date('Wed Jan 27 2017 12:00:00 GMT+0800 (中国标准时间)');console.log(date14); // Fri Jan 27 2017 12:00:00 GMT+0800 (中国标准时间)

举例2：（参数是多个数字）

const date21 = new Date(2020, 2, 18); // 注意，第二个参数返回的是三月，不是二月console.log(date21); // Wed Mar 18 2020 00:00:00 GMT+0800 (中国标准时间)const date22 = new Date(2020, 3, 18, 22, 59, 58);console.log(date22); // Sat Apr 18 2020 22:59:58 GMT+0800 (中国标准时间)const params = [2020, 06, 12, 16, 20, 59];const date23 = new Date(...params);console.log(date23); // Sun Jul 12 2020 16:20:59 GMT+0800 (中国标准时间)

举例3：（参数是时间戳）

const date31 = new Date(1591950413388);console.log(date31); // Fri Jun 12 2020 16:26:53 GMT+0800 (中国标准时间)// 先把时间对象转换成时间戳，然后把时间戳转换成时间对象const timestamp = new Date().getTime();const date32 = new Date(timestamp);console.log(date32); // Fri Jun 12 2020 16:28:21 GMT+0800 (中国标准时间)

日期格式化（用到自己查）

format():将时间对象转换为指定格式。

参考链接

获取时间戳

// 方式一：获取 Date 对象的时间戳（最常用的写法）const timestamp1 = +new Date();console.log(timestamp1); // 打印结果举例：1589448165370// 方式二：获取 Date 对象的时间戳（较常用的写法）const timestamp2 = new Date().getTime();console.log(timestamp2); // 打印结果举例：1589448165370// 方式三：获取 Date 对象的时间戳const timestamp3 = new Date().valueOf();console.log(timestamp3); // 打印结果举例：1589448165370// 方式4：获取 Date 对象的时间戳const timestamp4 = new Date() * 1;console.log(timestamp4); // 打印结果举例：1589448165370// 方式5：获取 Date 对象的时间戳const timestamp5 = Number(new Date());console.log(timestamp5); // 打印结果举例：1589448165370

上面这五种写法都可以获取任意 Date 对象的时间戳，最常见的写法是方式一，其次是方式二。

根据前面所讲的关于「时间戳」的概念，上方代码获取到的时间戳指的是：从 1970年1月1日，0时0分0秒 到现在所花费的总毫秒数。

倒计时写法

Moment.js

Moment.js 是一个轻量级的JavaScript时间库，我们可以利用它很方便地进行时间操作，提升开发效率。

函数

定义

function 函数名([形参1,形参2...形参N]){  // 备注：语法中的中括号，表示“可选”    // 函数体语句}

const 变量名  = function([形参1,形参2...形参N]){    语句....}

调用

// 写法1（最常用）函数名();// 写法2函数名.call();

var obj = {    a: 'qianguyihao',    fn2: function() {        console.log('小奶包包，穿越自由!');    },};obj.fn2(); // 调用函数

立即执行

(function() {    console.log('我是立即执行函数');})();

fn() 和 fn 的区别【重要】

fn()：调用函数。调用之后，还获取了函数的返回值。
fn：函数对象。相当于直接获取了整个函数对象。

拷贝

// 语法1obj2 = Object.assgin(obj2, obj1);// 语法2Object.assign(目标对象, 源对象1, 源对象2...);

将 obj1 的值追加到 obj2 中。如果对象里的属性名相同，会被覆盖。

正则表达式

//判断是否为手机号var phoneStr = "13067890123";    var phoneReg = /^1[3-9][0-9]{9}$/;    console.log(phoneReg.test(phoneStr));

    str = str.replace(/^\s*/, ""); //去除开头的空格    str = str.replace(/\s*$/, ""); //去除结尾的空格

// 是否为电子邮件var emailReg = /^\w{3,}(\.\w+)*@[A-z0-9]+(\.[A-z]{2,5}){1,2}$/;    var email = "abchello@163.com";    console.log(emailReg.test(email));

DOM操作

获取元素

document.getElementById("box1");//用这个document.getElementsByTagName("div")[0];document.getElementsByClassName("hehe")[0];

操作元素

新增

var para = document.createElement("p");var node = document.createTextNode("这是新段落");para.appendChild(node);var ele = document.getElementById("div1");ele.appendChild(para);

删除

var parent = document.getElementById("div1");var child = document.getElementById("p1");parent.removeChild(child);

改变HTML

document.write(Date());//直接向HYML输出流写内容 不好用，不能定位到元素里面

document.getElementById(id).innerHTML = "一段新的html
";

document.getElementById(id).attribute = "新值";

改变CSS

绑定事件

常见的事件如下：

var div1 = document.getElementById("box1");    //绑定事件的第二种方式    div1.onclick = fn;   //注意，这里是fn，不是fn()。fn()指的是返回值。    //单独定义函数    function fn() {        alert("我是弹出的内容");    }

onload&unonload

当页面加载（文本和图片）完毕的时候，触发onload事件。

有一点我们要知道：js的加载是和html同步加载的。因此，如果使用元素在定义元素之前，容易报错。这个时候，onload事件就能派上用场了，我们可以把使用元素的代码放在onload里，就能保证这段代码是最后执行。

定时器

setInterval()：循环调用。将一段代码，每隔一段时间执行一次。（循环执行）
setTimeout()：延时调用。将一段代码，等待一段时间之后再执行。（只执行一次）

jQuery

JS的一个库(框架)，利用==CSS选择器==访问DOM对象，简化DOM操作

引包

microsoft提供的CDN

插件

注意引包时要在jq的下面

语法

$(选择器).action()

$(this).hide() //隐藏当前元素$("p").hide() //隐藏所有段落$(".test").hide() //隐藏所有class="test"的元素$("#test").hide() //隐藏所有id="test"的元素

jQuery选择器

去看之前的CSS选择器章节

常见事件

click(handler) 单击事件。
blur(handler) 失去焦点事件。
mouseenter(handler) 鼠标进入事件。
mouseleave(handler) 鼠标离开事件。
dbclick(handler) 双击事件。
change(handler) 改变事件，如：文本框值改变，下拉列表值改变等。
focus(handler) 获得焦点事件。
keydown(handler) 键盘按下事件

获取|获取内容

text(); 设置或返回所选元素的文本内容

html(); 设置或返回所选元素的内容（包含html标记）

val(); 设置或返回表单元素的值

$("#btn1").click(function(){    alert("Text:" + $("#text1").text());});

$("#btn1").click(function(){    alert("Text:" + $("#text1").html("Hello world!"));});

遍历

~~自己查~~

常见模板

鼠标悬停弹出下拉菜单

鼠标悬停变色

突出显示

手风琴效果

ES6新增

箭头函数

(参数1, 参数2 ...) => { 函数体 }

写法 1、定义和调用函数：（传统写法）

function fn1(a, b) {    console.log('haha');    return a + b;}console.log(fn1(1, 2)); //输出结果：3

写法 2、定义和调用函数：（ES6 中的写法）

const fn2 = (a, b) => {    console.log('haha');    return a + b;};console.log(fn2(1, 2)); //输出结果：3

Flex布局

2022-11-23T13:24:23.000Z

13-CSS3属性：Flex布局图文详解 | 千古前端图文教程 (qianguyihao.com)

1.0.11CSS3_属性

2022-11-23T12:13:14.000Z

文字阴影

p{    text-shadow: 20px 27px 22px pink;    /*水平位移 垂直位移 模糊程度 阴影颜色*/}

设置多个阴影实现凹凸效果

text-shadow: -1px -1px 1px #fff, 1px 1px 1px #000;/*凹*/text-shadow: -1px -1px 1px #000, 1px 1px 1px #fff;/*凸*/

盒子大小

box-sizing: content-box;

此时设置的 width 和 height 是内容区域的宽高。盒子的实际宽度 = 设置的 width + padding + border。此时改变 padding 和 border 的大小，也不会改变内容的宽高，而是盒子的总宽高发生变化

box-sizing: border-box;

此时设置的width和height是盒子的总宽高。盒子的实际宽度=设置的width。此时改变padding和border的大小，会改变内容的宽高，盒子的总宽高不变。

边框

用的时候自己搜

边框圆角：`border-radius`

边框阴影：`box-shadow`

动效

过渡transition

    transition: 让哪些属性进行过度 过渡的持续时间 运动曲线 延迟时间;    transition: all 3s linear 0s;

2D转换transform

transform: scale(2, 0.5);//水平方向*2 垂直方向*0.5

transform: translate(50%, -50%);//水平方向向右移动自己宽度的一半 垂直方向向上移动一半

transform: rotate(45deg);//顺时针旋转45°（负值逆时针）

3D 转换

知道有哪些就行用的时候查

1、旋转：rotateX、rotateY、rotateZ

2、移动：translateX、translateY、translateZ

3、透视：perspective

4、3D呈现（transform-style）

动画

1、定义动画的步骤

（1）通过@keyframes定义动画；

（2）将这段动画通过百分比，分割成多个节点；然后各节点中分别定义各属性；

（3）在指定元素里，通过 animation 属性调用动画。

1.0.10CSS3_选择器

2022-11-23T07:25:34.000Z

我看这个是最全的：直接查看就行

CSS 选择器 | 菜鸟教程 (runoob.com)

选择器	示例	示例说明	CSS
.class	.intro	选择所有class=”intro”的元素	1
#id	#firstname	选择所有id=”firstname”的元素	1
*	*	选择所有元素	2
element	p	选择所有元素	1
element,element	div,p	选择所有元素和元素	1
element element	div p	选择元素内的所有元素	1
element>element	div>p	选择所有父级是元素的元素	2
element+element	div+p	选择所有紧跟在元素之后的第一个元素	2
[attribute]	[target]	选择所有带有target属性元素	2
[attribute=value]	[target=-blank]	选择所有使用target=”-blank”的元素	2
[attribute~=value]	[title~=flower]	选择标题属性包含单词”flower”的所有元素	2
[attribute\|=language]	[lang\|=en]	选择 lang 属性等于 en，或者以 en- 为开头的所有元素	2
:link	a:link	选择所有未访问链接	1
:visited	a:visited	选择所有访问过的链接	1
:active	a:active	选择活动链接	1
:hover	a:hover	选择鼠标在链接上面时	1
:focus	input:focus	选择具有焦点的输入元素	2
:first-letter	p:first-letter	选择每一个元素的第一个字母	1
:first-line	p:first-line	选择每一个元素的第一行	1
:first-child	p:first-child	指定只有当元素是其父级的第一个子级的样式。	2
:before	p:before	在每个元素之前插入内容	2
:after	p:after	在每个元素之后插入内容	2
:lang(language)	p:lang(it)	选择一个lang属性的起始值=”it”的所有元素	2
element1~element2	p~ul	选择p元素之后的每一个ul元素	3
[attribute^=value]	a[src^=”https”]	选择每一个src属性的值以”https”开头的元素	3
[attribute$=value]	a[src$=”.pdf”]	选择每一个src属性的值以”.pdf”结尾的元素	3
[attribute=value*]	a[src*=”runoob”]	选择每一个src属性的值包含子字符串”runoob”的元素	3
:first-of-type	p:first-of-type	选择每个p元素是其父级的第一个p元素	3
:last-of-type	p:last-of-type	选择每个p元素是其父级的最后一个p元素	3
:only-of-type	p:only-of-type	选择每个p元素是其父级的唯一p元素	3
:only-child	p:only-child	选择每个p元素是其父级的唯一子元素	3
:nth-child(n)	p:nth-child(2)	选择每个p元素是其父级的第二个子元素	3
:nth-last-child(n)	p:nth-last-child(2)	选择每个p元素的是其父级的第二个子元素，从最后一个子项计数	3
:nth-of-type(n)	p:nth-of-type(2)	选择每个p元素是其父级的第二个p元素	3
:nth-last-of-type(n)	p:nth-last-of-type(2)	选择每个p元素的是其父级的第二个p元素，从最后一个子项计数	3
:last-child	p:last-child	选择每个p元素是其父级的最后一个子级。	3
:root	:root	选择文档的根元素	3
:empty	p:empty	选择每个没有任何子级的p元素（包括文本节点）	3
:target	#news:target	选择当前活动的#news元素（包含该锚名称的点击的URL）	3
:enabled	input:enabled	选择每一个已启用的输入元素	3
:disabled	input:disabled	选择每一个禁用的输入元素	3
:checked	input:checked	选择每个选中的输入元素	3
:not(selector)	:not(p)	选择每个并非p元素的元素	3
::selection	::selection	匹配元素中被用户选中或处于高亮状态的部分	3
:out-of-range	:out-of-range	匹配值在指定区间之外的input元素	3
:in-range	:in-range	匹配值在指定区间之内的input元素	3
:read-write	:read-write	用于匹配可读及可写的元素	3
:read-only	:read-only	用于匹配设置 “readonly”（只读）属性的元素	3
:optional	:optional	用于匹配可选的输入元素	3
:required	:required	用于匹配设置了 “required” 属性的元素	3
:valid	:valid	用于匹配输入值为合法的元素	3
:invalid	:invalid	用于匹配输入值为非法的元素	3

属性选择器

属性选择器的标志性符号是 []。

匹配含义：

^：开头  $：结尾  *：包含

格式：

E[title] 选中页面的E元素，并且E存在 title 属性即可。
E[title="abc"]选中页面的E元素，并且E需要带有title属性，且属性值完全等于abc。
E[attr~=val] 选择具有 att 属性且属性值为：用空格分隔的字词列表，其中一个等于 val 的E元素。
E[attr|=val] 表示要么是一个单独的属性值，要么这个属性值是以“-”分隔的。
E[title^="abc"] 选中页面的E元素，并且E需要带有 title 属性,属性值以 abc 开头。
E[title$="abc"] 选中页面的E元素，并且E需要带有 title 属性,属性值以 abc 结尾。
E[title*="abc"] 选中页面的E元素，并且E需要带有 title 属性,属性值任意位置包含abc。

1.0.9CSS_脱离标准流

2022-11-23T03:41:34.000Z

行内元素和块级元素的相互转换

我们可以通过display属性将块级元素和行内元素进行相互转换。display即“显示模式”。

块级元素可以转换为行内元素：

一旦，给一个块级元素（比如div）设置：

display: inline;

那么，这个标签将立即变为行内元素，此时它和一个span无异。inline就是“行内”。也就是说：

此时这个div不能设置宽度、高度；
此时这个div可以和别人并排了。

行内元素转换为块级元素：

同样的道理，一旦给一个行内元素（比如span）设置：

display: block;

那么，这个标签将立即变为块级元素，此时它和一个div无异。block”是“块”的意思。也就是说：

此时这个span能够设置宽度、高度
此时这个span必须霸占一行了，别人无法和他并排
如果不设置宽度，将撑满父亲

标准流里面的限制非常多，导致很多页面效果无法实现。如果我们现在就要并排、并且就要设置宽高，那该怎么办呢？办法是：移民！脱离标准流！

css中一共有三种手段，使一个元素脱离标准文档流：

（1）浮动
（2）绝对定位
（3）固定定位

浮动

使用属性float的元素性质：

脱标：一旦一个元素浮动了，那么，将能够并排了，并且能够设置宽高了。无论它原来是个div还是个span。所有标签，浮动之后，已经不区分行内、块级了。

浮动的元素互相贴靠

浮动的元素有“字围”效果

收缩：一个浮动的元素，如果没有设置width，那么将自动收缩为内容的宽度（这点非常像行内元素）

                Document

浮动的清除

方法1：给浮动元素的祖先元素加高度

如果一个元素要浮动，那么它的祖先元素一定要有高度。

有高度的盒子，才能关住浮动。

方法2：clear:both;

这种方法有一个非常大的、致命的问题，它所在的标签，margin属性失效了。读者可以试试看。

margin失效的本质原因是：上图中的box1和box2，高度为零

方法3：隔墙法

上面这个例子中，为了防止第二个div贴靠到第二个div，我们可以在这两个div中间用一个新的div隔开，然后给这个新的div设置clear: both;属性；同时，既然这个新的div无法设置margin属性，我们可以给它设置height，以达到margin的效果（曲线救国）。这便是隔墙法

内墙法：

与外墙法相比，内墙法的优势（本质区别）在于：内墙法可以给它所在的家撑出宽度（让box1有高）。即：box1的高度可以自适应内容。

而外墙法，虽然一道墙可以把两个div隔开，但是这两个div没有高，也就是说，无法wrap_content

方法4：overflow:hidden

这个属性的意思是“溢出隐藏”。顾名思义：所有溢出边框的内容，都要隐藏掉。

但是，前端开发工程师发现了，它能做偏方。如下：

一个父亲不能被自己浮动的儿子，撑出高度。但是，只要给父亲加上overflow:hidden; 那么，父亲就能被儿子撑出高了。这是一个偏方。

总结

1、加高法

工作上，我们绝对不会给所有的盒子加高度，这是因为麻烦，并且不能适应页面的快速变化。

     //设置height    
    
    
    //设置height

#2、`clear:both;`法

最简单的清除浮动的方法，就是给盒子增加clear:both；表示自己的内部元素，不受其他盒子的影响。

    
    
    
   //clear:both;

浮动确实被清除了，不会互相影响了。但是有一个问题，就是margin失效。两个div之间，没有任何的间隙了。

#3、隔墙法

在两部分浮动元素中间，建一个墙。隔开两部分浮动，让后面的浮动元素，不去追前面的浮动元素。墙用自己的身体当做了间隙。

我们发现，隔墙法好用，但是第一个div，还是没有高度。如果我们现在想让第一个div，自动根据自己的儿子撑出高度，我们就要想一些“小伎俩”。

内墙法：

内墙法的优点就是，不仅仅能够让后部分的p不去追前部分的p了，并且能把第一个div撑出高度。这样，这个div的背景、边框就能够根据p的高度来撑开了。

#4、`overflow:hidden;`

这个属性的本意，就是将所有溢出盒子的内容，隐藏掉。但是，我们发现这个东西能够用于浮动的清除。我们知道，一个父亲，不能被自己浮动的儿子撑出高度，但是，如果这个父亲加上了overflow:hidden；那么这个父亲就能够被浮动的儿子撑出高度了。这个现象，不能解释，就是浏览器的偏方。并且,overflow:hidden;能够让margin生效。

1.0.8CSS_盒模型

2022-11-23T03:12:34.000Z

盒子模型

即box model。无论是div、span、还是a都是盒子。

但是，图片、表单元素一律看作是文本，它们并不是盒子。这个很好理解，比如说，一张图片里并不能放东西，它自己就是自己的内容。

一个盒子中主要的属性就5个：width、height、padding、border、margin。如下：

width和height：==内容==的宽度、高度（不是盒子的宽度、高度）。
padding：内边距。
border：边框。
margin：外边距。

真实占有宽度 = 左border + 左padding + width + 右padding + 右border

如果想保持一个盒子的真实占有宽度不变，那么加width的时候就要减padding。加padding的时候就要减width

padding有四个方向

小属性的写法：

    padding-top: 30px;    padding-right: 20px;    padding-bottom: 40px;    padding-left: 100px;

综合属性的写法：(上、右、下、左)（顺时针方向，用空格隔开。margin的道理也是一样的）

padding:30px 20px 40px 100px;

如果只写了三个值，则顺序为：上、右和左、下。

如果只写了两个值，则顺序为：上和下、左和右。

比如说：

padding: 30px 40px;

则顺序等价于：30px 40px 30px 40px;

要懂得，用小属性层叠大属性。比如：

padding: 20px;padding-left: 30px;

上面的padding对应盒子模型为：

下面的写法：

padding-left: 30px;padding: 20px;

第一行的小属性无效，因为被第二行的大属性层叠掉了。

认识border

border就是边框。边框有三个要素：像素（粗细）、线型、颜色

border的所有的线型如下：

（1）按三要素拆：

border-width:10px;    //边框宽度border-style:solid;   //线型border-color:red;     //颜色。

(2)按方向来拆：

border-top:10px solid red;border-right:10px solid red;border-bottom:10px solid red;border-left:10px solid red;

（3）按三要素和方向来拆：(就是把每个方向的，每个要素拆开。3*4 = 12)

    border-top-width:10px;    border-top-style:solid;    border-top-color:red;    border-right-width:10px;    border-right-style:solid;    border-right-color:red;    border-bottom-width:10px;    border-bottom-style:solid;    border-bottom-color:red;    border-left-width:10px;    border-left-style:solid;    border-left-color:red;

一个border属性，是由三个小属性综合而成的。如果某一个小属性后面是空格隔开的多个值，那么就是上右下左的顺序。举例如下：

border-width:10px 20px;border-style:solid dashed dotted;border-color:red green blue yellow;

1.0.5CSS_2.0

2022-11-22T06:07:31.000Z

background 的常见背景属性

css2.1 中，常见的背景属性有以下几种：（经常用到，要记住）

background-color:#ff99ff; 设置元素的背景颜色。
background-image:url(images/2.gif); 将图像设置为背景。
background-repeat: no-repeat; 设置背景图片是否重复及如何重复，默认平铺满。（重要）
- no-repeat不要平铺；
- repeat-x横向平铺；
- repeat-y纵向平铺。
background-position:center top; 设置背景图片在当前容器中的位置。
background-attachment:scroll; 设置背景图片是否跟着滚动条一起移动。属性值可以是：scroll（与fixed属性相反，默认属性）、fixed（背景就会被固定住，不会被滚动条滚走）。
另外还有一个综合属性叫做background，它的作用是：将上面的多个属性写在一个声明中。

CSS3 中，新增了一些background属性：

background-origin
background-clip 背景裁切
background-size 调整尺寸
多重背景

RGBA 表示法

    background-color: rgba(0, 0, 255, 0.3);    border: 30px solid rgba(0, 255, 0, 0.3);

代码解释：

RGBA 即：Red 红、Green 绿、Blue 蓝、Alpha 透明度。
R、G、B 的取值范围是：0~~255；透明度的取值范围是 0~~1。

关于设置透明度的其他方式：

（1）opacity: 0.3; 会将整个盒子及子盒子设置透明度。也就是说，当盒子设置半透明的时候，会影响里面的子盒子。

（2）background: transparent; 可以单独设置透明度，但设置的是完全透明（不可调节透明度）。

十六进制表示法

比如红色：

background-color: #ff0000;

RGB 表示法

background-color: rgb(255,0,0);

clip-path：裁剪出元素的部分区域做展示

clip-path属性可以创建一个只有元素的部分区域可以显示的剪切区域。区域内的部分显示，区域外的隐藏。

虽然clip-path不是背景属性，但这个属性非常强大，但往往会结合背景属性一起使用，达到一些效果。

举例：（鼠标悬停时，放大裁剪的区域）

    .div1 {        width: 320px;        height: 320px;        border: 1px solid red;        background: url(http://img.smyhvae.com/20191006_1410.png) no-repeat;        background-size: cover;        /* 裁剪出圆形区域 */        clip-path: circle(50px at 100px 100px);        transition: clip-path .4s;    }    .div1:hover{        /* 鼠标悬停时，裁剪出更大的圆形 */        clip-path: circle(80px at 100px 100px);    }

clip-path属性的好处是，即使做了任何裁剪，容器的占位大小是不变的。比如上方代码中，容器的占位大小一直都是 320px * 320px。这样的话，也方便我们做一些动画效果。

1.0.4CSS_字体与文本属性

2022-11-22T06:02:31.000Z

01-CSS属性：字体属性和文本属性 | 千古前端图文教程 (qianguyihao.com)

CSS的单位

html中的单位只有一种，那就是像素px，所以单位是可以省略的，但是在CSS中不一样。 CSS中的单位是必须要写的，因为它没有默认单位。

绝对单位

1 in=2.54cm=25.4mm=72pt=6pc

相对单位

px：像素 em：印刷单位相当于12个点 %：百分比，相对周围的文字的大小

font 字体属性

CSS中，有很多非布局样式（与布局无关），包括：字体、行高、颜色、大小、背景、边框、滚动、换行、装饰性属性（粗体、斜体、下划线）等。

这一段，我们先来讲一下字体属性。

css样式中，常见的字体属性有以下几种：

p{    font-size: 50px;         /*字体大小*/    line-height: 30px;      /*行高*/    font-family: 幼圆,黑体;     /*字体类型：如果没有幼圆就显示黑体，没有黑体就显示默认*/    font-style: italic ;        /*italic表示斜体，normal表示不倾斜*/    font-weight: bold;    /*粗体*/    font-variant: small-caps;  /*小写变大写*/}

前三个可以连写成：

font: 400 14px/24px "宋体";font: 加粗 字号/行高/ 字体

PS：400是nomal，700是bold。

我们须将英语字体放在最前面，这样所有的中文，就不能匹配英语字体，就自动的变为后面的中文字体：

    font-family: "Times New Roman","微软雅黑","宋体";

上方代码的意思是，英文会采用Times New Roman字体，而中文会采用微软雅黑字体

所有的中文字体，都有英语别名。

微软雅黑的英语别名：

    font-family: "Microsoft YaHei";

宋体的英语别名：

    font-family: "SimSun";

于是，当我们把字号、行高、字体这三个属性合二为一时，也可以写成：

    font:12px/30px  "Times New Roman","Microsoft YaHei","SimSun";

字体加粗属性

.div {    font-weight: normal; /*正常*/    font-weight: bold;  /*加粗*/    font-weight: 100;    font-weight: 200;    font-weight: 900;}

在设置字体是否加粗时，属性值既可以填写normal、bold这样的加粗字体，也可以直接填写 100至900 这样的数字。normal的值相当于400，bold的值相当于700。

行高

CSS中，所有的行，都有行高。盒子模型的padding，绝对不是直接作用在文字上的，而是作用在“行”上的。

垂直方向来看，文字在自己的行里是居中的。比如，文字是14px，行高是24px，那么padding就是5px：

为了严格保证字在行里面居中，我们的工程师有一个约定： 行高、字号，一般都是偶数。这样可以保证，它们的差一定偶数，就能够被2整除。

行高可以用百分比，表示字号的百分之多少。

一般来说，百分比都是大于100%的，因为行高一定要大于字号。

比如说， font:12px/200% “宋体”等价于font:12px/24px “宋体”。200%可以理解成word里面的2倍行高。

如何让单行文本垂直居中

小技巧：如果一段文本只有一行，如果此时设置行高 = 盒子高，就可以保证单行文本垂直居中。这个很好理解。

上面这个小技巧，只适用于单行文本垂直居中，不适用于多行。如果想让多行文本垂直居中，还需要计算盒子的padding。计算方式如下：

`vertical-align: middle;` 属性

vertical-align属性可用于指定行内元素（inline）、行内块元素（inline-block）、表格的单元格（table-cell）的垂直对齐方式。主要是用于图片、表格、文本的对齐。

代码举例：

vertical-align: middle; /*指定行级元素的垂直对齐方式。*/

文本属性

CSS样式中，常见的文本属性有以下几种：

letter-spacing: 0.5cm ; 单个字母之间的间距
word-spacing: 1cm; 单词之间的间距
text-decoration: none; 字体修饰：none 去掉下划线、underline 下划线、line-through 中划线、overline 上划线
color:red; 字体颜色
text-align: center; 在当前容器中的对齐方式。属性值可以是：left、right、center（在当前容器的中间）、justify
text-transform: lowercase; 单词的字体大小写。属性值可以是：uppercase（单词大写）、lowercase（单词小写）、capitalize（每个单词的首字母大写）

列表属性

ul li{    list-style-image:url(images/2.gif) ;  /*列表项前设置为图片*/    margin-left:80px;  /*公有属性*/}

overflow属性：超出范围的内容要怎么处理

overflow属性的属性值可以是：

visible：默认值。多余的内容不剪切也不添加滚动条，会全部显示出来。
hidden：不显示超过对象尺寸的内容。
auto：如果内容不超出，则不显示滚动条；如果内容超出，则显示滚动条。
scroll：Windows 平台下，无论内容是否超出，总是显示滚动条。Mac 平台下，和 auto 属性相同。

鼠标的属性 cursor

鼠标的属性cursor有以下几个属性值：

auto：默认值。浏览器根据当前情况自动确定鼠标光标类型。
pointer：IE6.0，竖起一只手指的手形光标。就像通常用户将光标移到超链接上时那样。
hand：和pointer的作用一样：竖起一只手指的手形光标。就像通常用户将光标移到超链接上时那样。

比如说，我想让鼠标放在那个标签上时，光标显示手状，代码如下：

p:hover{    cursor: pointer;}

滤镜

这里只举一个滤镜的例子吧。比如说让图片变成灰度图的效果，可以这样设置滤镜：

1.0.7CSS_继承层叠

2022-11-22T03:19:31.000Z

05-CSS样式表的继承性和层叠性 | 千古前端图文教程 (qianguyihao.com)

继承性

我们给div加了一个border，但是发现只有div具备了border属性，而p标签却没有border属性。于是我们可以得出结论：

关于文字样式的属性，都具有继承性。这些属性包括：color、 text-开头的、line-开头的、font-开头的。
关于盒子、定位、布局的属性，都不能继承。

层叠性：处理冲突的能力（计算权重）

当多个选择器，选择上了某个元素的时候，要按照如下顺序统计权重：

id 选择器
类选择器、属性选择器、伪类选择器
标签选择器、伪元素选择器

举例1：计算权重

如上图所示，统计各个选择器的数量，优先级高的胜出。文字的颜色为红色。

举例2：权重相同时

上图可以看到，第一个样式和第二个样式的权重相同。但第二个样式的书写顺序靠后，因此以第二个样式为准（就近原则）。

上面这个图非常重要，我们针对这个图做一个文字描述：

选择上了，数权重，(id的数量，类的数量，标签的数量)。如果权重一样，谁写在后面听谁的。
没有选择上，通过继承影响的，就近原则，谁描述的近听谁的。如果描述的一样近，比如选择器权重，如果权重再一样重，谁写在后面听谁的

CSS样式表的冲突的总结

1、对于相同的选择器（比如同样都是类选择器），其样式表排序：行级样式 > 内嵌样式表 > 外部样式表（就近原则）
2、对于相同类型的样式表（比如同样都是内部样式表），其选择器排序：ID选择器 > 类选择器 > 标签选择器
3、外部样式表的ID选择器 > 内嵌样式表的标签选择器

1.0.6CSS_概览样式表

2022-11-21T16:54:31.000Z

概要

CSS 和 HTML 结合的三种方式：行内样式表、内嵌样式表、外部样式表
行内样式：
小奶包包

内嵌样式表：
```
 金曲大赏
 b50
```

   

@import url(a.css);

CSS 四种基本选择器：标签选择器、类选择器、ID选择器、通用选择器
CSS 几种扩展选择器：后代选择器、交集选择器、并集选择器

语法：

CSS 语法

语法格式：（其实就是键值对）

选择器{ 属性名: 属性值; 属性名: 属性值; }

或者可以写成：

选择器 {    k: v;    k: v;    k: v;    k: v;}选择器 {    k: v;    k: v;    k: v;    k: v;}

如果一个属性有多个值的话，那么多个值用空格隔开

CSS 只有/* */这种注释，没有//这种注释。而且注释要写在

然后让每个标签去选取自己想要用的类选择器：

段落1
段落2
段落3

也就是说：

（1）不要去试图用一个类名，把某个标签的所有样式写完。这个标签要多携带几个类，共同完成这个标签的样式。

（2）每一个类要尽可能小，有“公共”的概念，能够让更多的标签使用。

问题：到底用 id 还是用 class？

答案：尽可能的用 class，除非极特殊的情况可以用 id。

原因：id 是 js 用的。也就是说，js 要通过 id 属性得到标签，所以 css 层面尽量不用 id，要不然 js 就很别扭。另一层面，我们会认为一个有 id 的元素，有动态效果。

举例如下：

上图所示，css 和 js 都在用同一个 id，会出现不好沟通的情况。

我们记住这句话：类上样式，id 上行为。意思是说，class属性交给 css 使用，id属性交给 js 使用。

4-使用通配符进行匹配-不建议

CSS 的几种高级选择器

高级选择器：

1、后代选择器: 定义的时候用空格隔开

举例 1：

表示后代。.div1 p 表示.div1的后代所有的p

举例 2：

只要保持一个后代的关联即可.[因此直接写h3 .one{}也可]

讲到这里，我们再提一个 VS Code 的快捷键：

在 VS Code 中输入p#haha，按 tab 键后，会生成

。

在 VS Code 中输入p.haha，按 tab 键后，会生成

。

2、交集选择器：定义的时候紧密相连

如果后一个选择器是类选择器，则写为div.special；如果后一个选择器 id 选择器，则写为div#special

h3.special {    color: red;}

选择的元素要求同时满足两个条件：必须是 h3 标签，然后必须是 special 标签。

==没有空格的div.red（交集选择器）和有空格的div .red（后代选择器）不是一个意思==

3、并集选择器：定义的时候用逗号隔开

p,h1,.title1,#one {    color: red;}

伪类（选择器

伪类：同一个标签，根据其不同的种状态，有不同的样式。这就叫做“伪类”。伪类用冒号来表示。

比如div是属于box类，这一点很明确，就是属于box类。但是a属于什么类？不明确。因为需要看用户点击前是什么状态，点击后是什么状态。所以，就叫做“伪类”。

伪类选择器分为两种。

（1）静态伪类：只能用于超链接的样式。如下：

:link 超链接点击之前
:visited 链接被访问过之后

PS：以上两种样式，只能用于超链接。

（2）动态伪类：针对所有标签都适用的样式。如下：

:hover “悬停”：鼠标放到标签上的时候
:active “激活”：鼠标点击标签，但是不松手时。
:focus 是某个标签获得焦点时的样式（比如某个输入框获得焦点）

超链接a标签

#超链接的四种状态

a标签有4种伪类（即对应四种状态），要求背诵。如下：

:link “链接”：超链接点击之前
:visited “访问过的”：链接被访问过之后
:hover “悬停”：鼠标放到标签上的时候
:active “激活”：鼠标点击标签，但是不松手时。

对应的代码如下：

记住，在css中，这四种状态必须按照固定的顺序写：

a:link 、a:visited 、a:hover 、a:active

如果不按照顺序，那么将失效。“爱恨准则”：love hate

a{}和a:link{}的区别：

a{}定义的样式针对所有的超链接(包括锚点)
a:link{}定义的样式针对所有写了href属性的超链接(不包括锚点)

在大量的实践中，发现不写link、visited也挺兼容。写法是：

a:link、a:visited都是可以省略的，简写在a标签里面。也就是说，a标签涵盖了link、visited的状态（前提是都具有了相同的属性）。写法如下：

        .nav ul li a{            display: block;            width: 120px;            height: 50px;            text-decoration: none;            background-color: purple;            color:white;        }        .nav ul li a:hover{            background-color: orange;        }

当然了，在写a:link、a:visited这两个伪类的时候，要么同时写，要么同时不写。如果只写a属性和a:link属性，不规范。

CSS3选择器

（单独写在后面的内容中）

1.0.3HTML_总结

2022-11-19T03:19:31.000Z

html 的常见元素

html 的常见元素主要分为两类：head 区域的元素、body 区域的元素。

1、head 区域的 html 元素

head 区域的 html 元素，不会在页面上留下直接的内容。

base 标签用于指定基础的路径。指定之后，所有的 a 链接都是以这个路径为基准

meta
title
style
link
script
base

2、html 元素（body 区域）

body 区域的 html 元素，会直接出现在页面上。

div、section、article、aside、header、footer
p
span、em、strong
表格元素：table、thead、tbody、tr、td
列表元素：ul、ol、dl、dt、dd
a
表单元素：form、input、select、textarea、button

div 是最常见的元素，大多数场景下，都可以用div（实在不行就多包几层div）。可见，div 是比较通用的元素，这也决定了 div 的的语义并不是很明确。

常见标签的重要属性：

a[href,target]
img[src,alt]
table td[colspan,rowspan]。设置当前单元格占据几行几列。在合并单元格时，会用到。
form[action,method,enctype]
input[type,value]
button[type]
selection>option[value]
label[for]

html 文档的大纲

我们平时在写论文或者其他文档的时候，一般会先列出大纲，然后再写具体的内容。

同样，html 网页也可以看成是一种文档，也有属于它的大纲。

一个常见的html文档，它的结构可以是：

查看网页大纲的工具

我们可以通过 http://h5o.github.io/ 这个工具查看一个网页的大纲。

使用方法：

（1）将网址 http://h5o.github.io/ 保存到书签栏

（2）去目标网页，点击书签栏的网址，即可查看该网页的大纲。

这个工具非常好用，既可以查看网页的大纲，也可以查看 markdown 在线文档的结构。

html 元素的默认样式和 CSS Reset

比如下拉框这种比较复杂的元素，是自带默认样式的。如果没有这个默认样式，则该元素在页面上不会有任何表现，则必然增加一些工作量。

同时，默认样式也会带来一些问题：比如，有些默认样式我们是不需要的；有些默认样式甚至无法去掉。

如果我们不需要默认的样式，这里就需要引入一个概念：CSS Reset。

#常见的 CSS Reset 方案

方案一：

CSS Tools: Reset CSS。链接：https://meyerweb.com/eric/tools/css/reset/

方案二：

雅虎的 CSS Reset。链接：https://yuilibrary.com/yui/docs/cssreset/

我们可以直接通过 CDN 的方式引入：

方式三：（比较有争议）

*{    margin: 0;    padding: 0;}

上面何种写法，比较简洁，但也有争议。有争议的地方在于，可能会导致 css 选择器的性能问题。

Normalize.css

上面的几种 css reset 的解决思路是：将所有的默认样式清零。

但是，Normalize.css 的思路是：既然浏览器提供了这些默认样式，那它就是有意义的。既然不同浏览器的默认样式不一致，那么，Normalize.css就将这些默认样式设置为一致。

哪些元素可以自闭合

自闭合的元素中不能再嵌入别的元素。且 HTML5 中要求加斜杠。

表单元素 input
图片 img
br、hr
meta、link

form 表单的作用

直接提交表单
使用 submit / reset 按钮
便于浏览器保存表单
第三方库（比如 jQuery）可以整体获取值
第三方库可以进行表单验证

所以，如果我们是通过 Ajax 提交表单数据，也建议加上 form。

1.0.2HTML_存储缓存网络状态

2022-11-18T13:34:31.000Z

Web 存储

H5 中有两种存储的方式

1、**window.sessionStorage 会话存储：**

保存在内存中。
生命周期为关闭浏览器窗口。也就是说，当窗口关闭时数据销毁。
在同一个窗口下数据可以共享。

在应用程序-存储-会话存储里可以看到

2、**window.localStorage 本地存储**：

有可能保存在浏览器内存里，有可能在硬盘里。
永久生效，除非手动删除（比如清理垃圾的时候）。
可以多窗口共享。

Web 存储的特性

（1）设置、读取方便。

（2）容量较大，sessionStorage 约5M、localStorage 约20M。

（3）只能存储字符串，可以将对象 JSON.stringify() 编码后存储。

网络状态

我们可以通过 window.onLine 来检测用户当前的网络状况，返回一个布尔值。另外：

window.online：用户网络连接时被调用。
window.offline：用户网络断开时被调用（拔掉网线或者禁用以太网）。

应用缓存

HTML5中我们可以轻松的构建一个离线（无网络状态）应用，只需要创建一个 cache manifest 缓存清单文件。

#优势

1、可配置需要缓存的资源；

2、网络无连接应用仍可用；

3、本地读取缓存资源，提升访问速度，增强用户体验；

4、减少请求，缓解服务器负担。

#`cache manifest` 缓存清单文件

缓存清单文件中列出了浏览器应缓存，以供离线访问的资源。推荐使用 .appcache作为后缀名，另外还要添加MIME类型。

缓存清单文件里的内容怎样写：

（1）顶行写CACHE MANIFEST。

（2）CACHE: 换行指定我们需要缓存的静态资源，如.css、image、js等。

（3）NETWORK: 换行指定需要在线访问的资源，可使用通配符（也就是：不需要缓存的、必须在网络下面才能访问的资源）。

（4）FALLBACK: 换行当被缓存的文件找不到时的备用资源（当访问不到某个资源时，自动由另外一个资源替换）。

缓存清单文件怎么用：

（1）例如我们创建一个名为 demo.appcache的文件。例如：

demo.appcache：

CACHE MANIFEST# 注释以#开头#下面是要缓存的文件CACHE:    http://img.smyhvae.com/2016040101.jpg

（2）在需要应用缓存在页面的根元素(html)里，添加属性manifest=”demo.appcache”。路径要保证正确。例如：

代码部分

                Document                                    
                                        
            记住用户名和密码
            用户名：        

        密码：        

        记住密码        

            
        网络状态监听
        应用缓存
    缓存文件保存为.appcache

1.0.1HTML_1.0

2022-11-17T02:02:31.000Z

Web前端分三层：

HTML（HyperText Markup Language）：超文本标记语言。从语义的角度描述页面的结构。相当于人的身体组织结构。
CSS（Cascading Style Sheets）：层叠样式表。从审美的角度美化页面的样式。相当于人的衣服和打扮。
JS：JavaScript。从交互的角度描述页面的行为。相当于人的动作，让人有生命力。

HTML

HTML标签是分等级的，HTML将所有的标签分为两种：

文本级标签：p、span、a、b、i、u、em。文本级标签里只能放文字、图片、表单元素。（a标签里不能放a和input）
容器级标签：div、h系列、li、dt、dd。容器级标签里可以放置任何东西。

从学习p的第一天开始，就要牢牢记住：p标签是一个文本级标签，p里面只能放文字、图片、表单元素。其他的一律不能放。

无序标签
无序标签
无序标签
无序标签

有序标签
有序标签
有序标签

标签实际应用场景：

声明：ul的儿子，只能是li。但是li是一个容器级标签，li里面什么都能放，甚至可以再放一个ul。

标准的div+css页面，只会用到种类很少的标签：

div  p  h1  span   a   img   ul   ol    dl    input

HTML5

#H5中新增的语义标签

表示区块
表示文章。如文章、评论、帖子、博客
表示页眉
表示页脚
表示导航
表示侧边栏。如文章的侧栏
表示媒介内容分组。
表示标记 (用得少)
表示进度 (用得少)
表示日期

H5中新增的表单类型

email 只能输入email格式。自动带有验证功能。
tel 手机号码。
url 只能输入url格式。
number 只能输入数字。
search 搜索框
range 滑动条
color 拾色器
time 时间
date 日期
datetime 时间日期
month 月份
week 星期

DOM 操作

#获取元素

document.querySelector(“selector”) 通过CSS选择器获取符合条件的第一个元素。
document.querySelectorAll(“selector”) 通过CSS选择器获取符合条件的所有元素，以类数组形式存在。

#类名操作

Node.classList.add(“class”) 添加class
Node.classList.remove(“class”) 移除class
Node.classList.toggle(“class”) 切换class，有则移除，无则添加
Node.classList.contains(“class”) 检测是否存在class

#自定义属性

js 里可以通过 box1.index=100; box1.title 来自定义属性和获取属性。

H5可以直接在标签里添加自定义属性，但必须以 data- 开头。

拖拽元素

页面中设置了 draggable="true" 属性的元素。

拖拽元素的事件监听：（应用于拖拽元素）

ondragstart当拖拽开始时调用
ondragleave 当鼠标离开拖拽元素时调用
ondragend 当拖拽结束时调用
ondrag 整个拖拽过程都会调用

目标元素

比如说，你想把元素A拖拽到元素B里，那么元素B就是目标元素。

页面中任何一个元素都可以成为目标元素。

目标元素的事件监听：（应用于目标元素）

ondragenter 当拖拽元素进入时调用
ondragover 当拖拽元素停留在目标元素上时，就会连续一直触发（不管拖拽元素此时是移动还是不动的状态）
ondrop 当在目标元素上松开鼠标时调用
ondragleave 当鼠标离开目标元素时调用

历史

界面上的所有JS操作不会被浏览器记住，就无法回到之前的状态。

在HTML5中可以通过 window.history 操作访问历史状态，让一个页面可以有多个历史状态

window.history对象可以让我们管理历史记录，可用于单页面应用，Single Page Application，可以无刷新改变网页内容。

window.history.forward(); // 前进
window.history.back(); // 后退
window.history.go(); // 刷新
window.history.go(n); //n=1 表示前进；n=-1 后退；n=0s 刷新。如果移动的位置超出了访问历史的边界，会静默失败，但不会报错。
通过JS可以加入一个访问状态
history.pushState; //放入历史中的状态数据, 设置title(现在浏览器不支持改变历史状态)

#地理定位

获取地理信息的方式

#1、IP地址

#2、三维坐标：

（1）GPS（Global Positioning System，全球定位系统）。

目前世界上在用或在建的第2代全球卫星导航系统（GNSS）有：

1.美国 Global Positioning System （全球定位系统）简称GPS；
2.苏联/俄罗斯 GLOBAL NAVIGATION SATELLITE SYSTEM （全球卫星导航系统）简称GLONASS（格洛纳斯）；
3.欧盟（欧洲是不准确的说法，包括中国在内的诸多国家也参与其中）Galileo satellite navigation system（伽利略卫星导航系统）简称GALILEO（伽利略）；
4.中国 BeiDou(COMPASS) Navigation Satellite System（北斗卫星导航系统）简称 BDS ；
5.日本 Quasi-Zenith Satellite System （准天顶卫星系统）简称QZSS ；
6.印度 India Regional Navigation Satellite System（印度区域卫星导航系统）简称IRNSS。

以上6个系统中国都能使用。

（2）Wi-Fi定位：仅限于室内。

（3）手机信号定位：通过运营商的信号塔定位。

API详解

navigator.getCurrentPosition(successCallback, errorCallback, options) 获取当前地理信息
navigator.watchPosition(successCallback, errorCallback, options) 重复获取当前地理信息

1、当成功获取地理信息后，会调用succssCallback，并返回一个包含位置信息的对象position：（Coords即坐标）

position.coords.latitude纬度
position.coords.longitude经度

2、当获取地理信息失败后，会调用errorCallback，并返回错误信息error。

3、可选参数 options 对象可以调整位置信息数据收集方式

全屏

HTML5规范允许用户自定义网页上任一元素全屏显示。

#开启/关闭全屏显示

方法如下：（注意 screen 是小写）

requestFullscreen()   //让元素开启全屏显示    cancleFullscreen()    //让元素关闭全屏显示

为考虑兼容性问题，不同的浏览器需要在此基础之上，添加私有前缀，比如：（注意 screen 是大写）

    webkitRequestFullScreen     webkitCancleFullScreen    mozRequestFullScreen    mozCancleFullScreen

检测当前是否处于全屏状态

方法如下：

    document.fullScreen

不同浏览器需要加私有前缀，比如：

     document.webkitIsFullScreen     document.mozFullScreen

#全屏的伪类

:full-screen .box {}
:-webkit-full-screen {}
:moz-full-screen {}

比如说，当元素处于全屏状态时，改变它的样式。这时就可以用到伪类。

代碼部分

                        Document    H1: 小奶包包穿越自由
    H1: 小奶包包穿越自由
    H1: 小奶包包穿越自由
    H1: 小奶包包穿越自由
    This is a paragraph
        
    this
is a para
graph with line breaks    在html文本里手动换行或者空格都只会被显示为一个空格而已    This is another paragraph
    
            div分割的区块会单独占据一行        这种容器型标签可以放其他标签元素
    
    测试语句    span跟div的区别是不会换行另起 也只是文本级标签 只能放置文字 图片 表单        
        购买信息
        购买        
    这种模式叫做“div+css” div标签负责布局、结构、分块, css负责样式            
        
    
            
        
    
    
                pre标签内会保留所有空白字符(空格 换行符)但是真正排网页的过程中几乎用不着    
    
    字体标签和超链接
    常见的转义字符：空格 小于号< 大于号> 斜体 或 这样
     形如的就是    
这是一个超链接跳转到外部文件    
这里设置一个锚点用于从本页面其他位置跳转过来        
    在这里的href写上#+之前设置的锚点名(用name或者id属性)就可以跳转过去
    点击可以打开outlook    

    
    图片标签
                    
想要保证图片等比例缩放就只能设置width和height其中一个    
    标签
            默认1
        默认2
        默认3
    
            dt標簽是列表的標題 必須有 容器型標簽
        dd是列表項 可以沒有 容器型標簽
    
            金曲大賞
                    黑與白
            寒夜
            説喜歡
        
    
    
    表格
                        line1             line2             line3         
                    line1             line2                     
    
    
    内嵌框架
    默認顯示
    默認顯示
    默認顯示
    可以用這種方式讓上面的内容展示在下面的框中
        
    表單
    interact with users
            
    
    名稱相同的radio可以組成互斥按鈕
    
    名稱相同的多選框作爲一組進行選擇
    
    
    
    
    
    
    
        

        

    多行文本輸入框    這裏提一下常見的標簽label作用:讓表單元素旁邊的文字于其產生關係
    侄女(這樣點擊文字是不會選中的)
    侄女    
    多媒體標簽
                                                    H5中新增内容
    对输入框内容进行提示
                                        DOM操作

                Document                DOM操作
        div
        拖拽
    

    
    拖拽后监听事件
        
    
    历史
        地理位置
        全屏
    点击全屏

博士联培项目

2022-11-08T01:35:01.000Z

Data science

COOLGuysneverSleep

量化 概念先导

量化选股

采用数量的方法判断某个公司是否值得买入

基本面选股

市场行为选股

量化选股的评价指标

《量化投资：策略与技术》读书笔记

Django框架

项目结构

软件开发模式

JS异步编程

服务器

使用 WampServer 搭建 HTTP服务

静态网站和动态网站

PHP

异步

执行顺序

Ajax

jQuery 中的 Ajax

Promise

宏任务& 微任务

JS基础

基础部分

写在哪

区分大小写

输出

弹窗

输出至网页里

输出至控制台

变量

常量

代码块{}只用来分组 在外部仍可访问内部变量

流程控制语句有if 有switch 有for 有while

面向对象

创建对象

内置对象

常用方法

html 方法-用到查

倒计时写法

Moment.js

函数

定义

调用

fn() 和 fn 的区别【重要】

拷贝

正则表达式

DOM操作

获取元素

操作元素

新增

删除

改变HTML

一段新的html

改变CSS

绑定事件

onload&unonload

定时器

jQuery

引包

插件

语法

jQuery选择器

常见事件

获取|获取内容

遍历

常见模板

鼠标悬停 弹出下拉菜单

鼠标悬停变色

突出显示

手风琴效果

ES6新增

箭头函数

Flex布局

1.0.11CSS3_属性

文字阴影

盒子大小

边框

边框圆角：border-radius

边框阴影：box-shadow

量化概念先导

代码块{}只用来分组在外部仍可访问内部变量

鼠标悬停弹出下拉菜单

边框圆角：`border-radius`

边框阴影：`box-shadow`

内墙法：

#2、`clear:both;`法

#4、`overflow:hidden;`

`vertical-align: middle;` 属性

1.0.7CSS_继承层叠

1.0.6CSS_概览样式表