一、HTML標簽

1、實體標簽：

  空格、

> 大于號

< 小于號

© 版本號

2、Meta標簽：

charset 指定網頁的字符集

name 指定的數據的名稱

content 指定的數據的內容

description 用于指定網站的描述

title標簽的內容會作為搜索結果的超鏈接上的文字顯示?

keywords 表示網站的關鍵字，可以同時指定多個關鍵字，關鍵字間使用,隔開。

3、語義標簽：

1、標題標簽

h1 ~ h6 一共有六級標題

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

標題標簽都是塊元素

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

hgroup標簽用來為標題分組，可以將一組相關的標題同時放入到hgroup。

em標簽用于表示語音語調的一個加重。

strong表示強調，重要內容！

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

2、布局標簽：

（1）header 表示網頁的頭部。

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

（3）footer 表示網頁的底部。

（4）nav 表示網頁中的導航。

（5）aside 和主體相關的其他內容（側邊欄）。

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

（7） section 表示一個獨立的區塊，上邊的標簽都不能表示時使用section。

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

（9）span 行內元素，沒有任何的語義，一般用于在網頁中選中文字。

4、塊元素和行內元素的區別：

（1）塊元素（block element）

??????????? - 在網頁中一般通過塊元素來對頁面進行布局

???????? 行內元素（inline element）

??????????? - 行內元素主要用來包裹文字

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

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

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

5、列表標簽（html列表的三種創建方式）：

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

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

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

（1）有序列表，使用ol標簽來創建無序列表

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

??????? （2）無序列表，使用ul標簽來創建無序列表

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

（3）定義列表，使用dl標簽來創建一個定義列表

?????? ??????使用dt來表示定義的內容

??????? ??????? ?使用dd來對內容進行解釋說明

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

6、超鏈接標簽

?? 使用 a 標簽來定義超鏈接

????? 屬性：

1、 href 指定跳轉的目標路徑

???????????? - 值可以是一個外部網站的地址。

???????????? - 也可以寫一個內部頁面的地址。

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

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

???????????????? _self 默認值 在當前頁面中打開超鏈接。

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

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

??????????? 4、可以直接將超鏈接的href屬性設置為#，這樣點擊超鏈接以后，頁面不會發生跳轉。

可以跳轉到頁面的指定位置，只需將href屬性設置 #目標元素的id屬性值。id屬性（唯一不重復的）：

?????? - 每一個標簽都可以添加一個id屬性

??????? - id屬性就是元素的唯一標識，同一個頁面中不能出現重復的id屬性 。

7、圖片標簽：

使用img標簽來引入外部圖片，img標簽是一個自結束標簽。

屬性：

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

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

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

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

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

注意：

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

（2）但是在移動端，經常需要對圖片進行縮放（大圖縮小）。

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

8、內聯框架

內聯框架，用于向當前頁面中引入一個其他頁面。

屬性：

???? src 指定要引入的網頁的路徑

???? rameborder 指定內聯框架的邊框

9、音視頻標簽

（1）音頻標簽

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

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

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

（2）視頻標簽：

使用video標簽來向網頁中引入一個視頻， 使用方式和audio基本上是一樣的。

二、CSS屬性

1、常用選擇器

（1）元素選擇器

????????? ?作用：根據標簽名來選中指定的元素

????????? ?語法：標簽名{}

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

（2）id選擇器

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

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

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

（3）類選擇器

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

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

（4）通配選擇器

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

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

（5）class標簽和id標簽的區別：

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

2、復合選擇器

（1）交集選擇器

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

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

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

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

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

??????????????? 作用：同時選擇多個選擇器對應的元素

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

3、關系選擇器

（1）子元素選擇器

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

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

（2）后代元素選擇器：

??????? 作用：選中指定元素內的指定后代元素

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

（3）兄弟選擇器

下一個兄弟：

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

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

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

（4）關系：

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

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

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

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

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

4、屬性選擇器

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

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

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

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

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

5、偽類選擇器

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

????? - 偽類用來描述一個元素的特殊狀態

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

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

屬性：

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

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

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

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

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

???????????????? ?2n 或 even 表示選中偶數位的元素

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

以上這些偽類都是根據所有的子元素進行排序

:first-of-type

:last-of-type

:nth-of-type()

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

:not() 否定偽類

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

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

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

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

:hover 用來表示鼠標移入的狀態。

:active 用來表示鼠標點擊。

