一、HTML標(biāo)簽

1、實體標(biāo)簽：

  空格、

> 大于號

< 小于號

© 版本號

2、Meta標(biāo)簽：

charset 指定網(wǎng)頁的字符集

name 指定的數(shù)據(jù)的名稱

content 指定的數(shù)據(jù)的內(nèi)容

description 用于指定網(wǎng)站的描述

title標(biāo)簽的內(nèi)容會作為搜索結(jié)果的超鏈接上的文字顯示?

keywords 表示網(wǎng)站的關(guān)鍵字，可以同時指定多個關(guān)鍵字，關(guān)鍵字間使用,隔開。

3、語義標(biāo)簽：

1、標(biāo)題標(biāo)簽

h1 ~ h6 一共有六級標(biāo)題

從h1~h6重要性遞減，h1最重要，h6最不重要

標(biāo)題標(biāo)簽都是塊元素

在頁面中獨占一行的元素稱為塊元素（block element）

hgroup標(biāo)簽用來為標(biāo)題分組，可以將一組相關(guān)的標(biāo)題同時放入到hgroup。

em標(biāo)簽用于表示語音語調(diào)的一個加重。

strong表示強調(diào)，重要內(nèi)容！

blockquote 表示一個長引用，? q表示一個短引用。 ?

2、布局標(biāo)簽：

（1）header 表示網(wǎng)頁的頭部。

（2）main 表示網(wǎng)頁的主體部分(一個頁面中只會有一個main)。

（3）footer 表示網(wǎng)頁的底部。

（4）nav 表示網(wǎng)頁中的導(dǎo)航。

（5）aside 和主體相關(guān)的其他內(nèi)容（側(cè)邊欄）。

（6）article 表示一個獨立的文章。

（7） section 表示一個獨立的區(qū)塊，上邊的標(biāo)簽都不能表示時使用section。

（8）div 沒有語義，就用來表示一個區(qū)塊，目前來講div還是我們主要的布局元素 。

（9）span 行內(nèi)元素，沒有任何的語義，一般用于在網(wǎng)頁中選中文字。

4、塊元素和行內(nèi)元素的區(qū)別：

（1）塊元素（block element）

??????????? - 在網(wǎng)頁中一般通過塊元素來對頁面進(jìn)行布局

???????? 行內(nèi)元素（inline element）

??????????? - 行內(nèi)元素主要用來包裹文字

??????????? （2）- 一般情況下會在塊元素中放行內(nèi)元素，而不會在行內(nèi)元素中放塊元素

??????????? - 塊元素中基本上什么都能放

??????????? - p元素中不能放任何的塊元素

5、列表標(biāo)簽（html列表的三種創(chuàng)建方式）：

??????? ??? 1、有序列表

?????? 2、無序列表

??????? ??? 3、定義列表

（1）有序列表，使用ol標(biāo)簽來創(chuàng)建無序列表

?????? ??????使用li表示列表項?

??????? （2）無序列表，使用ul標(biāo)簽來創(chuàng)建無序列表

??????? ?????使用li表示列表項

（3）定義列表，使用dl標(biāo)簽來創(chuàng)建一個定義列表

?????? ??????使用dt來表示定義的內(nèi)容

??????? ??????? ?使用dd來對內(nèi)容進(jìn)行解釋說明

?? 使用：列表之間可以互相嵌套。

6、超鏈接標(biāo)簽

?? 使用 a 標(biāo)簽來定義超鏈接

????? 屬性：

1、 href 指定跳轉(zhuǎn)的目標(biāo)路徑

???????????? - 值可以是一個外部網(wǎng)站的地址。

???????????? - 也可以寫一個內(nèi)部頁面的地址。

??????????? 2、target屬性，用來指定超鏈接打開的位置

?????????????? 可選值：

???????????????? _self 默認(rèn)值 在當(dāng)前頁面中打開超鏈接。

??????????????? ?_blank 在一個新的要么中打開超鏈接。

