Veröffentlicht am 
1
2
3
var a = 1;        //        a === 1
b = a;            //        b === 1
b = 2;            //        b === 2,a === 1

这就是深拷贝，意思是拷贝之后，改变其中一个值的同时并不改变另一个值。

除了object以外的数据类型，赋值都是深拷贝

1
2
3
4
5
var a = {
    name: ' pyz'
}
b=a;
b.name = 'jpj'        //        这时a和b都改成了jpj

这就是浅拷贝，赋值时只能把地址赋过去，并没把heap内存里的东西赋给b。

未完待续……

Veröffentlicht am

1. 转换成number

官方：

1
2
3
4
5
6
7
8
9
Number('1')       //     1

parseInt('1')     //     1  
parseInt是面试重点  parseInt('011') === 11，这是十进制
要在后面加8才是八进制 parseInt('011',8) === 9
parseInt('s') === NaN
parseInt('1s') === 1

parseFloat('1.23')//     1.23

老司机：

1
2
3
4
5
6
7
8
9
'1' - 0 === 1              //最常见
'1.23' - 0 === 1.23        //最常见

+'1' === 1
+'1.23' === 1.23
+'.2' === 0.2
+'-1' === -1

-'-1' === 1

2. 转换成string

官方：

  1. number、boolean类型可通过toString方法转换成字符串
  2. symbol不能用toString方法
  3. undefined、null不能用toString方法，会报错
  4. object类型用toString只能转换出'[object Object]'
  5. 把上述toString()改成String()也一样，但String()能转换null和undefined
    1
    2
    3
    4
    (1).toString();        //     '1'
    true.toString();       //     'true'
    null.toString();       //      error:Cannot read property 'toString' of null
    undefined.toString();  //      error:Cannot read property 'toString' of undefined

老司机：

1
2
3
4
5
6
7
8
9
1 + ''       // '1'
true + ''       // 'true'
null + ''       // 'null'
undefined + ''       // 'undefined'

var obj = {};
obj + ''       // '[object Object]'

1 + '1' 等于 (1).toString + '1'      //   '11'

3. 转换成boolean

官方：

总共只有6个falsy值，0、NaN、’’、null、undefined，除了这6个，其它值都是true。所有对象都是true，包括var n = new Boolean(false)，n也是true

1
2
3
4
5
6
7
8
9
10
11
12
13
14
Boolean(1)          //        true
Boolean(2)          //        true
Boolean(0)          //        false
Boolean(NaN)        //        false

Boolean('')         //        空字符串false
Boolean(' ')        //        空格字符串true

Boolean(null)       //        false

Boolean(undefined)  //        false

Boolean({})         //        空对象true
Boolean([])         //        空数组true

老司机：

取反两次，总共只有6个falsy值，0、NaN、’’、null、undefined，除了这6个，其它值都是true。所有对象都是true，包括var n = new Boolean(false)，n也是true

1
2
3
4
5
6
7
8
9
10
11
12
!!1          //        true
!!0          //        false
!!NaN        //        false

!!''         //        false
!!' '        //        true

!!{}         //        true

!!null       //        false

!!undefined  //        false

Veröffentlicht am

1. 语法

1
2
3
4
1. div1 = document.createElement('div')   //要加引号
2. div.textContent = '我是div'
3. main.appendChild(div1)  //这个不用引号
4. key.className = 'key'

2. 包装函数

当用js创建一个span标签并想同时给它添加className和textContent时，可以用一个函数来一起实现，如：

1
2
3
4
5
6
function createSpan(textContent) {
    var span = tag('span',{className:'text',textContent:textContent});
    return span;
}

var span  = createSpan('sb'); // 这样可以直接创建className为text、textContent为sb的span标签

3. 用canvas的时候获取用户页面宽高的API

1
2
3
4
5
var pageWidth = document.documentElement.clientWidth;
var pageHeight = document.documentElement.clientHeight;

canvas.width = pageWidth
canvas.height = pageHeight

4. 数据类型（背下来）

