HTML
- HTML(*Hypertext Markup Language)是一种超文本标记语言
一、HTML标记
1 . HTMl元素分析
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-dqwzelyx-1598868442842)(https://qige.io/web/brief-html/img/f63738cc51ebfa14.png)]
* 开始标签（Opening tag）：包含元素的名称（本例为 p），被左、右角括号所包围。表示元素从这里开始或者开始起作用 —— 在本例中即段落由此开始。
* 结束标签（Closing tag）：与开始标签相似，只是其在元素名之前包含了一个斜杠。这表示着元素的结尾 —— 在本例中即段落在此结束。初学者常常会犯忘记包含结束标签的错误，这可能会产生一些奇怪的结果。
* 内容（Content）：元素的内容，本例中就是所输入的文本本身。
* 元素（Element）：开始标签、结束标签与内容相结合，便是一个完整的元素。
2 . HTML文档剖析
<!DOCTYPE html>: 声明文档类型。出于历史原因需要，现在可有可无。<html></html>: 这个元素包裹了整个完整的页面，是一个根元素，其它元素都嵌套到其中。<head></head>: 这个元素是一个容器，它包含了所有你想包含在HTML页面中但不想在HTML页面中显示的内容。这些内容包括你想在搜索结果中出现的关键字和页面描述，CSS样式，字符集声明等等。<meta charset="utf-8">: 这个元素设置文档使用utf-8字符集编码，utf-8字符集包含了人类大部分的文字。基本上他能识别你放上去的所有文本内容。毫无疑问要使用它，并且它能在以后避免很多其他问题。<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">: 指定页面的图标，出现在浏览器标签上。(试一试：你可随意下载一个.ico图标文件到工作目录中)<title></title>: 设置页面标题，出现在浏览器标签上，当你标记/收藏页面时它可用来描述页面。<body></body>: 元素。 包含你能在页面看到的所有内容，包括文本，图片，音频，游戏等等。
3. 标题（heading）
标题标签，成段展示，独占一行，加粗字体，更改字体大小（从 1 到 6 依次减小）
<h1></h1>
<h2></h2>
<h3></h3>
<h5></h5>
<h6></h6>
4 . 文本格式
- 除本节介绍的这些标签可用于文本的格式外，其它标签都不建议用来进行格式的设置，HTML 是用来表现页面内容而不是对页面进行修饰的，专门的页面美化需要使用后面将要学习的 CSS 。
- Highlight：
<mark></<mark> - 中划线：
<del></del> - 下划线：
<ins></<ins>通常来讲，不要给普通文本加下划线，因为用户会误以为是超链接。 - 缩小字体：
<small></small> - 加粗字体：
<strong></strong> - 斜体：`
- 换行：
<br> - 水平线：
<hr>
5. a 标签
1）超链接
<a href = “https://www.baidu.com”>百度</a>
href 是 hyperText reference 超文本引用
<a>标签可以包裹图片
<a>是 anchor --> 锚，定在某个点（置顶）
<a>标签的功能
2）锚点
锚点，也称为书签，用于标记页面的某个元素或位置。通过锚点，我们可以轻易的在长页面内实现跳转。
先使用id属性生成某元素的锚点，然后再使用超链接指向该锚点即可。
例如：
<h2 id=”C4”>第四章 论零号病人的重要性</h2>
<a href=”#C4”>跳到第四章</a>
3）打电话，发邮件
<a href=”tel:18581113937>给小明打电话</a>
<a href=”mailto13341907646@qq.com>给小明发邮件</a>
4）协议限定符
写一个你点我试试写了 JavaScript 就可以在里面写 js 了
6. 图片及文件路径img
<img src="https://mdbootstrap.com/img/logo/mdb192x192.jpg" alt="MDB Logo" width="200" height="200">
说明：
1.src属性为要显示图片文件的位置 URL，即图片文件的路径
2.alt属性当获取图片出现问题时显示的文字（占位符）
3.可为图片指定高宽度，但不建议（可能导致图片变形）
- 文件路径
为获取图片文件，我们需要指定该文件位于何处，这称为文件路径。文件路径有相对路径和绝对路径两种。
上面图片的例子即为绝对路径。下面是相对路径的例子：
| 例子 | 解释 |
|---|---|
<img src="picture.jpg"> | 该图片文件与当前文档在同一目录中 |
<img src="../picture.jpg"> | 该图片文件在上一级目录中 |
<img src="./images/picture.jpg"> | 该图片文件在当前目录下的images目录中 |
7. form 表单，能发送数据，非常重要
<form></form>
form method = “get/post”这是 form 发送数据的两种方式
action = “http://ssffg.php”这是发送给谁，就是 action 的位置- form 表单里面还需要配合 input 来写，input 里面需要 type
| 例子 | 解释 |
|---|---|
<input type = “text”> | 输入框 |
<input type = “password”> | 密码框的意思，默认是暗文 |
<input type = “submit”> | 提交的组件，也就是登录 |
<input type = “submit” value = “login”> | 改变提交框的值 |
<input type = “radio”> | 单选框 |
<input type = “checkbox”> | 复选框 |
要注意语义化，所以用 p 标签更好，p 标签天生的功能就是换行
8. 无序列表 ul，unorder list 只有 type = “”这一个属性可以改
<ul type = “disc”>
<li>草莓</li>
<li>苹果</li>
<li>橙子</li>
</ul>
如 type = “disc” 意思是 discircle，实心圆
如 type = “square” 意思是 square，实心方块
如 type = “circle” 意思是 circle，圈(空心圆)
9.有序列表
喜欢的电影
<ol>
<li>marvel</li>
<li>速 8</li>
<li>返老孩童</li>
<li>了不起的盖茨比</li>
</ol>
如果写成：<ol type = “1”>就以 ABC 排序， 改成 a，就以 abc 排序
此处的 type 值只有五个：数字，大写英文 A，小写英文 b，罗马数字大写 I，罗马数
字小写 i
A 可以 27 进制
写成 <ol type = “1” reversed = “reversed”>就是倒序
如果想从第 2 个开始排序，就写<ol type = “1” start = “2”>
如果想从第 117 个开始排序，就写<ol type = “i” start = “117”>
想从第几个开始拍，start 里面写数字几
** CSS **
前情提要
- 结构 html，样式 css，行为 js 相分离
- css 相当于装修材料，cascading style sheet(层叠 样式 表)
- css 注释方式仅有 /* 被注释的内容 */ 快捷键 ctrl+?
注释可以用来调节 bug，注释一行，调试一行
一、引入 css
1、行间样式:<div style = “”>
2、页面级 css
例：
<head>
<style type = “text/css”>
</style>
</head>
- 这个 type = “text/css”的意思是告诉浏览器，我这里面是 css，可写可不写
3、外部 css 文件
- 打开一个文件以 leason.css 命名保存，一定要写.css
并且在头标签里面写
<head>
<link rel = “stylesheet” type = “text/css” href = “”>
</head> - rel = “stylesheet” type = “text/css” 是告诉浏览器我是 css，href 还是引入地址用的
- border-radius: 50%方框变圆
二、选择器
1、id 选择器
- 特点：一个元素只能有一个 id 值，一个 id 只对应一个元素，一一对应的
- 语法格式：#（加上 id 后面的值是什么就填什么，如 only），就是选中这个 id 了
例
<div id = “only”>123</div>
在 css 中写：
#only { background-color: red; }
2）class 选择器（最常用的选择器）
- 语法格式: .class 就可以找到 class 选择器了
- 特点：一个 class 可以对应多个元素
例
<div class = “demo”> 123</div>
<div class = “demo”> 234</div>
.demo{ background-color: green; } 在上面这种情况，123 和 234 都变成了绿色 例 如果想让第一个多一个值，多写一个 class 名<div class = “demo demo1”> 123234.demo{
background-color: green;
}
.demo1{
color: #f40;
}`
3、标签选择器
- 语法格式：标签名{}
如果想选择就写 div{}，如果想选择 就写 span{}，不管被套多少层，都
会被选择出来，而且是选择全部
例
<span>123</span>
`
234
4、通配符选择器
语法格式： *{}
- '*'是任意的意思，此处是 all，所有的标签（包括和）
三、CSS权重
| 标签名 | 权重值 |
|---|---|
| ！important | infinity 正无穷 |
| 行间样式 | 1000 |
| id选择器 | 100 |
| class 选择器、属性选择器、伪类选择器 | 10 |
| 标签选择器、伪元素选择器 | 1 |
| 通配符选择器 | 0 |
- 如果权重值一样（优先级一样），会显示后面的，即先来后到，谁在后面，谁（后面的）覆盖前面的——后面的会覆盖 前面的
- 在权重中，是 256 进制，是从 0 到 255 后变成 1 ，所以这里的 1000 不是一千，100 不是一百
四、CSS 代码块
以<div></div>为例，css 引入部分写成，用花括号包裹起来的是 css 代码区，在括号
里面写 属性名：属性值； 每一个属性与属性之间用分号;隔开
div{ font-size:12px; //属性名：属性值； font-weight:bold; }
五、属性
1、字体属性
| 属性名 | 属性值（举例） | 效果/功能 |
|---|---|---|
| font-size: | 12px | 设置字体大小，默认是 16px，但是互联网字体一般用12px 或 14px。这个设置的是字体的高度 |
| font-weight: | lighter | 细体 |
| font-weight: | normal | 正常（默认值） |
| font-weight: | bold | 加粗，跟效果是一样的 |
| font-weight: | bolder | 加更粗 |
| font-weight: | lighter | 细体 |
| font-weight: | 100,200 到 900 | 从细到粗，都是整百来表达 |
| font-style: | italic; | 斜体，em 这个标签本身就带有 italic 的样式 |
| font-family: | arial; | 设置字体包的样式，这个是乔布斯发明的字体 |
| border: | 1px solid black; | 这是一个复合属性。可以给容器加外边框。 |
字体颜色属性（color) 三种写法：
- 1、纯英文单词：red，green 等（一般不用）
- 2、颜色代码，如#ff4400; 其中每两位都是从 00 到 ff，分别对应红 r（从 00 到 ff），
绿 g（从 00 到 ff），蓝 b（从 00 到 ff），这是一个十六进制的数，代表的是饱和度，
如果没两位都可以重复，那么简写成#f40 淘宝红，#ffffff 白色，#000000 黑色。 - 3、颜色函数，如 color:rgb(255,255,255); //这是白色
rgb（0-255，0-255，0-255）里面的 0-255 是十进制数 - transparent 是透明色
2、容器边框属性（border）
border:1px solid black;
- 第一位是 border-width 代表粗细；
- 第二位是 border-style 设置实心 solid，虚线；
- 第三位是 border-color 设置颜色
还可以单独写成 border-width:1px;
border-style:dashed;代表虚线 dotted 是点
4、对齐方式(text-align)
| 属性值 | 解释 |
|---|---|
| left; | 对齐方式：左对齐 |
| conter; | 对齐方式：一行居中 |
| right; | 对齐方式：右对齐 |
5、其他字体属性
| 属性值 | 举例 | 解释 |
| -------- | -------- |
| line-height: | 16px; | 单行文本所在的高度。 当 line-height=height （文本所占高度=容器高度） 时，单行文本水平垂直居中 |
| | 1.2em； |单行文本所在的高度。意思是文字的行高是 1.2 倍行高 |
| text-indent: | 2em; |意思是首行缩进 2em（2 个文本单位） |
- 单位的衡量标准：绝对单位（m，cm 等），相对单位（px，em 等）
px 是像素的意思，一个像素只能显示一个颜色； - 屏幕的分辨率，就是说的像素，国际标准是每英寸所能容纳的垂直像素点数。
em 是文本单位，1em = 1* font-size 该文本的字体大小
6、盒子模型
1）盒子的组成三大部分：
- 盒子壁 border
- 盒子内边距 padding
- 盒子内容 width+height
2）盒子模型（四部分组成）
- 盒子壁 border
- 盒子内边距 padding
- 盒子内容
六、弥补 margin 塌陷
- 可以使用 bfc，那么如何触发一个盒子的 bfc？
1）position:absolute;
2）display:inline-block;
3）float:left/right; //浮动
4）overflow:hidden; //溢出盒子的部分要隐藏展示
JAVASCIRPT
一、JS语言特色
- js 是解释性语言：(不需要编译成文件）跨平台
- java 先通过 javac，编译成.class 文件，通过 jvm（Java 虚拟机）进行解释执行
.java→javac→编译→.class→jvm→解释执行（java 可以跨平台）（java 是 oak 语言） - 是异步加载
- 单线程：同一时间只能做一件事——js 引擎是单线程
（同一时间做很多事叫多线程） - ECMA（欧洲计算机制造联合会）标注：为了取得技术优势，微软推出了 JScript，
- CEnvi 推出 ScriptEase，与 JavaScript 同样可在浏览器上运行。为了统一规格 JavaScript
兼容于 ECMA 标准，因此也称为 ECMAScript。
js 是轮转时间片
二、变量声明
1.声明、赋值分解
var a; 这个叫变量声明。我们向系统中申请了 var 这个框，命名叫 a
给 a 赋值 100，写作 a =100，这里不是等号是赋值
2.单一 var 声明法
- 命名规则
A.变量名必须以英文字母、、$ 开头
B.变量名可以包括英文字母、、$、数字
C.不可以用系统的关键字、保留字作为变量名
3.关键字/保留字
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
三.数据类型
1、不可改变的原始值（栈数据）栈 stack
Number,String,Boolean,undefined,null
2、引用值（堆数据）大致上放堆 heap 里面
array 数组, Object, function … data,RegExp 正则
3、js 语句基本规则
- 语句后面要用分号结束“；”但 function test(){}，for(){}，if(){}后面都不用加分号
- js 语法错误会引发后续代码终止，但不会影响其它 js 代码块
- 书写格式要规范，“= + / -”两边都应该有空格
四.JS运算符
1、运算操作符
-
-
- / % “++”，“- -”，”+=“，“-=”，“/=“，“*=”，“%=”
-
- “+”作用：数学运算、字符串链接
- 任何数据类型加字符串都等于字符串
2、比较运算符
“>”，”<”，”==”，“>=”，“<=”，”!=”
*比较结果为 boolean 值
但凡是运算符，都是要有运算的用到布尔值，true 或 fals，字符串的比较，比的是 ASCII 码
3、逻辑运算符：“&&”，“||”，“!“运算结果为真实的值
“&&”与运算符
两个表达式：先看第一个表达式转换成布尔值的结果是否为真，如果结果为真，那
么它会看第二个表达式转换为布尔值的结果，然后如果只有两个表达式的话，只看
看第二个表达式，就可以返回该表达式的值了，如果第一位布尔值为 false，不看后
面的，返回第一个表达式的值就可以了
4、被认定为 false 的值：转换为布尔值会被认定为 false 的值 undefined，
null，NaN， “”（空串）， 0， false
五.条件语句
if(条件判断){ 当条件成立时，执行里面的执行语句 } 当 if 的条件成立时，才能执行{}内的语句 当条件转化为布尔值，如果为 true 就执行；如果为 false 就不执行
六、for 循环(for 循环不固定，非常灵活)
格式：
for (var i = 0; i < 10; i++) { }
- for 是关键字，（）括号里面三个语句用两个分号隔开，{}里面是循环体
七、while, do while
1、while 循环
while 循环是 for 循环的简化版 for( ； ； ){}，while 循环底层机制是 for 循环。 for ( ; 只在这一部分写，前后不写 ; ){}
2、do while 循环
do while 是不管满不满足条件都会先执行一次，再判断成不成立，如果成立才会执行
第二次，不成立就停止
do{ document.write('a'); i ++; }while(i < 10)
3、switch case 条件判断语句
if(条件判断) switch(条件){ case 写条件：里面判是否相符： 如果相符合就执行 case 后面的语句比如 console.log(‘a’) }
- switch 不负责任，如果判断了 a 是符合条件的，也会把后面的连带打印出来
- 加个 break，就可以终止语句
八、数组Array
除了 Object 之外， Array 类型恐怕是 ECMAScript 中最常用的类型了。
ECMAScript 中的数组与其他多数语言中的数组有着相当大的区别。虽然 ECMAScript 数组与其他语言中的数组都是数据的有序列表，但与其他语言不同的是，ECMAScript 数组的每一项 可以保存任何类型的数据（不建议！）。
也就是说，可以用数组的第一个位置来保存字符串，用第二位置来保存数值，用第三个位置来保存对象，以此类推。而且，ECMAScript 数组的大小是可以动态调整的，即可以随着数据的添加自动增长以容纳新增数据。
创建数组有以下两种方法，我们常用第二种。
var colors = ['red', 'green', 'blue']; console.log(colors.join(',')); //red,green,blue console.log(colors.join('||')); //red||green||blue
常用的数组方法如下：
*元素联合
var colors = ['red', 'green', 'blue']; console.log(colors.join(',')); //red,green,blue console.log(colors.join('||')); //red||green||blue
*堆栈方法
var colors = []; // 创建一个数组 var count = colors.push('red', 'green'); // 末尾推入两项 console.log(count); //2 colors.push('black'); // 末尾推入另一项 console.log(colors); //3 var item = colors.pop(); // 末尾弹出最后一项 console.log(item); //'black' console.log(colors); //2
栈是一种 LIFO（Last-In-First-Out，后进先出）的数据结构，也就是最新添加的项最早被移除。而栈中项的插入（叫做推入）和移除（叫做弹出），只发生在一个位置——栈的顶部。
ECMAScript 为数组专门提供了 push() 和 pop() 方法，以便实现类似栈的行为。
*队列方法
栈数据结构的访问规则是 LIFO（后进先出），而队列数据结构的访问规则是 FIFO（First-In-First-Out，先进先出）。队列在列表的末端添加项，从列表的前端移除项。
由于 push() 是向数组末端添加项的方法，因此要模拟队列只需一个从数组前端取得项的方法。实现这一操作的数组方法就是 shift() ，它能够移除数组中的第一个项并返回该项，同时将数组长度减1。
ECMAScript 还为数组提供了一个 unshift() 方法。它能在数组前端添加任意个项并返回新数组的长度。
总结：由上可知， push、pop操作在数组末，而 unshift、shift操作在数组头；push、unshift压入而pop、shift弹出。
- 反转数组项
var values = [1, 2, 3, 4, 5]; values.reverse(); console.log(values); //5,4,3,2,1
*链接方法
var colors1 = ['red', 'green', 'blue']; var colors2 = ['yellow', 'black']; console.log(colors1.concat(colors2)); console.log(colors2.concat(colors1)); console.log(colors2.concat('brown')); console.log(color2)//注意：concat返回一个新数组，原数组没改变 - 分片方法
slice() ，它能够基于当前数组中的一或多个项创建一个新数组。 slice() 方法可以接受一或两个参数，即要返回项的起始和结束位置。
在只有一个参数的情况下， slice() 方法返回从该参数指定位置开始到当前数组末尾的所有项。如果有两个参数，该方法返回起始和结束位置之间的项——但不包括结束位置的项。
注意， slice() 方法不会影响原始数组。
var colors1 = ['red', 'green', 'blue', 'yellow', 'purple'];
var colors2 = colors1.slice(1); var colors3 = colors1.slice(2, 4);
var colors4 = colors1.slice(2, 2);//结果是什么？
console.log(colors1); console.log(colors2); console.log(colors3);
-splice方法
splice() 方法恐怕要算是最强大的数组方法了，它可对数组如下3种操作。
注意， splice() 方法直接更改原始数组。 - 删除：可以删除任意数量的项，只需指定 2 个参数：要删除的第一项的位置和要删除的项数。 例如， splice(0,2) 会删除数组中的前两项。
- 插入：可以向指定位置插入任意数量的项，只需提供 3 个参数：起始位置、0（要删除的项数） 和要插入的项。如果要插入多个项，可以再传入第四、第五，以至任意多个项。例如， splice(2,0,‘red’,‘green’) 会从当前数组的位置 2 开始插入字符串 ‘red’ 和 ‘green’ 。
*替换：可以向指定位置插入任意数量的项，且同时删除任意数量的项，只需指定 3 个参数：起 始位置、要删除的项数和要插入的任意数量的项。插入的项数不必与删除的项数相等。例如， splice (2,1,‘red’,‘green’) 会删除当前数组位置 2 的项，然后再从位置 2 开始插入字符串 ‘red’ 和 ‘green’ 。
九、对象 object
面向对象的编程方法
var obj = { 里面存属性和方法 key 属性名：value 属性值; }
- 在{}面用。属性与属性之间用逗号隔开
- 属性值可以双引号或单引号；属性名是为了方便找到他，只是一个辅助
十、函数
1、自定义函数
函数是命名的独立的语句段，这个语句段可以被当作一个整体来引用和执行：
格式：
function 函数名(形式参数){函数体} 调用函数：函数名(实际参数);
-
函数只有被调用后才会执行
-
如果函数需要返回值、直接使用return 返回、不会像java一样要考虑返回值的类型
<script type="text/javascript">
// 定义一个函数 : function
function demo2() {
return 666;
}// 调用函数 : alert(demo2());
</script>
- 如果函数需要传递参数、不需要指定参数的类型、直接使用变量即可
<script type="text/javascript"> // 定义一个函数 : function function demo3(a, b) {
return a + b;
}// 调用函数 :
alert(demo3(10, 20));//显示30
2、匿名函数 匿名函数是没有名字的函数function(形式参数){函数体}`
- 调用方式：将匿名函数赋值给一个变量，通过变量名调用函数
- 定义函数并赋值给变量：var fn = function(形式参数){函数体}
调用函数：fn(实际参数);
演示：
<script type="text/javascript">
// 匿名函数 : 没有名称的函数
var func = function(i, u) { alert(i + " love " + u);}
// 调用函数 :
func("柳岩", "小白");//显示柳岩love小白
</script>
十一、闭包
function greeting(name) { var text = 'Hello ' + name; // local variable // 每次调用时，产生闭包，并返回内部函数对象给调用者 return function() { console.log(text); }//注意该函数无名称，称为匿名函数 } var sayHello = greeting('Closure');//调用greeting()返回了什么？ sayHello(); // 注意此处的使用方法。通过闭包访问到了局部变量text是一个拥有许多变量和绑定了这些变量的环境的表达式(通常是一个函数)，因而这些变量也是该表达式的一部分。
1、变量的作用域
函数内部可以直接读取全局变量。(函数内部声明变量的时候，一定要使用var命令。如果不用的话，你实际上声明了一个全局变量！)
- 在函数外部无法读取函数内的局部变量。
- 链式作用域(chain scope):子对象会一级一级地向上寻找所有父对象的变量。所以，父对象的所有变量，对子对象都是可见的，反之则不成立。
2、 闭包就是能够读取其他函数内部变量的函数。
由于在Javascript语言中，只有函数内部的子函数才能读取局部变量，因此可以把闭包简单理解成"定义在一个函数内部的函数"。 - 在本质上，闭包就是将函数内部和函数外部连接起来的一座桥梁。
3、 闭包的最大用处有两个，一个是可以读取函数内部的变量，另一个就是避免外部修改这些变量的值。
4、注意:
闭包使得函数中的变量都被保存在内存中，内存消耗很大，不能滥用，否则影响性能，可能导致内存泄露。 - 解决方法是，在退出函数之前，将不使用的局部变量全部删除。
闭包会在父函数外部，改变父函数内部变量的值。所以，如果你把父函数当作对象(object)使用，把闭包当作它的公用方法(Public Method)，把内部变量当作它的私有属性(private value)，这时一定要小心，不要随便改变父函数内部变量的值。
扫一扫
354
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
