HTML5
第一個(gè)案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>第一個(gè)網(wǎng)頁</title>
</head>
<body>
<h1>你好囱井，世界缔刹！</h1>
</body>
</html>
標(biāo)簽
meta 標(biāo)簽
作用：設(shè)置網(wǎng)頁的基本信息
charset屬性：用來設(shè)置網(wǎng)頁編碼格式
例子：
<meta charset="UTF-8">
標(biāo)簽分類
- 根據(jù)有無閉合標(biāo)簽桶至，可分為
單標(biāo)簽和雙標(biāo)簽
單標(biāo)簽：<meta> <link> <img>
雙標(biāo)簽：<html><body> <div> <span>
- 根據(jù)頁面渲染結(jié)果
可分為塊標(biāo)簽和行標(biāo)簽
標(biāo)簽
標(biāo)簽（別稱 元素 盒子）勋拟，承載所有的文本信息 ，都必須寫在雙標(biāo)簽里面。
div標(biāo)簽
塊標(biāo)簽：div
特性：
獨(dú)占一行，每個(gè)塊標(biāo)簽都會導(dǎo)致文本流的換行
可以設(shè)置寬高
不設(shè)置高度時(shí)：高度由內(nèi)容撐開
不設(shè)置寬度：寬度由父盒子寬度決定
- 可以嵌套塊標(biāo)簽和行標(biāo)簽
標(biāo)簽之間的嵌套關(guān)系
我們擬人化的稱之為父子關(guān)系
例子：
<div> => 父標(biāo)簽
<div></div> => 子標(biāo)簽
</div>
span 標(biāo)簽
- 可以在一行之間排列
但是 如果超出父盒子的寬度 則會換行
（如果是單個(gè)行標(biāo)簽超出寬度 此情況不換行）
不能設(shè)置寬高 寬高由內(nèi)容撐開
不推薦行標(biāo)簽嵌套塊標(biāo)簽
h標(biāo)簽
作用：通常用來寫大小標(biāo)題
用法：<h1>一級標(biāo)題</h1>
h1~h6標(biāo)簽
h1標(biāo)簽 通常一個(gè)頁面只能存在一個(gè)h1標(biāo)簽
通常h1標(biāo)簽用來承載網(wǎng)站名或者logo
如果網(wǎng)站logo出現(xiàn)多個(gè)地方
只給頂部的logo加上h1標(biāo)簽
hr
作用：生成一條線
img
src：用來設(shè)置圖片路徑
alt: 當(dāng)圖片加載失敗時(shí)的提示信息
特性：
單標(biāo)簽
行元素
注意：
自帶width height屬性
寫數(shù)值時(shí)直接寫數(shù)值不用帶單位
css的優(yōu)先級 高于 img 標(biāo)簽中 width 和 height
CSS
三種引入方式
行間樣式
定義： 通過CSS屬性來寫css代碼
例子：
<div style="width: 200px;height: 200px;background: yeelow;">d1</div>
優(yōu)點(diǎn)：
優(yōu)先級高
方便
缺點(diǎn)
- 頁面雜亂琉历，不利維護(hù)
內(nèi)聯(lián)樣式
定義： 將CSS代碼寫在head標(biāo)簽里面的style標(biāo)簽中。
例子
<head>
div{
width: 200px;
height: 200px;
}
</head>
<body>
<div></div>
</body>
優(yōu)點(diǎn)
可復(fù)用性強(qiáng)
代碼整潔
利于維護(hù)
缺點(diǎn)
- 代碼行數(shù)太多
外聯(lián)樣式
使用方法： 在外部創(chuàng)建一個(gè)css文件,并在html中 head 標(biāo)簽內(nèi)使用link標(biāo)簽引入.
<!-- 創(chuàng)建文件 style.css -->
div{
width:300px;
height:300px;
background:red;
}
<!-- head中引入 -->
<link rel="stylesheet" href="./style.css">
優(yōu)點(diǎn)
邏輯清晰
頁面整潔
易于維護(hù)
可復(fù)用性高
缺點(diǎn)
- 增大了項(xiàng)目所占內(nèi)存
優(yōu)先級
行間樣式>內(nèi)聯(lián)樣式>外聯(lián)樣式
注意
大多數(shù)項(xiàng)目都使用外聯(lián)樣式
CSS選擇器
簡單選擇器
| 選擇器 | 解釋 | 注意 | 例子 | ||
|---|---|---|---|---|---|
| 標(biāo)簽選擇器 | 直接在標(biāo)簽中選擇標(biāo)簽名的方式選擇具體標(biāo)簽 | 無 | 使用標(biāo)簽名<style>div{}</style> | ||
| 類選擇器 | 當(dāng)同種標(biāo)簽過多時(shí)水醋，我們可以使用 標(biāo)簽中class屬性旗笔，給標(biāo)簽起名字，然后再使用 .類名 的方式選擇具體的標(biāo)簽拄踪，并編寫樣式 | 一個(gè)標(biāo)簽可以有多個(gè)類名蝇恶，每個(gè)類名以空格隔開，類名可以重復(fù)使用 | 使用 . 類名<style>.d1{}</style> | ||
| id選擇器 | id選擇器需要在標(biāo)簽內(nèi)使用id這個(gè)屬性來設(shè)置id名然后在style標(biāo)簽中使用#id名的形式選擇具體簽 | 類具有可重復(fù)性惶桐，整個(gè)頁面中id不可以重復(fù)通常情況下一個(gè)標(biāo)簽只能有一個(gè)id | 使用 #id<style>#first{}</style> | ||
| 通配符選擇器 | 使用 * 可以為所有元素上設(shè)置樣式 | 使用 * <style>{background: red;}</style> | |||
| 分組選擇器 | 分組選擇器選取所有具有相同樣式定義的 HTML 元素撮弧。 | 無 | 使用 , 隔開 h1, h2, p{text-align: center;color: red;} |
復(fù)合選擇器
| 選擇器 | 解釋 | 注意 | 例子 |
|---|---|---|---|
| 后代選擇器 | h1 em 選擇器可以解釋為 作為 h1 元素后代的任何 em 元素 | 使用 空格 | h1 em |
| 子元素選擇器 | 如果您不希望選擇任意的后代元素，而是希望縮小范圍姚糊，只選擇某個(gè)元素的子元素 | 使用 > | .f1>.f2>.f3{} |
示例代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>
hello
</title>
<STYLE>
.f1{
width: 200px;
height: 200px;
background: gray;
}
.f1 div{
width: 50px;
height: 50px;
background: green;
}
/* div是選擇f1所有的標(biāo)簽* */
.f1 .f2{
width: 50px;
height: 50px;
background: rgb(96, 0, 96);
}
.f1 .f2 .f3{
width: 10px;
height: 10px;
background: yellow;
}
.f1>.f2>.f3{
width: 10px;
height: 10px;
background: yellow;
}
</STYLE>
<body>
<div class="f1">
<div class="f2">
<div class="f3">
</div>
</div>
<div class="f3">
</div>
</div>
</body>
</html>
優(yōu)先等級
選擇器權(quán)值
| 選擇器 | 權(quán)值 |
|---|---|
| 內(nèi)聯(lián)樣式 | 1000 |
| id選擇器 | 100 |
| 類選擇想虎、屬性選擇器、結(jié)構(gòu)偽類選擇器 | 10 |
| 標(biāo)簽選擇器叛拷、偽元素選擇器 | 1 |
| 通配符選擇器舌厨、繼承 | 0 |
選擇器優(yōu)先等級
style（行內(nèi)樣式：1000） > id（ID選擇器：100） > class（類選擇器：10） > 標(biāo)簽選擇器（假設(shè)級別為1）
例如以下選擇器的優(yōu)先級從前到后依次為：
style（1000）>#list #box（100+100=200）> #list .box div span（100+10+1+1=112） > .list .box p（10+10+1=21）> .list span（10+1=11）> p:last-child（1）
注意
!important聲明的樣式的優(yōu)先級最高；
如果優(yōu)先級相同忿薇，則最后出現(xiàn)的樣式生效裙椭；
繼承得到的樣式的優(yōu)先級最低；
通用選擇器（*）署浩、子選擇器（>）和相鄰?fù)x擇器（+）并不在這四個(gè)等級中揉燃，所以它們的權(quán)值都為 0 ；
樣式表的來源不同時(shí)筋栋，優(yōu)先級順序?yàn)椋簝?nèi)聯(lián)樣式 > 內(nèi)部樣式 > 外部樣式 > 瀏覽器用戶自定義樣式 > 瀏覽器默認(rèn)樣式炊汤。
