2分鐘了解 HTML 的基本結構和語法規則

TML 是一種標記語言，用于創建網頁和應用程序。它的基本結構由以下三個部分組成：

文檔類型聲明（doctype declaration），用來告訴瀏覽器文檔的版本和規范。它以 <!DOCTYPE html> 開頭，表示文檔遵循 HTML5 標準。
html 標簽（html tag），用來包含整個文檔的內容。它以 <html> 開始，以 </html> 結束。它還可以包含一個 lang 屬性，用來指定文檔的主要語言。
head 和 body 標簽（head and body tags），用來分別包含文檔的元數據（metadata）和可見內容（visible content）。head 標簽以 <head> 開始，以 </head> 結束。它可以包含一些不顯示在網頁上的信息，比如標題、字符集、樣式表等。body 標簽以 <body> 開始，以 </body> 結束。它可以包含一些顯示在網頁上的內容，比如文本、圖片、視頻、表單等。

一個 HTML 的基本結構示例如下：

SS(Cascading Style Sheets) ，層疊樣式表（級聯樣式表），用于設置HTML頁面中的文本內容的字體、大小、對齊方式等，圖片的寬高、邊框樣式、邊距等以及頁面的布局排版等各種外觀顯示樣式。

CSS以HTML為基礎，可以針對不同的瀏覽器設置不同的樣式。CSS的出現可以說拯救了我們的頁面，讓HTML 專注去做結構呈現，而樣式全部交給 CSS來美化。

CSS樣式規則，具體格式如下：

CSS語法由兩部分組成：選擇器和聲明。聲明包括：屬性和屬性值
選擇符 {屬性: 屬性值 ; 屬性:屬性值}

規則：

每個CSS樣式由兩部分組成，即選擇器和聲明。選擇器用于指定CSS樣式作用的HTML對象，聲明又分為屬性和屬性值；
屬性是對選擇器選定的對象設置的樣式屬性，例如字體大小、文本顏色等。必須放在花括號中，屬性與屬性值用英文冒號連接，以“鍵值對”的形式出現。
每條聲明用英文分號結束。當一個屬性有多個屬性值的時候，屬性值與屬性值不分先后順序。在書寫樣式過程中，空格、換行等操作不影響屬性顯示。

注釋規則

注釋規則
/* 需要注釋的內容 */
示例
p { color: red; /* 所有段落標簽字體顏色是紅色*/ }

三、CSS樣式表引入方法

CSS放到什么位置呢？怎么讓它跟我們的HTML文件關聯起來呢？

內聯樣式（行內式）

內聯樣式，又稱行內樣式、行間樣式、內嵌樣式。是通過標簽的style屬性來設置元素的樣式。

語法

<標簽名 style="屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3;"> 內容 </標簽名>

<h2 style="color:red;">
    紅色標題
</h2>

說明
（1）style是標簽的屬性，任何HTML標簽都有style屬性，用來設置行內樣式。
（2）屬性和值的書寫規范與CSS樣式規則相同。
注意
行內樣式只對其所在的標簽及嵌套在其中的子標簽起作用。

內部樣式表

內嵌式是將CSS代碼集中寫在HTML文檔的head頭部標簽中，并且用style標簽定義