1. 数值(number)

var a = 011 // a === 9，0开头代表8进制！
var b = 0b11 // b === 3，0b开头代表2进制
var c = 0x11 // c === 17，0x代表16进制

2. 字符串(string)

JavaScript 认为’𝌆’的长度为2，而不是1。
对于码点在U+10000到U+10FFFF之间的字符，JavaScript 总是认为它们是两个字符（length属性为2）。所以处理的时候，必须把这一点考虑在内，也就是说，JavaScript 返回的字符串长度可能是不正确的。

3. 布尔值(boolean)
4. symbol

用来生成一个全局唯一的值

5. undefined 6. null

null和undefined都表示没有值，一般来说
1.若一个变量没有赋值，例：var a;，则a的值就是undefined
2.若创建一个对象，现在还不想赋值，则可以var obj = null;
3.若一个number、string不想赋值，则可以参照第一条

7. 对象(object)

前面六种是简单类型或基本类型，对象是合成类型
对象可以分成：
> 狭义的对象
> 数组
> 函数

当你在遍历对象的时候

1
2
3
4
5
> var person = {name:'pyz',age:18}
>for(var key in person){
>   console.log(person[key]); >//console.log(person.key);
>}
>

用person.key和person[key]是不同的，person.key代表person里有一个键名为key的属性，key被当作字符串，会出现undefined。而且数值键名也不能用点，会被当作小数点。
obj.123 //报错
只能用person[key]来表示，因为使用方括号运算符时key会被当作变量来处理。

bug1: typeof null //object
bug2: typeof function //function，function也是object的一种，但function有自己的原型

{foo:123}，javascript理解为语句（即代码块）
({foo:123})，JavaScript理解为对象
在eval语句（作用是对字符串求值）中
eval(‘{foo: 123}’) // 123
eval(‘({foo: 123})’) // {foo: 123}

一般遍历对象自身属性时结合使用hasOwnProperty方法

1
2
3
4
5
6
7
8
>var person = { name: '老彭' };
>for (var key in person) {
>  if (person.hasOwnProperty(key)) {
>    console.log(key);
>  }
>}
>// name
>

查看一个对象本身的所有属性，也可以使用Object.keys方法

1
2
3
4
5
6
7
8
>var obj = {
>  key1: 1,
>  key2: 2
>};
>
>Object.keys(obj);
>// ['key1', 'key2']
>

5. 数值

  1. JavaScript里不要直接比较小数，因为浮点数不是精确的值

    1
    2
    3
    4
    5
    6
    7
    8
    0.1 + 0.2 === 0.3
    // false

    0.3 / 0.1
    // 2.9999999999999996

    (0.3 - 0.2) === (0.2 - 0.1)
    // false

  2. JavaScript 对15位的十进制整数都可以精确处理，大于15位就不行了

  3. 以下两种情况，JavaScript 会自动将数值转为科学计数法表示
    （1）小数点前的数字多于21位。
    （2）小数点后的零多于5个。

  4. JavaScript 对整数提供四种进制的表示方法：十进制、十六进制、八进制、二进制。默认情况下，JavaScript 内部会自动将八进制、十六进制、二进制转为十进制。

    十进制：没有前导0的数值。
    八进制：有前缀0o或0O的数值，或者有前导0、且只用到0-7的八个阿拉伯数字的数值。
    十六进制：有前缀0x或0X的数值。
    二进制：有前缀0b或0B的数值。

6. 字符串

若字符串要换行的话，可以这样

1
2
3
4
'a\
b\
c'
//‘abc’

重点是\后只能加回车，不能有任何空格

Veröffentlicht am

1.哈希（Hash）

计数排序中的桶就是hash，hash的意思就是一个key对应一个value，如：
数组也是hash：a[0]=1，a[1]=2,……
对象也是hash

2.队列

先进先出，和排队一样

1
2
3
4
5
6
7
8
let q = []; 

q.push('第一')；
q.push('第二');
q.push('第三');
q.shift(); //第一
q.shift(); //第二
q.shift(); //第三