??????????? 3、可以使用 javascript:; 來作為href的屬性，此時點擊這個超鏈接什么也不會發(fā)生。

??????????? 4、可以直接將超鏈接的href屬性設(shè)置為#，這樣點擊超鏈接以后，頁面不會發(fā)生跳轉(zhuǎn)。

可以跳轉(zhuǎn)到頁面的指定位置，只需將href屬性設(shè)置 #目標(biāo)元素的id屬性值。id屬性（唯一不重復(fù)的）：

?????? - 每一個標(biāo)簽都可以添加一個id屬性

??????? - id屬性就是元素的唯一標(biāo)識，同一個頁面中不能出現(xiàn)重復(fù)的id屬性 。

7、圖片標(biāo)簽：

使用img標(biāo)簽來引入外部圖片，img標(biāo)簽是一個自結(jié)束標(biāo)簽。

屬性：

（1）src 屬性指定的是外部圖片的路徑（路徑規(guī)則和超鏈接是一樣的）

（2）alt 圖片的描述，這個描述默認(rèn)情況下不會顯示，有些瀏覽器會圖片無法加載時顯示搜索引擎會根據(jù)alt中的內(nèi)容來識別圖片，如果不寫alt屬性則圖片不會被搜索引擎所收錄

（3）width 圖片的寬度 (單位是像素)

（4）height 圖片的高度???

? - 寬度和高度中如果只修改了一個，則另一個會等比例縮放

注意：

（1）一般情況在pc端，不建議修改圖片的大小，需要多大的圖片就裁多大.

（2）但是在移動端，經(jīng)常需要對圖片進(jìn)行縮放（大圖縮小）。

（3）效果一樣，用小的，效果不一樣，用效果好的。

8、內(nèi)聯(lián)框架

內(nèi)聯(lián)框架，用于向當(dāng)前頁面中引入一個其他頁面。

屬性：

???? src 指定要引入的網(wǎng)頁的路徑

???? rameborder 指定內(nèi)聯(lián)框架的邊框

9、音視頻標(biāo)簽

（1）音頻標(biāo)簽

audio 標(biāo)簽用來向頁面中引入一個外部的音頻文件的。音視頻文件引入時，默認(rèn)情況下不允許用戶自己控制播放停止。

屬性： controls 是否允許用戶控制播放

???? ??autoplay 音頻文件是否自動播放， 如果設(shè)置了autoplay 則音樂在打開頁面時會自動播放，但是目前來講大部分瀏覽器都不會自動對音樂進(jìn)行播放 ， loop 音樂是否循環(huán)播放 。

（2）視頻標(biāo)簽：

使用video標(biāo)簽來向網(wǎng)頁中引入一個視頻， 使用方式和audio基本上是一樣的。

二、CSS屬性

1、常用選擇器

（1）元素選擇器

????????? ?作用：根據(jù)標(biāo)簽名來選中指定的元素

????????? ?語法：標(biāo)簽名{}

?????????? 例子：p{}? h1{}? div{}

（2）id選擇器

????????? ?作用：根據(jù)元素的id屬性值選中一個元素

???????? ??語法：#id屬性值{}

?????????? 例子：#box{} #red{}?

（3）類選擇器

???????? ?作用：根據(jù)元素的class屬性值選中一組元素

??????? ??語法：.class屬性值

（4）通配選擇器

????????? 作用：選中頁面中的所有元素

???????? ?語法: *

（5）class標(biāo)簽和id標(biāo)簽的區(qū)別：

class 是一個標(biāo)簽的屬性，它和id類似，不同的是class可以重復(fù)使用，可以通過class屬性來為元素分組，可以同時為一個元素指定多個class屬性。

2、復(fù)合選擇器

（1）交集選擇器

????????? 作用：選中同時復(fù)合多個條件的元素

????????? 語法：選擇器1選擇器2選擇器3選擇器n{}

????????? 注意點：