語法
<head> <style type="text/CSS"> 選擇器 {屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3;} p{ color:#000;font-size:14px;} </style> </head>
說明
（1）style標簽一般位于head標簽中title標簽之后，也可以把他放在HTML文檔的任何地方。
（2）type=“text/CSS” 在html5中可以省略，寫上也比較符合規范，所以這個地方可以寫也可以省略。

外部樣式表（外鏈式）

當我們頁面比較復雜，大量的內部樣式，會導致頁面看上去不美觀，而且不利于維護。這時我們通常將所有的樣式放在一個或多個以 .CSS 為擴展名的外部樣式表文件中，通過link標簽將外部樣式表文件鏈接到HTML文檔中。

格式
<head> <link rel="stylesheet" type="text/CSS" href="CSS文件的路徑" /> </head>
說明
（1）rel：用于定義文檔關聯（當前文檔與被鏈接文檔之間的關系），在這里需要指定為“stylesheet”，表示被鏈接的文檔是一個樣式表文件，表示關聯樣式表。
（2）type：用于定義文檔類型，通常指定為“text/css”，表示鏈接的外部文件為CSS樣式表。
（3）href：用于定義所鏈接外部樣式表文件的URL，通常是相對路徑。
注意
link 是單標簽哦 _！
使用link元素導入外部樣式表時，需將該元素寫在文檔頭部，即與之間。

三種樣式表總結

樣式表	特點	使用	控制范圍	優先級
行內樣式表	書寫方便，權重高	較少	控制單個標簽（小）	高
內部樣式表	結構和樣式部分分離	較多	控制一個頁面（中）	與書寫的順序有關，后書寫的高
外部樣式表	結構和樣式完全分離，需要引入	最多，推薦使用	控制整個網站（多）	與書寫的順序有關，后書寫的高

四、標簽的類型(顯示模式)

網頁中的標簽很多，為了更好的完成我們的網頁布局，我們需要在不同地方會放不同類型的標簽。

根據標簽在網頁中的顯示模式，可以將HTML標簽一般分為塊級標簽和行內標簽兩種類型，即塊元素和行內元素。

塊級元素(block-level)

說明
每個塊元素通常都會獨自占據一行或多行，可以設置其寬度、高度、對齊方式等屬性，常用于網頁布局和網頁結構的搭建。
舉例
常見的塊元素有：<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等，其中<div>標簽是最典型的塊元素，非常適合布局，所以我們常稱之為 “CSS+DIV布局”。
特點

塊元素總是從新行開始，寬度是容器的100%。
塊狀元素都可以定義自己的寬度、高度、外邊距以及內邊距。
兩個相鄰塊元素不會出現并列顯示的現象；默認，塊元素會按自上而下順序排列。
塊級元素一般可以容納內聯元素和其他塊元素，故將其比喻為一個盒子。

注意
文字類塊級標簽，里面不能放其他塊級元素。比如，只有文字才能組成段落因此 p 里面不能放塊級元素，同理還有這些標簽h1,h2,h3,h4,h5,h6,dt。

行內元素(inline-level 或內聯元素)

說明
行內元素（內聯元素）不占獨立的區域，僅靠自身的字體大小和圖像尺寸來支撐結構，一般不可以設置寬度、高度、對齊等屬性，常用于控制頁面中文本的樣式。
舉例
常見的行內元素有<a>、<b>、<span>、<strong>、<em>、<i>、<del>、<s>、<ins>、<u>等，其中<span>標簽最典型的行內元素。
特點

和相鄰行內元素在一行上顯示
設置寬、高無效，可設置水平方向的padding和margin，但垂直方向的無效。
默認寬度就是它本身內容的寬度。
行內元素只能容納文本或其他行內元素。（a除外）

注意

鏈接里面不能再放鏈接！

行內塊元素（inline-block）

說明
在行內元素中有幾個特殊的標簽，比如<img />、<input />、<td>，可以設置它們的寬、高和對齊方式，故稱之為行內塊元素。
特點
可同相鄰行內元素（行內塊）顯示在一行上，但之間會有空白縫隙
默認寬度就是它本身內容的寬度
可設置高度，行高、外邊距以及內邊距

元素顯示模式轉變（display）

通過設置display的值，改變元素的顯示模式。

屬性值
block、inline、inline-block、none
說明

行內轉塊：display:block;
將元素轉為塊狀元素，使該元素擁有塊狀元素的特點；
顯示：
類似在元素后面添加換行符，也就是說其他元素不能在其后面并列顯示。
塊轉行內：display:inline;
將元素轉換為內聯元素，使該元素擁有行內元素的特點；
顯示：
在元素后面刪除換行符，多個元素可以在一行內并列顯示。
塊、行內元素轉換為行內塊： display: inline-block;
只有這一個元素類型支持vertical-align屬性，img,input（行內塊元素）。
顯示：
元素的內容以塊狀顯示，行內的其他元素顯示在同一行。
none 此元素不會被顯示

成	語言	描述
結構	HTML	網頁元素和內容
表現	CSS	網頁元素頁面樣式）
行為	JavaScript	網頁交互

CSS，層疊樣式表（Cascading Style Sheet），給網頁中的HTML標簽設置樣式

1 CSS樣式引入方式

1.1 外部樣式

CSS寫在一個單獨的.css文件中，通過link標簽在網頁中引入

<link rel="stylesheet" href="文件路徑">

1.2 內部樣式

CSS寫在網頁的head標簽中，用style標簽包裹

<style>
    /* 寫在style標簽中的樣式 */
</style>

1.3 行內樣式

CSS寫在標簽的style屬性中

<標簽名 style="行內樣式寫在這"></標簽名>

三種CSS樣式引入方式的區別

引入方式	書寫位置	作用范圍	使用場景
外部樣式	CSS寫在單獨的css文件中，通過link標簽引入	多個頁面	項目中
內部樣式	CSS寫在head頭部style標簽中	當前頁面	案例演示中
行內樣式	CSS寫在標簽的style屬性中	當前標簽	配合js使用

2 基礎選擇器

選擇器，就是選取（查找）需要設置樣式元素的方式

選擇器 {
    屬性名: 屬性值;
}

屬性名和屬性值合稱為css屬性

2.1 元素選擇器

通過元素名稱，選取（查找）相同元素，然后對相同元素設置CSS樣式

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <style>
        p {
            color: red;
        }
    </style>
</head>
<body>
    <p>我愛中國</p>
    <p>我愛人民</p>
    <div>我愛家鄉</div>
</body>
</html>

小結：

1、無論嵌套多少層，只要元素名稱相同都會被找到

2.2 類選擇器

通過類名稱，找到頁面中所有帶這個類名稱的元素，然后對其設置CSS樣式

類選擇器，也有人叫class選擇器

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <style>
        .color-style {
            color: red;
        }
    </style>
</head>
<body>
    <p class="color-style">我愛中國</p>
    <p>我愛人民</p>
    <div class="color-style">我愛家鄉</div>
</body>
</html>

小結：

1、所有元素都有class屬性，class屬性的屬性值叫類名

2、類名由數字、字母、下劃線、中劃線組成，不能以數字、中劃線開頭

3、一個元素可以有多個類名，類名之間用空格隔開

2.3 id選擇器

通過元素id屬性的屬性值，找到頁面中帶這個id屬性值的元素，然后對其設置CSS樣式

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <style>
        #one {
            color: red;
        }
    </style>
