HTML整理02
dl 定義列表(瞭解)
1 <dl>
2 <dt>關於小米</dt>
3 <dd>瞭解小米</dd>
4 <dd>加入小米</dd>
5 <dd>收購小米</dd>
6 </dl>
結果：
br 換行標籤
<br>
pre 原格式輸出，通常用於輸出程式碼
1 <pre>
2 憫農二首
3 —李紳
h5的語法比較鬆散，體現在：
1. 單標籤可以不用/結束
<br> 和 <br /> 一毛一樣
2. 屬性值外面可以是單引號或者雙引號
<meta charset="utf-8"> 推薦
<meta charset='utf-8'>
<meta charset=utf-8>
3. 標籤名不區分大小寫
<br> <BR>
a 超連結標籤
屬性：
href 決定連結的跳轉地址
1 <a
target 規定在何處開啟文件
1 <a href="http://www.baidu.com" target="_blank">李澤龍</a>
值：
_blank 在新標籤中開啟
_self 在本頁面中開啟（預設值）
錨點
a標籤做錨點，加name屬性，值自己取
1 <a id="pic">圖片</a>
2 <a name="pic">圖片</a>
效果一樣
其他標籤做錨點，加id屬性，值自己取
1
跳轉的時候，a標籤的href值需要和錨點的值相對應，
例：
1 <a name="one"></a> <a href="#one">去吧，皮卡丘</a>
2 <h1 id="two"></h1> <a href="#two">去吧，皮卡丘</a>
路徑
相對路徑
相對於當前檔案
./ 當前目錄
../ 上一級目錄
絕對路徑
從協議開始
http
https
file
ftp
ssh
img 圖片標籤(單標籤)
屬性
src 指定圖片的路徑
1 <!-- 絕對地址 --> 2 1 <img src="https://www.baidu.com/img/bd_logo1.png"> 3 2 <img src="file://E:/desktop/img/5f2.jpg"> 4 <!-- 相對地址 --> 5 <img src="./1.jpg">
alt 指定圖片的替代文字
1 <img src="./1.jpg" alt="亞洲4大邪術">
align 設定圖片的位置
值： top/bottom/left/right
1 <img src="https://www.baidu.com/img/bd_logo1.png" align="top">
width/height 設定圖片的寬高
1 <img src="../pre/1.jpg" width="100">
usemap 定義影象對映，值必須和map標籤的name屬性的值對應
例：
1 <map name="one"></map> <img usemap="#one">
map 標籤，定義影象對映
name屬性的值，一定要和img標籤的usemap屬性的值相對應
例：
1 <map name="one"></map> <img usemap="#one">
area 將圖片劃分為指定形狀的區域(單標籤)
屬性：
shape 指定區域的形狀
值：
rect 矩形，左上角和右下角的座標
circ 圓形，圓心座標和半徑
poly 多邊形，可以給任意多個點的座標
coords 指定區域的座標
href 指定跳轉的地址
target 開啟方式
1 <map name="biu"> 2 <!-- 矩形 --> 3 <area shape="rect" coords="0,0,100,70" href="http://www.lingfeng.com" /> 4 <!-- 圓形 --> 5 <area shape="circ" coords="50,105,35" href="http://www.wangru.com" target="_blank" /> 6 <!-- 多邊形 --> 7 <area shape="poly" coords="0,0,50,50,80,100,20,80,0,150,100,350" href=""> 8 </map>
audio 音訊標籤 (h5新增的標籤)
屬性
src 指定音訊檔案的路徑
controls 顯示播放控制元件
autoplay 自動播放
loop 迴圈播放
muted 靜音
1 <audio src="./music2.mp3" autoplay loop controls muted>您的破瀏覽器不支援音訊標籤</audio>
video 視訊標籤 (h5新增的標籤)
屬性
src 指定視訊檔案的路徑
controls 顯示播放控制元件
autoplay 自動播放
loop 迴圈播放
muted 靜音
width/height 設定視訊的寬高
poster 設定視訊的封面
1 <video src="mv.mp4" width="500" poster="./6.jpg" controls>您的破瀏覽器該升級了</video>
source 標籤
用於指定音視訊資源，好處是可以指定多個資源，瀏覽器找到能播放的資源後就停止了！
1 <video width="500" controls> 2 <source src="../abc.mp4" /> 3 <!-- 黃鶴：找到‘黃鶴’之後就停止了 --> 4 <source src="./mv.mp4" /> 5 <!-- 老羅 --> 6 <source src="./video.mp4" /> 7 您的破瀏覽器該升級了 8 </video>
table的標籤
caption 定義表格的標題
1 <caption><h2>資訊表</h2></caption>
table 定義表格
屬性：
border 設定表格的邊框粗細
width 設定表格的寬度
height 設定表格的高度（通常不設定）
cellspacing 設定單元格之間的間距，通常設定為0
cellpadding 設定文字和邊框之間的距離
align 設定表格的水平位置
值： left/center/right 左/中/右
bgcolor 設定背景顏色
background 設定背景圖片
bordercolor 設定邊框的顏色
1 <table border="1" align="center" width="400" cellspacing="0" cellpadding="10" bgcolor="tan" background="../html02/6.jpg" bordercolor="red"></table>
tr 定義表格的行
屬性：
height 設定本行的高度
bgcolor 設定背景顏色
align 設定本行文字的位置
值： left/center/right 左/中/右
valign 設定本行文字的垂直位置
值： top/middle/bottom 上/中/下
th 定義表頭單元格
會加粗並居中文字
td 定義普通單元格
屬性：
height 設定單元格高度(會影響整行)，有衝突時，以大的為準
width 設定單元格的寬度(會影響整列)，有衝突時，以大的為準
bgcolor 設定背景顏色
align 設定本行文字的位置
值： left/center/right 左/中/右
valign 設定本行文字的垂直位置
值： top/middle/bottom 上/中/下
colspan 規定單元格橫跨的列數
rowspan 規定單元格橫跨的行數
1 <tr height="50"> 2 <th>學號</th> 3 <th>姓名</th> 4 <th>性別</th> 5 </tr> 6 <tr align="center" bgcolor="deeppink"> 7 <td height="50" width="400">1</td> 8 <td>宇康又睡著了</td> 9 <td width="400" rowspan="2">睡神</td> 10 </tr> 11 <tr height="100" valign="top"> 12 <td>2</td> 13 <td width="800">在下黃飛鴻</td> 14 <!-- <td width="400">告辭</td> --> 15 </tr> 16 <tr> 17 <td colspan="3">兩大高手，高手過招，招招致命！</td> 18 </tr> 19 <!-- 20 tr的屬性： 21 height 高度 22 bgcolor 行的背景顏色 23 align 文字的位置 24 valign 垂直位置 25 -->
thead/tfoot/tbody
1. 這3個標籤，要麼不加，要麼3個要同時加
2. 出現的順序是：thead/tfoot/tbody
bordercolor="red" 相當於 border:1px solid red；w3c規定css負責頁面樣式，HTML裡面很多屬性都不推薦使用了
顏色單詞：
red/green/blue/yellow/black/white/orange/tan/pink/purple/gray
-->
form 表單： 用於收集使用者資料
屬性：
action 決定表單的提交地址，通常會寫成自己的PHP檔案
method 決定表單的提交方式
值：get(預設)/post
1 <form action="http://www.baidu.com/s" method="get"> 2 <input name="wd" /> 3 <button>百度一下</button> 4 </form>
input標籤 定義一個輸入框
屬性：
name 決定輸入框的名字，方便後臺拿取使用者輸入的值
value 決定輸入框的值
type 決定輸入框的型別
值：
text 預設值，普通的文字輸入框
password 密碼輸入框
radio 單選框
要想單選，name屬性的值必須一致
checkbox 多選框
要想獲取多個值，name屬性的值需要加[]
<form action="./1.php" method="post"> 使用者名稱：<input name="user" /><br> 密碼：<input type="password" name="pwd" /><br> 性別： <input value="1" name="sex" type="radio" />男 <input value="0" name="sex" type="radio" />女 <input value="2" name="sex" type="radio" />妖 <br> 美女： <input value="1" name="mn[]" type="checkbox" />鳳姐 <input value="2" name="mn[]" type="checkbox" />芙蓉姐姐 <input value="3" name="mn[]" type="checkbox" />嘟嘟姐 <input value="4" name="mn[]" type="checkbox" />號地塊 <input value="5" name="mn[]" type="checkbox" />合格姐 <br> <button>提交到./1.php</button> </form>