HTML、CSS基礎知識

時間 2019-11-13

標籤 html css 基礎知識欄目 HTML 简体版

原文原文鏈接

前端基礎css

1. CSS 8html

1.1. CSS叫作層疊樣式表，用來設置頁面中元素的樣式。背景顏色、字體顏色、字體大小。。。 8前端

1.2. CSS負責結構、表現、行爲中的表現 8瀏覽器

1.3. 編寫的位置 8安全

1.3.1. 1.內聯樣式 8服務器

1.3.2. 2.內部樣式表 8架構

1.3.3. 3.外部樣式表 8框架

1.4. 基本語法 9佈局

1.4.1. 選擇器 9性能

1.4.2. 聲明塊 11

1.5. 元素之間的關係 12

1.5.1. 父元素 12

1.5.2. 子元素 12

1.5.3. 祖先元素 12

1.5.4. 後代元素 12

1.5.5. 兄弟元素 12

1.6. 塊元素和內聯元素 12

1.6.1. 塊元素 12

1.6.2. 內聯元素 13

1.6.3. 包裹規則 13

1.7. 僞類和僞元素 13

1.7.1. 僞類和僞元素用來表示元素所處的一個特殊的狀態，或者是一個特殊的位置 14

1.7.2. :link 14

1.7.3. :visited 14

1.7.4. :hover 14

1.7.5. :active 14

1.7.6. :focus 14

1.7.7. ::selection 14

1.7.8. :first-letter 14

1.7.9. :first-line 14

1.7.10. :before 14

1.7.11. :after 15

1.8. 屬性選擇器 15

1.8.1. 根據元素的屬性選擇指定元素 15

1.8.2. [屬性名] 15

1.8.3. [屬性名="屬性值"] 15

1.8.4. [屬性名^="屬性值"] 15

1.8.5. [屬性名$="屬性值"] 15

1.8.6. [屬性名*="屬性值"] 15

1.9. 兄弟元素選擇器 15

1.9.1. 選取後一個兄弟元素 15

1.9.2. 選取後邊全部的兄弟元素 16

1.10. 子元素的僞類 16

1.10.1. :first-child 16

1.10.2. :last-child 16

1.10.3. :nth-child 16

1.10.4. :first-of-type 16

1.10.5. :last-of-type 16

1.10.6. :nth-of-type 16

1.11. 否認僞類 17

1.11.1. 從一組元素中將符合要求的元素剔除出去 17

1.11.2. 語法： 17

1.11.3. 例子： 17

1.12. 樣式的繼承 17

1.12.1. 爲祖先元素設置樣式，會同時應用到它的後代元素上，這一特性稱爲樣式的繼承。 17

1.12.2. 經過樣式的繼承能夠將一些樣式統一設置個祖先元素，這樣全部的後代都會應用到相同的樣式。 17

1.12.3. 可是並非全部的樣式都會繼承，好比：背景相關的，邊框相關的，定位相關的。具體參考文檔 17

1.13. 選擇器的優先級 17

1.13.1. 當使用選擇器爲元素設置樣式時，若是樣式發生了衝突，採用哪一個樣式由選擇器的優先級來決定。 17

1.13.2. 優先級 17

1.13.3. 當樣式發生衝突時，須要將相關的選擇器優先級進行求和計算，優先級高的優先顯示，若是優先級同樣，則顯示靠後的樣式 18

1.13.4. 優先級計算時，總大小不能超過他的最大的數量級 18

1.13.5. 能夠在樣式後邊添加一個!important，若是樣式中添加了該內容，則該樣式將會獲取最大的優先級，將會優先於全部的樣式顯示，包括內聯樣式，可是這個屬性要慎用。 18

1.14. 選擇器的性能 18

1.14.1. 瀏覽器在解析一組選擇器時，是從後邊往前一個一個的解析的 18

1.14.2. 若是選擇器編寫過於長的話，瀏覽器解析起來性能會比較差，因此在編寫選擇器時，越短越好。 18

1.14.3. *通配選擇器，性能也比較差，要避免使用通配選擇器 18

1.15. 單位 19

1.15.1. 長度單位 19

1.15.2. 顏色單位 19

1.15.3. 文本樣式 21

1.16. 背景 23

1.16.1. background-color 23

1.16.2. background-image 23

1.16.3. background-repeat 23

1.16.4. background-position 24

1.16.5. background-attachment 25

1.16.6. background 26

1.16.7. opacity 26

2. HTML 26

2.1. 網頁的結構 27

2.1.1. 一個網頁有三個部分組成 27

2.1.2. 一個設計優良的網頁要求結構、表現、行爲三者分離 27

2.1.3. 在開發中老是要面臨一個問題，就是程序之間的耦合，三者分離就是爲了解耦合 27

2.2. HTML，超文本標記語言 27

2.3. 負責頁面中的結構，定義出頁面中的各個組成部分 27

2.4. HTML是採用純文本的形式的編寫，採用HTML標籤來標識出頁面中的不一樣部分 27

2.5. 標籤 27

2.5.1. 成對出現 27

2.5.2. 自結束標籤 28

2.6. 屬性 28

2.6.1. 經過屬性能夠設置標籤的效果 28

2.6.2. 屬性須要定義在開始標籤中或這自結束標籤中 28

2.6.3. 屬性其實是一組一組名值對結構 28

2.6.4. 例子： 28

2.7. HTML頁面的基本結構 28

2.8. 文檔聲明 28

2.8.1. <!doctype html> 28

2.8.2. 用來標識當前頁面的html的版本 28

2.8.3. 該聲明用來告訴瀏覽器，當前的頁面是使用HTML5的標準編寫的 29

2.9. 經常使用標籤 29

2.9.1. <html> 29

2.9.2. <head> 29

2.9.3. <body> 30

2.9.4. <h1> ~ <h6> 30

2.9.5. <p> 30

2.9.6. <br /> 30