基数排序里的桶就是队列，因为是先进先出

3.栈

先进后出，和队列相反

1
2
3
4
5
6
7
8
let stack = []; 

stack.push('第一')；
stack.push('第二');
stack.push('第三');
stack.pop(); //第三
stack.pop(); //第二
stack.pop(); //第一

4.链表

1
2
3
4
5
6
7
8
9
let a = {
    value:1,
    next:{
         value:2,
         next:{
            value:3
         }
    }
}

a.next.value=2;
a.next.value=3;
比数组好在删除中间的数据很方便，比如删除第二项，直接:

1
a.next = a.next.next

5.树

  1. html就是一种树。
  2. 二叉树每个节点最多有两个分支，被称为左子树和右子树
  3. 二叉树的第i层最多有 2^i^个节点，定义根节点为第0层，总共最多有2^i+1^-1个节点
  4. 完全二叉树和满二叉树可以用数组来存
  5. 定义二叉树根节点为第0层，完全二叉树或满二叉树每一层的第一个数在数组中为a[2^i^-1]，每一层的最后一个数为a[2^i+1^-1-1]

Veröffentlicht am

1. 冒泡排序Bubble Sort（体育委员摸头杀）

时间复杂度：O(n^2^)
有个数组a=[5,4,1,3,2,6]，从小到大排序，总共进行a.length-1轮，首先将a[0]和a[1]比较，谁大就把谁放在后面，交换完后再将a[1]和a[2]比较，谁大就把谁放在后面，交换完后再将a[2]和a[3]比较…..一直到a[4]和a[5]比较，进行完第一轮后，最大的那个就已经放在最后一位了，接下来再重新从a[0]开始……直到进行到a[3]和a[4]比较（a[5]上一轮已经确定了最大的，不用再动了），直到a[2],a[3],a[4],a[5]都确定了，最后再比较一次a[0],a[1]，排完a[0],a[1]的顺序，a数组的顺序就排好了~
点BUB是冒泡排序的动画演示
冒泡排序

2. 选择排序Selection Sort（体育老师点人法）

时间复杂度：O(n^2^)
选出最小的和第一位交换位置，第一位就被确定了，接下来找倒数第二小的和第二位换位置，接着再找倒数第三小的和第三位换位置……一直找到最后一位
点SEL是冒泡排序的动画演示
选择排序

3. 插入排序Insertion Sort（起扑克牌法）

时间复杂度：O(n^2^)
从数组的第二个开始，和第一个比较并排顺序，接着拿第三个和第二个比，若比第二个大则直接不动，若比第二个小则和第一个比，若比二小比一大则插在它们中间，若比第一个小则放在第一个，接着再拿第四个分别和三、二、一
比…….直到最后。
这就像打扑克牌时你摸牌的方法
点INS是冒泡排序的动画演示

4. 随机快排

优点：
效率高,时间复杂度：O(n*log2n)
缺点：
有时候比计数排序慢
简介：
随机选一个数，例：36，#将这个数和第一个数交换位置，于是36到了第一位，接着将36和其他所有数依次比较大小，把所有比36小的放左边，比36大的放右边，比完其他所有数后把36同比它小的数里的最右边的那个交换位置，这样36就定位了。
接着以同样的方式随机选择一个36左边的数，然后回到上面#的位置继续进行，在36的左边再次快排，这样左边排序时完全不用管右边，大大提高了效率，把左边排完再排右边。
演示：点R-Q是随机快排

5. 计数排序（Hash）