</head>
<body>
    <p id="one">我愛中國</p>
    <p id="two">我愛人民</p>
    <div>我愛家鄉</div>
</body>
</html>

小結：

1、所有元素都有id屬性

2、id屬性值在一個頁面中是唯一的

3、一個元素只能有一個id屬性值

2.4 通配符選擇器

查找頁面中所有的元素，然后對其設置CSS樣式

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <style>
        * {
            color: red;
        }
    </style>
</head>
<body>
    <p id="one">我愛中國</p>
    <p id="two">我愛人民</p>
    <div>我愛家鄉</div>
</body>
</html>

小結：

1、通常用于網頁重置樣式，不常用

2.5 后代選擇器

根據選擇器查找符合條件的元素，再根據后代選擇器查找符合條件的元素，然后對其設置CSS樣式

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <style>
        #one p {
            color: red;
        }
    </style>
</head>
<body>
    <div id="one">
        <p>我愛中國</p>
        <p>我愛人民</p>
        <div>我愛家鄉</div>
        <div>
            <p>我愛中國</p>
            <p>我愛人民</p>
        </div>
    </div>
    <div id="two">
        <p>我愛中國</p>
        <p>我愛人民</p>
        <div>我愛家鄉</div>
        <div>
            <p>我愛中國</p>
            <p>我愛人民</p>
        </div>
    </div>
</body>
</html>

2.6 群組選擇器

根據多個選擇器各自查找符合條件的元素，然后對其設置CSS樣式

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <style>
        p,h3 {
            color: red;
        }
    </style>
</head>
<body>
    <p>我愛中國</p>
    <h3>我愛人民</h3>
    <div>我愛家鄉</div>
</body>
</html>

3 字體樣式

字體樣式，針對文字本身樣式

字體相關的CSS屬性

屬性	說明
font-family	字體類型
font-size	字體大小
font-weight	字體粗細
font-style	字體風格
color	字體顏色

3.1 字體類型

語法：

font-family: 字體1,字體2,字體3...;

說明：

1、font-family屬性可是設置多個屬性值，用英文逗號隔開，生效順序是從左到右。瀏覽器默認字體類型一般是"宋體"

2、字體類型只有一個英文單詞，則不需要加上引號；字體類型是多個英文單詞或中文的，則需要加上雙引號

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <style>
        p {
            font-family: Arial;
        }
        h3 {
            font-family: monospace;
        }
        div {
            font-family: "新宋體";
        }
    </style>
</head>
<body>
    <p>我愛中國</p>
    <h3>我愛人民</h3>
    <div>我愛家鄉</div>
</body>
</html>

3.2 字體大小

語法：

font-size: 數字 + px

說明：

1、px是像素單位，單位需要設置，否則無效

2、谷歌瀏覽器默認文字大小是16px

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <style>
        p {
            font-size: 18px;
        }
        div {
            font-size: 36px;
        }
    </style>
</head>
<body>
    <p>我愛中國</p>
    <div>我愛家鄉</div>
</body>
</html>

3.3 字體粗細

語法：

font-weight: normal/bold/100~900

說明：

屬性值	說明
normal	正常（默認值）
bold	較粗
100~900	取100~900九種數值