2.9.7. <hr /> 31

2.9.8. 內聯框架 31

2.9.9. 超連接 31

2.10. 註釋 32

2.10.1. 語法 32

2.10.2. 註釋中的內容不會在頁面中顯示，可是會在源碼中顯示，咱們能夠經過註釋來講明網頁的代碼 33

2.10.3. 也能夠經過註釋隱藏一些頁面中不想顯示的內容 33

2.11. 實體 33

2.11.1. 在HTML頁面中一些特殊符號是不能直接使用，須要使用實體來代替這些特殊符號 33

2.11.2. 實體也能夠稱爲轉義字符 33

2.11.3. 實體的語法 33

2.11.4. 經常使用的實體 33

2.12. 圖片標籤 33

2.12.1. <img /> 33

2.12.2. 使用圖片標籤能夠向頁面中引入一個外部圖片 34

2.12.3. 屬性 34

2.12.4. 圖片的格式 34

2.13. 相對路徑 35

2.13.1. 相對於當前資源所在的目錄的路徑 35

2.13.2. 可使用../返回一級目錄，返回幾級使用幾個../ 35

2.14. xHtml語法規範 35

2.14.1. 1.HTML中不區分大小寫，可是儘可能使用小寫 35

2.14.2. 2.HTML的註釋不能嵌套 35

2.14.3. 3.標籤必須結構完整 35

2.14.4. 4.標籤能夠嵌套可是不能交叉嵌套 35

2.14.5. 5.屬性必須有值，且值必須加引號，單引號雙引號均可以 35

2.15. 文本標籤 35

2.15.1. <em> 35

2.15.2. <strong> 35

2.15.3. <i> 36

2.15.4. <b> 36

2.15.5. <small> 36

2.15.6. <cite> 36

2.15.7. <q> 36

2.15.8. <blockquote> 36

2.15.9. <sup> 36

2.15.10. <sub> 36

2.15.11. <del> 36

2.15.12. <ins> 36

2.15.13. <pre> 37

2.15.14. <code> 37

2.16. 列表 37

2.16.1. 無序列表 37

2.16.2. 有序列表 37

2.16.3. 定義列表 38

2.16.4. 列表相關的元素都是塊元素，他們之間能夠互相嵌套 38

2.16.5. 去除項目符號 38

3. 佈局 38

3.1. 浮動 38

3.1.1. 使用float來設置元素浮動 38

3.1.2. 可選值 38

3.1.3. 特色 38

3.1.4. 浮動之後元素的特色 39

3.1.5. 高度塌陷 39

3.2. 定位 42

3.2.1. 經過定位能夠將頁面中的元素，擺放到頁面的任意位置 42

3.2.2. 使用position來設置元素的定位 42

3.2.3. 可選值 42

3.2.4. 相對定位 42

3.2.5. 絕對定位 43

3.2.6. 固定定位 43

3.2.7. 層級 43

3.2.8. 偏移量 43

4. 課程簡介 44

4.1. 軟件的架構 44

4.1.1. C/S，客戶端/服務器 44

4.1.2. B/S，瀏覽器/服務器 45

4.2. 進制 45

4.2.1. 幾進制就是滿幾進一 45

4.2.2. 二進制 45

4.2.3. 十進制 46

4.2.4. 十六進制 46

4.2.5. 八進制 46

4.3. 亂碼的問題 46

4.3.1. 亂碼出現的緣由 46

5. 盒子模型 48

5.1. CSS中將每個元素都設置爲了一個矩形的盒子 48

5.2. 將全部的元素都設置爲盒子，是爲了方便頁面的佈局 48

5.3. 當這些元素都是盒子之後，咱們的佈局就變成了在頁面中擺放盒子 48

5.4. 盒子模型 48

5.5. 每一個盒子都由以下幾部分構成 48

5.5.1. 內容區 48

5.5.2. 內邊距 49

5.5.3. 邊框 49

5.5.4. 外邊距 52

5.6. 內聯元素的盒子模型 53

5.6.1. width 53

5.6.2. height 53

5.6.3. padding 53

5.6.4. border 53

5.6.5. margin 53

不支持(width, height) 53

5.7. 盒模型相關的樣式 54

5.7.1. display 54

5.7.2. visibility 54

5.7.3. overflow 55

5.8. 文檔流 55

5.8.1. 文檔流指的是網頁中的一個位置 55

5.8.2. 文檔流是網頁的基礎，是網頁的最底層，全部的元素默認都是在文檔流中排列 55

5.8.3. 元素在文檔流中默認自左向右，自上向下排列（和咱們的書寫習慣一致） 56

5.8.4. 塊元素 56

5.8.5. 內聯元素 56

1. CSS

1.1. CSS叫作層疊樣式表，用來設置頁面中元素的樣式。背景顏色、字體顏色、字體大小。。。

1.2. CSS負責結構、表現、行爲中的表現

1.3. 編寫的位置

1.3.1. 1.內聯樣式

將樣式編寫到標籤的style屬性中

<p style="color:red;"></p>

這種樣式只會對當前標籤起做用，不能對樣式進行復用，不方便後期維護，不推薦使用

1.3.2. 2.內部樣式表

將樣式表編寫到head中的style標籤中

<style type="text/css"></style>

color:red;

}

</style>

使用內部樣式表，進一步將表現和結構分離，能夠同時爲多個元素設置樣式，方便後期的維護

1.3.3. 3.外部樣式表

將樣式表編寫到外部的CSS文件中，而後經過link標籤將外部文件引入

<link rel="stylesheet" type="text/css" href="文件的路徑"/>

將樣式編寫到外部樣式表中，能夠在不一樣的頁面中使用同一個樣式表，徹底將表現和結構分離，方便後期的維護，推薦使用的方式

1.4. 基本語法

1.4.1. 選擇器

經過選擇器能夠選中頁面中的一組元素，而後爲其設置樣式

元素選擇器