优点：
效率高，时间复杂度：O(n+max)
缺点：
1.需要一个hash来作为工具
2.无法对小数和负数进行排序，只能排正整数
3.可能需要很多桶，不像桶排序可控制桶数量
用途：
数字相差不大的时候可以用计数排序，如年龄排序
简介：
和基数排序差不多，比快排更快，需要一个额外数组(Hash)辅助，例：a=[3,2,4,5,1,3,34]
a[0]=3于是将Hash数组中的hash[3]=1
a[1]=2于是将hash[2]=1
a[2]=4于是将hash[4]=1
a[3]=5于是将hash[5]=1
a[4]=1于是将hash[1]=1
a[5]=3于是将hash[3]=hash[3]+1=2
a[6]=34于是将hash[34]=1
这样hash=[ ,1,1,2,1,1, , , , ,……, , , , ,1]
最后将hash中的数据按顺序取出来存放在另外一个数组里则排序完成。

6. 桶排序（Hash）

优点：
和计数排序不同的是一个桶里可放多个数字，效率高，计数排序的改良版，时间复杂度：O(N+C)
缺点：
需要hash工具，和计数排序不同的是每个桶里都是无序的，还要再排一次序
用途：
高考总分排序，每100分放在一个桶里，数字很分散的时候不好用，可用基数排序（比如从几十到几千）
简介：
a=[0,2,1,56,32,67,32]，存入hash里

1
2
3
4
5
6
7
8
9
hash = {
  '0':[0,2,1],
  '1':[],
  '2':[],
  '3':[32,32],
  '4':[],
  '5':[56],
  '6':[67],
}

还要把每个桶里的数字排序一下，再依次拿出来

7. 基数排序Radix Sort（Hash）

优点：
效率高
桶数量是确定的，时间复杂度：O(nlog(r)m)
缺点：
需要一个hash当工具，要多次排序
简介：
和桶排序类似，数字很分散的时候，可以用基数排序，首先用个位排，每次出桶的时候要按照进桶的顺序出！再到百位，再到千位，具体看下面演示

演示：点RAD是基数排序

8. 堆排序

时间复杂度：nlogn
用数组表示一个堆，每次都做最大堆排序，每做完一次就把最大的数和最后一位交换位置，并定下来，于是每做一次最大堆排序就能确定一个最大的数并把它放到最后一位，一直重复到排完所有的数，这样一个从小到大的数组就排出来了
演示：堆排序

9. 归并排序

Veröffentlicht am

1. 常见算法

1. 冒泡排序（体育委员摸头杀）
2. 选择排序（体育老师点人法）
3. 插入排序（起扑克牌法）
4. 基数排序（hash）
5. 快排（二分）
6. 归并排序
7. 堆排序
8.计数排序（hash）
9.桶排序（hash）

2. 算法特征

1.有0个或多个输入（0个是因为有的算法定了初始条件）
2.可行性
3.确定性
4.有穷性
5.有1个或多个输出

3. 我的错误

a={
    '0'=0,
    '1'=1,
    'length'=2
}
let i=0;
print(a['i']); //会出现undefined，因为a对象里并没有i这个选项，应该写成a[i]

Veröffentlicht am

1. CSS简介

css2.1是目前世界上应用最广泛的版本，2011年开始css被分为多个模块单独升级，统称为CSS3，现在已经有很多模块升级到了CSS4。css文档

2. 编写CSS的第一步

给你要写的css标签加上border
border:1px solid red;
让你知道它在哪、它的大小、形状

3. 使导航栏横着在同一行

给所有li加上cssfloat:left;，然后给ul加上class:clearfix,下面是clearfix的css

1
2
3
4
5
.clearfix::after{
  content: "";
  display: block;
  clear: both;
}

方法二：给ul加上display:flex
若想让li在同一行里平均分布，见下面6.5

4. 高度

div（块级元素）：高度是由内部文档流元素高度的总和决定的。文档流：文档内元素的流动方向，内联元素是从左往右，块级元素是从上往下
span（内联元素）：高度是由其中文字高度决定的，内联元素设置width和height是无效的，上下的margin和padding也无效，要将它们设为display:inline-block才有效。

5. 小提醒

