一、基本結構<!DOCTYPE html> //設置字元編碼集格式<html> //<head> //網頁頭部 <title></title></head><body> </body></html> 二、文本標記1.加粗 b2.傾斜 i3.下劃線 u4.刪除線 u5.上標 sup6.下標 sub三、 ...
一、基本結構
<!DOCTYPE html> //設置字元編碼集格式
<html> //
<head> //網頁頭部
<title></title>
</head>
<body>
</body>
</html>
二、文本標記
1.加粗 b
2.傾斜 i
3.下劃線 u
4.刪除線 u
5.上標 sup
6.下標 sub
三、引用css樣式表的方式
1.內聯樣式
在元素的開始標簽里，設置一個style屬性，並設置對應的屬性名及屬性值
例：<div style="color:red;"></div>
使用場景：js里，使用js給元素添加樣式
2.內部樣式表
在head標簽裡加上一對style標簽，並且在style標簽設置對應的樣式
<style type="text/css">
樣式規則
</style>
3.外部樣式表
新建一個css樣式表文件，併在文件中設置對應的樣式通過link屬性，將html文件與css文件關聯在一起
四.css語法規範
選擇器{
屬性名：屬性值；
}
元素選擇器-以元素標簽作為選擇器
五、其他元素
1.標題元素hn（n=1~6）
特點：a.從h1到h6文本大小依次減小
b.文本加粗
c.每行文本上下都有距離
d.獨占一行
2.段落元素 p
特點：a.每行文本上下有距離
b.獨占一行
c.一般應用於純文本
註意：不要和其他塊級元素嵌套
3.塊級元素&行級元素
a.塊級元素
預設情況下，獨占一行
div，h1~h6，p
b.行內元素
預設情況下，可以和其他元素在一行內顯示
span，b，++++++++++++++++++++++++++++++，u，s，sup，sub
4.實業字元
1.空格
2.< <
3. >
4.© ©
5.¥ ¥
六、其他常用樣式
/*背景顏色*/
background-color：red；
/*文本尺寸*/
font-size：25px;
/*文本加粗*/
font-weight:bold;
/*文本修飾*/
text-decoration:none/underline;
text-decoration:underline;
/*文本排列*/
/*text-align：left/center/right；
七、圖片
1.圖片的分類
a.jpeg -壓縮比例比較大，圖片大小（小）
b.png -支持透明背景，無損壓縮
c.gif -支持動圖
2.語法 img
必須的屬性 src=“要引用的圖片資源的路徑”；
width/height
註：當只設置寬度或者高度其中的一個屬性時，另一個屬性會等比縮放
3.路徑
a. -絕對路徑
b. -相對路徑
相對於正在編輯的網頁找想要使用的資源
返回上一級 ../
文件夾上的資源 文件夾名稱/圖片名稱
c. -根相對路徑
4.圓角圖片
border-radius：px/%；
直角變圓角
八、超鏈接
1.定義：鏈接又叫超鏈接，允許用戶進行點擊操作完成頁面跳轉
2.語法 <a href=""></a>
3.屬性
必須的屬性href=“跳轉到資源的地址”；
如果沒有href屬性，a就不是鏈接
target 控制新頁面以什麼樣的方式打開
4.特殊用法
href=“#”；預設會有一個返回頂部的效果
5.錨點
a.定義錨點
<div id="#錨點名稱"> </dir>
b.鏈接到錨點
<a href="錨點名稱"></a>
如果需要跳轉到其他頁面的指定位置
<a href="demo.html#錨點名稱"></a>
6.偽類選擇器
給元素添加一些特殊的效果
語法：選擇器:偽類選擇器
7.css鏈接
a.當鏈接沒有被訪問的樣式 :link
b.當鏈接已經被訪問過的樣式 ：visited
c.當滑鼠移動到鏈接上的樣式 ：hover --重點
d.當鏈接被選中時的樣式 ：active
八、列表
1.概念：將一些具有相同或者相似特征的元素進行以整齊的排列
2.分類：有序列表ol，無需列表ul
3.語法：定義列表->書寫列表li
4.屬性：type - 定義列表項標識的樣式
有序列表的取值：1/a/A/i/I
無序列表的取值：circle/square
有序列表獨有的屬性： start -> 取值：阿拉伯數字
5.css列表
list-style-type：none； -使用css的方式去掉列表項標識
6.註意：今後能用無序列表的地方就用無序列表，有序列表儘量少用，不利於seo
九、尺寸
1.常用尺寸單位
a -%
b -px
c -em相對於父元素的尺寸
d -rem相對於根元素的尺寸
2.常用顏色單位
a. -rgb（x，x，x）
x->0~255之間的數字，絕大部分用於js中隨機生成隨機顏色
b. - #rrggbb
6位十六進位數字 1~9 a~f
簡寫： #rgb
c. -英文單詞
3.設置尺寸的元素
a.能夠設置尺寸的屬性
i.所有的塊級元素都能設置尺寸
div，h1~h6，p，ol，ul，li
ii.一些能夠設置尺寸的HTML元素
img，canvas，video
b.不能設置尺寸的屬性
i大部分的行內元素都不不能設置尺寸
span，i，b，u，s，sup，sub
十.浮動
1.語法 float
2.取值 none/left/right
3.概述
a.浮動的元素會脫離文檔流，不占據頁面空間
b.浮動的元素會停靠在包含框的左邊或右邊
c.浮動的元素依然會位於包含框之內
d.如果浮動的元素前已經有了一個已經浮動的元素，那麼他會停靠在這個元素的左邊或右邊
e.浮動是專門用於解決塊級元素在一行顯示的問題
4.清除浮動
目的：解決後續元素受浮動影響的問題
語法：clear
取值：none/left/right/both（常用）；
5.浮動對父元素的影響（父元素為0的問題）
解決方案
a.直接給父元素添加一個高度
b.使用清除浮動的方式
c.讓父元素也浮動起來
d.overflow：hidden； //溢出隱藏（下拉菜單不能用）
十二.過渡
1.語法 transition：過渡屬性 過渡時間 過渡速度函數 過渡延遲；
註意：延遲一般不設置 預設是不延遲（0s）
過渡屬性：只要是帶數值的屬性都可以過渡
all-所有發生變化的屬性都過渡
過渡時間：.3s/.4s是用戶體驗最好的過渡時間
過渡速度函數： linear -勻速的
2.常用方法：all/.3/linear
十三.框模型
1.內邊距
a.語法：padding：n px；
b.定義：圍繞在元素周圍的空白領域
c.取值
padding：值1；
值1：上下左右四個方向的外邊距
padding：值1 值2：
值1.上下外邊距
值2.左右方向外邊距
padding：值1 值2 值3
值1：上外邊距
值2：左右外邊距
值3：下外邊距
padding：值1 值2 值3 值4；
d-單邊定義
padding-方向：n px；
方向：top/right/bottom/left
2.外邊距
a.語法：margin：n px；
b.定義：圍繞在元素周圍的空白領域
c.取值
margin：值1；
值1：上下左右四個方向的外邊距
margin：值1 值2：
值1.上下外邊距
值2.左右方向外邊距
margin：值1 值2 值3
值1：上外邊距
值2：左右外邊距
值3：下外邊距
margin：值1 值2 值3 值4；
margin：auto；
註意：auto只能控制左右方向自動居中（上下無效）
d-單邊定義
margin-方向：n px；
方向：top/right/bottom/left
3.特殊
a.元素實際所占大小計算方式
元素實際所占寬度=元素內容寬度+左右內邊距+左右邊框+左右外邊距
元素實際所占高度=元素內容高度+上下內邊距+上邊邊框+上下外邊距
b.改變元素所占大小計算方式
box-sizing：border-box
使我們設置的內容的大小包含元素內容、內邊距以及邊框的大小
十四、邊框
1.語法border
2.簡寫方式 border：邊框寬度 邊框樣式 邊框顏色；
樣式：solid -實線的
3.單邊定義
border-方向：xpx
4.特殊用法
使用邊框實現三角形
設置元素寬度、高度為0，並只設置其中一個邊的邊框
5.特殊的顏色
透明色 transparent
6.邊框倒角
直角變圓角
border-radius：px/%；
邊框倒角的單邊定義
border-上下方向-左右方向-radius：px/%；
十四.背景
1.背景顏色 background-color：合法顏色值；
2.背景圖像 background-image：url（“要引用圖像的路徑”）；
註意：如果背景圖像和背景顏色同事設置的話背景圖像會壓在背景顏色的上邊
3.背景平鋪 background-repeat：none/repeat-x/repeat-y/no-repeat；
4.背景尺寸 background-size：w h； ->px/%
5.背景圖像定位 background-position：x y；
x-x方向偏移量
取正：背景圖像向右移動
取負：背景圖像向左移動
x-y方向偏移量
取正-背景圖像向下移動
取負-背景圖像向上移動
配合精靈圖使用 ->圖像拼合技術
將多個小圖放在一張大圖中顯示
如何顯示精靈圖中的某些小圖
a.創建一個和想要顯示小圖一樣大的元素
b.將精靈圖作為背景圖像引入元素中，並使用背景圖像定位的方式移動背景圖像，以便顯示要顯示的小圖
註意：背景圖像定位的取值一定是<=0的
6.背景簡寫方式
background：背景顏色 背景圖像 背景平鋪 背景圖像定位；
十五、定位
1.相對定位
語法：a.相對定位的元素師不脫離文檔流
b.相對於自身的位置進行偏移
c.配合偏移屬性來使用（top/right/bottom/left）
d.絕大部分會配合絕對定位使用
使用場合：用於網頁元素位置的微調
2.絕對定位
語法：position：absolute；
特點：a脫離文檔流，不占據頁面空間
b.配合偏移屬性使用
c.相對於最近的已經定位的祖先元素進行定位
d.如果沒有已經定位的祖先元素，那麼它會相對於最初的包含框進行定位
e.使用絕對定位來完成元素位置的初始化
使用場合：下拉菜單，網頁佈局
3.固定定位
語法：position：fixed；
特點： a.脫離文檔流，不占據頁面空間
b.配合偏移屬性使用
c.相對於最初的包含框進行定位
使用場合：返回頂部，吸頂燈
十六.表格
table -定義表格
tr -定義行
td -定義列
1.table屬性
a.align="left/right/center" -控制制整個表格在頁面中的水平位置
b.bgcolor-整個表格的背景顏色
c.border=“n” -控製表格邊框寬度
d.width -整個表格的寬度
e.height -整個表格的高度
f.cellpadding-表格內邊距
g.cellspacing-表格外邊距
2.tr的屬性
a.align -控制當前行中內容的水平位置
b.bgcolor -控制當前行的背景顏色
3.td的屬性
a-align -控制當前單元格的內容的水平位置
b.bgcolor -控制當前單元格的背景顏色
c.width -設置當前列的寬度
d.colspan -跨列
從當前單元格位置向右橫向的合併掉幾個單元格，並且要把被合併的單元格刪掉
e.rowspan -跨列
從當前單元格位置向下縱向的合併掉幾個單元格，並且要把被合併掉的單元格刪掉