實際開發一般會設置bold，不設置默認是normal

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <style>
        p {
            font-weight: normal;
        }
        div {
            font-weight: bold;
        }
    </style>
</head>
<body>
    <p>我愛中國</p>
    <div>我愛家鄉</div>
</body>
</html>

3.4 字體風格

語法：

font-style: 取值

說明：

屬性值	說明
normal	正常（默認值）
italic	斜體
oblique	斜體

不是所有字體都有italic屬性值，如果沒有italic的，則用oblique

font連寫

語法：

font: style weight size family;

說明：

1、可以省略前兩項，省略了相當于設置了默認值

不常用，作為了解

3.5 字體顏色

語法：

color: 顏色值

說明：

color屬性取值常用有兩種，一種是關鍵字（比如red、green、blue），另外一種是16進制RGB值（#000000，#FFFFFF）

問題一：給同一個元素設置了相同的屬性樣式，哪個生效？

答：樣式會層疊（覆蓋），寫在最后面的會生效。

問題二：html里面有注釋，css有沒有注釋，如何寫？

<style>
    /* 采用元素選擇器給p元素設置css樣式 */
    p {
        color: #000000;  /* p元素字體顏色為黑色 */
    }
</style>

4 文本樣式

文本樣式，針對段落的排版效果

文本相關CSS屬性

屬性	說明
text-indent	首行縮進
text-align	水平對齊
text-decoration	文本修繕
text-transform	大小寫轉換
line-height	行高
letter-spacing	字母間距
word-spacing	詞間距

4.1 首行縮進

語法：

text-indent: 像素值

說明：

縮進大小和字體大小是有關的，縮進1個字的空間等同于1個字的字體大小。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
<style>
    p {
        font-size: 14px;
        text-indent: 28px;
    }
</style>
</head>
<body>
    <p>舜發于畎畝之中，傅說舉于版筑之間，膠鬲舉于魚鹽之中，管夷吾舉于士，孫叔敖舉于海，百里奚舉于市。故天將降大任于是人也，必先苦其心志，勞其筋骨，餓其體膚，空乏其身，行拂亂其所為，所以動心忍性，曾益其所不能。</p>
</body>
</html>

4.2 水平對齊

語法：

text-align: 取值

說明：

text-align屬性取值

屬性值	說明
left	左對齊（默認值）
center	居中對齊
right	右對齊

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
<style>
    .one {
        text-align: left;
    }
    .two {
        text-align: center;
    }
    .three {
        text-align: right;
    }
</style>
</head>
<body>
    <p class="one">生于憂患死于安樂</p>
    <p class="two">生于憂患死于安樂</p>
    <p class="three">生于憂患死于安樂</p>
</body>
</html>

4.3 文本修飾

語法：

text-decoration: 取值

說明：

text-decoration屬性值

屬性值	說明
none	去除所有的劃線效果（默認值）
underline	下劃線
line-throught	中劃線
overline	頂劃線

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
<style>
    .one {
        text-decoration: none;
    }
    .two {
        text-decoration: underline;
    }
    .three {
        text-decoration: line-through;
    }
    .four {
        text-decoration: overline;
    }
</style>
</head>
<body>
    <p class="one">生于憂患死于安樂</p>
    <p class="two">生于憂患死于安樂</p>
    <p class="three">生于憂患死于安樂</p>
    <p class="four">生于憂患死于安樂</p>
</body>
</html>

4.4 大小寫轉換

語法：

text-transform: 取值

說明：

text-transform屬性取值

屬性值	說明
none	無轉換（默認值）
uppercase	轉換為大寫
lowercase	轉換為小寫
capitalize	單詞首字母大寫

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
<style>
    .one {
        text-transform: none;
    }
    .two {
        text-transform: uppercase;
    }
    .three {
        text-transform: lowercase;
    }
    .four {
        text-transform: capitalize;
    }
</style>
</head>
<body>
    <p class="one">Hello World</p>
    <p class="two">Hello World</p>
    <p class="three">Hello World</p>
    <p class="four">hello world</p>
</body>
</html>

4.5 行高

語法：

line-height: 取值;

說明：

1、取值可以是一個固定的數值（比如24px），也可以是一個百分數（比如150%）

line-height: 150%;

2、使用font-size屬性和line-height屬性的組合，可以讓行高與字體大小之間保持一定的比例

font-size: 16px;
line-height: 1.5

3、使用line-height屬性的繼承值。如果父元素的line-height屬性有值，那么子元素及后代元素會繼承父元素的行高

body {
    line-height: 1.5;
}
p {
    font-size: 16px;
}

行高的設置要大于字體大小的設置，才會顯得好看

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <style>
        p {
            font-size: 16px;
            line-height: 24px;
        }
    </style>