7、偽元素選擇器

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

偽元素使用 :: 開頭

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

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

?????? ::selection 表示選中的內容

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

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

???????????? before 和 after 必須結合content屬性來使用

8、樣式的繼承

樣式的繼承，我們為一個元素設置的樣式同時也會應用到它的后代元素上，繼承是發生在祖先后后代之間的。

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

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

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

9、選擇器的權重

??? 選擇器的權重

??????????????? 內聯樣式??????? 1,0,0,0

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

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

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

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

??????????????? 繼承的樣式?????? 沒有優先級

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

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

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

??????????? 可以在某一個樣式的后邊添加 !important ，則此時該樣式會獲取到最高的優先級，甚至超過內聯樣式，

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

三、盒子模型

1、文檔流

? 文檔流（normal flow）

????????????? 我們所創建的元素默認都是在文檔流中進行排列

??????????? - 對于我們來元素主要有兩個狀態

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

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

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

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

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

??????????????????? - 默認寬度是父元素的全部（會把父元素撐滿）

??????????????????? - 默認高度是被內容撐開（子元素）

??????????????? - 行內元素

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

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

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

??????????????????? - 行內元素的默認寬度和高度都是被內容撐開

2、盒子模型

（1）內容區（content）

元素中的所有的子元素和文本內容都在內容區中排列 。

???????? 內容區的大小由width 和 height兩個屬性來設置，width 設置內容區的寬度，height 設置內容區的高度。

（2）邊框

邊框（border），邊框屬于盒子邊緣，邊框里邊屬于盒子內部，出了邊框都是盒子的外部，邊框的大小會影響到整個盒子的大小，要設置邊框，需要至少設置三個樣式：

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

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

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

內容區（content）， 內邊距（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用來指定邊框的顏色，同樣可以分別指定四個邊的邊框， 規則和border-width一樣，? border-color也可以省略不寫，如果省略了則自動使用color的顏色值。

（3）邊框樣式

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

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

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

4、盒子模型-內邊距

內邊距（padding）：內容區和邊框之間的距離是內邊距

一共有四個方向的內邊距： padding-top， padding-right，padding-bottom，padding-left

， - 內邊距的設置會影響到盒子的大小， 背景顏色會延伸到內邊距上

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

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

5、盒子模型-外邊距

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

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

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

margin-right：默認情況下設置margin-right不會產生任何效果。

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

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

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

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

margin的簡寫屬性，margin 可以同時設置四個方向的外邊距 ，用法和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 = 其父元素內容區的寬度 （必須滿足）。

7、垂直布局

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

可選值：

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

????? hidden 溢出內容將會被裁剪不會顯示

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

????? auto 根據需要生成滾動條

8、外邊距的折疊

垂直外邊距的重疊（折疊）：相鄰的垂直方向外邊距會發生重疊現象

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

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

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

父子元素：父子元素間相鄰外邊距，子元素的會傳遞給父元素（上外邊距），父子外邊距的折疊會影響到頁面的布局，必須要進行處理。

9、行內元素的盒模型

（1）行內元素不支持設置寬度和高度。

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

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

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

（5）display 用來設置元素顯示的類型

? 可選值： inline 將元素設置為行內元素， block 將元素設置為塊元素， inline-block 將元素設置為行內塊元素

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

（7）visibility 用來設置元素的顯示狀態，可選值：

visible 默認值，元素在頁面中正常顯示

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

10、默認樣式

（1） 重置樣式表

專門用來對瀏覽器的樣式進行重置的，reset.css 直接去除了瀏覽器的默認樣式， normalize.css 對默認樣式進行了統一。

（2）默認樣式

通常情況，瀏覽器都會為元素設置一些默認樣式

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

11、盒子尺寸

默認情況下，盒子可見框的大小由內容區、內邊距和邊框共同決定

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

content-box 默認值，寬度和高度用來設置內容區的大小。

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

width 和 height 指的是內容區 和 內邊距 和 邊框的總大小。

12、輪廓和圓角

（1）box-shadow

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

第一個值 水平偏移量 設置陰影的水平位置 正值向右移動 負值向左移動。

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

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

第四個值 陰影的顏色。

（2）outline

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

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

border-radius: 用來設置圓角 圓角設置的圓的半徑大小

border-top-left-radius:? 左上

border-top-right-radius ： 右上

border-bottom-left-radius:? 左下

border-bottom-right-radius:? 右下

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

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

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

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

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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。