css基礎(chǔ)快速入門-14偽類first-letter

學(xué)生就可以看懂的css基礎(chǔ)實(shí)戰(zhàn)系列，pre標(biāo)簽里是筆記總結(jié)，動(dòng)手實(shí)際操作一下會(huì)加強(qiáng)理解。有疑問留言交流哦。

可能比較枯燥，但是再堅(jiān)持一下，前端知識(shí)的大門就會(huì)大開了。

tml和css的使用方法以及樣式，很好的基礎(chǔ)知識(shí)系列，內(nèi)容都是干貨知識(shí)點(diǎn)，適合收藏下來！

布局步驟

第一步：清除默認(rèn)樣式

第二步：劃分模塊

第三步：設(shè)置模塊的大小以及位置

第四步：劃分下一級(jí)模塊

html和css

引入網(wǎng)頁頭像

css樣式表的引入方式

1、外鏈?zhǔn)?/p>

2、嵌入式

3、行內(nèi)樣式

@import url('')

文件命名以及變量命名

命名規(guī)范

1、嚴(yán)格區(qū)分大小寫

2、可以采用字母數(shù)字下劃線$,數(shù)字不開頭

3、命名語義化

4、可以采用駝峰命名法

清除默認(rèn)樣式

清楚邊距

margin: 0;

padding: 0;

list-style: none;

}

a標(biāo)簽清楚下劃線和顏色

color: black;

text-decoration: none;

}

css中顏色的表示方式

css中顏色的表示方式：

1.預(yù)定義的顏色【關(guān)鍵字顏色】 red pink blue yellow

2.#6位數(shù)的色值 #00-00-00 紅綠藍(lán)

3.rgb（紅，綠，藍(lán)）：rgb([0-255],[0-255],[0-255])

4.rgba（red，green，blue，透明度）：rgba([0-255],[0-255],[0-255]，[0-1])

0-1: 0全透明，1不透明

html中的標(biāo)簽和屬性

html：

標(biāo)簽：

按照語法分類：

1.單標(biāo)簽：只有開始標(biāo)簽

meta img a

2.雙標(biāo)簽：有開始標(biāo)簽和結(jié)束標(biāo)簽

3.屬性的語法

語法：

屬性名 = "屬性值"

屬性名 = "屬性值1 屬性值2"

注意:

1、標(biāo)簽名和屬性名之間要有空格

2、多個(gè)屬性之間要有空格

3、多個(gè)屬性值之間要有空格

4.開始標(biāo)簽標(biāo)簽名后有空格

按照標(biāo)簽在頁面中的呈現(xiàn)效果分類：

1、行內(nèi)元素

行內(nèi)元素定義:在一行內(nèi)顯示，只能設(shè)置左右間距，不可以設(shè)置上下間距。

舉例：span del i em b strong a(title="鼠標(biāo)移入時(shí)顯示的文字";target=" "(新窗口打開的位置 _self:在本窗口打開;_blank:在新窗口打開) ...

2、塊元素

塊元素定義：可以設(shè)置寬高，獨(dú)占一行。

舉例：div 標(biāo)題標(biāo)簽列表標(biāo)簽段落標(biāo)簽 ...

3、行內(nèi)塊元素

行內(nèi)塊元素定義：可以設(shè)置寬高，在一行顯示。

舉例：img 【title="鼠標(biāo)移入時(shí)顯示的文字" 】表單控件

元素的轉(zhuǎn)換

塊元素： display:block;

行內(nèi)塊元素：display:inline-block;

行內(nèi)元素： display:inline;

元素的級(jí)別

塊元素 > 行內(nèi)塊元素 > 行內(nèi)元素

元素嵌套規(guī)范

1、同一級(jí)別可以相互嵌套

2、級(jí)別高的元素可以嵌套級(jí)別低的元素

3、段落標(biāo)簽只能嵌套行內(nèi)元素

4、a標(biāo)簽不可以嵌套a標(biāo)簽；p不能嵌套p

盒子模型及其問題

四部構(gòu)成：

1、margin 外間距盒子與盒子之間的距離

2、border 邊框

3、padding 內(nèi)填充（內(nèi)間距）邊框與內(nèi)容之間的距離。

4、content 內(nèi)容

margin-top margin-right margin-bottom margin-left

margin: 50px; 上右下左

margin: 50px 100px; 上下左右

margin:0 auto; auto自動(dòng)

margin: 50px 100px 150px; 上左右下

margin: 50px 100px 150px 200px; 上右下左

border: 1px solid red;

border-top \ border-right \border-bottom \ border-left

border-top-width：上邊框的寬度

padding:設(shè)置方法同margin

content: ;

width : 數(shù)值百分比 auto

height: 數(shù)值百分比 auto

盒子模型的問題：

1.大部分元素的margin和padding默認(rèn)為0，但有一部分的margin和padding不為0，例如body 標(biāo)題標(biāo)簽（h1-h6）（ul ol il等列表標(biāo)簽）段落標(biāo)簽

2.想領(lǐng)的兩個(gè)塊元素的margin會(huì)重合，值會(huì)取最大值

3.margin可以為[負(fù)數(shù)] ，padding不可以設(shè)置[負(fù)數(shù)]。

4.行內(nèi)元素margin只有左右，沒有上下

5.如果（1）發(fā)生嵌套關(guān)系的元素，（2）父元素沒有上邊框，（3）上padding ，（4）父元素與子元素之間沒有別的內(nèi)容，此時(shí)子元素margin-top就會(huì)作用到父元素身上

margin-top的解決方式：

1.用父元素的padding-top代替子元素的margin-top；

2.給父元素添加overflow：hidden；

寬高的設(shè)置和計(jì)算

height：auto / 百分比 / px；

width：auto / 百分比 / px；

height：auto；參照與父元素

width：auto；參照與內(nèi)容

box-sizing：border-box；將邊框算入盒子內(nèi)；

一個(gè)元素實(shí)際的寬高

實(shí)際寬度 = border-left + padding-left + width +paddint-right + border-right;

實(shí)際高度 = border-top + padding-top + height + padding-bottom + border-bottom;

浮動(dòng)

作用：讓塊元素橫排排列

樣式： float：left；從左往右排列

float：right；從右往左排列

原理：讓元素脫離文檔流，讓元素從文檔層浮動(dòng)到浮動(dòng)層。

引發(fā)的問題：父元素不設(shè)置高度，子元素都浮動(dòng)，浮動(dòng)的子元素?fù)尾婚_父元素。（浮動(dòng)的元素脫離文檔流）

*解決方式一：給父元素添加 overflow：hidden；（超出部分隱藏）

*解決方式二：在父元素內(nèi)容最后添加擁有清除浮動(dòng)屬性的元素。

clear：right/left/both ；別的浮動(dòng)對(duì)它的影響清除掉

例：

.box：after{

content: "";

display:block;

width: 0;

height: 0;

clear:both;

}

*解決方式三：父元素能設(shè)置高度的盡量設(shè)置高度

浮動(dòng)之后的塊元素參照內(nèi)容：屬性值 auto

定位

定位的元素脫離文檔層，到達(dá)定位層

