英文

通常的內(nèi)容

header

頁(yè)眉

nav

導(dǎo)航欄

main

主要內(nèi)容

article

與上下文無(wú)關(guān)的獨(dú)立內(nèi)容

section

其中一個(gè)區(qū)域

aside

側(cè)欄或邊欄

footer

頁(yè)腳

detail

某個(gè)細(xì)節(jié)的描述

summary

detail的標(biāo)題

英文

含義

h1

標(biāo)題，字體最大的標(biāo)題

中間部分

字體依次減小的標(biāo)題

h6

標(biāo)題，字體最小的標(biāo)題

p

段落

br

換行

-

-

hr

水平線

sub

下標(biāo)文本

sup

上標(biāo)文本

ins

插入文本

del

刪除文本

wbr

此處適合換行

pre

預(yù)格式文本

address

表示地址

bdo

文字方向

blockauote

長(zhǎng)的引用語(yǔ)

q

短的引用語(yǔ)

mark

定義有記號(hào)的文本

表格

table

表格

tr

行標(biāo)簽

td

列標(biāo)簽

th

標(biāo)題列

列表

ol

有序列表

ul

無(wú)序列表

li

列表項(xiàng)

表單

form

表單

label

點(diǎn)擊時(shí)自動(dòng)定位到里面的input

input

輸入

select

多選

option

多選的一個(gè)選項(xiàng)

英文

含義

br

換行

img

引入圖片

video

引入視頻

audio

引入

abbr

此處適合換行

英文

作用

autoplay

自動(dòng)播放

controls

顯示控件

loop

循環(huán)播放

poster

定義視頻下載時(shí)需要的圖像，值用路徑表示

preload

autoplay時(shí)無(wú)效，定義文件預(yù)加載的時(shí)機(jī)，有3個(gè)值，具體在下面介紹

muted

靜音

常見(jiàn)的偽 選擇器/元素

表示方法

通用選擇器

*

標(biāo)簽選擇器

標(biāo)簽名

類選擇器

.類名 前面是一個(gè)下點(diǎn)

ID選擇器

#ID號(hào)

-

以下選擇器用于分隔不同的選擇器

后代選擇器

一個(gè)空格，其實(shí)這不是個(gè)選擇器（但很像），可以選擇出所有的后代

分組選擇器

, 逗號(hào)

子元素選擇器

>

-

以下選擇器均需緊跟在最上面的選擇器后

相鄰兄弟選擇器

+

不相鄰兄弟選擇器

~

屬性選擇器

[屬性值] 詳細(xì)介紹

偽類選擇器

:單詞 詳細(xì)介紹

偽屬性

::單詞 詳細(xì)介紹

后一個(gè)選擇器不一定是前一個(gè)的子元素，也可以通過(guò)一些符號(hào)進(jìn)行兄弟之間的變化

偽類選擇器

介紹

-

下面定義的是應(yīng)用于超鏈接文本a的4種(鼠標(biāo)在該元素的)狀態(tài)，
一起出現(xiàn)(分開(kāi)使用)時(shí)，順序不可顛倒，否則會(huì)使本應(yīng)在上面的選擇器失效
也可以用到其他元素(非a)身上，即當(dāng)鼠標(biāo) 移過(guò)/在上面/移出時(shí) 的活動(dòng)狀態(tài)

link

正常狀態(tài)（未訪問(wèn)）

visited

被訪問(wèn)之后

hover

經(jīng)過(guò)時(shí)

active

單機(jī)被激活時(shí)

偽類選擇器也有一些分類，見(jiàn)下

結(jié)構(gòu)偽類選擇器

介紹

–

–

first-child

第一個(gè)子元素

lastchild

最后一個(gè)子元素

-

注意以下4個(gè)帶()的，()內(nèi)可以是一個(gè)算式或數(shù)字，選中符合結(jié)果的(可以是多個(gè))
若()內(nèi)是一個(gè)確定的數(shù)字，數(shù)字超出范圍，選擇器將無(wú)效；
算式里可以有一個(gè)字母n，n會(huì)自增直到超出父類的子類數(shù)量。
n=0等最前面的幾個(gè)值超出范圍問(wèn)題不大
盡量簡(jiǎn)單 有效，比如(2n+1)選中所有奇數(shù)行
()里面也可以是 odd，選中奇數(shù)行；even，選中偶數(shù)行

