本文將繼續(xù)上文接著介紹一些HTML常用標(biāo)簽
1:HTML全局屬性
在介紹常用常見的HTML標(biāo)簽之前，先以最簡單的方式介紹一下HTML當(dāng)中的全局屬性。
accesskey
accesskey屬性規(guī)定激活元素的快捷鍵class
class屬性規(guī)定元素的類名contenteditable
contenteditable弊知。當(dāng)contenteditable 屬性的值設(shè)置為true時晤柄，就可以使元素在頁面中變成可編輯的狀態(tài) 拦焚。例如：
<div contenteditable="true">
This text can be edited by the user.
</div>
在設(shè)置了 div的contenteditable屬性值為true后怜奖，div標(biāo)簽內(nèi)的內(nèi)容 就可以在頁面進入可編輯的狀態(tài)了浑测。
-
dir
dir屬性規(guī)定元素中內(nèi)容的文本的方向翅阵。如：<div dir="rtl">哈哈哈</div>rtl 的含義是right to left 該元素出現(xiàn)的位置在頁面的右邊 -
draggable
規(guī)定在拖動被拖動數(shù)據(jù)時是否進行復(fù)制歪玲、移動或鏈接。 -
hidden
規(guī)定元素仍未或不再相關(guān)掷匠。 -
id
規(guī)定元素的唯一的id（按照標(biāo)準(zhǔn)定義滥崩，每個元素應(yīng)該只有一個id且不重復(fù)） -
lang
規(guī)定元素內(nèi)容的語言。如<html lang="en">或者是<html lang=zh_Hans>兩者的區(qū)別是lang="en"在某些瀏覽器打開時讹语，會提示是否進行翻譯钙皮。 -
spellcheck
規(guī)定是否對元素進行拼寫和語法檢查。 -
style
規(guī)定元素的行內(nèi)CSS樣式。 -
tabindex
規(guī)定元素的tab鍵的次序短条。 -
title
規(guī)定有關(guān)元素的額外信息导匣。 -
translate
規(guī)定是否應(yīng)該翻譯元素的內(nèi)容。
HTML全局屬性的含義就是這些屬性對任一HTML元素
2:table標(biāo)簽
HTML中的table標(biāo)簽作用是將數(shù)據(jù)信息以二維表格的形式在頁面上展現(xiàn)出來茸时。HTML的table標(biāo)簽常常被用在頁面布局中贡定，但是這種用法在HTML4以后就不再被推薦使用了，而且table這個標(biāo)簽設(shè)計的初衷也不是用來進行頁面布局的可都。table標(biāo)簽涉及到很多屬性缓待，這些屬性現(xiàn)在都可以使用CSS樣式來進行控制，比如align屬性渠牲，bgcolor屬性旋炒，border屬性，cellpadding,cellspacing签杈，frame等等瘫镇，這些屬性，在MDN上全部都是不再被推薦使用的屬性芹壕，即它們都可以通過CSS樣式來進行更好更合理的控制汇四。而且學(xué)習(xí)這些屬性也相當(dāng)于浪費時間，所以踢涌，table標(biāo)簽 將主要介紹其子標(biāo)簽以及簡單的應(yīng)用為主通孽。
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Table學(xué)習(xí)</title>
<style>
table{
border-collapse: collapse;
}
</style>
</head>
<body>
<table border="1">
<caption>課程表</caption>
<colgroup>
<col width="80px">
<col width="80px">
<col width="80px">
<col width="80px">
<col width="80px">
</colgroup>
<!--thead-->
<thead>
<tr>
<th>星期一</th>
<th>星期二</th>
<th>星期三</th>
<th>星期四</th>
<th>星期五</th>
</tr>
</thead>
<!--tbody-->
<tbody>
<tr>
<td>語文</td>
<td>數(shù)學(xué)</td>
<td>英語</td>
<td>計算機</td>
<td>美術(shù)</td>
</tr>
<tr>
<td>語文</td>
<td>數(shù)學(xué)</td>
<td>英語</td>
<td>計算機</td>
<td>美術(shù)</td>
</tr>
<tr>
<td>語文</td>
<td>數(shù)學(xué)</td>
<td>英語</td>
<td>計算機</td>
<td>美術(shù)</td>
</tr>
</tbody>
<!--tfoot-->
<tfoot>
<tr>
<td>休息</td>
<td>休息</td>
<td>休息</td>
<td>休息</td>
<td>休息</td>
</tr>
</tfoot>
</table>
</body>
</html>
上面的例子，涵蓋了我們暫時需要了解的有關(guān)于table標(biāo)簽的用法睁壁。首先來看幾個標(biāo)簽背苦。
- caption 標(biāo)簽
<caption></caption>caption 標(biāo)簽是表格的標(biāo)題，它通常作為table標(biāo)簽之后的第一個子元素出現(xiàn)潘明。在沒有指定任何CSS樣式的前提下行剂，標(biāo)題會出現(xiàn)在表格上方并相對于表格寬度居中顯示。 - thead標(biāo)簽钳降，tbody標(biāo)簽及tfoot標(biāo)簽
這三個標(biāo)簽是為table表格內(nèi)容進行結(jié)構(gòu)劃分的標(biāo)簽厚宰，可以就語意對三個標(biāo)簽進行理解，thead即是 表格頭部的結(jié)構(gòu)遂填，tbody是表格主體內(nèi)容的結(jié)構(gòu)铲觉，tfoot則是表格尾部的結(jié)構(gòu)。三者順序可以打亂吓坚，但是表格還是會按照 head->body->foot 這樣的結(jié)構(gòu)順序在HTML頁面上進行顯示撵幽。 - tr 標(biāo)簽，td標(biāo)簽以及th標(biāo)簽
<tr></tr>tr標(biāo)簽代表的含義是：table row 即表示一行 ,<td></td>td標(biāo)簽代表的含義是：table data 代表一個單元格的數(shù)據(jù)礁击，<th></th>th標(biāo)簽則表示table head 其含義是一個一列或一行的數(shù)據(jù)說明項盐杂。如上面的HTML文檔逗载，<th></th>.標(biāo)簽在第一行，其語意為星期链烈，包括th標(biāo)簽厉斟，整張表格是一張5?5的表格。 - colgroup 標(biāo)簽和 col標(biāo)簽
colgroup標(biāo)簽為HTML表格的列組標(biāo)簽强衡。col 則是 column定義表格當(dāng)中列捏膨，并在colgroup標(biāo)簽內(nèi)使用。在本例中食侮，colgroup標(biāo)簽和 col標(biāo)簽定義了table當(dāng)中每一列的寬度為80px号涯。雖然現(xiàn)在不會這樣用，但是此例的用法也可以幫助我們學(xué)習(xí)和理解colgroup 及 col標(biāo)簽的作用锯七。 - table的邊框
在table中如果不寫border="1" 這樣的屬性 那么默認是無邊框樣式的链快。在table標(biāo)簽中寫上這樣的一句話可以在頁面中較為直觀地看到表格具體的劃分情況。在head中 style標(biāo)簽內(nèi)又規(guī)定了table的樣式即：border-collapse: collapse;眉尸。如果不加這樣的樣式域蜗，那么table在瀏覽器中會顯示出表格單元格與單元格之間的縫隙。添加了table的樣式為border-collapse: collapse;則會消除單元格與單元格之間的縫隙噪猾。
3:form標(biāo)簽
在HTML中霉祸，表單標(biāo)簽是<form></form>。表單的應(yīng)用場景一般在網(wǎng)站的登陸注冊頁面上袱蜡，表單是用來提交數(shù)據(jù)給服務(wù)器的丝蹭，當(dāng)一個用戶填寫表單的數(shù)據(jù)并點擊提交后，瀏覽器會將用戶填寫的表單數(shù)據(jù)進行打包發(fā)送給服務(wù)器坪蚁，并由服務(wù)器內(nèi)部的程序進行處理奔穿。form表單的本質(zhì)也是跳轉(zhuǎn)鏈接，它和a標(biāo)簽的區(qū)別就是敏晤，a標(biāo)簽是瀏覽器發(fā)起的HTTP GET請求贱田，form表單則是HTTP POST請求，當(dāng)然這需要指定method屬性的值為POST嘴脾，但是form表單的作用就是提交數(shù)據(jù)男摧，如果讓method="GET" 那么就沒有什么意義。因為GET請求會將所有的數(shù)據(jù)在URL地址欄中顯示出來译打，保密性太差耗拓。
- form標(biāo)簽的屬性
- action
action 屬性規(guī)定了form提交到哪里。 - method
method屬性規(guī)定了提交的表單的提交方式是get請求方式還是post請求方式扶平。且表單只允許get方式或post方式進行提交 - target
form表單提交數(shù)據(jù)會發(fā)生鏈接的跳轉(zhuǎn)帆离，target屬性規(guī)定了form表單跳轉(zhuǎn)鏈接的位置蔬蕊。與a標(biāo)簽的target相同结澄。 回顧內(nèi)容：target屬性有五種值_self是在當(dāng)前頁面跳轉(zhuǎn)鏈接哥谷。_blank是在空頁面（新的頁面）跳轉(zhuǎn)鏈接，_parent是在父級框架中跳轉(zhuǎn)鏈接,_top是在頂級框架中跳轉(zhuǎn)鏈接麻献，同樣们妥，我們也可以自定義一個iframename,讓target="iframename" 并指定 iframe標(biāo)簽當(dāng)中的name屬性，那么在提交表單時勉吻，就會在iframe內(nèi)發(fā)生跳轉(zhuǎn)监婶。 - enctype
enctype默認的值為：enctype="application/x-www-form-urlencoded"是HTML表單傳輸?shù)木幋a類型，即齿桃，它規(guī)定了提交表單傳遞數(shù)據(jù)的語法 即惑惶，其格式為：xxx=xxx&yyy=yyy&zzz=zzz...enctype屬性的值有：
application/x-www-form-urlencodedmultipart/form-datatext/plain
4:input標(biāo)簽
input標(biāo)簽是一個空標(biāo)簽，即input標(biāo)簽不能內(nèi)嵌其他元素短纵。一個input標(biāo)簽的屬性有很多带污，但是input標(biāo)簽的類型即type屬性的值是HTML標(biāo)簽中最多的。我們先從input標(biāo)簽的類型type屬性值開始香到，然后再對input標(biāo)簽的其他屬性進行學(xué)習(xí)鱼冀。
- input標(biāo)簽的type屬性
- text:文字域
type="text"需要定義input標(biāo)簽的name屬性 - password:密碼域
type="password"另外需要定義input標(biāo)簽的name屬性 - file:文件域
type="file"用來上傳文件 - checkbox:復(fù)選框
type="checkbox"需要定義input標(biāo)簽的name屬性以及value屬性，且name屬性需要保持一致 - radio:單選框
type="radio"需要定義input標(biāo)簽的name屬性以及value屬性悠就，且name屬性需要保持一致 - button:按鈕
type="button"按鈕 - submit:提交按鈕
表單必須存在的元素就是提交按鈕千绪，不然表單則無法提交數(shù)據(jù)。在input標(biāo)簽中type屬性值為按鈕類型的 其value屬性則是這個按鈕的名字梗脾。當(dāng)沒有提交按鈕<input type="submit" value="提交">時荸型，未定義type屬性值的button按鈕可以升級為提交按鈕<button>提交</button>≌耄或是button 的type屬性值為 submit帆疟，即：<button type="submit">提交</button>在沒有<input type="submit">時也可以作為提交表單的按鈕。另外<input type="image">即image圖像域也可以代替提交按鈕宇立。 - reset:重置按鈕
type="reset"重置按鈕踪宠，點擊重置后，表單填寫的數(shù)據(jù)在頁面上清空 - hidden:隱藏域
<input type="hidden" name="xxx" value="例如：這是隱藏域"/>隱藏域在用戶的頁面上是看不見的妈嘹，但是用戶在提交信息時柳琢，隱藏域的信息會同用戶表單其他數(shù)據(jù)一同上傳。 - image:圖像域
<input type="image" name="xxx" src="imgurl"/>在定義了type="image"后 必須要指定圖片的URL即src屬性的值润脸。圖像域可以替代提交按鈕柬脸，并將圖片本身作為一個提交按鈕。
- checked屬性
checked屬性是一個布爾屬性毙驯。當(dāng)input標(biāo)簽的type屬性為radio或checkbox時倒堕，checked屬性表示該控件是否時默認選擇的狀態(tài)。 - disabled屬性
input標(biāo)簽的disabled屬性也是一個布爾屬性爆价，表示此表單控件不可用垦巴。 - multiple屬性
multiple屬性指用戶是否能輸入多個值媳搪。 - name屬性
除了type="submit" 之外最重要的屬性，指控件的名稱骤宣，與表單一起提交秦爆，以name=value的形式傳遞給服務(wù)器。 - placeholder屬性
提示文字憔披。如:<input type="text" placeholder="請輸入密碼"> - value屬性
在單選框和復(fù)選框中等限，value指定了傳遞給服務(wù)器的值，在按鈕中芬膝，value代表的含義時按鈕的名稱望门。 - size屬性
控件初始大小
5:label標(biāo)簽
舉例說明label標(biāo)簽的用法：
<label for="man">男</label><input id="man" type="radio" name="sex" value="man">
label 標(biāo)簽的作用就是只要點擊label標(biāo)簽的內(nèi)容，在本例中為"男" 锰霜，就可以選中input標(biāo)簽怒允，在本例中只要點擊文字"男" 就可以選中單選框。
6:button標(biāo)簽
在上文已經(jīng)提及過锈遥，button標(biāo)簽的簡單用途纫事，button 標(biāo)簽type屬性也有 "button","submit","reset" 三個值，需要注意的是所灸，當(dāng)沒有<input type="submit"> 時丽惶，<button>提交</button> 或者<button type="submit'>提交</button>可以作為表單的提交按鈕，而<input type="button">或者<button type="button">提交</button>則不行爬立。
7:select標(biāo)簽,option標(biāo)簽及optgroup標(biāo)簽
input標(biāo)簽的作用即是輸入钾唬，select標(biāo)簽的作用就是選擇。雖然input標(biāo)簽可以是實現(xiàn)單選框和復(fù)選框侠驯，但是對于一些選擇項比較多的情況抡秆，使用單選框和復(fù)選框則是很不合理的。select標(biāo)簽和option標(biāo)簽可以提供下拉列表的形式吟策，如：城市的選擇儒士，就比較適合使用下拉列表。select檩坚，option 標(biāo)簽語法格式:
<select name="xxx">
<option value="111">北京</option>
<option value="222">深圳</option>
......
</select>
- select標(biāo)簽常用的屬性
- name 設(shè)置提交的name值
- multiple 設(shè)置是否可以多選着撩，如果設(shè)置了multiple屬性值，在選擇時使用ctrl鍵既可以多選
- size 設(shè)置列表中可見選項的數(shù)目
- option標(biāo)簽常用的屬性
- value 用戶傳遞給服務(wù)器的值
- selected 設(shè)置選項初始選中的狀態(tài)
- disabled 定義此option選項不能選擇
例：
<select name="city1">
<option selected>--請選擇--</option>
<option value="bj">北京</option>
<option value="sh">上海</option>
<option value="sz">深圳</option>
<option value="cd">成都</option>
<option value="sy">松原</option>
<option value="jl">吉林</option>
<option value="heb">哈爾濱</option>
<option value="gz">廣州</option>
</select>
optgroup標(biāo)簽則可以設(shè)置分組的下拉菜單匾委，語法格式為：
<select name="xxx">
<optgroup label="1">
<option value="xx">xx</option>
<option value="xx">xx</option>
<option value="xx">xx</option>
<option value="xx">xx</option>
<option value="xx">xx</option>
</optgroup>
<optgroup label="2">
<option value="xx">xx</option>
<option value="xx">xx</option>
<option value="xx">xx</option>
<option value="xx">xx</option>
<option value="xx">xx</option>
</optgroup>
</select>
8:textarea 標(biāo)簽
textarea 標(biāo)簽是文字域標(biāo)簽與<input type="text">不同 <input type="text">僅能輸入一行文字內(nèi)容拖叙，但是textarea 標(biāo)簽卻可以輸入多行文字內(nèi)容，并且可以由用戶隨意拉伸輸入框赂乐，自己定義文字域輸入框的大小薯鳍，但是這樣也及其容易造成一些bug，所以我們一般都會在textarea標(biāo)簽內(nèi)增加一個 style樣式屬性挨措， 值為："resize:none".即：
<textarea name="info" id="info" style="resize: none;" placeholder="個人介紹"></textarea>
未完待續(xù)......
