目錄
HTML
HTML：超文字標記語言
文件結構
<!DOCTYPE html> <!-- 文件宣告 --> <html lang="en"> <!-- 語言 --> <head> <!-- 網站配置資訊 --> <meta charset="UTF-8"> <!-- 解碼方式 --> <title>三味書屋</title> <!-- 網站標題 --> </head> <body> <!-- 網站顯示內容 --> <h1>三味書屋歡迎你</h1> </body> </html>
head標籤
1.meta文件字元編碼
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <!-- 設定字元編碼為utf-8 --> <title>我的網頁</title> </head> <body> <h1>這是一個網頁</h1> </body> </html>
2.meta頁面重新整理
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>這是一個標題</title> <meta http-equiv="Refresh" content="5" /> <!-- 網頁重新整理，5秒一次 --> </head> <body> <h1>這句話有七個字</h1> </body> </html>
3.meta關鍵字
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>這是一個標題</title> <!-- 設定關鍵字，用於搜尋引擎收錄和關鍵字收索 --> <meta name="keywords" content="數學，語文，英語" /> </head> <body> <h1>這還是一個栗子</h1> </body> </html>
4.meta設定網站描述資訊
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>三味書屋</title> <!-- 設定網站描述資訊，用於在搜尋引擎搜尋時，顯示網頁基本描述資訊--> <meta name="description" content="我們這什麼書都有"> </head> <body> <h1>這是一個三味書屋</h1> </body> </html>
5.meta觸屏播放
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>這是一個標題</title> <!--支援觸屏縮放--> <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes"> <!--不支觸屏持縮放--> <!--<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">--> </head> <body> <h1 style="width: 1500px;background-color: green;">咕嘰咕嘰！</h1> </body> </html>
6.link圖示
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>三味書屋</title> <link rel="icon" href="ceshi.PNG"> </head> <body> <h1>三味書屋歡迎你</h1> </body> </html>
7.head內部標籤總結
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>三味書屋</title> <meta name="keywords" content="數學，語文，英語，物理"> <meta name="description" content="三味書屋裡面什麼書都有"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes"> <link rel="icon" href="/image/chicken.icon"> </head> <body> <h1 style="width: 1500px;background-color: green;">三味書屋歡迎你</h1> </body> </html>
body標籤
1.h1-h6標籤
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <h1>AAA</h1> <h2>BBB</h2> <h3>CCC</h3> <h4>DDD</h4> <h5>EEE</h5> <h6>FFF</h6> </body> </html>
執行結果如下圖所示
2.br標籤:換行
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <h1>AAA</h1> <h2>BB<br>CC</h2> </body> </html>
執行結果如下圖所示
3.hr標籤:一行橫線
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <h2>AAA<hr>BBB</h2> </body> </html>
執行結果如下圖所示
4.a標籤:超連結標籤
1.不加href屬性，就是普通文字顯示
<a>python</a>
2.加上href屬性，不給href屬性賦值
<a href="">python</a>
3.加上href屬性，並且給href屬性賦值
<a href="http://www.pythonav.com" target="_self">python</a>
要注意:
跳轉對應網址的頁面
未訪問之前是藍色的字型顏色
訪問之後是紫色的字型顏色
target屬性:
_self:在當前標籤頁開啟 href屬性值的那個網址
_blank:在新的標籤頁開啟 href屬性值的那個網址
4.要a標籤效果，但是不重新整理或者跳轉頁面
<!-- 這兩種寫法都可以 --> <a href="#">校花網</a> <a href="javascript:void(0);">校花網</a>
5.設定瞄點
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .c1{ height: 600px; width: 600px; background-color: green; } .c2{ height: 600px; width: 600px; background-color: red; } </style> </head> <body> <div id="top">頂部位置</div> <!-- 設定瞄點 --> <div class="c1"></div> <div class="c2"></div> <a href="#top">回到頂部</a> <!-- 回到設定瞄點的位置 --> </body> </html>
5.img標籤:圖片標籤
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <img src="ceshi.PNG" alt="圖片" title="這是一個圖片" width="100" height="100"> </body> </html>
src屬性:圖片路徑 必須寫
alt屬性:圖片載入失敗或者正在載入時提示的內容
title屬性:滑鼠懸浮時顯示的內容,不是img標籤獨有的
width:設定寬度
height:設定高度
6.div標籤和span標籤
div標籤和span標籤沒有任何的修飾效果
標籤分類:
塊級標籤(行外標籤):獨佔一行,h1-h6\p\br\hr\div\ul\li →塊級標籤能夠包含內聯標籤,和某些塊級標籤
內聯標籤(行內標籤):不獨佔一行,img\a\span →只能包含內聯標籤,不能包含塊級標籤
關於標籤的巢狀:
內斂標籤不能設定高度寬度，它的高度寬度由內容來決定，只能巢狀內斂標籤
7.p標籤:上下有邊距
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <p>李博倫</p> </body> </html>
8.ul標籤和ol標籤:列表標籤
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> 李博倫的愛好 <ul type="none"> <li>抽菸</li> <li>喝酒</li> <li>燙頭</li> </ul> c9h的愛好 <ol type="A" start="2"> <li>學習</li> <li>跑步</li> <li>吃飯</li> </ol> </body> </html>
type屬性：控制列表內容前面的效果的
start屬性：是控制有序列表標籤的起始值的
執行結果如下圖所示
9.dl標籤(瞭解)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <dl> <dt>吉林省</dt> <dd>長春</dd> <dd>四平</dd> <dt>遼寧省</dt> <dd>瀋陽</dd> <dd>大連</dd> </dl> </body> </html>
執行結果如下圖所示
10.table標籤:表格標籤(重點)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <table border="1" cellpadding="10" cellspacing="8"> <thead> <tr> <th>名稱</th> <th>年齡</th> <th>愛好</th> </tr> </thead> <tbody> <tr> <td>李博倫</td> <td>18</td> <td>coc</td> </tr> <tr> <td>c9h</td> <td>23</td> <td>王者</td> </tr> <tr> <td>ph</td> <td>22</td> <td>看書</td> </tr> </tbody> </table> </body> </html>
也可以合併列和合並行
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <table border="1" cellpadding="10" cellspacing="1"> <thead> <tr> <th>名稱</th> <th>年齡</th> <th>愛好</th> </tr> </thead> <tbody> <tr> <td>李博倫</td> <td>18</td> <td>coc</td> </tr> <tr> <td rowspan="2">c9h</td> <!-- 合併行 --> <td colspan="2">國服第一帥</td> <!-- 合併列 --> </tr> <tr> <td>22</td> <td>看書</td> </tr> </tbody> </table> </body> </html>
執行結果如下圖所示
11.form標籤:表單標籤
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <form action="http://127.0.0.1:8001"> </form> </body> </html>
action屬性: 指定提交路徑,提交到哪裡去
form表單作用:form表單標籤會將巢狀在form標籤裡面的輸入框的資料全部提交到指定路徑
12.input標籤:輸入框
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <input type="text" name="username"> <!-- 普通文字輸入框 --> <input type="password" name="password"> <!-- 密文輸入框 --> <input type="submit" value="點選確認"> <!-- 提交按鈕（觸發form表單提交資料的動作） --> <input type="reset"> <!-- 重置按鈕 清空輸入的內容 --> <input type="button" value="走你"> <!-- 普通按鈕（不會觸發form表單提交資料的動作） --> <input type="date"> <!-- 時間日期輸入框 --> <input type="file"> <!-- 檔案選擇框 --> <input type="number"> <!-- 純數字輸入框 --> <!-- 單選框 --> 性別 <input type="radio" name="sex" value="1">男 <input type="radio" name="sex" value="2">女 <!-- 多選框 --> 喜歡的明星 <input type="checkbox" name="hobby" value="1">張三 <input type="checkbox" name="hobby" value="2">李四 <input type="checkbox" name="hobby" value="3">王五 </body> </html>
注意：選擇框寫的時候，儘量將name屬性和value屬性都寫上
執行結果如下圖所示
13.select標籤:下拉框標籤
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <!-- 單選 --> 性別 <select name="sex"> <option value="1">男</option> <option value="2">女</option> </select> <!-- 多選 --> 喜歡的明星 <select name="star" multiple="multiple"> <option value="1">張三</option> <option value="2">李四</option> <option value="3">王五</option> <option value="4">趙六</option> </select> </body> </html>
執行結果如下圖所示
注意:這兩種寫法完全相同
<select name="star" multiple="multiple"> <select name="star" multiple>
14.textarea標籤:多行文字輸入框
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <textarea name="" id="" cols="30" rows="10"></textarea> </body> </html>
執行結果如下圖所示
CSS
CSS:稱為層疊樣式表
CSS樣式引入方式
第一種:head標籤引入
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> /* 選擇器{css屬性名稱:屬性值;css屬性名稱:屬性值} */ div{ width: 200px; height: 200px; background-color: red; } </style> </head> <body> <div>李亞大傻吊</div> </body> </html>
第二種:外部引入CSS檔案
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="ceshi.css"> <!-- href對應的是檔案路徑 --> </head> <body> <div>李亞大傻吊</div> </body> </html>
建立一個ceshi.css檔案
第三種:內聯樣式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <!-- 內聯樣式 --> <div style="background-color: red;height: 100px;width: 200px;">李亞大傻吊</div> </body> </html>
CSS選擇器
1.元素選擇器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> /* 元素選擇器 */ div{ width: 100px; } </style> </head> <body> <div>李亞大傻吊</div> </body> </html>
2.id選擇器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!-- id選擇器 --> <style> #d1{ width: 100px; height: 100px; background-color: green; } </style> </head> <body> <!-- id屬性值不能重複 --> <div id="d1">李亞大傻吊</div> </body> </html>
3.類選擇器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!-- 類選擇器 --> <style> .c1{ width: 100px; height: 100px; background-color: green; } </style> </head> <body> <!-- 類值可以重複 --> <div id="d1" class="c1">李亞大傻吊</div> <div id="d2" class="c2">李亞是豬</div> <div id="d3" class="c1">李亞蠢蛋子</div> </body> </html>
4.屬性選擇器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> /* 屬性查詢 */ [xx]{ width: 100px; height: 100px; background-color: green; } /* 屬性帶屬性值查詢 */ [xx='ss']{ background-color: blue; width: 100px; height: 100px; } </style> </head> <body> <div id="d1" class="c1" xx="ss">李亞是小豬</div> <div id="d2" class="c2" xx="kk">李亞是小狗</div> </body> </html>
5.後代選擇器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> /* 後代選擇器 */ .c1 .c2{ color: darkgrey; } /* 兒子選擇器 */ .c1 > span{ color: antiquewhite; } </style> </head> <body> <div id="d1"> <span class="c2">這是span1</span> </div> <div id="d2" class="c1"> <span class="c2">這是span2</span> <div> <span>這是span4</span> </div> </div> <div id="d3" class="c1"> <span class="c2">這是span3</span> </div> </body> </html>
6.組合選擇器(逗號連線)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> /* 組合選擇器 */ #d1 span,#d3 span{ color: bisque; } </style> </head> <body> <div id="d1"> <span class="c2">這是span1</span> </div> <div id="d2" class="c1"> <span class="c2">這是span2</span> <div> <span>這是span4</span> </div> </div> <div id="d3" class="c1"> <span class="c2">這是span3</span> </div> </body> </html>