nth-child()

正數(shù) 第()個(gè)子元素

nth-last-child()

倒數(shù) 第()個(gè)子元素

nth-of-type()

父元素的 第()個(gè)同類子元素

nth-last-of-type()

父元素的 倒數(shù) 第()個(gè)同類子元素

first-of-type

父元素的 第一個(gè)同類子元素

last-of-type

父元素的 倒數(shù) 第一個(gè)同類子元素

only-child

父元素的唯一的子元素，(當(dāng)然，)可能有很多子元素是唯一的

only-of-type

父元素的唯一一個(gè)相同類型的子元素

empty

沒(méi)有任何內(nèi)容的子元素

狀態(tài)偽類選擇器

介紹，UI元素一般指包含在form元素內(nèi)的表單元素

enabled

范圍內(nèi)的所有可用UI元素

disabled

范圍內(nèi)的所有不可用UI元素

checked

范圍內(nèi)的所有可用UI元素

否定偽類選擇器

not()

不匹配該元素的選擇器，()里是一個(gè)選擇器的屬性，將選取 不符合該選擇器 的元素

目標(biāo)偽類選擇器

target

前面的匹配元素被相關(guān)URL指向，樣式效果才生效，是動(dòng)態(tài)選擇器

偽元素

介紹

before

在前面插入一段文字

after

在后面插入一段文字

相對(duì)單位

單位長(zhǎng)度的含義

px

像素(Pixel)

em

相對(duì)于父元素字體大小的倍數(shù)

ex

相對(duì)于字符x的高度，通常為字體高度的一半

ch

相對(duì)于數(shù)字0的寬度

rem

相對(duì)于根元素(html)字體大小的倍數(shù)。若未被設(shè)置，則相對(duì)于瀏覽器的默認(rèn)字體尺寸（一般為16px）

vw

相對(duì)于視口的寬度（視口被均分為100vw）

vh

相對(duì)于視口的高度（視口被均分為100vw）

xmin

相對(duì)于視口的 高度或?qū)挾?中較小的那個(gè)（小的被均分為100vmin）

vmax

相對(duì)于視口的 高度或?qū)挾?中較大的那個(gè)（大的被均分為100vmax）

–

–

絕對(duì)單位

單位長(zhǎng)度的含義

pt

點(diǎn)(point)

pc

派卡(pica)，=我國(guó)新四號(hào)鉛字的尺寸

in

英寸(inch)

cm

厘米(centimeter)

mm

mm(millimeter)

單位

含義

s

秒

ms

毫秒

單位

deg

角度(degrees) ，一個(gè)圓 360°

grad

梯度(gradians)，一個(gè)圓 400梯度

rad

弧度(radians)，一個(gè)圓 PI

turn

轉(zhuǎn)、圈(turns)

值

描述

white

白色

具體英文單詞↑

代表這個(gè)單詞指代的顏色

rgb(r,g,b)

RGB值，rgb分別代表紅綠藍(lán)，[0,255]

rgba(r,g,b,a)

見(jiàn)上↑.a代表透明度 [0,1]

rgb(r%,g%,b%)

RGB值(255*x%)，三個(gè)值[0,100] ,最后即為0%-100%

#rrggbb

RGB值，每個(gè)值用 兩位 16進(jìn)制數(shù) 表示（大小寫(xiě)不敏感），最后值在0-255

hsl(h,s,l)

hsl分別代表 色相(hue,[0,360])/飽和度(saturation,[0%,100%])/亮度(lightness,[0%,100%])

hsla(h,s,l,a)

↑ a代表透明度

屬性

含義

長(zhǎng)度表示

width

寬度

1

height

高度

1

position

定位方式

字符

display

顯示方式

字符

float

浮動(dòng)方式

字符

clear

清除部分浮動(dòng)

字符

margin

外邊距

1-4

border

邊框

1-4

padding

內(nèi)邊距

1-4

text-align

字體左右的對(duì)齊方式

字符

text-indent

文字之前空多少長(zhǎng)

1

background

背景，包括背景圖，背景色，是否重復(fù)

0

line-heignt

行高

1

font-family

字體

字符

font-size