定位的元素會(huì)多出5個(gè)樣式：

top right bottom left z-index：999

上右下左層級(jí)（層級(jí)越高，離用戶越近）【只能在有定位屬性的元素上才能用】

層級(jí)：

z-index：整數(shù)；

定位的幾種方式：

1.相對(duì)定位：

相對(duì)于自身來定位，在文檔層中保留原來的位置

用法：

position：relative；

2.絕對(duì)定位：

相對(duì)于最近的定位的祖先元素來定位，完全脫離文檔流（其他頂替其位置）

用法：

position：absolute；

+方向值

3.固定定位：

相對(duì)于瀏覽器的四條邊，完全脫離文檔流

用法：

position：fixed；

top與bottom同時(shí)定義，那個(gè)樣式會(huì)作用到元素身上的判斷關(guān)系：

top的權(quán)重比bottom的權(quán)重大

left的權(quán)重比right的權(quán)重大

元素作用時(shí)：

1.如果是

position：relative；

left：；

margin：；

先作用margin，在作用relative；

2.如果是

position：absolute；

left：；

margin：；

先作用absolute，在作用margin；

定位元素的居中方式：

方法一：

1.水平居中：

position：absolute；

left：50%；

margin-left：-自身長(zhǎng)度的一半；

2.垂直居中：

position：absolute；

top：50%；

margin-top：-自身長(zhǎng)度的一半；

3.絕對(duì)居中：

position：absolute；

left：50%；

top：50%；

margin-left：-自身長(zhǎng)度的一半；

margin-top：-自身長(zhǎng)度的一半；

方法二：

1.水平居中：

position：absolute；

left：0；

right：0

2D和3D

2D和3D屬性：

1.平移樣式

transform:translate(x,y); 向上為負(fù)，向下為正

transform:translateX(100px);

transform：rotate（180deg）；（1turn）轉(zhuǎn)一圈

平移 transform:translate（）例子：translate（x，y） translateX（）

旋轉(zhuǎn) transform:rotate（）例子rotate（180deg）順時(shí)針 -180deg 逆時(shí)針

transform：rotate（）空格translate（）；

transform-origin:px px;變換的中心點(diǎn)；

left center；

縮放 transform:scale（）例子：scale（2）放大為原來的2倍 scale（0.n）縮小為原來的0.n scale（m，n） x軸m，y軸n

斜切 transform:skew（）例子：skew（45peg）左拉伸45° skew（45peg，m）

過渡transition
transition：all 0.5s；

全部時(shí)間

3.過渡的屬性樣式： transition-property: ， ;

可以為：屬性的全部樣式

4.過度的總時(shí)間： transition-duration：；

5.過渡的時(shí)間函數(shù)： transition-timing-function：；

linear（勻速） ease（開頭結(jié)尾慢，中間快）

cubic-bezier（1，0.07，0.54，0.21）貝塞爾曲線

6.延遲 transition-delay：；

3d效果：和2d的一樣transition，transform；

prespective：給父元素加prespective（滅點(diǎn)的值）

prespective-origin：x y；滅點(diǎn)的位置調(diào)整觀察的角度（大多數(shù)情況不設(shè)置）

transform：ratate3d（0-1的值,0-1的值,0-1的值,45deg）

transform：ratateY（45deg）

transform：translate3d（0-1，0-1，px）

父元素：transform-style：preserve-3d；

動(dòng)畫

動(dòng)畫規(guī)則：

@keyframes 動(dòng)畫名（隨便給）{

（動(dòng)畫規(guī)則）

from{}

to{}

}

@keyframes 動(dòng)畫名（隨便給）{

（動(dòng)畫規(guī)則）

0%{}

50%{}

100%{}

}