</head>
<body>
    <p>舜發于畎畝之中，傅說舉于版筑之間，膠鬲舉于魚鹽之中，管夷吾舉于士，孫叔敖舉于海，百里奚舉于市。故天將降大任于是人也，必先苦其心志，勞其筋骨，餓其體膚，空乏其身，行拂亂其所為，所以動心忍性，曾益其所不能</p>
</body>
</html>

4.6 間距

字間距

語法：

letter-spacing: 像素值

說明：

letter-spacing屬性用來設置兩個字之間的距離，一個英文字母或漢字都是當做一個字來處理

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <style>
        p {
            letter-spacing: 10px;
        }
    </style>
</head>
    <p>are you ok.你好嗎？</p>
<body>
</body>
</html>

詞間距

語法：

word-spacing: 像素值;

說明：

word-spacing屬性用來設置英文單詞之間的距離

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <style>
        p {
            word-spacing: 10px;
        }
    </style>
</head>
    <p>are you ok.你好嗎？</p>
<body>
</body>
</html>

5 邊框樣式

元素基本可以定義邊框，邊框樣式由邊框寬度、邊框外觀和邊框顏色三個屬性組成。

屬性	說明
border-width	邊框的寬度
border-style	邊框的外觀
border-color	邊框的顏色

5.1 邊框的寬度

語法：

border-width: 像素值;

說明：

邊框border-width屬性值是一個像素值

5.2 邊框的外觀

語法：

border-style: 取值;

說明：

border-style取值有三個

屬性值	說明
none	無樣式
dashed	虛線
solid	實線

5.3 邊框的顏色

語法：

border-color: 顏色關鍵字/16進制RGB值

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <style>
        div {
            border-width: 1px;
            border-style: solid;
            border-color: red;
        }
    </style>
</head>
    <div>hello,world</div>
<body>
</body>
</html>

5.4 邊框樣式簡寫

語法：

border: border-width border-style border-color;

案例：

div {
    border: 1px solid red;
}

5.5 邊框局部樣式

元素都是盒子模型，都是有四條邊的，分別是上、下、左、右。所以又可以為元素某一邊邊設置邊框樣式

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <style>
        div {
            width: 300px;
            height: 200px;
            border-top: 1px dashed darkred;
            border-bottom: 2px solid green;
            border-left: 3px solid grey;
            border-right: 4px dashed lightseagreen;
        }
    </style>
</head>
    <div></div>
<body>
</body>
</html>

6 列表樣式

6.1 列表項符號

定義列表項符號

在HTML中，無序列表和有序列表是通過標簽ul、ol的type屬性來定義的

<ol type="a">
    <li>my</li>
    <li>your</li>
</ol>
<ul type="disc">
    <li>my</li>
    <li>your</li>
</ul>

接觸了css后，得改成list-style-type屬性來定義。HTML專心負責結構，CSS專心負責樣式。

語法：

list-style-type: 取值;

說明：

ol元素的list-style-type屬性值

屬性值	說明
decimal	阿拉伯數字：1、2、3…（默認值）
lower-roman	小寫羅馬數字：i、ii、iii…
upper-roman	大寫羅馬數字：I、II、III…
lower-alpha	小寫英文字母：a、b、c…
upper-alpha	大寫英文字母：A、B、C…

ul元素的list-style-type屬性值

屬性值	說明
disc	實心圓●（默認值）
circle	空心圓○
square	正方形■

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <style>
        ol {
            list-style-type: lower-alpha;
        }
        ul {
            list-style-type: square;
        }
    </style>
</head>
<body>
    <ol>
        <li>my</li>
        <li>your</li>
    </ol>
    <ul>
        <li>my</li>
        <li>your</li>
    </ul>
</body>
</html>

去除列表項符號

隨著技術和審美不斷的提高，實際開發中都是直接去除列表項符號

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <style>
        ol,ul {
            list-style-type: none;
        }
    </style>
</head>
<body>
    <ol>
        <li>my</li>
        <li>your</li>
    </ol>
    <ul>
        <li>my</li>
        <li>your</li>
    </ul>
</body>
</html>

有序列表或無序列表設置了list-style-type: none后，樣式都一樣了。

6.2 列表項圖片

語法：

list-style-image: url(圖片路徑);

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <style>
        ul {
            list-style-image: url("small.png");
        }
    </style>
</head>
<body>
    <ul>
        <li>my</li>
        <li>your</li>
    </ul>
</body>
</html>

list-style-image不能控制圖片大小，實際開發中用background來替代

7 表格樣式

7.1 表格標題位置

語法：

caption-side: 取值;

說明：

