HTML標籤2
一、表單型別的標籤
1.1input標籤
input標籤在表單中很重要，輸入框，單選鈕，複選框，按鈕，檔案
屬性：[type]
text:普通文字，預設
password：密碼框，內容會隱藏
radio：單選鈕
checkbox：複選框
file:檔案，上傳檔案
button:普通按鈕
submit：提交按鈕
reset：取消按鈕
name:為我們的input起名字，很重要，服務端通過name獲取輸入的值，尤其是radio和checkbox，一組意義相同的input，一定要name相同，比如性別，愛好，當name相同時，radio才可以多選一。
value:input的值，如果寫上程式碼有預設值，如果不寫，在提交時自動獲取。如果input有輸入框，提交時可以自動獲取，如果沒有輸入框，一定要手動自己設定value的值，value=”male”
checked:表示radio或者checkbox是否被選中
maxlength:值的最大長度，多少字元
size:輸入框的寬度
readonly:只讀，值不能修改
disabled:不可以用
readonly和disabled區別：
都是不能修改值。
readonly僅僅是不能修改值，提交的時候還是可以提交。
但是disabeld的，值不能提交。
<form action="server.html" method="post" enctype="multipart/form-data" target="_blank"> 使用者名稱:<input type="text" name="username" maxlength="10" size="30" placeholder="使用者名稱"><br> 密碼:<input type="password" name="password" placeholder="密碼"><br> 性別:<input type="radio" name="sex" value="male" checked>男 <input type="radio" name="sex" value="female">女<br> 愛好:<input type="checkbox" name="hobby" value="basketball" checked>打籃球 <input type="checkbox" name="hobby" value="swimming">游泳 <input type="checkbox" name="hobby" value="jianshen">健身<br> 頭像:<input type="file" name="photo" /><br> <input type="button" value="按鈕"><br> <input type="submit" value="提交"><br /> <input type="reset" value="取消"> </form>
1.2form標籤
是表單元素的父容器。
action:指定提交的路徑（通常是服務端的servlet）
method:提交方式，常用get預設，post，delete，put
get和post的區別：
- 目的不同：get通常用來從服務端獲取資料，post向服務端提交資料
- 提交方式:get放在請求頭，post放在請求體中
- 安全性：get會將資料顯示在位址列，不安全，post不會顯示在位址列，相對安全
- 大小不同：get提交長度限制，255個字元，post長度理論上不受限制
- 資料快取：get快取，post不快取
get在位址列的顯示：路徑?name1=value1&name2=value2&name3=value3....
post提交只有在表單中，method設定為post提交才可以，其他沒有指明的都是get提交。包括直接在位址列輸入地址
enctype:規定在將資料提交到服務端之前進行的編碼
target: 指定提交的路徑在哪開啟，同a標籤的target
共有屬性：class,id
點選提交按鈕，預設就會跳轉action指定的路徑，這個是表單的預設行為。
1.3按鈕標籤
input:非閉合標籤,value屬性設定標籤名字
type:submit提交按鈕
reset重置按鈕
button，普通按鈕
image,相當於提交，不常用
button:閉合的標籤，在開始和結束之間寫標籤名稱
type:submit、reset、button
<form action="server.html" method="get">
<input type="text" name="username" />
<input type="submit" value="提交">
<input type="reset" value="取消">
<input type="button" value="按鈕">
<input type="image" src="img/mi.PNG" />
<button type="button">按鈕</button>
<button type="submit">提交</button>
<button type="reset">重置</button>
</form>1.4textarea文字域
寫多行文字
cols:列
rows:行
readonly:只讀
<textarea cols="30" rows="10" readonly name="desc">afsfdfdadsdfsafsd</textarea>
1.5下拉列表
select:下拉列表
name:用於提交
multiple:可以多選
size：大小
子標籤:option:每一項
value:值
selected:表示該項是否被選中
optgroup:將某些option設定為一組，label為該組起個標題
在裡面寫option，最終提交的一定是option的值
<form>
<select name="city" multiple, size="8">
<option value="bj">北京</option>
<option value="sh">上海</option>
<option value="tj" selected>天津</option>
<optgroup label="河北">
<option value="xt">邢臺</option>
<option value="sjz">石家莊</option>
</optgroup>
</select>
<input type="submit" value="提交" />
</form>1.6fieldset標籤
將表單內的某些元素設定成一個子集合
子標籤：<legend>設定自己和的標題
在fieldset中寫常規的表單標籤。
label標籤：for屬性的值是一個表單元素的id值，兩個就關聯起來了。
<form action="server.html" method="get">
<fieldset>
<legend>個人資料</legend>
<div>
<label for="username"></label>
<input type="text" name="username" placeholder="使用者名稱" id="username" />
<label for="password"></label>
<input type="password" name="password" placeholder="密碼" id="password">
</div>
</fieldset>
其他資訊
</form>二、iframe框架
在當前網頁中引入其他的網頁顯示
src:引入的檔案的路徑
width:寬度
height:高度
scrolling:是否出現滾動條，yes，no，auto
frameborder:框架的邊框0,1 0表示沒有，1表示有
align:和img的align相同,既表示垂直對齊，也表示float。
<span>span</span>
<iframe src="18-fieldset.html" height="120px" scrolling="yes" align="bottom" frameborder="0"></iframe>
<div>div</div>
三、表格標籤table
屬性：border:邊框
width:寬度
height：高度
align:表格相對它父元素的水平對齊方式，left center right
cellspacing:單元格之間的距離
cellpadding:單元格內容與其邊框之間的距離
bgcolor:設定背景顏色
background:背景圖片，背景圖片的優先順序高於背景顏色
子標籤：
tr:行，在table內
width:寬度
height:高度
bgcolor:背景顏色
align:內容的水平對齊方式
valign:內容的垂直對齊方式
td:列，在tr內
width:寬度
height:高度
bgcolor:背景顏色
background:背景圖片
align:水平對齊
valign:垂直對齊方式
colspan:合併列，寫在被合併的td的最左邊的一個
rowspan：合併行，寫在被合併的td的最上面的一個
caption:表格標題，直接寫在table內
thead:表頭，寫在table內，裡面tr,td
tbody:表格的主體，寫在table內，裡面tr,td
tfoot:表格的尾部，寫在table內，裡面tr,td
th:列標題
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<table border="1" align="center" width="500px" height="200px" cellspacing="0" cellpadding="10px"
bgcolor="aquamarine" valign="bottom">
<tr height="200px" bgcolor="antiquewhite" align="right" valign="bottom">
<td width="100px" height="50px" bgcolor="beige" background="../img/2.jpg" align="center" valign="top">
1-1</td>
<td>1-2</td>
<td>1-3</td>
</tr>
<tr>
<td>2-1</td>
<td>2-2</td>
<td>2-3</td>
</tr>
<tr>
<td>3-1</td>
<td>3-2</td>
<td>3-3</td>
</tr>
</table>
<hr>
<table border="1" align="center" width="300px" height="100px">
<caption>成績統計表</caption>
<thead>
<tr>
<th colspan="3">學習成績</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="2">張三</td>
<td>語文</td>
<td>98</td>
</tr>
<tr>
<td>數學</td>
<td>89</td>
</tr>
<tr>
<td rowspan="2">李四</td>
<td>語文</td>
<td>78</td>
</tr>
<tr>
<td>數學</td>
<td>87</td>
</tr>
</tbody>
<tfoot>
<tr>
<th colspan="3">總結</th>
</tr>
</tfoot>
</body>
</html>
四、HTML的語義化
4.1什麼是語義化？？
根據內容的結構化(內容語義化)，選擇合適的標籤（程式碼語義化）便於開發者閱讀和寫出更優雅的程式碼的同時讓瀏覽器的爬蟲和機器很好地解析。
為什麼要語義化(優點)
為了在沒有CSS的情況下，頁面也能呈現出很好地內容結構、程式碼結構，為了裸奔時好看；
使用者體驗：例如title、alt用於解釋名詞或解釋圖片資訊、label標籤的活用；
有利於SEO：和搜尋引擎建立良好溝通，有助於爬蟲抓取更多的有效資訊：爬蟲依賴於標籤來確定上下文和各個關鍵字的權重；
方便其他裝置解析 （如螢幕閱讀器、盲人閱讀器、移動裝置）以意義的方式來渲染網頁；
便於團隊開發和維護，語義化更具可讀性，是下一步吧網頁的重要動向，遵循W3C標準的團隊都遵循這個標準，可以減少差異化。
4.2HTML語義化的注意事項
儘可能少的使用無語義的標籤div和span；
在語義不明顯時，既可以使用div或者p時，儘量用p, 因為p在預設情況下有上下間距，對相容特殊終端有利；
不要使用純樣式標籤，如：b、font、u等，改用css設定。
需要強調的文字，可以包含在strong或者em標籤中（瀏覽器預設樣式，能用CSS指定就不用他們），strong預設樣式是加粗（不要用b），em是斜體（不用i）；
使用表格時，標題要用caption，表頭用thead，主體部分用tbody包圍，尾部用tfoot包圍。表頭和一般單元格要區分開，表頭用th，單元格用td；
表單域要用fieldset標籤包起來，並用legend標籤說明表單的用途；
每個input標籤對應的說明文字都需要使用label標籤，並且通過為input設定id屬性，在lable標籤中設定for=someld來讓說明文字和相對應的input關聯起來。
4.3XHTML-CSS編寫建議
所有的html程式碼小寫；
屬性的值一定要用雙引號(“”)括起來，且一定要有值；
每個標籤都要有開始和結束，且要有正確的層次；
空元素要有結束的tag或於開始的tag後加上“/”;
表現與結構完全分離，程式碼中不涉及任何的表現。
給重要的區塊加上註釋；
給圖片加上alt屬性；