根據標籤名，選中頁面中的指定元素

語法：標籤名{ }

例子：

div{}

p{}

h1{}

id選擇器

根據元素的id屬性值選中一個惟一的元素

語法：#id {}

例子：

#box1{}

#hello{}

類選擇器

根據元素的class屬性值，選中一組元素

語法：.class{}

例子：

.hello{}

.box{}

通配選擇器

選中頁面中的全部元素

語法：*{}

通配選擇器的性能比較差，儘可能避免使用

並集選擇器

能夠同時選中符合多個選擇器的元素

語法：選擇器1,選擇器2,選擇器N{}

例子：

div,p,#box,.hello{}

交集選擇器

能夠選中知足多個條件的元素

語法：選擇器1選擇器2選擇器N{}

例子：p.hello{}

後代元素選擇器

選中指定元素的指定後代元素

語法：祖先元素後代元素{}

例子：

div span {}

div p{}

子元素選擇器

選中指定元素的指定子元素

語法：父元素 > 子元素 {}

例子：

div > span {}

div > p{}

1.4.2. 聲明塊

聲明塊中實際上就是一個一個CSS聲明

聲明

每個CSS聲明都是一個樣式，實際上就是一個名值對的結構

名和值之間使用:連接

:左邊是樣式的名字

:右邊是樣式的值

每個聲明以;結尾

例子

color:red;

font-size:20px;

1.5. 元素之間的關係

1.5.1. 父元素

直接包含子元素的的元素叫作父元素

1.5.2. 子元素

直接被父元素包含的元素叫作子元素

1.5.3. 祖先元素

直接或間接包含後代元素的元素叫作祖先元素，父元素也是祖先元素

1.5.4. 後代元素

直接或間接被祖先元素包含的元素叫後代元素，子元素也是後代元素

1.5.5. 兄弟元素

擁有相同父元素的元素叫作兄弟元素

1.6. 塊元素和內聯元素

1.6.1. 塊元素

塊元素會獨佔頁面中的一行，不管他的內容的多少

通常使用塊元素對頁面進行佈局

常見的塊元素

div

p

h1~h6

1.6.2. 內聯元素

內聯元素只佔用自身的大小，不會獨佔一行

內聯元素也叫行內元素（inline）

通常內聯元素都是用來爲文原本設置效果

常見的內聯

span

a

img

1.6.3. 包裹規則

通常都是使用塊元素去包裹內聯元素，而不會使用內聯去包裹塊元素

a元素能夠包含任意元素，除了a自己

p元素不能包含任何塊元素

1.7. 僞類和僞元素

1.7.1. 僞類和僞元素用來表示元素所處的一個特殊的狀態，或者是一個特殊的位置

1.7.2. :link

表示一個普通的連接（未訪問過的連接）

1.7.3. :visited

表示訪問過的連接

1.7.4. :hover

鼠標移入的連接，也能夠爲其餘元素設置hover

1.7.5. :active

正在被點擊的連接，也能夠爲其餘元素設置active

1.7.6. :focus

表示元素獲取焦點的狀態，通常用於文本框

1.7.7. ::selection

表示內容被選中的狀態

在火狐中使用::-moz-selection來代替

1.7.8. :first-letter

表示第一個字符

1.7.9. :first-line

表示文字的第一行

1.7.10. :before

選中元素的最前邊

通常該僞類都會結合content一塊兒使用，經過content能夠向指定位置添加內容

1.7.11. :after

選中元素的最後邊

通常該僞類都會結合content一塊兒使用，經過content能夠向指定位置添加內容

1.8. 屬性選擇器

1.8.1. 根據元素的屬性選擇指定元素

1.8.2. [屬性名]

選取含有指定屬性的元素

1.8.3. [屬性名="屬性值"]

選取屬性值等於指定值的元素

1.8.4. [屬性名^="屬性值"]

選取屬性值以指定內容開頭的元素

1.8.5. [屬性名$="屬性值"]

選取屬性值以指定內容結尾的元素

1.8.6. [屬性名*="屬性值"]

選取屬性值中包含指定內容的元素

1.9. 兄弟元素選擇器

1.9.1. 選取後一個兄弟元素

前一個 + 後一個

1.9.2. 選取後邊全部的兄弟元素

前一個 ~ 後邊全部

1.10. 子元素的僞類

1.10.1. :first-child

尋找父元素的第一個子元素，在全部的子元素中排序

1.10.2. :last-child

尋找父元素的最後一個子元素，在全部的子元素中排序

1.10.3. :nth-child

尋找父元素中的指定位置子元素，在全部的子元素中排序

例子

p:nth-child(3)

可使用even，來找到偶數的子元素

可使用odd，來找到奇數的子元素

1.10.4. :first-of-type

尋找指定類型中的第一個子元素

1.10.5. :last-of-type

尋找指定類型中的最後一個子元素

1.10.6. :nth-of-type

尋找指定類型中的指定子元素

1.11. 否認僞類

1.11.1. 從一組元素中將符合要求的元素剔除出去

1.11.2. 語法：

:not(選擇器)

1.11.3. 例子：

.abc:not(div)

1.12. 樣式的繼承

1.12.1. 爲祖先元素設置樣式，會同時應用到它的後代元素上，這一特性稱爲樣式的繼承。

1.12.2. 經過樣式的繼承能夠將一些樣式統一設置個祖先元素，這樣全部的後代都會應用到相同的樣式。

1.12.3. 可是並非全部的樣式都會繼承，好比：背景相關的，邊框相關的，定位相關的。具體參考文檔

1.13. 選擇器的優先級

1.13.1. 當使用選擇器爲元素設置樣式時，若是樣式發生了衝突，採用哪一個樣式由選擇器的優先級來決定。

1.13.2. 優先級

內聯樣式

1000

id選擇器

100

類和僞類選擇器

10

元素選擇器

1

通配選擇器

0

繼承的樣式