caption-side屬性取值

屬性值	說明
top	標題在頂部（默認值）
bottom	標題在底部

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <style>
        table,tr,th,td {
            border: 1px solid gray;
        }
        table {
            caption-side: bottom;
        }
    </style>
</head>
<body>
    <table>
        <caption>學生成績</caption>
        <tr>
            <th>姓名</th>
            <th>數學</th>
        </tr>
        <tr>
            <td>曹操</td>
            <td>85</td>
        </tr>
        <tr>
            <td>劉備</td>
            <td>75</td>
        </tr>
    </table>
</body>
</html>

7.2 表格邊框合并

語法：

border-collapse: 取值;

說明：

border-collapse屬性取值

屬性值	說明
separate	邊框分開，有空隙（默認值）
collapse	邊框合并，無空隙

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <style>
        table,tr,th,td {
            border: 1px solid gray;
        }
        table {
            border-collapse: collapse;
        }
    </style>
</head>
<body>
    <table>
        <caption>學生成績</caption>
        <tr>
            <th>姓名</th>
            <th>數學</th>
        </tr>
        <tr>
            <td>曹操</td>
            <td>85</td>
        </tr>
        <tr>
            <td>劉備</td>
            <td>75</td>
        </tr>
    </table>
</body>
</html>

7.3 表格邊框間距

語法：

border-spacing: 像素值;

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <style>
        table,tr,th,td {
            border: 1px solid gray;
        }
        table {
            border-spacing: 10px;
        }
    </style>
</head>
<body>
    <table>
        <caption>學生成績</caption>
        <tr>
            <th>姓名</th>
            <th>數學</th>
        </tr>
        <tr>
            <td>曹操</td>
            <td>85</td>
        </tr>
        <tr>
            <td>劉備</td>
            <td>75</td>
        </tr>
    </table>
</body>
</html>

8 圖片樣式

8.1 圖片大小

語法：

width: 像素值;
height: 像素值;

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <style>
        img {
            width: 40px;
            height: 40px;
        }
    </style>
</head>
<body>
    <img src="small.png" alt="">
</body>
</html>

8.2 圖片邊框

語法:

border: 1px solid red;

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <style>
        img {
            width: 40px;
            height: 40px;
            border: 1px solid red;
        }
    </style>
</head>
<body>
    <img src="small.png" alt="">
</body>
</html>

8.3 圖片對齊

水平對齊

語法：

text-align: 取值;

說明：

text-align屬性取值

屬性值	說明
left	左對齊（默認值）
center	居中對齊
right	右對齊

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <style>
        .i1 {
            text-align: left;
        }
        .i2 {
            text-align: center;
        }
        .i3 {
            text-align: right;
        }
    </style>
</head>
<body>
    <div class="i1">
        <img src="small.png" alt="">
    </div>
    <div class="i2">
        <img src="small.png" alt="">
    </div>
    <div class="i3">
        <img src="small.png" alt="">
    </div>
</body>
</html>

圖片的水平對齊屬性設置是在圖片標簽的父標簽上實現的

垂直對齊

語法：

vertical-align: 取值;

說明：

vertical-align屬性取值

屬性值	說明
top	頂部對齊
middle	中部對齊
baseline	基線對齊
bottom	底部對齊

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <style>
        .i1 {
            vertical-align: top;
        }
        .i2 {
            vertical-align: middle;
        }
        .i3 {
            vertical-align: baseline;
        }
        .i4 {
            vertical-align: bottom;
        }
    </style>
</head>
<body>
    <div>
        <span>hello,world</span>
        <img class="i1" src="small.png" alt="">
        <span>hello,world</span>
        <hr>
    </div>
    <div>
        <span>hello,world</span>
        <img class="i2" src="small.png" alt="">
        <span>hello,world</span>
        <hr>
    </div>
    <div>
        <span>hello,world</span>
        <img class="i3" src="small.png" alt="">
        <span>hello,world</span>
        <hr>
    </div>
    <div>
        <span>hello,world</span>
        <img class="i4" src="small.png" alt="">
        <span>hello,world</span>
        <hr>
    </div>
</body>
</html>

8.4 文字環繞

語法：

float: 取值;

說明：

float屬性取值

屬性值	說明
left	元素向左浮動
right	元素向右浮動

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <style>
        img {
            float: left;
        }
    </style>
</head>
<body>
    <img src="small.png" alt="">
    <p>舜發于畎畝之中，傅說舉于版筑之間，膠鬲舉于魚鹽之中，管夷吾舉于士，孫叔敖舉于海，百里奚舉于市。故天將降大任于是人也，必先苦其心志，勞其筋骨，餓其體膚，空乏其身，行拂亂其所為，所以動心忍性，曾益其所不能。</p>