@keyframes animation1{

from{

background-color:red;

}

to{

background-color:blue;

}

掛載動(dòng)畫:將動(dòng)畫加到元素身上

.元素{

animation：animation1 時(shí)間步數(shù) 時(shí)間函數(shù) 延遲時(shí)間次數(shù) ；

}

掛載多個(gè)動(dòng)畫：

.元素{

animation：animation1 時(shí)間,animation2 時(shí)間,animation1 時(shí)間；

其他動(dòng)畫的相同的可以附件通過animation屬性；

}

animation的樣式

動(dòng)畫名：animation-name

時(shí)間： animation-duration

步數(shù)：animation-steps：8；

時(shí)間函數(shù)：animation-timing-function

延遲： animation-delay

動(dòng)畫次數(shù)： animation-iteration-count：infinite（無限次）/2；

指定下一次動(dòng)畫是否逆向：animation-direction：alternate（逆向）/ normal（常規(guī)）；

最后的狀態(tài)：animation-fill-mode：backwards（默認(rèn)（保持一開始的狀態(tài)））/forwards（保持當(dāng)前的狀態(tài)）；

狀態(tài)即指定動(dòng)畫是否運(yùn)動(dòng)： animation-play-state: running（運(yùn)行）/paused（靜止）;

元素分類

按照在頁面中的呈現(xiàn)效果：

1.行內(nèi)元素：在一行內(nèi)顯示，不可以設(shè)置寬高：（存放文字）

span a b i strong del

2.行內(nèi)塊元素：在一行內(nèi)顯示，可以設(shè)置寬高：（有縫隙不常用）

img 表單控件

3.塊元素：可以設(shè)置寬高，獨(dú)占一行

div 標(biāo)題標(biāo)簽（h1-h6）列表標(biāo)簽（ul-li ol-li dl>dt+dd 段落標(biāo)簽（p pre））

元素嵌套規(guī)范：

1.同一級(jí)別可以相互嵌套

2.級(jí)別高的可以嵌套級(jí)別低的元素

3.p標(biāo)簽只能嵌套行內(nèi)元素

4.a鏈接不能相互嵌套

元素的轉(zhuǎn)換：

1.塊元素：display：block；

2.行內(nèi)塊元素：display：inline-block；

3.行內(nèi)元素：display：inline；

背景圖片以及瀏覽器內(nèi)核

背景圖

先設(shè)大小，在引background；

background: url('路徑') no-repeat left bottom/contain；

//圖片位置禁止重復(fù) 位置（top bottom left right）

路徑：background-image：url（“”），url（“”）；加載多張背景圖
背景圖大小： background-size：100px auto，100px auto；會(huì)重復(fù)
背景的圖重復(fù)：

4. background-repeat：no-repeat，repeat；（無重復(fù)）

5. background-repeat：repeat-x（x方向重復(fù)）

background-repeat：repeat-y（y方向重復(fù)）

背景圖的位置：

background-position：x y；（數(shù)值方位值（top/bottom left/rightcenter（可以省略）））

背景開始渲染的位置： background-origin: ;

8. padding-box；（默認(rèn)）從padding位置開始渲染

9. border-box；從邊框的位置開始渲染

content-box；從內(nèi)容的位置開始渲染

圖片結(jié)束渲染的位置：background-clip: ;

11. padding-box；（默認(rèn)）從padding位置結(jié)束渲染

12. border-box；從邊框的位置結(jié)束渲染

content-box；從內(nèi)容的位置結(jié)束渲染

使得背景圖加載到瀏覽器中
background-attachment: fixed;

8.可以簡(jiǎn)寫：

background：空格隔開；

背景圖漸變
background: linear-gradiend(top，顏色1，顏色2，顏色n)

//漸變開始的方向（默認(rèn)top）類似25deg（25度）

10.瀏覽器內(nèi)核//背景色漸變

1. /* 標(biāo)準(zhǔn)語法 */

例子：background: linear-gradient(top,#3bbcff,#47eaff);

2. /* 谷歌內(nèi)核 -webkit- */

例子：background: -webkit-linear-gradient(top,#3bbcff,#47eaff);

3. /* 火狐內(nèi)核 -moz- */

例子：background: -moz-linear-gradient(top,#3bbcff,#47eaff);

4. /* 歐鵬內(nèi)核 -o- */

例子：background: -o-linear-gradient(top,#3bbcff,#47eaff);

5. /* IE內(nèi)核 -ms- */

例子：background: -ms-linear-gradient(top,#3bbcff,#47eaff);

文件的讀取方法路徑

絕對(duì)路徑：從盤符開始的一條完整路徑

相對(duì)路徑：兩個(gè)文件的位置關(guān)系

邊框的相關(guān)屬性【圓角，邊框形狀】

border-radius：邊框的半徑設(shè)置圓角 n%或者num像素

border-style:dotted solid double dashed;

上邊框是點(diǎn)狀

右邊框是實(shí)線

下邊框是雙線

左邊框是虛線

透明度

透明性的選擇：（整個(gè)容器都變）

opacity：；0-1之間的值；

字體

font-family =“ 字體” //字體樣式可以被繼承

鼠標(biāo)移入樣式

span標(biāo)簽

cursor：pointer；鼠標(biāo)樣式：手型

陰影

box-shadow：x軸偏移量 y軸偏移量陰影的模糊程度陰影的大小（0和本身一樣大?。?陰影的顏色；

引入字符圖標(biāo)

引入字符圖標(biāo)：

行內(nèi)元素隨意

span class=“iconfont 圖標(biāo)類名”

可調(diào)節(jié)樣式：同文字

文檔流

文檔流：

標(biāo)準(zhǔn)情況下，頁面元素從左往右從上往下依次排列

flex布局(規(guī)范的設(shè)計(jì)稿)-彈性布局

容器（父元素）的屬性：【display:flex;】

*flex-direction: 決定主軸方向。

row 主軸在水平方向，從左向右（默認(rèn)）。

row-reverse 主軸在水平方向，從右向左

column 主軸在垂直方向，從上到下

column-reverse 主軸在垂直方向，從下到上

*flex-wrap: 決定項(xiàng)目換行

wrap: 項(xiàng)目換行

nowrap: 項(xiàng)目不換行（默認(rèn)值）

wrap-reverse：項(xiàng)目換行且反轉(zhuǎn)

*justify-content: 決定項(xiàng)目在主軸的對(duì)齊方式

flex-start;主軸的起點(diǎn)

flex-end;主軸的終點(diǎn)

center;主軸的中心

space-between;兩端對(duì)齊

space-around;項(xiàng)目?jī)蓚?cè)距離相等

*align-items：項(xiàng)目在交叉軸上的對(duì)齊方式（適用于一根軸線與多跟軸線）

flex-start:交叉軸的起點(diǎn)

flex-end：交叉軸的終點(diǎn)

Center：交叉軸的中心

baseline：基線對(duì)齊（文本底部）

*align-content:定義項(xiàng)目在交叉軸上的對(duì)齊方式（僅適用于多根軸線）

flex-start;交叉軸的起點(diǎn)

flex-end;交叉軸的終點(diǎn)

center;交叉軸的中心

space-between;兩端對(duì)齊

space-around;兩側(cè)距離相等

子元素（項(xiàng)目）的屬性：

*order：定義項(xiàng)目的排列順序，數(shù)值越小，越靠前，默認(rèn)值為0（可以取負(fù)值）。

*flex-grow:定義項(xiàng)目的放大比例。默認(rèn)值為0，即使存在剩余空間，也不放大。

*flex-shrik：定義項(xiàng)目的縮小比例，默認(rèn)值為1，空間不足，項(xiàng)目縮小;值為0時(shí),空間不足,項(xiàng)目也不縮小.

*flex-basis: 定義項(xiàng)目占據(jù)的主軸空間.默認(rèn)auto或者自己添加像素;

*align-self:定義單個(gè)項(xiàng)目在交叉軸的對(duì)齊方式.

flex-start:交叉軸的起點(diǎn)

flex-end：交叉軸的終點(diǎn)

Center：交叉軸的中心

滾動(dòng)條

overflow-x：auto；超出部分在x軸的表現(xiàn)形式。

auto：自動(dòng)；（如果超出，就自動(dòng)以滾動(dòng)條的形式顯示）

去滾動(dòng)條：加在具有overflow屬性的元素身上

::-webkit-scrollbar{

height：0；

}

值描述測(cè)試

visible 不裁剪內(nèi)容，可能會(huì)顯示在內(nèi)容框之外。測(cè)試

hidden 裁剪內(nèi)容 - 不提供滾動(dòng)機(jī)制。測(cè)試

scroll 裁剪內(nèi)容 - 提供滾動(dòng)機(jī)制。測(cè)試

auto 如果溢出框，則應(yīng)該提供滾動(dòng)機(jī)制。測(cè)試

no-display 如果內(nèi)容不適合內(nèi)容框，則刪除整個(gè)框。測(cè)試

no-content 如果內(nèi)容不適合內(nèi)容框，則隱藏整個(gè)內(nèi)容。測(cè)試

輪播圖

swiper(.js).com

表格

[行] [列]

table身上的屬性

table身上的屬性：

border：表格邊框 cellspacing：?jiǎn)卧耖g的間距

cellpadding：?jiǎn)卧竦膬?nèi)容與其邊框的內(nèi)邊距

bgcolor：表格的背景顏色 background：表格的背景圖片

width：表格寬度 height：表格高度

border-collaspe：collaspe：邊框合并，不疊加 cellspacing：0：邊框合并，但合并之后的邊框?qū)挾鹊扔?前兩個(gè)邊框?qū)挾戎?/p>

caption：表格標(biāo)題

background:表格背景圖

cellspacing:單元格之間的間隙寬度

align:表格的水平對(duì)齊方式，通常是left，center，right

表格的標(biāo)題

單元格【tr】【td】

width：?jiǎn)卧駥挾萮eight：?jiǎn)卧窀叨?/p>

align：?jiǎn)卧駜?nèi)文本的對(duì)齊方式,通常是左，中，右 left，center，right

valign：?jiǎn)卧駜?nèi)文本的對(duì)齊方式,通常是上，中，下 top，middle，bottom

nowrap：在為設(shè)置單元格寬度時(shí)，當(dāng)文本長(zhǎng)度寬于單元格寬度，將要換行時(shí)，該標(biāo)簽會(huì)使其不換行

</tr>

表格的跨行與跨列【td】

rowspan：跨行標(biāo)簽，表示跨了多少行

colspan：跨列標(biāo)簽，表示跨了多少列