沒有優先級

1.13.3. 當樣式發生衝突時，須要將相關的選擇器優先級進行求和計算，優先級高的優先顯示，若是優先級同樣，則顯示靠後的樣式

1.13.4. 優先級計算時，總大小不能超過他的最大的數量級

1.13.5. 能夠在樣式後邊添加一個!important，若是樣式中添加了該內容，則該樣式將會獲取最大的優先級，將會優先於全部的樣式顯示，包括內聯樣式，可是這個屬性要慎用。

1.14. 選擇器的性能

1.14.1. 瀏覽器在解析一組選擇器時，是從後邊往前一個一個的解析的

1.14.2. 若是選擇器編寫過於長的話，瀏覽器解析起來性能會比較差，因此在編寫選擇器時，越短越好。

1.14.3. *通配選擇器，性能也比較差，要避免使用通配選擇器

1.15. 單位

1.15.1. 長度單位

px

像素，像素就是構成一個圖片的最小的單位，咱們的屏幕就是由一個一個像素點構成

一個像素指的就是一個像素點

在不一樣的顯示器中，一個像素的大小是不一樣的，越清晰的屏幕像素越小

%

能夠將一個元素的樣式值設置爲一個百分比的值，這樣瀏覽器將會根據父元素的值去計算出相應的值

當父元素的值改變時，子元素的值會按照必定比例一塊兒改變，常常用於自適應的頁面

em

em會相對於當前元素的字體大小來計算

1em = 1font-size

em常常用於設置文字相關的一些樣式，由於當文字大小發生改變時，em會隨之改變

1.15.2. 顏色單位

顏色單詞

直接使用英文單詞來表示顏色

red green blue orange

RGB值

所謂RGB值就是經過紅綠藍三元色的不一樣組合來搭配出各類不一樣的顏色

語法：

rgb(紅色,綠色,藍色)

這三個值須要一個0-255之間的值

0表示沒有

255表示最大

rgb(50,200,30)

也可使用百分數來設置RGB值，須要0%-100%之間的值

百分數最終也是轉換爲0-255的

0%至關於0

100%至關於255

rgb(100%,0%,0%)

十六進制RGB值

也是一種RGB值的表示方式，不一樣的是它使用的是16進制數字來表示而不是10進制

語法：

#紅色綠色藍色

這裏的顏色須要一個00-ff之間的值

例子：

#ff0000

若是顏色的是兩位兩位重複的，能夠進行簡寫

好比 #aabbcc 能夠寫成 #abc

好比 #bbffaa 能夠寫成 #bfa

1.15.3. 文本樣式

字體

color

字體的顏色

font-size

字體的大小

瀏覽器中默認的字體大小通常都是16px，而咱們開發時通常會統一爲12px

font-family

設置文字的字體

font-style

設置斜體

font-weight

設置文字的加粗

font-variant

小型大寫字母

font

文字的簡寫屬性

能夠同時設置全部的字體相關的樣式

語法：

font: [加粗斜體小大字母] 大小[/行高] 字體

加粗，斜體，小大字母，順序無所謂，寫不寫都行，若是不寫在使用默認值

文本大小，和字體必須寫，且大小必須是倒數第二個，字體必須是最後一個

大小後能夠設置行高，可寫可不寫，若是不寫則使用默認值

文本樣式

line-height

行高

文本默認都是在行高中垂直居中的

經過line-height能夠修改行高

行間距 = 行高 - 字體大小

text-transform

設置文本的大小寫

text-decoration

設置文本修飾

text-align

設置文本對齊

text-indent

設置首行縮進

它須要一個長度單位，若是是正值則首行向右移動，若是是負值則向左移動

letter-spacing

字符間距

word-spacing

單詞間距

1.16. 背景

1.16.1. background-color

背景顏色

1.16.2. background-image

背景圖片

須要一個url地址做爲參數

例子：background-image:url(圖片的路徑)

1.16.3. background-repeat

設置背景圖片重複方式

可選值：

repeat

默認值，背景圖片會平鋪顯示

沿x軸和y軸雙方向重複

no-repeat

背景圖片不重複

repeat-x

背景圖片沿水平方向重複

repeat-y

背景圖片沿垂直方向重複

1.16.4. background-position

設置背景圖片的位置

設置方式一

能夠直接經過幾個位置的關鍵字來設置圖片的位置

top

left

right

bottom

center

能夠經過以上關鍵字兩兩組合的形式，將背景圖片設置到元素的任意位置

若是僅僅指定一個值，則第二個值默認是center

設置方式二

能夠直接指定兩個值，來設置背景圖片的偏移量

例子：

background-position : x軸偏移量 y軸偏移量;

x軸偏移量，用來指定圖片的水平位置

若是指定一個正值，則圖片向右移動

若是指定一個負值，則圖片向左移動

y軸偏移量，用來指定圖片的垂直位置

若是指定一個正值，則圖片向下移動

若是指定一個負值，則圖片向上移動

1.16.5. background-attachment

用來設置背景是否隨頁面滾動

可選值

scroll

默認值，背景圖片會隨頁面一塊兒滾動

fixed

背景圖片不隨頁面滾動，會固定在頁面的指定位置

設置該屬性的背景，則背景會永遠相對於瀏覽器窗口進行定位

通常這種背景都會設置給body

1.16.6. background

背景的簡寫屬性

能夠經過它來設置全部的背景相關的樣式

該簡寫屬性沒有順序的要求，也沒有數量的要求，不寫的屬性使用默認值

1.16.7. opacity

用來設置背景的不透明度

可選值

0-1

0表示徹底透明

1表示徹底不透明

0.5半透明

IE8及如下的瀏覽器不支持該樣式，可使用濾鏡來代替

filter:alpha(opacity=值)

這裏值須要一個0-100之間的值

0至關於徹底透明

100徹底不透明

2. HTML

2.1. 網頁的結構