???????????? 交集選擇器中如果有元素選擇器，必須使用元素選擇器開頭。

（2）選擇器分組（并集選擇器）

??????????????? 作用：同時選擇多個選擇器對應(yīng)的元素

??????????????? 語法：選擇器1,選擇器2,選擇器3,選擇器n{}

3、關(guān)系選擇器

（1）子元素選擇器

??????? 作用：選中指定父元素的指定子元素

??????? 語法：父元素 > 子元素

（2）后代元素選擇器：

??????? 作用：選中指定元素內(nèi)的指定后代元素

??????? 語法：祖先 后代

（3）兄弟選擇器

下一個兄弟：

???????????? 語法：前一個 + 下一個

??????? 選擇下邊所有的兄弟

???????????? 語法：兄 ~ 弟

（4）關(guān)系：

父元素：直接包含子元素的元素叫做父元素。

子元素：直接被父元素包含的元素是子元素。

祖先元素：直接或間接包含后代元素的元素叫做祖先元素，一個元素的父元素也是它的祖先元素。

后代元素：直接或間接被祖先元素包含的元素叫做后代元素，子元素也是后代元素。

兄弟元素：擁有相同父元素的元素是兄弟元素。

4、屬性選擇器

[屬性名] 選擇含有指定屬性的元素。

[屬性名=屬性值] 選擇含有指定屬性和屬性值的元素。

[屬性名^=屬性值] 選擇屬性值以指定值開頭的元素。

[屬性名$=屬性值] 選擇屬性值以指定值結(jié)尾的元素。

[屬性名*=屬性值] 選擇屬性值中含有某值的元素的元素。

5、偽類選擇器

?偽類（不存在的類，特殊的類）

????? - 偽類用來描述一個元素的特殊狀態(tài)

?????? 比如：第一個子元素、被點擊的元素、鼠標(biāo)移入的元素...

????? - 偽類一般情況下都是使用:開頭

屬性：

??????? :first-child 第一個子元素

????? ??:last-child 最后一個子元素

??????? :nth-child() 選中第n個子元素

?????????? ?特殊值：

????????????????? n 第n個 n的范圍0到正無窮

???????????????? ?2n 或 even 表示選中偶數(shù)位的元素

???????????????? ?2n+1 或 odd 表示選中奇數(shù)位的元素

以上這些偽類都是根據(jù)所有的子元素進(jìn)行排序

:first-of-type

:last-of-type

:nth-of-type()

這幾個偽類的功能和上述的類似，不同點是他們是在同類型元素中進(jìn)行排序

:not() 否定偽類

??????????????? - 將符合條件的元素從選擇器中去除。

6、超鏈接偽類（a元素偽類）

:link 用來表示沒訪問過的鏈接（正常的鏈接）。

:visited 用來表示訪問過的鏈接，由于隱私的原因所以visited這個偽類只能修改鏈接的顏色。

:hover 用來表示鼠標(biāo)移入的狀態(tài)。

:active 用來表示鼠標(biāo)點擊。

7、偽元素選擇器

偽元素，表示頁面中一些特殊的并不真實的存在的元素（特殊的位置）

偽元素使用 :: 開頭

?????? ::first-letter 表示第一個字母

????? ?::first-line 表示第一行

?????? ::selection 表示選中的內(nèi)容

???? ??::before 元素的開始

?????? ::after 元素的最后

???????????? before 和 after 必須結(jié)合content屬性來使用

8、樣式的繼承

樣式的繼承，我們?yōu)橐粋€元素設(shè)置的樣式同時也會應(yīng)用到它的后代元素上，繼承是發(fā)生在祖先后后代之間的。

繼承的設(shè)計是為了方便我們的開發(fā)，，利用繼承我們可以將一些通用的樣式統(tǒng)一設(shè)置到共同的祖先元素上，這樣只需設(shè)置一次即可讓所有的元素都具有該樣式

注意：并不是所有的樣式都會被繼承：