表格標(biāo)簽拓展及其屬性

thead：定義表格的表頭。

tbody：定義表格主體（正文）。

tfoot：定義表格的頁腳（腳注或表注）。

colgroup：標(biāo)簽用于對(duì)表格中的列進(jìn)行組合，以便對(duì)其進(jìn)行格式化。

注意：不管thead、tbody、tfoot的代碼先后順序如何，html顯示時(shí)，始終是先顯示thead，再顯示tbody，最后顯示tfoot。

1、<thead> 內(nèi)部必須擁有 <tr> 標(biāo)簽！

2、<tfoot> 元素內(nèi)部必須包含一個(gè)或者多個(gè) <tr> 標(biāo)簽。

3、<tbody> 元素內(nèi)部必須包含一個(gè)或者多個(gè) <tr> 標(biāo)簽。

4、必須在 table 元素內(nèi)部使用這些標(biāo)簽。

5、當(dāng)不同行間的單元格合并時(shí)各單元格所在的行不要加tbody標(biāo)簽。

標(biāo)題欄

《tr》<th></th>《/tr》用法和td相似知識(shí)自動(dòng)將單元格內(nèi)容以粗體顯示

表單控件表單標(biāo)簽

action:表單信息提交的位置；

method：提交的方式

get：地址欄，信息量少，安全性低

post：信息量多，比較安全

1.輸入文本【輸入框】：

用戶名：<input type="text" placeholder="請(qǐng)輸入用戶名" maxlength="10" value=" " name="username" class="">

placeholder：默認(rèn)提示文本;

maxlength:規(guī)定輸入的最大字符數(shù)

name:本文本框的名字，與后臺(tái)進(jìn)行數(shù)據(jù)交互用

class:定義本文本框的樣式，相當(dāng)于盒子

placeholder下的縮進(jìn)

text-indent：2em；縮進(jìn)

2.輸入密碼【密碼框】：

密碼：<input type="password" placeholder="請(qǐng)輸入密碼" maxlength="10" value=" " name="psw" class="">

3.單選按鈕[name的值必須相同]：

請(qǐng)選擇你的性別：

<label for="man"> [label實(shí)現(xiàn)點(diǎn)什么就選中，for中的值和id中的值相同]

男：<input type="radio" name="sex" id="man" checked> //checked默認(rèn)選項(xiàng)

</label>

女：<input type="radio" name="sex" id="woman">

</label>

4.多選按鈕[name的值必須相同]：

請(qǐng)選擇你喜歡的音樂：

搖滾：<input type="checkbox" checked>

5.下拉列表【下拉框】：

選擇你的學(xué)歷：

</select>

6.上傳文件：

選擇你的照片：

7.留言文本空間：

</textarea>

8.用戶是否允許重新設(shè)置textarea大小css屬性：

resize: none/both/vertical/horizontal;不允許/上下允許拖動(dòng)/只能在垂直方向拖動(dòng)/只能在水平方向拖動(dòng)

9.重置按鈕：

10.提交按鈕：

11.自定義按鈕：

12.顏色：

13.時(shí)間日期：

年月：<input type="month">

年周：<input type="week">

時(shí)分：<input type="time">

年月日：<input type="date">

年月時(shí)分：<input type="datetime-local">

14.驗(yàn)證

<input type="email"> 郵箱驗(yàn)證

<input type="tel" autofocus> 電話

15. autofocus 自動(dòng)獲取焦點(diǎn)

</form>

文本模型

文本換行

使非中日韓文本換行

word-break: break-all ;

文本禁止換行

white-space:nowrap;

單行文本溢出部分以省略號(hào)顯示

overflow: hidden;(放文本的容器)

text-overflow: ellipsis;

多行文本溢出

指定為彈性盒子
display: -webkit-box;
在彈性盒模型中指定元素的排列順序
-webkit-box-orient: vertical;
指定文本顯示（溢出）的行數(shù);
-webkit-line-clamp: 3;
height要是line-height的倍數(shù)
line-height: 70px;
overflow：hidden；

音頻視頻標(biāo)簽

音頻標(biāo)簽

controls 空間向用戶顯示：

loop 循環(huán)播放

autoplay當(dāng)前頁面加載完自動(dòng)播放

視頻標(biāo)簽

H5語義化標(biāo)簽

<section>頁面中的某一部分</section>

meta標(biāo)記【簽】

name="關(guān)鍵字" cantent="內(nèi)容"

<mate http-equiv="Refresh" content="10";url="跳轉(zhuǎn)路徑"> //每10s刷新一次并且跳轉(zhuǎn)到跳轉(zhuǎn)路徑知識(shí)的文件

bgsound標(biāo)簽

body屬性

bgcolor:背景顏色
background：背景圖片
text：文檔中文字的顏色
link：超鏈接的顏色
alink：正在訪問的超鏈接的顏色
vlink：已訪問過的超鏈接的顏色
leftmargin/rightmargin/topmargin/bottommargin：左/右/上/下邊距的像素值

對(duì)文字操作的標(biāo)簽

<p></p>開始一個(gè)新段落，可單可雙
換行標(biāo)簽，單獨(dú)標(biāo)記
<pre></pre>預(yù)格式化【敲什么樣式，顯示什么樣式】
<font></font> 用來設(shè)置文字的字體大小顏色粗細(xì)等
文字樣式標(biāo)記[均成對(duì)出現(xiàn)]
b 粗體 i 斜體 u 下劃線 tt 等寬
sup 上標(biāo)體 sub 下表體 strike 刪除線 big 大號(hào)字樣
small 小號(hào)字樣 blink 閃爍字樣 em強(qiáng)調(diào)字樣 strong著重字樣 cite引用字樣

列表標(biāo)簽

符號(hào)列表
<ul type="circlr(空心圓點(diǎn))/disc（實(shí)心圓點(diǎn)）【默認(rèn)】/square（實(shí)心方塊）">

2. <li>

<li>

</ul>

排序列表
<ol type="1(數(shù)字) /a（a，b，c..）/ A(A,B,C...)/ i(i,ii,iii,...)/ I(I,II,III,...)">

4. <li>

<li>

</ol>

a標(biāo)簽

<a href="路徑 " title="鼠標(biāo)移入時(shí)顯示的文字" target=" "(新窗口打開的位置 _self:在本窗口打開;_blank:在新窗口打開；_parent:在當(dāng)前窗口的父窗口打開鏈接；_top:在整個(gè)瀏覽器窗口打開) ...

[字符實(shí)體]常用的轉(zhuǎn)義字符

顯示結(jié)果描述實(shí)體名稱

空格

< 小于號(hào)

大于號(hào)

& 和號(hào)

" 引號(hào)

' 撇號(hào) (IE不支持)

￠分（cent）

￡鎊（pound）

￥元（yen）

€ 歐元（euro）

§ 小節(jié)

? 版權(quán)（copyright）

? 注冊(cè)商標(biāo)

? 商標(biāo)

× 乘號(hào)

÷ 除號(hào)

選擇器

分類

css選擇器

1.通用選擇器：

*｛｝//選擇所有的標(biāo)簽

2.群組選擇器：