2.1.1. 一個網頁有三個部分組成

結構

結構是頁面的總體結構，哪裏是標題，哪裏是段落，哪裏是圖片

結構使用HTML來編寫

表現

表現是頁面的外在的樣式，好比字體，字體大小，字體顏色，背景。。。

使用CSS來設置頁面中元素的樣式

行爲

頁面和用戶之間的交互行爲

使用JavaScript來設置頁面的行爲

2.1.2. 一個設計優良的網頁要求結構、表現、行爲三者分離

2.1.3. 在開發中老是要面臨一個問題，就是程序之間的耦合，三者分離就是爲了解耦合

2.2. HTML，超文本標記語言

2.3. 負責頁面中的結構，定義出頁面中的各個組成部分

2.4. HTML是採用純文本的形式的編寫，採用HTML標籤來標識出頁面中的不一樣部分

2.5. 標籤

2.5.1. 成對出現

<標籤名></標籤名>

2.5.2. 自結束標籤

<標籤名 />

2.6. 屬性

2.6.1. 經過屬性能夠設置標籤的效果

2.6.2. 屬性須要定義在開始標籤中或這自結束標籤中

2.6.3. 屬性其實是一組一組名值對結構

2.6.4. 例子：

<標籤名屬性名="屬性值" 屬性名="屬性值"></標籤名>

<標籤名屬性名="屬性值" 屬性名="屬性值" />

2.7. HTML頁面的基本結構

<!doctype html>

<html>

<head>

</head>

<body>

</body>

</html>

2.8. 文檔聲明

2.8.1. <!doctype html>

2.8.2. 用來標識當前頁面的html的版本

2.8.3. 該聲明用來告訴瀏覽器，當前的頁面是使用HTML5的標準編寫的

2.9. 經常使用標籤

2.9.1. <html>

網頁的根標籤

一個頁面中有且只有一個根標籤

網頁中的全部內容都須要寫在html標籤的內部

2.9.2. <head>

網頁的頭部

該標籤中的內容不會在網頁中直接顯示

該標籤用於幫助瀏覽器解析頁面

子標籤

<title>

用來設置網頁的標題

默認會在瀏覽器的標題欄中顯示

搜索引擎檢索網頁時，會主要檢索title中的內容，它會影響到頁面在搜索引擎中的排名

<meta>

用來設置網頁的元數據，好比網頁使用的字符集

設置網頁的關鍵字

設置網頁的描述

請求的重定向

2.9.3. <body>

網頁的主體

網頁中全部的可見部分都須要在body中編寫

2.9.4. <h1> ~ <h6>

標題標籤

在html中一共有六級標題

六級標題中，h1最重要，h6最不重要，通常頁面中只會使用h1~h3

h1的重要性僅次於title，瀏覽器也會主要檢索h1中的內容，以判斷頁面的主要內容

通常一個頁面中只能寫一個h1

2.9.5. <p>

段落標籤

2.9.6. <br />

換行標籤

2.9.7. <hr />

水平線標籤

2.9.8. 內聯框架

能夠向一個頁面中引入其餘的外部頁面

<iframe></iframe>

屬性

src

外部頁面的地址，可使用相對路徑

width和height

能夠設置框架的寬度和高度

name

能夠爲內聯框架指定一個名字

能夠將該屬性值設置爲超連接的target屬性的值

這樣當點擊超連接時，頁面將會在相應的內聯框架中打開

內聯框架中的內容不會被搜索引擎所檢索，因此開發中儘可能不要使用內聯框架

2.9.9. 超連接

可使當前頁面跳轉到其餘的頁面

<a>連接的文字</a>

屬性

href

指向連接跳轉的目標地址，能夠是一個相對路徑

還能夠是#id屬性值，這樣當點擊超連接之後，將會跳轉到當前頁面的指定位置

可使用mailto:來建立一個發送電子郵件的超連接

target

指定在哪一個窗口中打開連接

可選值

_self

默認值，默認在當前窗口打開連接

_blank

在新窗口中打開連接

內聯框架的name屬性值

在指定的內聯框架中打開連接

2.10. 註釋

2.10.1. 語法

2.10.2. 註釋中的內容不會在頁面中顯示，可是會在源碼中顯示，咱們能夠經過註釋來講明網頁的代碼

2.10.3. 也能夠經過註釋隱藏一些頁面中不想顯示的內容

2.11. 實體

2.11.1. 在HTML頁面中一些特殊符號是不能直接使用，須要使用實體來代替這些特殊符號

2.11.2. 實體也能夠稱爲轉義字符

2.11.3. 實體的語法

&實體名;

2.11.4. 經常使用的實體

空格

<

>

版權符號

©

2.12. 圖片標籤

2.12.1. <img />

2.12.2. 使用圖片標籤能夠向頁面中引入一個外部圖片

2.12.3. 屬性

src

指向一個外部圖片的路徑，可使用相對路徑

alt

指定一個在圖片沒法加載時對圖片的描述

搜索引擎主要經過該屬性來識別圖片的內容

若是不寫該屬性則搜索引擎會對圖片進行收錄

width

設置圖片的寬度

height

設置圖片的高度

2.12.4. 圖片的格式

JPEG

顏色豐富的圖片，如，照片

GIF

顏色單一，簡單透明的圖片，動態圖

PNG

顏色豐富，複雜透明的圖片

圖片選擇的原則

效果一致，用小的

效果不一致，用效果好的

2.13. 相對路徑

2.13.1. 相對於當前資源所在的目錄的路徑

2.13.2. 可使用../返回一級目錄，返回幾級使用幾個../

2.14. xHtml語法規範

2.14.1. 1.HTML中不區分大小寫，可是儘可能使用小寫

2.14.2. 2.HTML的註釋不能嵌套

2.14.3. 3.標籤必須結構完整

要麼成對出現

要麼自結束標籤

2.14.4. 4.標籤能夠嵌套可是不能交叉嵌套