尽量不写height和width，这两个属性会引出很多bug，要宽高的时候可以用padding，但img最好先写width，因为可以先占位，因为引用图片时浏览器不知道图片大小，所有等图片下载完成，它后面的元素又要重新排位置，若先写好width，则不用重排，知道height也可以先写好height。
另外span元素设置padding的时候要将它设为display:inline-block，因为内联元素不能设置宽高，inline-block具有inline的同行特性，也具有block的高度特性。
对于display:inline(内联元素)的元素，设置width/height/上下margin和padding都是无效的

6. 居中

1. 垂直居中

  1. 若父元素没有写height，则直接在父元素写

    1
    padding: 10px 0;

    子元素就可以居中，所以尽量避免父亲高度确定

  2. 让一个元素在父级元素中绝对居中
    方法一：
    给父级元素加:

    1
    2
    position:relative;   //若父级元素是body可以不用
    加

    再给自己加：

    1
    2
    3
    4
    5
    6
    7
    8
    div{
     position: absolute;
     top: 0;
     left: 0;
     bottom: 0;
     right: 0;
     margin: auto;
    }

    方法二：（若不兼容IE，工作中只要用这一种方法即可，最简单，Chrome，移动端都可以用）
    给父元素加：

    1
    2
    3
    display: flex;               //让它变成一个弹性盒
    justify-content: center;     //水平居中
    align-items: center;         //垂直居中

  3. table自带居中（兼容IE）

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    <html>
    <style>
    .parent{
      border: 1px solid red;
      height: 600px;
    }
    .child{
      border: 1px solid green;
    }
    </style>
    <body>
    <table class="parent">
      <tr>
        <td class="child">
          文字
        </td>
      </tr>
    </table>
    </body>
    </html>

    文字会居中

  4. 用div假扮table（兼容IE）

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    <html>
    <style>
    div.table{
      display: table;
      border: 1px solid red;
      height: 600px;
    }

    div.tr{
      display: table-row;
      border: 1px solid green;
    }

    div.td{
      display: table-cell;
      border: 1px solid blue;
      vertical-align: middle;
    }

    </style>
    <body>
    <div class="table">
        <div class="tr">
          <div class="td">
            文字
          </div>
        </div>
      </div>
    </body>
    </html>

  5. 用100%高度的before和after

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    .parent{
      border: 3px solid red;
      height: 600px;
      text-align: center;
    }

    .child{
      border: 3px solid black;
      display: inline-block;
      width: 300px;
      vertical-align: middle;
    }

    .parent:before{
      content:'';
      display: inline-block;
      height: 100%;
      vertical-align: middle;
    }
    .parent:after{
      content:'';
      display: inline-block;
      height: 100%;
      vertical-align: middle;
    }

  6. 绝对定位加上margin-top: -自身height的50%

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    <html>
    <style>
    .parent{
      height: 600px;
      border: 1px solid red;
      position: relative;
    }
    .child{
      border: 1px solid green;
      width: 300px;
      position: absolute;
      top: 50%;
      left: 50%;
      margin-left: -150px;
      height: 20px;
      margin-top: -10px;
      text-align: center;
    }
    </style>
    <body>
    <div class="parent">
      <div class="child">
        文字
      </div>
    </div>
    </body>
    </html>

  7. 让一个背景图居中，并且让它自适应屏幕

    1
    2
    background: url("wallhaven-w-min.jpg") no-repeat center center ;
    background-size: cover;

2. 水平居中

  1. 块级元素水平居中

    1
    2
    margin-left:auto;
    margin-right:auto;

  2. 内联元素水平居中，给它们的父元素加上

    1
    text-align:center;

    若不是内联元素想让它居中，可加display:inline-block，加了之后一般还要加下面这句，不然可能会有bug（下面可能会空出一行）

    1
    vertical-align: top;

  3. 让导航栏横过来，并在同一行里均匀分布
    给ul加css

    1
    2
    3
    4
    ul{
      display:flex;  
      justyfy-content:space-between;
    }

    去掉li的float:left
    去掉ul的clearfix