E1,E2,E3..｛｝//選擇E1 E2 E3

3.標(biāo)簽選擇器

標(biāo)簽名｛｝

4.類名選擇器：

.類名｛｝

5.后代選擇器

.E1 .E2｛｝ //選擇E1 的后代E2

6.交叉選擇器

標(biāo)簽名.類名｛｝

7.id選擇器

例如創(chuàng)建id

#id名｛｝ //選擇頁面中id為**的標(biāo)簽

8.偽類選擇器：

鼠標(biāo)移入狀態(tài)

E：hover{ } E元素選擇鼠標(biāo)移入狀態(tài)

E：hover .子類{ } 選擇e元素下鼠標(biāo)移入時(shí)子類的變化

獲取焦點(diǎn)，用于表單的輸入

E: focus{

outline: none;

}

9.偽結(jié)構(gòu)選擇器：

E：first-child｛｝作為子元素的第一個(gè)孩子的E標(biāo)簽

E：last-child｛｝作為子元素的最后第一個(gè)孩子的E標(biāo)簽

E: nth-child(n){} //作為子元素的第n個(gè)孩子的E標(biāo)簽

E: nth-last-child(n) 作為子元素的倒數(shù)第n個(gè)孩子的E標(biāo)簽

E：first-of-type｛｝作為子元素的同類型的第一元素

E：last-of-type｛｝作為子元素的同類型中的最后一個(gè)元素

E: nth-of-type（n）作為子元素的同類型中的第n個(gè)元素

E: nth-last-of-type(n) 作為子元素的同類型中的倒數(shù)第n個(gè)元素

（n）n可以以為num/even（偶數(shù)）/odd(奇數(shù))/3n（3的倍數(shù)）

例子：5.15/偽結(jié)構(gòu)選擇器

10.偽元素選擇器：

::after{} 在元素之后加入一個(gè)

::before{

content：“內(nèi)容之前”；

color：；

} 在元素之前

屬于行內(nèi)元素

::after{} ::before{}偽元素 content：""；樣式必須寫

11.子類選擇器

相鄰兄弟選擇器

E1+E2｛｝選擇E1的下一個(gè)兄弟元素E2（不能選中上一個(gè)兄弟元素）

div.box>a+img a和img統(tǒng)計(jì)

子類選擇器

E1>E2{} 選擇E1的子類元素E2

例子：div.box>div.item{$}*20

div.box>a>img

12.屬性選擇器

[屬性名]{} 選擇所有擁有屬性為屬性名的元素

[屬性名=“value”]｛｝選擇擁有屬性名的屬性且屬性值為value

E[屬性名=“value”]{} 選擇擁有屬性名的屬性且屬性值為value的E元素

E[屬性名~=“value”]{} 選擇擁有屬性名的屬性并且屬性值一個(gè)或者多個(gè)，其中一個(gè)屬性值為value的E元素

E[value^=“1”]{} 選擇擁有 value的屬性并且屬性值一個(gè)或者多個(gè)，其中一個(gè)屬性值以 1 開頭的E元素

E[value$=“1”]{} 選擇擁有 value的屬性并且屬性值一個(gè)或者多個(gè)，其中一個(gè)屬性值以 1 結(jié)尾的E元素

E[value*=“1”]{} 選擇擁有 value的屬性并且屬性值一個(gè)或者多個(gè)，其中一個(gè)屬性值包含 1 的E元素

例子：屬性選擇器

選擇器的優(yōu)先級(jí)

宗旨：越具體的優(yōu)先級(jí)越高

id (100 ) > class( 10 )> 標(biāo)簽名( 1)

.box .son{ } 10+10=20

abcde優(yōu)先級(jí)（e為個(gè)位）：

a:行內(nèi)樣式

b:id選擇器

c:類名選擇器偽類選擇器（：hover）屬性選擇器

d:標(biāo)簽選擇器偽元素選擇器（：：after）

e:通用選擇器有一個(gè)

選擇有中有一個(gè)abcde在其位置+1

移動(dòng)端布局步驟

修改視口
<meta name="viewport" content="width=device-width">

視口：視覺視口，布局視口，理想視口

em:當(dāng)前字體的倍率 100px=10em

rem：html字體的倍率

移動(dòng)端窗口 375*667

html{

font-size：0.5rem；

}

.box{

width： 750rem； //375px=750rem*0.5px ； 100px=1rem

height： 1334rem；

}

引入rem.js
<script src="路徑"></script>
修改rem.js中設(shè)計(jì)稿的寬度
100px=1rem

我是一名前端開發(fā)程序員，自己整理了一份2019最全面前端學(xué)習(xí)資料，從最基礎(chǔ)的HTML+CSS+JS到移動(dòng)端HTML5到各種框架都有整理，送給每一位前端小伙伴，這里是小白聚集地，歡迎初學(xué)和進(jìn)階中的小伙伴
前端資料獲取方式：
1.在你手機(jī)的右上角有【關(guān)注】選項(xiàng)，點(diǎn)擊關(guān)注！
2.關(guān)注后，手機(jī)客戶端點(diǎn)擊我的主頁面，右上角有私信，請(qǐng)私信回復(fù)：【學(xué)習(xí)】
電腦已經(jīng)設(shè)置好了關(guān)鍵詞自動(dòng)回復(fù)，所以回復(fù)的時(shí)候請(qǐng)注意關(guān)鍵詞喲~

avaScript 是一門弱類型語言，它對(duì)類型是弱校驗(yàn)，正因?yàn)檫@個(gè)特點(diǎn)，所以才有了TypeScript這個(gè)強(qiáng)類型語言系統(tǒng)的出現(xiàn)，來彌補(bǔ)類型檢查的短板。TypeScript在實(shí)現(xiàn)類型強(qiáng)校驗(yàn)的同時(shí)，還要滿足 JavaScript 靈活的特點(diǎn)，所以就有了類型兼容性這個(gè)概念。了解類型兼容性可以避免在實(shí)際的開發(fā)中出現(xiàn)一些低級(jí)錯(cuò)誤。下面就來看看類型兼容性的概念和分類。

1、類型兼容性的概念

所謂的類型兼容性 用于確定一個(gè)類型是否能賦值給其他類型 。TypeScript中的類型兼容性是 基于結(jié)構(gòu)類型 的，結(jié)構(gòu)類型是一種只使用其成員來描述類型的方式。其基本原則是， 如果 x 要兼容 y，那么 y 至少要具有與 x 相同的屬性。

下面來看一個(gè)例子，構(gòu)建一個(gè) Teacher 類，然后聲明一個(gè)接口 Student，Student 的屬性 Teacher 都有，而且還多了其他的屬性，這種情況下 Student 就兼容了 Teacher：

<pre class="prettyprint hljs cs" style="padding: 0.5em; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; color: rgb(68, 68, 68); border-radius: 4px; display: block; margin: 0px 0px 1.5em; font-size: 14px; line-height: 1.5em; word-break: break-all; overflow-wrap: break-word; white-space: pre; background-color: rgb(246, 246, 246); border: none; overflow-x: auto; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;">class Teacher {
    constructor(public weight: number, public name: string, public job: string) {

    }
}
interface Student {
    name: string
    weight: number
}
let x: Student;
x = new Teacher(120, 'TS', 'teacher') // :white_check_mark:</pre>