2.14.5. 5.屬性必須有值，且值必須加引號，單引號雙引號均可以

2.15. 文本標籤

2.15.1. <em>

表示語氣上的強調

2.15.2. <strong>

表示內容的重要性

2.15.3. <i>

表示單純的斜體

2.15.4. <b>

表示單純的加粗

2.15.5. <small>

表示細則一類的內容

2.15.6. <cite>

表示參考的內容，凡是加書名號的均可以使用cite

2.15.7. <q>

短引用，行內引用

2.15.8. <blockquote>

長引用，塊級引用

2.15.9. <sup>

上標

2.15.10. <sub>

下標

2.15.11. <del>

刪除的內容

2.15.12. <ins>

插入的內容

2.15.13. <pre>

預格式標籤，能夠保留代碼中空格換行這些格式

2.15.14. <code>

表示程序代碼

2.16. 列表

2.16.1. 無序列表

使用ul來建立一個無序列表，在列表中使用li來表示一個列表項

<ul>

</ul>

<ol>

</ol>

<dl>

<dd>景陽岡打虎英雄，戰鬥力99</dd>

<dd>後打死西門慶，投奔梁山</dd>

<dd>著名餐飲企業家，戰鬥力0</dd>

</dl>

無序列表使用符號做爲項目符號

2.16.2. 有序列表

使用ol來建立一個無序列表，在列表中使用li來表示一個列表項

使用有序的序號做爲項目符號

2.16.3. 定義列表

2.16.4. 列表相關的元素都是塊元素，他們之間能夠互相嵌套

2.16.5. 去除項目符號

list-style:none

3. 佈局

3.1. 浮動

3.1.1. 使用float來設置元素浮動

3.1.2. 可選值

none

默認值，不浮動，元素在文檔流中

left

元素向左浮動

right

元素向右浮動

3.1.3. 特色

1.元素浮動之後會徹底脫離文檔流

2.浮動之後元素會一直向父元素的最上方移動

3.直到遇到父元素的邊框或者其餘的浮動元素，會中止移動

4.若是浮動元素的上邊是一個塊元素，則浮動元素不會覆蓋塊元素

5.浮動元素不會超過他上邊的浮動的兄弟元素，最多一邊齊

6.浮動元素不會覆蓋文字，文字會自動環繞在浮動元素的周圍，能夠經過浮動來實現文字環繞的效果

3.1.4. 浮動之後元素的特色

元素浮動之後，會使其徹底脫離文檔流。

塊元素

塊元素脫離文檔流之後

1.不會獨佔一行

2.寬度和高度都被內容撐開

內聯元素

內聯元素脫離文檔流之後會變成塊元素

3.1.5. 高度塌陷

父元素在文檔流中高度默認是被子元素撐開的，當子元素脫離文檔流之後，將沒法撐起父元素的高度，也就會致使父元素的高度塌陷

父元素的高度一旦塌陷全部元素的位置將會上移，致使整個頁面的佈局混亂

方法一

開啓父元素的BFC或hasLayout

BFC

Block Formatting Context

塊級格式化環境

BFC是元素的隱含屬性，默認是在關閉狀態的

能夠經過一些特殊的樣式，來開啓BFC

開啓BFC之後元素將會具備以下特性

一、父元素的垂直外邊距不會與子元素重疊

二、開啓BFC的元素不會被浮動元素所覆蓋

三、開啓BFC的元素能夠包含浮動子元素

開啓BFC的方式

1.設置元素浮動

2.設置元素絕對定位

3.設置元素的類型爲inline-block

4.設置overflow爲一個非默認值

通常都是使用overflow:hidden來開啓BFC

hasLayout

在IE6中沒有BFC，可是有一個和BFC相似的hasLayout

在IE6中能夠經過開啓hasLayout來解決高度塌陷的問題

反作用最小的開啓方式

zoom:1

當爲元素設置寬度非默認值時，會自動開啓hasLayout

方法二

在塌陷的父元素的最後添加一個空白的div，而後對該div進行清除浮動

</div>

使用這種方式會在頁面中添加多餘的結構

方法三

使用after僞類，向父元素後添加一個塊元素，並對其清除浮動

.clearfix:after{

content:"";

display:block;

clear:both;

}

.clearfix{

zoom:1;

}

該種方式的原理和方法二原理同樣，可是不用向頁面中添加對於的結構

3.2. 定位

3.2.1. 經過定位能夠將頁面中的元素，擺放到頁面的任意位置

3.2.2. 使用position來設置元素的定位

3.2.3. 可選值

static

默認值，元素沒有開啓定位

relative

開啓元素的相對定位

absolute

開啓元素的絕對定位

fixed

開啓元素的固定定位

3.2.4. 相對定位

1.開啓元素的相對定位後，若是不設置偏移量元素不會發生任何變化

2.相對定位元素相對於其自身在文檔流中的位置來定位

3.相對定位的元素不會脫離文檔流

4.相對定位不會改變元素的性質，塊元素仍是塊元素，內聯元素仍是內聯元素

5.相對定位的元素會提高一個層級

3.2.5. 絕對定位

1.元素設置絕對定位之後，若是不設置偏移量，元素的位置不會發生變化

2.絕對定位的元素是相對於距離他最近的開啓了定位的祖先元素進行定位，若是全部的祖先元素都沒開啓定位，則相對於瀏覽器窗口進行定位。

3.絕對定位的元素會徹底脫離文檔流

4.絕對定位會改變元素的性質。內聯變塊，塊的高度和寬度都被內容撐開，而且不獨佔一行

5.絕對定位會使元素提高一個層級

3.2.6. 固定定位

固定定位是一種特殊的絕對定位，它的特色大部分都和絕對定位同樣

不一樣的是，固定定位的元素永遠都是相對於瀏覽器窗口進行定位的。而且他不會隨滾動條滾動

IE6不支持固定定位