7. 用css做三角形

  1. 等腰三角形：

    1
    2
    3
    4
    5
    6
    div{
      border:50px solid transparent;
      width:0;
      height:0;
      border-bottom-color:red;
    }

  2. 增高三角形

    1
    2
    3
    4
    5
    6
    div{
      border: 50px solid transparent;
      width: 0;
      height: 0;
      border-bottom: 100px solid red;  //只需增加这个border的厚度
    }

  3. 直角三角形：

    1
    2
    3
    4
    5
    6
    7
    div{
      border:50px solid transparent;
      width:0;
      height:0;
      border-top-width:0;
      border-left-color:red;
    }

  4. 不规则三角形

    1
    2
    3
    4
    5
    6
    7
    8
    //还有这种操作！
    div{
      width: 0;
      height: 0;
      border-top: 30px solid black;
      border-left: 30px solid transparent;
      border-right: 40px solid transparent;
    }

8. 梯形

1
2
3
4
5
6
div{
  width:50px;
  height: 42px;
  border: 18px solid transparent;
  border-top: 18px solid black;
}

9. 怎样脱离文档流

  1. 相对于窗口定位：
    position:fixed
  2. 相对于父级元素定位：
    在父级元素加上：position:relative
    给自己加上：position:absolute（绝对定位后元素会变成display:block）

10. 使用::before和::after时

要加上这两行的代码，才会显示内容

1
2
content: "";
display:block;  //如果是绝对定位就不用加，因为绝对定位是display:block;

而且before和after是不受*管束的，例如

1
2
3
4
5
6
7
8
9
10
11
12
*{
  box-sizing: border-box;
}
//设置了这个，但是对before和after无效，给它们加border它们还是会变化大小

//除非这样
*::after{
    box-sizing: border-box;
}
*::before{
    box-sizing: border-box;
}

11. 图片的轮播

\<html>

1
2
3
4
5
6
7
<div class="window">
    <div class="images" id=images>
        <img1>
        <img2>
        <img3>
    </div>
</div>

\<css>
要给window的div和每个img都定好宽高！并给window加上overflow:hidden

1
2
3
4
5
6
.images{
    display: flex;    //给image的div加上这个图片才能横这放！
}
.images > img{
    width: 100%;
}

12. box-shadow

1
box-shadow: -16px 0 16px 1px rgba(102,102,102,0.4);

第一个值代表阴影左右偏移，正数往右，负数往左
第二个值代表上下偏移，正往下，负往上
第三个值越大，模糊面积越大越淡
第四个值取正值时，阴影扩大，取负值时，阴影收缩

13. calc

1
2
//css3新属性，绝对定位的时候
left: calc(50% - 8px)  //元素的左边在父元素的中间偏左8px

14. 消除默认样式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
*{
  margin: 0;
  padding: 0;
}

*,
*::before,
*::after{
  box-sizing: border-box;
}

a{
    text-decoration: none;  //  去掉下划线
}

ul,ol{
    list-style: none;
}

button{
    outline: none;
}

15. img 等比例自动缩放

1
2
3
4
5
6
img{  
    width: auto;  
    height: auto;  
    max-width: 100%;  
    max-height: 100%;     
}

Veröffentlicht am

1. iframe 和 a 的target

iframe标签支持相对路径

<iframe name="xxx" src="" frameborder="0"></iframe>
<a href="" target="xxx"></a>点击a，则新页面会在iframe里出现

若index.html里写:
<iframe src="./index2" frameborder="0"></iframe>
index2.html里写:
<iframe src="./index3" frameborder="0"></iframe>
index3.html里写:
<a href="http://qq.com" target=_blank>QQ</a>（点击会在一个新的标签页面里打开）
<a href="http://qq.com" target=_self>QQ</a>（点击会在index3的嵌套页面里打开）
<a href="http://qq.com" target=_parent>QQ</a>（点击会在index2的嵌套页面里打开）
<a href="http://qq.com" target=_top>QQ</a>（点击会在index里打开）
在index的左上角出现一个小的嵌套页面里显示着index2页面里嵌套的index3里的四个QQ链接