如果反過來，Teacher 并沒有兼容 Student，因?yàn)?Student 的屬性比 Person 少一個(gè)。

2、特殊類型的類型兼容性

先來看看 TypeScript 中一些特殊類型的類型兼容性。

（1）any

any 類型可以賦值給除了 never 之外的任意其他類型，反過來其他類型也可以賦值給 any。也就是說 any 可以兼容除了 never 之外的所有類型，同時(shí)也可以被所有的類型兼容。

<pre class="prettyprint hljs typescript" style="padding: 0.5em; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; color: rgb(68, 68, 68); border-radius: 4px; display: block; margin: 0px 0px 1.5em; font-size: 14px; line-height: 1.5em; word-break: break-all; overflow-wrap: break-word; white-space: pre; background-color: rgb(246, 246, 246); border: none; overflow-x: auto; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;">let any: any;
let a: number = any;       // :white_check_mark:
let b: {} = any;           // :white_check_mark:
let b: () => number = any; // :white_check_mark:</pre>

（2）never

never 類型可以賦值給任何其他類型，但不能被其他任何類型賦值。

<pre class="prettyprint hljs javascript" style="padding: 0.5em; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; color: rgb(68, 68, 68); border-radius: 4px; display: block; margin: 0px 0px 1.5em; font-size: 14px; line-height: 1.5em; word-break: break-all; overflow-wrap: break-word; white-space: pre; background-color: rgb(246, 246, 246); border: none; overflow-x: auto; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;">let never: never = (() => {
  throw Error('never');
})();

let a: number = never;       // :white_check_mark:
let b: () => number = never; // :white_check_mark:
let c: {} = never;           // :white_check_mark:</pre>

可以看到，這里將 never 類型賦值給了 number、函數(shù)、對(duì)象類型，都是沒有問題的。

（3）unknown

unknown 和 never 的特性是相反的，即不能把 unknown 賦值給除了 any 之外的任何其他類型，但其他類型都可以賦值給 unknown。

<pre class="prettyprint hljs javascript" style="padding: 0.5em; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; color: rgb(68, 68, 68); border-radius: 4px; display: block; margin: 0px 0px 1.5em; font-size: 14px; line-height: 1.5em; word-break: break-all; overflow-wrap: break-word; white-space: pre; background-color: rgb(246, 246, 246); border: none; overflow-x: auto; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;">let unknown: unknown;
const a: number = unknown;       // 不能將類型“unknown”分配給類型“number”。
const b: () => number = unknown; // 不能將類型“unknown”分配給類型“() => number”。
const c: {} = unknown;           // 不能將類型“unknown”分配給類型“{}”。</pre>

可以看到，當(dāng)把 unknown 類型賦值給 number、函數(shù)、對(duì)象類型時(shí)，都報(bào)錯(cuò)了，這就是因?yàn)轭愋椭g不能兼容。

3、函數(shù)類型的類型兼容性

函數(shù)的類型兼容性主要包括以下六個(gè)方面：

（1）參數(shù)數(shù)量

函數(shù)參數(shù)數(shù)量要想兼容，需要滿足一個(gè)要求：如果將函數(shù) y 賦值為 x，那么要求 x 中的每個(gè)參數(shù)都應(yīng)在 y 中有對(duì)應(yīng)，也就是 x 的參數(shù)個(gè)數(shù)小于等于 y 的參數(shù)個(gè)數(shù)：

<pre class="prettyprint hljs javascript" style="padding: 0.5em; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; color: rgb(68, 68, 68); border-radius: 4px; display: block; margin: 0px 0px 1.5em; font-size: 14px; line-height: 1.5em; word-break: break-all; overflow-wrap: break-word; white-space: pre; background-color: rgb(246, 246, 246); border: none; overflow-x: auto; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;">let x = (a: number) => 0;
let y = (b: number, c: string) => 0;</pre>

上面定義的兩個(gè)函數(shù)，如果進(jìn)行賦值的話，來看下兩種情況的結(jié)果：

<pre class="prettyprint hljs ini" style="padding: 0.5em; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; color: rgb(68, 68, 68); border-radius: 4px; display: block; margin: 0px 0px 1.5em; font-size: 14px; line-height: 1.5em; word-break: break-all; overflow-wrap: break-word; white-space: pre; background-color: rgb(246, 246, 246); border: none; overflow-x: auto; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;">y = x;  // :white_check_mark:</pre>

將 x 賦值給 y 是可以的，因?yàn)?x 的參數(shù)個(gè)數(shù)小于等于 y 的參數(shù)個(gè)數(shù)，而至于參數(shù)名是否相同是無所謂的。

而將 y 賦值給 x 就不可以了：

<pre class="prettyprint hljs ini" style="padding: 0.5em; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; color: rgb(68, 68, 68); border-radius: 4px; display: block; margin: 0px 0px 1.5em; font-size: 14px; line-height: 1.5em; word-break: break-all; overflow-wrap: break-word; white-space: pre; background-color: rgb(246, 246, 246); border: none; overflow-x: auto; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;">x = y; // 不能將類型“(b: number, c: string) => number”分配給類型“(a: number) => number”。</pre>

這里 y 的參數(shù)個(gè)數(shù)要大于 x，所以報(bào)錯(cuò)了。

（2）函數(shù)參數(shù)類型

除了參數(shù)數(shù)量，參數(shù)的類型也需要對(duì)應(yīng)：

<pre class="prettyprint hljs javascript" style="padding: 0.5em; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; color: rgb(68, 68, 68); border-radius: 4px; display: block; margin: 0px 0px 1.5em; font-size: 14px; line-height: 1.5em; word-break: break-all; overflow-wrap: break-word; white-space: pre; background-color: rgb(246, 246, 246); border: none; overflow-x: auto; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;">let x = (a: number) => 0;
let y = (b: string) => 0;
x = y; // error 不能將類型“(b: string) => number”分配給類型“(a: number) => number”。</pre>

可以看到，x 和 y 兩個(gè)函數(shù)的參數(shù)個(gè)數(shù)和返回值都相同，只是參數(shù)類型對(duì)不上，所以也是不行的。

（3）剩余參數(shù)和可選參數(shù)

當(dāng)要被賦值的函數(shù)參數(shù)中包含剩余參數(shù)（…args）時(shí)，賦值的函數(shù)可以用任意個(gè)數(shù)參數(shù)代替，但是類型需要對(duì)應(yīng)：

<pre class="prettyprint hljs javascript" style="padding: 0.5em; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; color: rgb(68, 68, 68); border-radius: 4px; display: block; margin: 0px 0px 1.5em; font-size: 14px; line-height: 1.5em; word-break: break-all; overflow-wrap: break-word; white-space: pre; background-color: rgb(246, 246, 246); border: none; overflow-x: auto; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;">const getNum = (
  arr: number[],
  callback: (...args: number[]) => number
): number => {
  return callback(...arr);
};
getNum(
  [1, 2],
  (...args: number[]): number => args.length // 返回參數(shù)的個(gè)數(shù)
);</pre>