字的大小

1

font-weight

字的粗細(xì)

1

color

字的顏色

顏色

opacity

透明度0-1

0

z-index

離屏幕遠(yuǎn)近，越大越顯示在上面

0

transition

狀態(tài)變化的時(shí)間

時(shí)間

animation

動(dòng)畫(huà)

0

overflow

溢出

字符

值

含義

absolute

絕對(duì)定位，相對(duì)于最近的定位過(guò)的父元素偏移

relative

相對(duì)定位，在文件流中，相對(duì)自生原本在的位置偏移

fixed

絕對(duì)定位，相對(duì)視口偏移

這里提到了偏移，它相對(duì)于定位的位置進(jìn)行偏移

relative在文件流中的意思是，在這個(gè)頁(yè)面中單獨(dú)占據(jù)一塊空間，原始位置不會(huì)與在文件流中的同級(jí)元素重疊

值

含義

block

塊狀元素

none

不顯示

flex

flex布局

grid

grid布局

inline

行內(nèi)元素

inline-block

行內(nèi)塊元素

屬性

含義

用法與解釋

grid-template

融合了下面上半部分的所有項(xiàng)

較為復(fù)雜，不講

grid-template-rows

每行的寬度（單獨(dú)設(shè)置）

多個(gè) 長(zhǎng)度/auto/xfr 表示，有幾行寫(xiě)幾個(gè)(空格分開(kāi))
可以用repeat(s,值)代替s個(gè)連續(xù)的重復(fù)值
fr代表比例，會(huì)將剩下的長(zhǎng)度按比例分配

grid-template-colums

每列的寬度（單獨(dú)設(shè)置）

↑ 有幾列寫(xiě)幾個(gè)

grid-template-areas

給每個(gè)格子命名，名字一樣則合并

每行一對(duì)雙引號(hào)，（適當(dāng)使用回車）
單個(gè)雙引號(hào)內(nèi) 每列分別有一個(gè)代表這個(gè)區(qū)域的名字。
“aa b” “aa b” “c c”，代表3行2列：
aa占據(jù)上面兩行的最左邊一列；
b占據(jù)上面兩行的最右邊一列；
c占據(jù)最后一行的兩列

grid-gap

行間距和列間距（統(tǒng)一設(shè)置）

行間距 列間距

grid-row-gap

行間距（統(tǒng)一設(shè)置）

長(zhǎng)度

grid-colum-gap

列間距（統(tǒng)一設(shè)置）

長(zhǎng)度

place-items

內(nèi)容的 左右和上下 位置情況

↓ start/end/center/stretch

align-items

內(nèi)容的 左右 位置情況

↑ 開(kāi)頭/末尾/中間/拉伸以盛滿

justify-items

內(nèi)容的 上下 位置情況

↑ 對(duì)align來(lái)說(shuō)，左是開(kāi)頭，右是末尾

place-content

整個(gè)表格 左右和上下 位置情況

↑ 對(duì)juestify來(lái)說(shuō)，上是開(kāi)頭，下是末尾

align-content

整個(gè)表格的 左右 位置情況

↑有兩個(gè)值的(place)，用空格分開(kāi)

justify-content

整個(gè)表格的 上下 位置情況

↑

–

–

以下都是子元素獲得父元素分配的某個(gè)空間的語(yǔ)句

grid-template-area

用指定的名字獲取父類給這個(gè)名字的空間

字符串

–

–

以下用 起始/末尾 的(間隔,即gap) 行/列 獲得空間
有多個(gè)值的用/分隔
第1個(gè)間隔行在整個(gè)表格的最上方，列：左
即，有n行內(nèi)容行，就有n+1行間隔行
默認(rèn)名為從1開(kāi)始的數(shù)字，行列的下標(biāo)分開(kāi)計(jì)算
或使用上面areas里定義的名字+start/end
如 aa-start 表示區(qū)域a的起始行
上：起始行 左：起始列 下：末尾行 右：末尾列

grid-area

起始/末尾 的 行/列

起始行/起始列/末尾行/末尾列

grid-row

起始/末尾 的行

起始行/末尾行

grid-row-start

起始 行

起始行

grid-row-end

末尾行

末尾列

grid-column

起始/末尾 的列

起始列/末尾列