</body>
</html>

9 背景樣式

9.1 背景顏色

語法：

background-color: 顏色值;

說明：

顏色值有兩種表示方式，一種是顏色關鍵字，另外一種是16進制RGB值

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <style>
        div {
            width: 200px;
            height: 100px;
            /* 背景顏色 */
            background-color: burlywood;
        }
    </style>
</head>
<body>
    <div>hello,world</div>
</body>
</html>

9.2 背景圖片

引入背景圖片

語法:

background-image: url(圖片路徑)

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <style>
        div {
            height: 180px;
            width: 180px;
            background-image: url("small.png");
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

背景圖片重復

語法：

background-repeat: 取值;

說明：

background-repeat屬性取值

屬性值	說明
repeat	在水平方向和垂直方向上同時平鋪（默認值）
repeat-x	只在水平方向（x軸）上平鋪
repeat-y	只在垂直方向（y軸）上平鋪
no-repeat	不平鋪

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <style>
        div {
            height: 180px;
            width: 180px;
            background-image: url("small.png");
            background-repeat: repeat-x;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

背景圖片位置

語法：

background-position: 水平距離 垂直距離

通過像素值定圖片位置

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <style>
        div {
            height: 180px;
            width: 180px;
            border: 1px solid red;
            background-image: url("small.png");
            background-repeat: no-repeat;
            background-position: 10px 30px;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

通過關鍵字定位圖片位置

水平方向左left、中center、右right

垂直方向上top、中center、下bottom

通過水平方向、垂直方向組合出9種方式

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <style>
        div {
            height: 180px;
            width: 180px;
            border: 1px solid red;
            background-image: url("small.png");
            background-repeat: no-repeat;
            background-position: center center;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

背景圖片固定

語法：

background-attachment: 取值;

說明：

background-attachment屬性取值

屬性值	說明
scroll	隨元素一起滾動（默認值）
fixed	固定不動

10 超鏈接樣式

語法：

a {}
a:link {}
a:visited {}
a:hover{}
a:active{}

說明：

偽類	說明
a:link	a元素未訪問時的樣式
a:visited	a元素訪問后的樣式
a:hover	鼠標經過a元素時的樣式
a:active	鼠標點擊時的樣式

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <style>
        a {
            text-decoration: none;
        }
        a:hover {
            color: red;
        }
    </style>
</head>
<body>
<a href="#">百度</a>
</body>
</html>

實際開發，一般設置a、a:hover樣式就可以了

11 盒子模型

每一個元素都是由內容區、內邊距、邊框、外邊距組成

屬性	說明
content	內容區，可以是文本或圖片
padding	內邊距，用于定義內容與邊框之間的距離
border	邊框，用于定義元素的邊框
margin	外邊距，用于定義當前元素與其他元素之間的距離

11.1 內容區

語法：

width: 像素值;
height: 像素值;
overflow: 取值;

說明：

overflow屬性值

屬性值	說明
visible	默認值。內容不會被修剪，會呈現在元素框之外。
hidden	內容會被修剪，并且其余內容是不可見的。
scroll	內容會被修剪，但是瀏覽器會顯示滾動條以便查看其余的內容。
auto	如果內容被修剪，則瀏覽器會顯示滾動條以便查看其余的內容。
inherit	規定應該從父元素繼承 overflow 屬性的值。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <style>
        img {
            width: 30px;
            height: 30px;
        }
        p {
            width: 50px;
            height: 50px;
            overflow: hidden;
        }
    </style>
</head>
<body>
<img src="small.png" alt="">
<p>舜發于畎畝之中，傅說舉于版筑之間，膠鬲舉于魚鹽之中，管夷吾舉于士，孫叔敖舉于海，百里奚舉于市。故天將降大任于是人也，必先苦其心志，勞其筋骨，餓其體膚，空乏其身，行拂亂其所為，所以動心忍性，曾益其所不能。</p>
</body>
</html>

如果要給行內元素設置寬高，則需要給元素設置display: inline-block屬性

11.2 內邊距

語法：

padding-top: 像素值;
padding-right: 像素值;
padding-bottom: 像素值;
padding-left: 像素值;

padding: 上下左右像素值;
padding: 上下像素值 左右像素值;
padding: 上像素值 右像素值 下像素值 左像素值;

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <style>
        p {
            border: 1px solid red;
            padding: 10px;
        }
    </style>
</head>
<body>
<p>舜發于畎畝之中，傅說舉于版筑之間，膠鬲舉于魚鹽之中，管夷吾舉于士，孫叔敖舉于海，百里奚舉于市。故天將降大任于是人也，必先苦其心志，勞其筋骨，餓其體膚，空乏其身，行拂亂其所為，所以動心忍性，曾益其所不能。</p>
</body>
</html>

11.3 邊框

邊框知識參考2.6

11.4 外邊距

語法：

margin-top: 像素值;
margin-right: 像素值;
margin-bottom: 像素值;
margin-left: 像素值;

margin: 上下左右像素值;
margin: 上下像素值 左右像素值;
margin: 上像素值 右像素值 下像素值 左像素值;

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <style>
        p {
            border: 1px solid red;
            padding: 10px;
            margin: 10px;
        }
    </style>
</head>
<body>
<p>舜發于畎畝之中，傅說舉于版筑之間，膠鬲舉于魚鹽之中，管夷吾舉于士，孫叔敖舉于海，百里奚舉于市。故天將降大任于是人也，必先苦其心志，勞其筋骨，餓其體膚，空乏其身，行拂亂其所為，所以動心忍性，曾益其所不能。</p>
<p>舜發于畎畝之中，傅說舉于版筑之間，膠鬲舉于魚鹽之中，管夷吾舉于士，孫叔敖舉于海，百里奚舉于市。故天將降大任于是人也，必先苦其心志，勞其筋骨，餓其體膚，空乏其身，行拂亂其所為，所以動心忍性，曾益其所不能。</p>
</body>
</html>

12 浮動布局

正常文檔流就是我們沒有使用浮動或者定位去改變的默認情況，按照從上到下，從左到右順序的元素布局情況。

12.1 定義浮動

語法：

float: 取值

說明：

屬性值	說明
left	元素向左浮動
right	元素向右浮動

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <style>
        #f {
            background-color: beige;
            padding: 10px;
        }
        #s1 {
            background-color: gray;
            float: left;
        }
        #s2 {
            background-color: aqua;
            float: left;
        }
    </style>
</head>
<body>
    <div id="f">
        <div id="s1">box1</div>
        <div id="s2">box2</div>
    </div>
</body>
</html>

12.2 清除浮動

語法：

clear: 取值;

說明：

clear屬性值

屬性值	說明
left	清除左浮動
right	清除右浮動
both	同時清除左浮動和右浮動

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <style>
        #f {
            background-color: beige;
            padding: 10px;
        }
        #s1 {
            background-color: gray;
            float: left;
        }
        #s2 {
            background-color: aqua;
            float: left;
        }
        .clear {
            clear: both;
        }
    </style>