3.2.7. 層級

定位元素 > 浮動元素 > 文檔流中的元素

當元素開啓了定位之後，能夠經過z-index來設置元素的層級

z-index值越高元素越優先顯示

若是z-index值同樣，或者都沒有z-index則優先顯示下邊的元素

父元素永遠不會蓋住子元素

3.2.8. 偏移量

當元素開啓了定位之後，能夠經過偏移量來設置元素的位置

left

元素距離定位位置的左側距離

top

元素距離定位位置的上邊距離

right

元素距離定位位置的右側距離

bottom

元素距離定位位置的底部距離

通常狀況下，只使用兩個值便可定義一個元素的位置。

4. 課程簡介

4.1. 軟件的架構

4.1.1. C/S，客戶端/服務器

1.通常咱們使用的軟件都是C/S架構

2.好比系統的中的軟件QQ、360、office、XMind

3.C表示客戶端，用戶經過客戶端來使用軟件

4.S表示服務器，服務器負責處理軟件的業務邏輯

特色

1.軟件使用前必須得安裝

2.軟件更新時，服務器和客戶端得同時更新

3.C/S架構的軟件不能跨平臺使用

4.C/S架構的軟件客戶端和服務器通訊採用的是自有協議，相對來講比較安全

4.1.2. B/S，瀏覽器/服務器

1.B/S本質上也是C/S，只不過B/S架構的軟件，使用瀏覽器做爲軟件的客戶端

2.B/S架構軟件經過使用瀏覽器訪問網頁的形式，來使用軟件

3.好比：京東淘寶 12306 知乎新浪微博

特色

1.軟件不須要安裝，直接使用瀏覽器訪問指定的網址便可

2.軟件更新時，客戶端不須要更新

3.軟件能夠跨平臺，只要系統中有瀏覽器，就可使用

4.B/S架構的軟件，客戶端和服務器之間通訊採用的是通用的HTTP協議，相對來講不安全

4.2. 進制

4.2.1. 幾進制就是滿幾進一

4.2.2. 二進制

0 1

10 11 100 101 110 111

4.2.3. 十進制

0 1 2 3 4 5 6 7 8 9

10 11 12 13 14 。。。

4.2.4. 十六進制

滿16進1

0 1 2 3 4 5 6 。。。 9 a b c d e f

10 11 12 ... 19 1a 1b 1c 1d 1e 1f

16進制因爲是滿16進1，因此必須設置幾個特殊的字符來表示10 11 12 13 14 15

使用a b c d e f分別表示10 11 12 13 14 15

4.2.5. 八進制

滿8進1

0 1 2 3 4 5 6 7

10 11 12 13 14 15 16 17 20 21 22

4.3. 亂碼的問題

4.3.1. 亂碼出現的緣由

計算機是一個很是笨的機器，它只認識兩個東西 0 1

在計算機中保存的任何內容，最終都須要轉換爲0 1這種二進制編碼來保存，包括網頁中的內容

好比：中國，在計算機底層，能夠能須要轉換爲 1010001001010101011010

在讀取內容時，須要將二進制編碼，在轉換爲正確的內容

編碼

依據必定的規則，將字符轉換爲二進制編碼的過程

解碼

依據必定的規則，將二進制編碼轉換爲字符的過程

字符集

編碼和解碼所採用的規則，咱們稱爲字符集

常見的字符集

ASCII

ISO-8859-1

GBK

GB2312

中文系統的默認編碼

UTF-8

萬國碼，支持地球上全部的文字

ANSI

自動以系統的默認編碼來保存文件

產生亂碼的根本緣由是，編碼和解碼採用的字符集不一樣

在中文系統的瀏覽器中，默認都是使用GB2312進行解碼的

5. 盒子模型

5.1. CSS中將每個元素都設置爲了一個矩形的盒子

5.2. 將全部的元素都設置爲盒子，是爲了方便頁面的佈局

5.3. 當這些元素都是盒子之後，咱們的佈局就變成了在頁面中擺放盒子

5.4. 盒子模型

5.4.1.

5.5. 每一個盒子都由以下幾部分構成

5.5.1. 內容區

內容區至關於盒子存放東西的空間

內容區在盒子的最裏邊

元素的全部的子元素都是放在父元素的內容區

內容區設置

width

內容區的寬度

height

內容區的高度

5.5.2. 內邊距

內邊距指的是內容區和邊框之間的距離，內邊距會影響盒子的大小

盒子中一共有四個方向的內邊距

padding-top

padding-right

padding-bottom

padding-left

padding

能夠同時設置四個方向的內邊距，規則和border-width一致

padding:上右下左

padding:上左右下

padding:上下左右

盒子的可見框大小由內容區、內邊距和邊框共同決定

5.5.3. 邊框

邊框盒子可見框最外側，邊框是盒子的邊緣

設置邊框

設置邊框須要同時設置三個樣式，缺一不可

border-width

邊框的寬度

能夠同時指定四個邊框的寬度，也能夠分別指定

規則

四個值

border-width : 10px 20px 30px 40px;

border-width : 上右下左;

三個值

border-width : 10px 20px 30px;

border-width : 上左右下 ;

兩個值

border-width : 10px 20px;

border-width : 上下左右 ;

一個值

border-width : 10px;

border-width : 上下左右 ;

border-color

邊框的顏色

border-style

邊框的樣式

除了這三個樣式，CSS中還提供了

border-xxx-width

border-xxx-color

border-xxx-style

xxx能夠是

top

right

bottom

left

經過這些樣式能夠單獨指定四個邊的顏色，寬度和樣式

邊框的簡寫屬性

border

border-left

border-top

border-right

border-bottom

這個幾個屬性能夠同時設置邊框相關的的樣式(border, border-left, border-top, border-right, border-bottom)

border能夠同時設置四個邊的顏色，寬度，樣式

border-xxx能夠單獨設置某一個邊

規則