2. a 的href

  1. <a href="//qq.com">QQ</a>href里写的是无协议地址，意思是当前用的是http协议就自动继承http协议，用的是file就会用file协议。
    我们在终端运行sudo npm i -g http-server即可安装一个服务器，进入你写index.html的文件夹里运行http-server即可开启服务器，然后在浏览器浏览终端返回的地址即可用http协议来访问你写的文件

  2. href
    a. <a href="?name=pyz">qq</a>点击之后会在当前页面发起?name=pyz的请求
    b. <a href="#sss">qq</a>点击之后不会发起请求，因为锚点仅仅是在当前页面内的跳转
    c. <a href="/..">link</a>标签被点击后浏览器会发起GET / HTTP/1.1的请求，路径还是/，因为/已经是根目录，无法再往前退

  3. 伪协议
    <a href="javascript:;">qq</a>点击之后a不会做任何事情
    <a href="javascript:alert(1)";>qq</a>点击之后会弹出1

3.\<form>

1. \<form>和\<a>的区别：
\<a>提交时是GET请求
\<form>可以用method=’post’发送POST请求
\<form>里必须要有一个submit按钮才能被提交

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<form action="users" method="post">
    <input type="text"value="username">
    <input type="password"value="password">
    <input type="submit" value="提交">	
</form>	//form被提及一定会刷新当前页面

//若不想刷新页面的话，可以添加一个iframe，然后把form指向它，不过这种方法已过时
<iframe name="result" src="about:blank" frameborder="0" height="200"></iframe>

<form action="users" method="post" target="resule">
......
</form>

//较新方法，用JSONP（动态创建script）

即\<form>是注册时用的，你提交的账号密码会出现在第四部分里，但GET请求是不会有第四部分的，POST若想有查询参数，可以直接写在action里，如；

1
2
3
4
5
<form action="users?name=pyz" method="post">
    <label>用户名<input type="text" name="username"></label>	//input要被提及的话一定要有那么值
    <label>密码<input type="password" name="password"></label>
    <input type="submit" value="提交">
</form>

2. \<input>要被提交的话一定要有name值
\<label>直接包在input外面用
\<form>里的target和\<a>是一模一样的。
\<form>里如果没有<input type="submit">而有\<button>，则\<button>会默认为submit，若写成这样<button type="button">button</button>则不会成为submit，一个form里必须要有一个submit按钮才能提交

4. <\input>

1. checkbox

1
2
<label><input type="checkbox" name="apple" value="yes">苹果</label>
<label><input type="checkbox" name="banana" value="yes">香蕉</label>

<checkbox>

一定要有name才能被提交上去

提交之后

2. radio

1
2
<label><input type="radio" name="sexual">男</label>
<label><input type="radio" name="sexual">女</label>

和checkbox不同的是，两个name一样的radio只能选中一个

<radio>

4. select

1
2
3
4
5
6
7
<select name="group" multiple>
    <option value="">-</option>
    <option value="1">第一组</option>
    <option value="2">第二组</option>
    <option value="3" disabled>第三组</option>
    <option value="4" selected>第四组</option>
</select>

<select>disabled属性意味着不能被选中，selected意思是默认选中的，multiple意思是可以同时选中几项

5. textarea

若想让用户输入一大段文字则用这个元素

1
<textarea style="resize: none; width: 200px; height: 100px;"  name="hobbies"></textarea>

<textarea>
resize若不设置为none，则用户可以随意更改输入框的大小

6. table

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<table border="1">
    <colgroup>
        <col width="100">
        <col bgcolor="red" width="200">
        <col width="100">
        <col width="100">
    </colgroup>
    <thead>
        <tr>
            <th>项目</th><th>姓名</th><th>班级</th><th>成绩</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th></th><td>可爱多</td><td>1</td><td>22</td>
        </tr>
        <tr>
            <th></th><td>金钟国</td><td>2</td><td>12</td>
        </tr>
        <tr>
            <th>平均分</th><td></td><td></td><td>17</td>
        </tr>
    </tbody>
    <tfoot>
    <tr>
        <th>总分</th><td></td><td></td><td>34</td>
    </tr>
    </tfoot>