</head>
<body>
    <div id="f">
        <div id="s1">box1</div>
        <div id="s2">box2</div>
        <div class="clear"></div>
    </div>
</body>
</html>

13 定位布局

13.1 固定定位

語法：

position: fixed;
top: 像素值;
bottom: 像素值;
left: 像素值;
right: 像素值;

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <style>
        #s1 {
            position: fixed;
            top: 20px;
            left: 100px;
            color: red;
        }
    </style>
</head>
<body>
    <div id="f">
        <div id="s1">回到頂部</div>
        <div id="s2">
            <p>內容區</p>
            ......
        </div>
    </div>
</body>
</html>

13.2 相對定位

相對定位，指的是該元素的位置是相對于它的原始位置計算而來的

語法：

position: relative;
top: 像素值;
bottom: 像素值;
left: 像素值;
right: 像素值;

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <style>
        #f div {
            width: 100px;
            height: 50px;
            background-color: burlywood;
            margin: 10px;
        }
        .s2 {
            position: relative;
            top: 5px;
            left: 30px;
        }
    </style>
</head>
<body>
    <div id="f">
        <div class="s1">1</div>
        <div class="s2">2</div>
        <div class="s3">3</div>
    </div>
</body>
</html>

13.3 絕對定位

把元素定位到任意你想要的位置，完全脫離文檔流

語法：

position: absolute;
top: 像素值;
bottom: 像素值;
left: 像素值;
right: 像素值;

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <style>
        #f div {
            width: 100px;
            height: 50px;
            background-color: burlywood;
            margin: 10px;
        }
        .s2 {
            position: absolute;
            top: 200px;
            left: 200px;
        }
    </style>
</head>
<body>
    <div id="f">
        <div class="s1">1</div>
        <div class="s2">2</div>
        <div class="s3">3</div>
    </div>
</body>
</html>

13.4 靜態定位

用法：

position: static;

說明：

元素position屬性的默認值是static

在線咨詢

上一篇：臥底地下賭場那位隱秘而偉大的記者跑路了么？不，他在反侵權
下一篇：美國必須交出這些可疑的原始病例數據，讓中方徹查

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商