比如 背景相關(guān)的，布局相關(guān)等的這些樣式都不會被繼承。

9、選擇器的權(quán)重

??? 選擇器的權(quán)重

??????????????? 內(nèi)聯(lián)樣式??????? 1,0,0,0

??????????????? id選擇器??????? 0,1,0,0

??????????????? 類和偽類選擇器?? 0,0,1,0

??????????????? 元素選擇器?????? 0,0,0,1

??????????????? 通配選擇器?????? 0,0,0,0

??????????????? 繼承的樣式?????? 沒有優(yōu)先級

??????????? 比較優(yōu)先級時，需要將所有的選擇器的優(yōu)先級進(jìn)行相加計算，最后優(yōu)先級越高，則越優(yōu)先顯示（分組選擇器是單獨計算的）,

??????????????? 選擇器的累加不會超過其最大的數(shù)量級，類選擇器在高也不會超過id選擇器

??????????????? 如果優(yōu)先級計算后相同，此時則優(yōu)先使用靠下的樣式

??????????? 可以在某一個樣式的后邊添加 !important ，則此時該樣式會獲取到最高的優(yōu)先級，甚至超過內(nèi)聯(lián)樣式，

??????????????? 注意：在開發(fā)中這個玩意一定要慎用！

三、盒子模型

1、文檔流

? 文檔流（normal flow）

????????????? 我們所創(chuàng)建的元素默認(rèn)都是在文檔流中進(jìn)行排列

??????????? - 對于我們來元素主要有兩個狀態(tài)

??????????????? 在文檔流中

??????????????? 不在文檔流中（脫離文檔流）

??????????? - 元素在文檔流中有什么特點：

??????????????? - 塊元素

??????????????????? - 塊元素會在頁面中獨占一行(自上向下垂直排列)

??????????????????? - 默認(rèn)寬度是父元素的全部（會把父元素?fù)螡M）

??????????????????? - 默認(rèn)高度是被內(nèi)容撐開（子元素）

??????????????? - 行內(nèi)元素

??????????????????? - 行內(nèi)元素不會獨占頁面的一行，只占自身的大小

??????????????????? - 行內(nèi)元素在頁面中左向右水平排列，如果一行之中不能容納下所有的行內(nèi)元素

??????????????????????? 則元素會換到第二行繼續(xù)自左向右排列（書寫習(xí)慣一致）

??????????????????? - 行內(nèi)元素的默認(rèn)寬度和高度都是被內(nèi)容撐開

2、盒子模型

（1）內(nèi)容區(qū)（content）

元素中的所有的子元素和文本內(nèi)容都在內(nèi)容區(qū)中排列 。

???????? 內(nèi)容區(qū)的大小由width 和 height兩個屬性來設(shè)置，width 設(shè)置內(nèi)容區(qū)的寬度，height 設(shè)置內(nèi)容區(qū)的高度。

（2）邊框

邊框（border），邊框?qū)儆诤凶舆吘?#xff0c;邊框里邊屬于盒子內(nèi)部，出了邊框都是盒子的外部，邊框的大小會影響到整個盒子的大小，要設(shè)置邊框，需要至少設(shè)置三個樣式：

邊框的寬度 border-width，邊框的顏色 border-color，邊框的樣式 border-style

（3）盒模型、盒子模型、框模型（box model）

CSS將頁面中的所有元素都設(shè)置為了一個矩形的盒子， 將元素設(shè)置為矩形的盒子后，對頁面的布局就變成將不同的盒子擺放到不同的位置，每一個盒子都由一下幾個部分組成：

內(nèi)容區(qū)（content）， 內(nèi)邊距（padding），邊框（border），外邊距（margin）

3、盒子模型-邊框

（1）邊框

邊框的寬度 border-width，邊框的顏色 border-color，邊框的樣式 border-style

border-width可以用來指定四個方向的邊框的寬度

??????????????????????? 四個值：上 右 下 左

??????????????????????? 三個值：上 左右 下