剩余參數(shù)其實(shí)可以看做無數(shù)個(gè)可選參數(shù)，所以在兼容性方面是差不多的。

再來看一個(gè)可選參數(shù)和剩余參數(shù)結(jié)合的例子：

<pre class="prettyprint hljs typescript" style="padding: 0.5em; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; color: rgb(68, 68, 68); border-radius: 4px; display: block; margin: 0px 0px 1.5em; font-size: 14px; line-height: 1.5em; word-break: break-all; overflow-wrap: break-word; white-space: pre; background-color: rgb(246, 246, 246); border: none; overflow-x: auto; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;">// 第二個(gè)參數(shù)callback是一個(gè)函數(shù)，函數(shù)的第二個(gè)參數(shù)為可選參數(shù)
const getNum = (
  arr: number[],
  callback: (arg1: number, arg2?: number) => number 
): number => {
  return callback(...arr); // error 應(yīng)有 1-2 個(gè)參數(shù)，但獲得的數(shù)量大于等于 0
};</pre>

這里因?yàn)?arr 可能為空數(shù)組，如果為空數(shù)組則…arr不會(huì)給callback傳入任何實(shí)際參數(shù)，所以這里就會(huì)報(bào)錯(cuò)。如果換成return callback(arr[0], …arr)就沒問題了。

（4）參數(shù)雙向協(xié)變

函數(shù)參數(shù)雙向協(xié)變即參數(shù)類型無需絕對(duì)相同：

<pre class="prettyprint hljs typescript" style="padding: 0.5em; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; color: rgb(68, 68, 68); border-radius: 4px; display: block; margin: 0px 0px 1.5em; font-size: 14px; line-height: 1.5em; word-break: break-all; overflow-wrap: break-word; white-space: pre; background-color: rgb(246, 246, 246); border: none; overflow-x: auto; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;">let funcA = function(arg: number | string): void {};
let funcB = function(arg: number): void {};
// funcA = funcB 和 funcB = funcA都可以</pre>

這里 funcA 和 funcB 的參數(shù)類型并不完全一樣，funcA 的參數(shù)類型為一個(gè)聯(lián)合類型 number | string，而 funcB 的參數(shù)類型為 number | string 中的 number，這兩個(gè)函數(shù)也是兼容的。

（5）返回值類型

函數(shù)返回值的類型也是要對(duì)應(yīng)的：

<pre class="prettyprint hljs javascript" style="padding: 0.5em; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; color: rgb(68, 68, 68); border-radius: 4px; display: block; margin: 0px 0px 1.5em; font-size: 14px; line-height: 1.5em; word-break: break-all; overflow-wrap: break-word; white-space: pre; background-color: rgb(246, 246, 246); border: none; overflow-x: auto; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;">let x = (a: number): string | number => 0;
let y = (b: number) => "a";
let z = (c: number) => false;
x = y; // :white_check_mark:
x = z; // 不能將類型“(c: number) => boolean”分配給類型“(a: number) => string | number”</pre>

這里 x 函數(shù)的返回值是聯(lián)合類型，既可以是 string 類型也可以是 number 類型。而 y 的返回值類型是 number 類型，參數(shù)個(gè)數(shù)和類型也沒問題，所以可以賦值給 x。而 z 的返回值類型 false 并不是 string 也不是 number，所以不能賦值。

（6）函數(shù)重載

帶有重載的函數(shù)，要求被賦值的函數(shù)的每個(gè)重載都能在用來賦值的函數(shù)上找到對(duì)應(yīng)的簽名：

<pre class="prettyprint hljs typescript" style="padding: 0.5em; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; color: rgb(68, 68, 68); border-radius: 4px; display: block; margin: 0px 0px 1.5em; font-size: 14px; line-height: 1.5em; word-break: break-all; overflow-wrap: break-word; white-space: pre; background-color: rgb(246, 246, 246); border: none; overflow-x: auto; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;">function merge(arg1: number, arg2: number): number; // merge函數(shù)重載的一部分
function merge(arg1: string, arg2: string): string; // merge函數(shù)重載的一部分
function merge(arg1: any, arg2: any) { // merge函數(shù)實(shí)體
  return arg1 + arg2;
}
function sum(arg1: number, arg2: number): number; // sum函數(shù)重載的一部分
function sum(arg1: any, arg2: any): any { // sum函數(shù)實(shí)體
  return arg1 + arg2;
}
let func = merge;
func = sum; // error 不能將類型“(arg1: number, arg2: number) => number”分配給類型“{ (arg1: number, arg2: number): number; (arg1: string, arg2: string): string; }”</pre>

sum 函數(shù)的重載缺少參數(shù)都為string返回值為string的情況，與merge函數(shù)不兼容，所以賦值時(shí)就會(huì)報(bào)錯(cuò)。

4、枚舉的類型兼容性

數(shù)字枚舉成員類型與數(shù)字類型是互相兼容的：

<pre class="prettyprint hljs cmake" style="padding: 0.5em; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; color: rgb(68, 68, 68); border-radius: 4px; display: block; margin: 0px 0px 1.5em; font-size: 14px; line-height: 1.5em; word-break: break-all; overflow-wrap: break-word; white-space: pre; background-color: rgb(246, 246, 246); border: none; overflow-x: auto; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;">enum Status {
  On,
  Off
}
let s = Status.On;
s = 1;
s = 3;</pre>

雖然 Status.On 的值是 0，但是因?yàn)閿?shù)字枚舉成員類型和數(shù)值類型是互相兼容的，所以這里給s賦值為 3 是沒問題的。但是不同枚舉值之間是不兼容的：

<pre class="prettyprint hljs thrift" style="padding: 0.5em; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; color: rgb(68, 68, 68); border-radius: 4px; display: block; margin: 0px 0px 1.5em; font-size: 14px; line-height: 1.5em; word-break: break-all; overflow-wrap: break-word; white-space: pre; background-color: rgb(246, 246, 246); border: none; overflow-x: auto; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;">enum Status {
  On,
  Off
}
enum Color {
  White,
  Black
}
let s = Status.On;
s = Color.White; // 不能將類型“Color.White”分配給類型“Status”。</pre>

雖然 Status.On 和 Color.White 的值都是 0，但它們是不兼容的。

字符串枚舉成員類型和字符串類型是不兼容的：

<pre class="prettyprint hljs rust" style="padding: 0.5em; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; color: rgb(68, 68, 68); border-radius: 4px; display: block; margin: 0px 0px 1.5em; font-size: 14px; line-height: 1.5em; word-break: break-all; overflow-wrap: break-word; white-space: pre; background-color: rgb(246, 246, 246); border: none; overflow-x: auto; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;">enum Status {
  On = 'on',
  Off = 'off'
}
let s = Status.On
s = 'TypeScript' // 不能將類型"TypeScript"分配給類型“Status”</pre>

這里會(huì)報(bào)錯(cuò)，因?yàn)樽址置媪款愋?#39;TypeScript'和Status.On是不兼容的。

5、類類型的類型兼容性