grid-column-start

起始列

起始列

grid-column-end

末尾列

末尾列

flex-direction的值

含義

row

從上到下

row-reserve

從下到上

column

從左到右

column-reserve

從右到左

justify-content的值

含義

flex-start

主軸起始除處

flex-end

主軸末尾處

center

主軸中間

space-around

元素兩邊留空隙，每個(gè)元素各占一份，不會(huì)像magin一樣重合

space-between

元素之間留空隙，這意味著最邊上沒(méi)有空隙

align-items的值

含義

flex-start

副軸起始除處

flex-end

副軸末尾處

center

副軸中間

stretch

全部占滿

值

含義

auto

超出長(zhǎng)度時(shí)，可滾動(dòng)

hidden

隱藏

其他

-

值

含義（浮動(dòng)方向/對(duì)齊方向）

left

左

center

中

right

右

值

清除浮動(dòng)

left

左

right

右

both

左右

子屬性

含義

值

background-image

圖片鏈接

url(“路徑”)

background-repeat

是否重復(fù)

repeat/no-repeat

background-position

背景圖的起始位置

background-position-x

離左邊距離

長(zhǎng)度/x%

background-position-y

離上邊距離

長(zhǎng)度/y%

background-color

背景色

顏色

background-size

背景大小

長(zhǎng)度 長(zhǎng)度

background-attachment

是否隨著滾動(dòng)而滾動(dòng)

scroll(默認(rèn))/fixed(不會(huì))/local(會(huì))

數(shù)據(jù)類型

含義

值

Undefined

定義但未賦值

undefined

Null

未定義，由Undefined衍生而來(lái)，值==undef

null

Boolean

布爾類型

true false

Number

數(shù)字，正數(shù)，浮點(diǎn)數(shù)等，
可以用純數(shù)字，科學(xué)計(jì)數(shù)法、進(jìn)制數(shù)等表示

數(shù)字

String

字符串，用單引號(hào)或雙引號(hào)都可

字符串

Object

項(xiàng)目，上面有屬性，如{name:“myname”,age:18}

Array

數(shù)組可以混雜其他類型，如[1,“myname”]

DOM對(duì)象

一個(gè)具體的標(biāo)簽，如window, document,element

可用數(shù)據(jù)類型

數(shù)據(jù)類型相關(guān)函數(shù)

目的類型

含義與用法

Boolean Number

toString()

String

變換成字符串
str=from.toString()
Number的()可以放十進(jìn)制表示的進(jìn)制數(shù)

-

下面兩個(gè) String轉(zhuǎn)Number 的函數(shù)
出現(xiàn)異常則返回前面的正常的值

-

下面的都把源操作數(shù)放()里

String

praseInt()

整數(shù)(Number)

字符串變整數(shù)

String

praseFloat()

浮點(diǎn)數(shù)(Number)

字符串變浮點(diǎn)數(shù)

-

下面的是三種強(qiáng)制類型轉(zhuǎn)換

-

所有

Boolean()

Boolean

空字符串 0 undefined null 值為false，其他的true

所有

Number()

Number

匹配整個(gè)數(shù)，fasle null為0，true為1
undefined為NaN（非數(shù)，not a number）

所有

String()

String

強(qiáng)制類型轉(zhuǎn)換，變成字符串

isNaN

判斷是不是數(shù)

賦值符

含義

=

右邊賦給左邊

–

–

運(yùn)算符

+

加

-

減

*

乘

/

除

%

余

++

自增，放在數(shù)的 前/后 不一樣

? :

三目運(yùn)算符

( )

提高優(yōu)先級(jí)，左括號(hào)，右括號(hào)

-

-

判斷符

>

大于

>=

大于等于

<

小于

<=

小于等于

==

值相等

!=

值不相等

===

值和類型 都相等

!==

值和類型 都不相等

-

-

運(yùn)算賦值符

左邊的值加上右邊的值，再賦值給左邊
a+=b相當(dāng)于a=a+b

+=

-=

*=

\=

%=

語(yǔ)句

使用

定義及賦值

var i=3;也可以單獨(dú)定義/賦值，定義統(tǒng)一用var

選擇(分支)

if-else或switch–case-default-break

循環(huán)

for或while或do-while

跳出

break或continue

返回

return