??????????????????????? 兩個值：上下 左右

??????????????????????? 一個值：上下左右

除了border-width還有一組 border-xxx-width， xxx可以是 top right bottom left， 用來單獨指定某一個邊的寬度。

（2） 邊框的顏色

?border-color用來指定邊框的顏色，同樣可以分別指定四個邊的邊框， 規(guī)則和border-width一樣，? border-color也可以省略不寫，如果省略了則自動使用color的顏色值。

（3）邊框樣式

border-style 指定邊框的樣式：solid 表示實線，dotted 點狀虛線，dashed 虛線，double 雙線， border-style的默認(rèn)值是none 表示沒有邊框。

border簡寫屬性，通過該屬性可以同時設(shè)置邊框所有的相關(guān)樣式，并且沒有順序要求

除了border以外還有四個 border-xxx， border-top，border-right，border-bottom，border-left。

4、盒子模型-內(nèi)邊距

內(nèi)邊距（padding）：內(nèi)容區(qū)和邊框之間的距離是內(nèi)邊距

一共有四個方向的內(nèi)邊距： padding-top， padding-right，padding-bottom，padding-left

， - 內(nèi)邊距的設(shè)置會影響到盒子的大小， 背景顏色會延伸到內(nèi)邊距上

，一共盒子的可見框的大小，由內(nèi)容區(qū) 內(nèi)邊距 和 邊框共同決定，所以在計算盒子大小時，需要將這三個區(qū)域加到一起計算。

padding 內(nèi)邊距的簡寫屬性，可以同時指定四個方向的內(nèi)邊距，規(guī)則和border-width 一樣

5、盒子模型-外邊距

外邊距（margin）： 外邊距不會影響盒子可見框的大小， 但是外邊距會影響盒子的位置

一共有四個方向的外邊距：

margin-top：上外邊距，設(shè)置一個正值，元素會向下移動。

margin-right：默認(rèn)情況下設(shè)置margin-right不會產(chǎn)生任何效果。

margin-bottom：下外邊距，設(shè)置一個正值，其下邊的元素會向下移動。

margin-left：左外邊距，設(shè)置一個正值，元素會向右移動。

margin也可以設(shè)置負(fù)值，如果是負(fù)值則元素會向相反的方向移動。

元素在頁面中是按照自左向右的順序排列的，所以默認(rèn)情況下如果我們設(shè)置的左和上外邊距則會移動元素自身，而設(shè)置下和右外邊距會移動其他元素。

margin的簡寫屬性，margin 可以同時設(shè)置四個方向的外邊距 ，用法和padding一樣。

margin會影響到盒子實際占用空間。

6、水平布局

元素的水平方向的布局： 元素在其父元素中水平方向的位置由以下幾個屬性共同決定“

margin-left， border-left，padding-left，width，padding-right， border-right，margin-right

，一個元素在其父元素中，水平布局必須要滿足以下的等式

margin-left+border-left+padding-left+width+padding-right+border-right+margin-right = 其父元素內(nèi)容區(qū)的寬度 （必須滿足）。

7、垂直布局

子元素是在父元素的內(nèi)容區(qū)中排列的，如果子元素的大小超過了父元素，則子元素會從父元素中溢出，使用 overflow 屬性來設(shè)置父元素如何處理溢出的子元素

可選值：

????? visible，默認(rèn)值 子元素會從父元素中溢出，在父元素外部的位置顯示

????? hidden 溢出內(nèi)容將會被裁剪不會顯示

????? scroll 生成兩個滾動條，通過滾動條來查看完整的內(nèi)容

????? auto 根據(jù)需要生成滾動條

8、外邊距的折疊

垂直外邊距的重疊（折疊）：相鄰的垂直方向外邊距會發(fā)生重疊現(xiàn)象

兄弟元素：兄弟元素間的相鄰垂直外邊距會取兩者之間的較大值（兩者都是正值）

