前端基礎之html：day02
序言：
拖著疲憊的身軀，真的不想動，但是看著蹭蹭上漲的房價，彷彿冥冥之中又有了動力，加油吧，年輕人。
正文：
1.超連結
超連結可以允許我們從當前文件連結到其他任意文件（或稱為其他資源），也可以連結到文件的某個特定的位置。
<a href="http://www.baidu.com" target="_blank">百度一下</a>
href：將要跳轉的目標地址，其取值如下：
1>id值 主要用於錨點的跳轉
2>url 主要是頁面的跳轉連結
3>email 如：<a href="mailto:
target: 規定連結頁面的呈現方式，其取值如下：
_self：在當前頁面開啟連結頁面 _blank：重新開啟一個選項卡載入連結頁面
_parent:在父級頁面載入連結頁面 _top:在頂級頁面載入連結頁面
注：_parent和_top兩種方式主要用於當前頁面中引入了框架頁面，如頁面中用了<iframe>標籤
2.表格
<table align="center" border="1px" cellpadding="4px" cellspacing="0" width="400px">
<thead></thead>
<caption>學生資訊表</caption>
<tbody>
<tr>
<th>學號</th>
<th>姓名</th>
<th>年齡</th>
<th>性別</th>
</tr>
<tr>
<td>1001</td>
<td>張三</td>
<td>23</td>
<td>男</td>
</tr>
<tr>
<td>1002</td>
<td>李四</td>
<td>22</td>
<td>女</td>
</tr>
</tbody>
<tfoot></tfoot>
</table>表格通常以上述的程式碼實現，其中有<table>，<table>中包含<thead>、<tbody>、<tfoot>、<caption>
<thead>：表格頭 <tbody>：表格體 <tfoot>：表格尾
<caption>：表示表格的標題資訊
<tr>：表格的行，<tr>中可以包含多個<th>、<td>
<th>：表格的表頭單元格
<td>：表格的資料單元格
align：設定表格呈現的位置，取值有left、center、right
border:設定表格單元格邊框的寬度
cellpadding:設定內容與邊框之間的距離
cellspacing:設定邊框與邊框之間的距離
特殊表格中有行的合併與列的合併：
行合併：rowspan 列合併：colspan
3.特殊標籤：
pre:以文字的預設樣式顯示
hr:文字分割線
br:換行
sub:下標 如：log<sub>2</sub>4 效果：
sup:上標 如：10<sup>2</sup> 效果：
4.表單
什麼是form?
form表單主要用於使用者與web應用程式進行資料的互動，from通常由一個或多個表單元素組成，from表單的一些屬性如下：
action:表單的提交位置
method:瀏覽器用來提交表單的方式
get:通常用來提交一個輕量級的資料，表單中記錄的資料將會拼接起來顯示在目標位址列中
post:通常用來提交一個重量級的資料，表單中的資料會被封裝在請求體中
name:設定表單的名稱
target:瀏覽器在提交表單後在哪裡顯示迴應
_self _blank _top _parent
5.表單控制元件
input
type:
text:單行文字框
password:密碼框
checkbox：多選框
name值可以一致，可以不一致
<input type="checkbox" name="name0" value="1">
<input type="checkbox" name="name1" value="2">
<input type="checkbox" name="name2" value="3">
name=1&name=2&name=3
name0=1&name1=2&name2=3
注：屬性name的屬性值作為key,屬性value的屬性值作為value，以key=value的形式出現在位址列中。
（初學者不太容易理解的地方）
radio:name必須一致
checked：預設選中
file:上傳檔案
submit:提交按鈕
value設定按鈕名稱
reset：重置按鈕
image：src alt
button:普通按鈕
hidden:隱藏域
value: 按鈕：給按鈕設定名稱
輸入框：設定當前控制元件預設值
disabled： 禁用當前控制元件
size: 控制當前文字框的寬度
maxlength:控制使用者所輸入的字元個數
filedset
legend：設定當前模組的標題
label標籤：
將文字和控制元件進行繫結
1> <label>
籃球： <input type="radio">
</label>
2> <label for="one">籃球：</label>
<input type="radio" id="one">
6.select 下拉元件
<select name="" id="">
<option value=""></option>
<option value=""></option>
<option value=""></option>
</select>
給select設定name屬性
屬性值為
1.option有value屬性時，name屬性值為value的屬性值
2.option沒有value屬性時，name的屬性值為option元素的內容
<select name="" id="">
<optgroup label="標題">
<option value="">分組元素</option>
<option value=""></option>
<option value=""></option>
</optgroup>
</select>
select ：
size:設定下拉列表每次顯示的列表選項(option)個數
multiple：
當前列表是否可以多選
按住ctrl鍵進行多選
布林型別
size，multiple：只要使用了其中的任意一個，就改變了下拉列表的預設樣式；
disabled：禁用整個下拉列表
option:
disabled:禁用某一個下拉元素
7.多行文字框
<textarea name="" id="" cols="30" rows="10"></textarea>
cols:列數
rows:行數
wrap：設定當前文字框是否可以換行
off：不可以換行
hard：將換行元素傳遞給伺服器
soft：不將換行元素傳遞給伺服器
readonly：
只讀屬性
布林型別
8.滾動標籤
<marquee behavior="" direction=""></marquee>
behavior：
當前元素滾動方式
scroll：不停滾動
slide:只滾動一次
alternate:來回滾動
direction：
當前元素的滾動方向
up:從下向上滾動
down:從上向下滾動
left：從右向左滾動
right:從左向右滾動
width/height:當前滾動的區域大小
bgcolor:當前滾動區域的背景顏色
scrolldelay:滾動延遲時間
單位：毫秒 1000ms-->1s
scrollamount:滾動速度
單位：px
loop：滾動次數
-1：無限迴圈
9.html5中的新增的表單元素
progress
進度條
min：進度條的最小值
max:進度條的最大值
value:當前進度條的當前值
meter：
磁碟使用量
min/max:設定當前meter的最小值和最大值
value：當前meter標籤的所在值
low：設定當前meter標籤的最下限的值
high：設定當前meter標籤的最上限的值
optimum：當前meter最佳值
datalist：
資料列表，通常配合單行文字框來使用
城市：<input type="text" list="one">
<datalist id="one">
<option value="">北京</option>
<option value="">上海</option>
<option value="">廣州</option>
</datalist>
optgroup:對選項進行分組顯示
<select name="" id="">
<optgroup label="北京">
<option value="">11</option>
<option value="">22</option>
<option value="">33</option>
</optgroup>
</select>
10.新增的表單屬性
type：
number：當前當行文字行只能輸入數字
min/max：限制使用者輸入的最大和最小值
value:預設值
step：步長，整數值
email:電子郵箱
url:匹配一個url,如：http://www.baidu.com
color:呼叫本地的拾色器
tel: 電話
search:搜尋框
總結：總的來說表單的知識比較重要，應該深入理解表單的傳值規則與方式。