使用這些樣式能夠同時設置border-width border-style border-color，不一樣的屬性使用空格隔開，而且沒有順序要求

5.5.4. 外邊距

外邊距盒子和其餘盒子之間的距離，外邊距不會影響可見框的大小，可是會影響盒子的位置

也是具備四個方向的外邊距

margin-top

margin-right

margin-bottom

margin-left

簡寫屬性

margin

規則和padding一致

margin值

能夠設置爲auto

若是單獨將左右外邊距設置爲auto，則會將左或右外邊距設置爲最大值

若是同時將左右外邊距設置爲auto，則會將左右外邊距設置爲一個相等的值，經過這種方式使一個子元素在它的父元素中水平居中

margin:0 auto

能夠設置爲負值

若是將margin設置爲負值，則元素會向相反的方向移動

外邊距的重疊

相鄰的垂直外邊距會發生重疊現象

相鄰元素的外邊距會取最大值

子元素的外邊距會傳遞給父元素

水平外邊距不會重疊，而是取和

5.6. 內聯元素的盒子模型

5.6.1. width

5.6.2. height

5.6.3. padding

支持水平方向的padding

垂直方向的padding也支持，可是不會影響佈局

5.6.4. border

支持四個方向邊框，可是垂直的邊框不會影響佈局

5.6.5. margin

支持水平方向外邊距

不支持垂直方向的

不支持(width, height)

5.7. 盒模型相關的樣式

5.7.1. display

設置元素的顯示類型

可選值

none

元素不會在頁面中顯示，而且不會佔據頁面的位置

block

元素會做爲塊元素顯示

inline

元素會做爲內聯元素顯示

inline-block

元素會做爲行內塊元素顯示

既具備內聯元素的特色也具備塊元素的特色

不獨佔一行

能夠設置寬高

5.7.2. visibility

設置元素是否在頁面中顯示

可選值

visible

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

hidden

元素不在頁面中顯示，可是依然在頁面中佔據位置

5.7.3. overflow

設置元素如何處理溢出內容

可選值

visible

默認值，不會處理溢出的內容，在父元素之外的地方顯示

hidden

溢出的內容會被隱藏不會顯示

scroll

在父元素中同時添加水平和垂直方向的滾動條

不內容是否溢出都會添加滾動條

auto

根據須要自動生成滾動條

5.8. 文檔流

5.8.1. 文檔流指的是網頁中的一個位置

5.8.2. 文檔流是網頁的基礎，是網頁的最底層，全部的元素默認都是在文檔流中排列

5.8.3. 元素在文檔流中默認自左向右，自上向下排列（和咱們的書寫習慣一致）

5.8.4. 塊元素

1.塊元素在文檔流中自上向下排列

2.塊元素在文檔流中寬度默認是父元素的100%

3.塊元素在文檔流中高度默認被內容撐開

5.8.5. 內聯元素

1.內聯元素在文檔流中自左向右排列，若是一行中不足以容下全部的內聯元素，則換到下一行，繼續自左至右排列

2.內聯元素在文檔流中寬度和高度默認都被內容撐開

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。

HTML、CSS基礎知識

1. CSS

1.1. CSS叫作層疊樣式表，用來設置頁面中元素的樣式。背景顏色、字體顏色、字體大小。。。

1.2. CSS負責結構、表現、行爲中的表現

1.3. 編寫的位置

1.3.1. 1.內聯樣式

將樣式編寫到標籤的style屬性中

<p style="color:red;"></p>

這種樣式只會對當前標籤起做用，不能對樣式進行復用，不方便後期維護，不推薦使用

1.3.2. 2.內部樣式表

將樣式表編寫到head中的style標籤中

<style type="text/css"></style>

使用內部樣式表，進一步將表現和結構分離，能夠同時爲多個元素設置樣式，方便後期的維護

1.3.3. 3.外部樣式表

將樣式表編寫到外部的CSS文件中，而後經過link標籤將外部文件引入

<link rel="stylesheet" type="text/css" href="文件的路徑"/>

將樣式編寫到外部樣式表中，能夠在不一樣的頁面中使用同一個樣式表，徹底將表現和結構分離，方便後期的維護，推薦使用的方式

1.4. 基本語法

1.4.1. 選擇器

經過選擇器能夠選中頁面中的一組元素，而後爲其設置樣式

元素選擇器

根據標籤名，選中頁面中的指定元素

語法：標籤名{ }

例子：

div{}

p{}

h1{}

id選擇器

根據元素的id屬性值選中一個惟一的元素

語法：#id {}

例子：

#box1{}

#hello{}

類選擇器

根據元素的class屬性值，選中一組元素

語法：.class{}

例子：

.hello{}

.box{}

通配選擇器

選中頁面中的全部元素

語法：*{}

通配選擇器的性能比較差，儘可能避免使用

並集選擇器

能夠同時選中符合多個選擇器的元素

語法：選擇器1,選擇器2,選擇器N{}

例子：

div,p,#box,.hello{}

交集選擇器

能夠選中知足多個條件的元素

語法：選擇器1選擇器2選擇器N{}

例子：p.hello{}

後代元素選擇器

選中指定元素的指定後代元素

語法：祖先元素 後代元素{}

例子：

div span {}

div p{}

子元素選擇器

選中指定元素的指定子元素

語法：父元素 > 子元素 {}

例子：

div > span {}

div > p{}

1.4.2. 聲明塊

聲明塊中實際上就是一個一個CSS聲明

聲明

每個CSS聲明都是一個樣式，實際上就是一個名值對的結構

名和值之間使用:連接

:左邊是樣式的名字

:右邊是樣式的值

每個聲明以;結尾

例子

color:red;

font-size:20px;

1.5. 元素之間的關係

1.5.1. 父元素

直接包含子元素的的元素叫作父元素

1.5.2. 子元素

直接被父元素包含的元素叫作子元素

語法：祖先元素後代元素{}