特殊情況：如果相鄰的外邊距一正一負(fù)，則取兩者的和， 如果相鄰的外邊距都是負(fù)值，則取兩者中絕對值較大的

兄弟元素之間的外邊距的重疊，對于開發(fā)是有利的，所以我們不需要進(jìn)行處理

父子元素：父子元素間相鄰?fù)膺吘?#xff0c;子元素的會傳遞給父元素（上外邊距），父子外邊距的折疊會影響到頁面的布局，必須要進(jìn)行處理。

9、行內(nèi)元素的盒模型

（1）行內(nèi)元素不支持設(shè)置寬度和高度。

（2）行內(nèi)元素可以設(shè)置padding，但是垂直方向padding不會影響頁面的布局。

（3）行內(nèi)元素可以設(shè)置border，垂直方向的border不會影響頁面的布局。

（4）行內(nèi)元素可以設(shè)置margin，垂直方向的margin不會影響布局。

（5）display 用來設(shè)置元素顯示的類型

? 可選值： inline 將元素設(shè)置為行內(nèi)元素， block 將元素設(shè)置為塊元素， inline-block 將元素設(shè)置為行內(nèi)塊元素

（6）行內(nèi)塊，既可以設(shè)置寬度和高度又不會獨占一行， table 將元素設(shè)置為一個表格， none 元素不在頁面中顯示，

（7）visibility 用來設(shè)置元素的顯示狀態(tài)，可選值：

visible 默認(rèn)值，元素在頁面中正常顯示

hidden 元素在頁面中隱藏 不顯示，但是依然占據(jù)頁面的位置。

10、默認(rèn)樣式

（1） 重置樣式表

專門用來對瀏覽器的樣式進(jìn)行重置的，reset.css 直接去除了瀏覽器的默認(rèn)樣式， normalize.css 對默認(rèn)樣式進(jìn)行了統(tǒng)一。

（2）默認(rèn)樣式

通常情況，瀏覽器都會為元素設(shè)置一些默認(rèn)樣式

默認(rèn)樣式的存在會影響到頁面的布局，? 通常情況下編寫網(wǎng)頁時必須要去除瀏覽器的默認(rèn)樣式（PC端的頁面）。

11、盒子尺寸

默認(rèn)情況下，盒子可見框的大小由內(nèi)容區(qū)、內(nèi)邊距和邊框共同決定

box-sizing 用來設(shè)置盒子尺寸的計算方式（設(shè)置width和height的作用），可選值：?

content-box 默認(rèn)值，寬度和高度用來設(shè)置內(nèi)容區(qū)的大小。

border-box 寬度和高度用來設(shè)置整個盒子可見框的大小。

width 和 height 指的是內(nèi)容區(qū) 和 內(nèi)邊距 和 邊框的總大小。

12、輪廓和圓角

（1）box-shadow

box-shadow 用來設(shè)置元素的陰影效果，陰影不會影響頁面布局 。

第一個值 水平偏移量 設(shè)置陰影的水平位置 正值向右移動 負(fù)值向左移動。

第二個值 垂直偏移量 設(shè)置陰影的水平位置 正值向下移動 負(fù)值向上移動。

第三個值 陰影的模糊半徑。

第四個值 陰影的顏色。

（2）outline

outline 用來設(shè)置元素的輪廓線，用法和border一模一樣

輪廓和邊框不同的點，就是輪廓不會影響到可見框的大小 。

border-radius: 用來設(shè)置圓角 圓角設(shè)置的圓的半徑大小

border-top-left-radius:? 左上

border-top-right-radius ： 右上

border-bottom-left-radius:? 左下

border-bottom-right-radius:? 右下

border-radius 可以分別指定四個角的圓角

???? 四個值 左上 右上 右下 左下

???? 三個值 左上 右上/左下 右下

???? 兩個值 左上/右下 右上/左下?

將元素設(shè)置為一個圓形??? border-radius: 50%;

總結(jié)

以上是生活随笔為你收集整理的html标签和css参数的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。