比較兩個(gè)類的類型兼容性時(shí)，只有實(shí)例成員和方法會(huì)相比較，類的靜態(tài)成員和構(gòu)造函數(shù)不進(jìn)行比較：

<pre class="prettyprint hljs groovy" style="padding: 0.5em; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; color: rgb(68, 68, 68); border-radius: 4px; display: block; margin: 0px 0px 1.5em; font-size: 14px; line-height: 1.5em; word-break: break-all; overflow-wrap: break-word; white-space: pre; background-color: rgb(246, 246, 246); border: none; overflow-x: auto; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;">class Animal {
  static age: number;
  constructor(public name: string) {}
}
class People {
  static age: string;
  constructor(public name: string) {}
}
class Food {
  constructor(public name: number) {}
}
let a: Animal;
let p: People;
let f: Food;
a = p; // ok
a = f; // 不能將類型“Food”分配給類型“Animal”。</pre>

Animal類和People類都有一個(gè)age靜態(tài)屬性，它們都定義了實(shí)例屬性name，類型是string。把類型為People的p賦值給類型為Animal的a是沒有問題的，因?yàn)轭愵愋捅容^兼容性時(shí)，只比較實(shí)例的成員，這兩個(gè)變量雖然類型是不同的類類型，但是它們都有相同字段和類型的實(shí)例屬性name，而類的靜態(tài)成員是不影響兼容性的，所以它倆時(shí)兼容的。而類Food定義了一個(gè)實(shí)例屬性name，類型為number，所以類型為Food的f與類型為Animal的a類型是不兼容的，不能賦值。

類的私有成員和受保護(hù)成員：

類的私有成員和受保護(hù)成員會(huì)影響類的兼容性。當(dāng)檢查類的實(shí)例兼容性時(shí)，如果目標(biāo)（要被賦值的那個(gè)值）類型（這里實(shí)例類型就是創(chuàng)建它的類）包含一個(gè)私有成員，那么源（用來賦值的值）類型必須包含來自同一個(gè)類的這個(gè)私有成員，這就允許子類賦值給父類：

<pre class="prettyprint hljs scala" style="padding: 0.5em; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; color: rgb(68, 68, 68); border-radius: 4px; display: block; margin: 0px 0px 1.5em; font-size: 14px; line-height: 1.5em; word-break: break-all; overflow-wrap: break-word; white-space: pre; background-color: rgb(246, 246, 246); border: none; overflow-x: auto; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;">class Parent {
  private age: number;
  constructor() {}
}
class Children extends Parent {
  constructor() {
    super();
  }
}
class Other {
  private age: number;
  constructor() {}
}
const children: Parent = new Children();
const other: Parent = new Other(); // 不能將類型“Other”分配給類型“Parent”。類型具有私有屬性“age”的單獨(dú)聲明</pre>

當(dāng)指定 other 為 Parent 類類型，給 other 賦值 Other 創(chuàng)建的實(shí)例的時(shí)候，會(huì)報(bào)錯(cuò)。因?yàn)?Parent 的 age 屬性是私有成員，外面是無法訪問到的，所以會(huì)類型不兼容。而children的類型我們指定為了Parent類類型，然后給它賦值為Children類的實(shí)例，沒有問題，是因?yàn)镃hildren類繼承Parent類，且實(shí)例屬性沒有差異，Parent類有私有屬性age，但是因?yàn)镃hildren類繼承了Parent類，所以可以賦值。

同樣，使用 protected 受保護(hù)修飾符修飾的屬性，也是一樣的：

<pre class="prettyprint hljs scala" style="padding: 0.5em; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; color: rgb(68, 68, 68); border-radius: 4px; display: block; margin: 0px 0px 1.5em; font-size: 14px; line-height: 1.5em; word-break: break-all; overflow-wrap: break-word; white-space: pre; background-color: rgb(246, 246, 246); border: none; overflow-x: auto; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;">class Parent {
  protected age: number;
  constructor() {}
}
class Children extends Parent {
  constructor() {
    super();
  }
}
class Other {
  protected age: number;
  constructor() {}
}

const children: Parent = new Children();
const other: Parent = new Other(); // 不能將類型“Other”分配給類型“Parent”。屬性“age”受保護(hù)，但類型“Other”并不是從“Parent”派生的類</pre>

6、泛型類型兼容性

泛型中包含類型參數(shù)，這個(gè)類型參數(shù)可能是任何類型，使用時(shí)類型參數(shù)會(huì)被指定為特定的類型，而這個(gè)類型只影響使用了類型參數(shù)的部分：

<pre class="prettyprint hljs typescript" style="padding: 0.5em; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; color: rgb(68, 68, 68); border-radius: 4px; display: block; margin: 0px 0px 1.5em; font-size: 14px; line-height: 1.5em; word-break: break-all; overflow-wrap: break-word; white-space: pre; background-color: rgb(246, 246, 246); border: none; overflow-x: auto; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;">interface Data<T> {}
let data1: Data<number>;
let data2: Data<string>;
data1 = data2; // :white_check_mark:</pre>

data1 和 data2 都是 Data 接口的實(shí)現(xiàn)，但是指定的泛型參數(shù)的類型不同，TS 是結(jié)構(gòu)性類型系統(tǒng)，所以上面將 data2 賦值給 data1 是兼容的，因?yàn)?data2 指定了類型參數(shù)為 string 類型，但是接口里沒有用到參數(shù) T，所以傳入 string 類型還是傳入 number 類型并沒有影響。

再來看個(gè)例子：

<pre class="prettyprint hljs powershell" style="padding: 0.5em; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; color: rgb(68, 68, 68); border-radius: 4px; display: block; margin: 0px 0px 1.5em; font-size: 14px; line-height: 1.5em; word-break: break-all; overflow-wrap: break-word; white-space: pre; background-color: rgb(246, 246, 246); border: none; overflow-x: auto; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;">interface Data<T> {
  data: T;
}
let data1: Data<number>;
let data2: Data<string>;
data1 = data2; // 不能將類型“Data<string>”分配給類型“Data<number>”。不能將類型“string”分配給類型“number”</pre>

現(xiàn)在結(jié)果就不一樣了，賦值時(shí)報(bào)錯(cuò)，因?yàn)?data1 和 data2 傳入的泛型參數(shù)類型不同，生成的結(jié)果結(jié)構(gòu)是不兼容的。

來源： https://www.51cto.com/article/716838.html

在線咨詢

上一篇：“圖片滑動(dòng)樣式”修改HTML教程
下一篇：最受歡迎的 CSS 類名和 ID 分別是什么

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商

css基礎(chǔ)快速入門-14偽類first-letter

1、類型兼容性的概念

2、特殊類型的類型兼容性

（1）any

（2）never

（3）unknown

3、函數(shù)類型的類型兼容性

（1）參數(shù)數(shù)量

（2）函數(shù)參數(shù)類型

（3）剩余參數(shù)和可選參數(shù)

（4）參數(shù)雙向協(xié)變

（5）返回值類型

（6）函數(shù)重載

4、枚舉的類型兼容性

5、類類型的類型兼容性

類的私有成員和受保護(hù)成員：

6、泛型類型兼容性

您的項(xiàng)目需求