</table>

<table>
thead tbody tfoot不写浏览器也不会报错，而会自动全部加入到tbody里

7.Canvas

不要用css来调整canvas的宽高，因为若用css，canvas里的东西都会被拉伸，和img一样，可以用js来设置宽高

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function autoSetCanvasSize(canvas) {
    setCanvasSize();
    window.onresize = function () {   //浏览器改变窗口大小时触发onresize事件
        setCanvasSize()
    };


    function setCanvasSize() {
        var pageWidth = document.documentElement.clientWidth;     //代表浏览器的宽
        var pageHeight = document.documentElement.clientHeight;   //代表浏览器的高
        canvas.width = pageWidth;
        canvas.height = pageHeight;
    }

}

Veröffentlicht am

html没有块级元素和内联元素的区别，意思就是html只管内容，不管样式，所有样式都由css决定

1.W3C简介

万维网联盟（W3C）由李爵士于1994年10月离开欧洲核子研究中心（CERN）后成立，该组织通过W3C制定的新标准来促进业界成员间的兼容性和协议。联盟试图让所有的供应商实施一套由联盟选择的核心原则和组件。

2.MDN简介

MDN Web Docs（旧称Mozilla Developer Network、Mozilla Developer Center，简称MDN）是一个汇集众多Mozilla基金会产品和网络技术开发文档的免费网站。
MDN网站上有目前较全的前端基础教学，如HTML、CSS、JS等
HTML元素表

3.空标签

空标签就是不用加闭标签的标签，也可以叫闭元素。如：

4.可替换标签

宽高由自己决定的元素，如：
<img>
<video>
<input>

Veröffentlicht am

HTTP协议底层由TCP协议和IP协议构建

1.TCP

  1. TCP 和 UDP 的区别是什么
    简答：TCP 可靠、面向连接、慢一点，但注重安全性，适应于网页、邮件；
    UDP 不可靠，无连接、较快，安全性低一点，适应于视频、语音。

  2. TCP 的三次握手指的是什么
    简答：每次建立连接前，客户端和服务端之前都要先进行三次对话才开始正式传输内容，三次对话大概是这样的：

    1
    2
    3
    4
    1\. 客户端：我要连接你了，可以吗
    2\. 服务端：嗯，我准备好了，连接我吧
    3\. 客户端：那我连接你咯。
    4\. 开始后面步骤

    上面内容足以应付前端面试中关于 TCP 的考题，如果你想更了解 TCP 可以看 此文

2.IP

  1. 外网IP
    你的路由器自己会有一个外网IP，像访问的腾讯、阿里的网站就是租用了很多外网IP

  2. 内网IP
    而你在家用的手机、电脑用的就是内网IP，路由器也会给自己一个内网IP，一般是：192.168.1.1

  3. 内网和外网之间不能互相访问，但是外网和外网之间可以访问，所以你在家上网就是通过路由器的外网和其他外网连接，你访问的网站在外网发送信息到你的路由器上，然后路由器将信息转到内网发送到你电脑上

  4. 本地 IP：127.0.0.1

  5. 特别特殊的 IP：0.0.0.0，它不表示任何设备。

3.端口

一个端口对应一种服务
HTTP服务用80端口
HTTPS服务用443端口
FTP服务用21端口
使用HTTP协议访问一个IP，要同时提供IP和端口号，平常没填是因为浏览器默认帮你加了

4.Node.js服务器

一个很简易的服务器

进入服务器所在文件夹输入
node server.js 1024服务器开始监听，使用1024端口
开始监听服务器

在另一个 窗口输入
curl -s -v -- http://localhost:1024
访问服务器的index页面，返回的是请求信息、响应信息和下载内容。
在终端访问服务器

在浏览器中访问则直接显示index页面加上css和js效果

一般情况下/代表index，同时在index里引用了css和js文件，所以出现了三个路径
在浏览器中访问服务器中显示的内容