web標(biāo)準(zhǔn)教程，幫你走進(jìn)web標(biāo)準(zhǔn)設(shè)計(jì)的世界 第三講（html終結(jié)篇）
我要評論非常感謝網(wǎng)友對我的大力支持，謝謝你們給我的鼓勵(lì)！
本節(jié)我將給大家講解表單標(biāo)簽和table標(biāo)簽，ok，Begin！Right now！
標(biāo)簽10：表單標(biāo)簽
功能：構(gòu)造一個(gè)表單，用來向服務(wù)器提交數(shù)據(jù)
基本結(jié)構(gòu)與詳細(xì)標(biāo)簽：
a：input標(biāo)簽
使用指數(shù)：*****
功能：通過改變type類型來構(gòu)造表單元素
類型：內(nèi)聯(lián)元素
常用屬性：id，class，name（與ID類似，方便后臺程序獲取標(biāo)簽的值），accept（accept 屬性只能與 <input type="file"> 配合使用。它規(guī)定能夠通過文件上傳進(jìn)行提交的文件類型。）
type與對應(yīng)值一覽
其中值img很少使用，他與值submit的功能是相同的，hidden值對于一個(gè)前臺開發(fā)者而言幾乎是用不到的，button值暫時(shí)不做介紹，畢竟我們現(xiàn)在離javascript還很遙遠(yuǎn)，呵呵
b: textarea標(biāo)簽
使用指數(shù)：****
功能：無限的向其中輸入文本，比較適合做留言板，其中的文本的默認(rèn)字體是等寬字體（通常是 Courier）
類型：內(nèi)聯(lián)元素
常用屬性：id，class，name
特殊屬性：cols，rows來設(shè)置他的區(qū)域大小，不過不推薦這種設(shè)置，還是建議通過css來設(shè)置（又是后話了）！
c: fieldset和legend標(biāo)簽
使用指數(shù)：**
功能：用來給你的表單劃分區(qū)域，在legend中設(shè)置區(qū)域的標(biāo)題（不是很常用）
類型：塊級元素
常用屬性：id，class，title
d:label標(biāo)簽
使用指數(shù)：***
功能：沒有任何效果，只是為input標(biāo)簽提供一個(gè)標(biāo)記不過，它為鼠標(biāo)用戶改進(jìn)了可用性。如果您在 label 元素內(nèi)點(diǎn)擊文本，就會(huì)觸發(fā)此控件。就是說，當(dāng)用戶選擇該標(biāo)簽時(shí)，瀏覽器就會(huì)自動(dòng)將焦點(diǎn)轉(zhuǎn)到和標(biāo)簽相關(guān)的表單控件上。
特殊屬性for:
標(biāo)簽的 for 屬性應(yīng)當(dāng)與相關(guān)元素的 id 屬性相同。通過這種方法來與對應(yīng)標(biāo)簽綁定
例子：
<form>
<p><input type="radio" name="fru" id="apple" /><label for="li">蘋果</label></p>
<p><input type="radio" name="fru" id="li" /><label for="apple">梨</label></p>
<p><input type="radio" name="fru" id="ban" /><label for="ban">香蕉</label></p>
<p><input type="radio" name="fru" id="ban" />草莓</p>
</form>
點(diǎn)擊梨，蘋果會(huì)被選中，點(diǎn)擊蘋果，梨會(huì)被選中，點(diǎn)擊香蕉，香蕉會(huì)被選中，點(diǎn)擊草莓，草莓不會(huì)被選中，因?yàn)樗麤]有應(yīng)用label，這時(shí)只有點(diǎn)擊按鈕（）才會(huì)被選中。
e:select標(biāo)簽
使用指數(shù)：***
功能：創(chuàng)建單選或者多選的下拉菜單
結(jié)構(gòu)：
<select name="sec">
<option value ="volvo">Volvo</option>//每一個(gè)選項(xiàng)
<option value ="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select> 
這些屬性就不詳細(xì)講了，大家去實(shí)踐一下就明白了，很簡單
下面通過一個(gè)例子在具體應(yīng)用表單標(biāo)簽要注意的事項(xiàng)：
<div id="form">
<form name="form1" action="#" method="get">
//form標(biāo)簽開始一個(gè)表單，action值為數(shù)據(jù)表單數(shù)據(jù)的傳向頁面，method為數(shù)據(jù)的傳遞形式，這些內(nèi)容對于初學(xué)者不用理會(huì)
<fieldset>
<legend>輸入的文本</legend>//為表單劃分區(qū)域
<p><input type="text" name="user" id="user"/></p>//單行文本輸入
<p><input type="password" name="pwd" id="pwd" /></p> //單行密文輸入
<p><textarea cols="2" rows="2" id="msg" name="msg"></textarea></p>//多行文本輸入
</fieldset>
<fieldset>
<legend>選擇的文本</legend>
<p><input type="radio" name="fru" id="apple" /><label for="apple">蘋果</label></p>
<p><input type="radio" name="fru" id="li" checked="checked" /><label for="li">梨</label></p>
//上面兩個(gè)是單選按鈕，注意每組單選按鈕的name屬性要相同，梨默認(rèn)為被選
<p><input type="radio" name="fru" id="ban" /><label for="ban">香蕉</label></p>
<p><input type="checkbox" name="men1" id="a" /><label for="a">成龍</label></p>
<p><input type="checkbox" name="men2" id="b" /><label for="b">鐵拐李</label></p>
<p><input type="checkbox" name="men3" id="c" /><label for="c">綠茶</label></p>
//上面是多選按鈕組合，注意他們的name屬性不能相同
<select name="sec" id="sec" multiple="multiple">
<option value="1">11111111</option>
<option value="2" selected="selected">22222222</option>
<option value="3" selected="selected">33333333</option>
<option value="4">44444444</option>
</select>
//上面是下拉式選擇，并且可以多選，2，3行默認(rèn)為被選
</fieldset>
<fieldset>
<fieldset>
<legend>上傳的文件</legend>
<p><input type="file" name="file" id="file" accept="image/gif, image/jpeg" /></p>
//上面為文件上傳，規(guī)定只能上傳格式為gif和jpeg的圖片
</fieldset>
<fieldset>
<legend>提交與重置</legend>
<p><input type="submit" value="提交表單" /><input type="reset" value="重置表單" /></p>
//表單的提交與重置
</fieldset>
</form>
</div>
標(biāo)簽11：table
使用指數(shù)：***
功能：構(gòu)造一個(gè)表格
類型：塊級元素
常用屬性：id，class
width：設(shè)置表格的寬度
border：設(shè)置表格的邊框
標(biāo)簽a：caption
使用指數(shù)：*
功能：為表格定義一個(gè)標(biāo)題
類型：塊級元素
標(biāo)簽b：tr
使用指數(shù)：***
功能：為表格定義一個(gè)行
類型：塊級元素
標(biāo)簽c：th
使用指數(shù)：**
功能：為表格的每一列定義一個(gè)小標(biāo)題，默認(rèn)字體加粗
類型：塊級元素
標(biāo)簽d：td
使用指數(shù)：***
功能：為表格定義一個(gè)列
類型：內(nèi)聯(lián)元素
特殊屬性：1.colspan：合并單元格（列合并）
2.rowspan：合并單元格（行合并）
例子：
<table border="1">
<caption>標(biāo)題</caption>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td rowspan="2">January</td>//行合并，所以要占據(jù)兩行空間
<td>$100</td>
</tr>
<tr>
<td>January</td>//由于上面是行合并，故這里少了一列
</tr>
<tr>
<td colspan="2">January</td>//列合并，故這里少了一列
</tr>
</table>
效果：
到這里html就講完了，不要驚訝，我指的是主要的常用的部分講完了，其他的就大家自己去學(xué)習(xí)吧，相信掌握了學(xué)習(xí)方法之后的工作是愉快的，哈哈
下一講，我將帶領(lǐng)大家步入css的世界當(dāng)中！
相關(guān)文章
AudioContext 實(shí)現(xiàn)音頻可視化(web技術(shù)分享)
這篇文章主要分享的是web技術(shù)的 AudioContext 實(shí)現(xiàn)音頻可視化，要實(shí)現(xiàn)音頻可視化得先實(shí)現(xiàn)一些炫酷的效果需要借助 Web Audio API提供的一些方法 AudioContext，下面詳細(xì)內(nèi)容2022-02-23
這篇文章主要給大家介紹了web技術(shù)中的WebRTC記錄音視頻流，文章內(nèi)容圍繞主題展相關(guān)資料，需要的小伙伴可以參考一下，希望對你有所幫助2022-02-23- 這是我通過網(wǎng)上查閱資料總結(jié)的一些編碼規(guī)范，用于鞏固對html，css頁面重構(gòu)時(shí)的基礎(chǔ),需要的朋友可以參考下2020-12-19
前端編碼規(guī)范（4）—— CSS 和 Sass (SCSS) 開發(fā)規(guī)范
這篇文章主要介紹了前端編碼規(guī)范（4）—— CSS 和 Sass (SCSS) 開發(fā)規(guī)范,需要的朋友可以參考下2017-01-21Web前端開發(fā)規(guī)范2017(HTML/JavaScript/CSS)
這是一份旨在增強(qiáng)團(tuán)隊(duì)的開發(fā)協(xié)作，提高代碼質(zhì)量和打造開發(fā)基石的編碼風(fēng)格規(guī)范，其中包含了 HTML, JavaScript 和 CSS/SCSS 這幾個(gè)部分。我們知道，當(dāng)一個(gè)團(tuán)隊(duì)開始指定并實(shí)行2017-01-21- 這篇文章主要為大家介紹了前端開發(fā)團(tuán)隊(duì)遵循和約定的代碼書寫規(guī)范，意在提高代碼的規(guī)范性和可維護(hù)性,需要的朋友可以參考下2017-01-21
響應(yīng)式Web之流式網(wǎng)格系統(tǒng)
這篇文章主要為大家詳細(xì)介紹了響應(yīng)式Web之流式網(wǎng)格系統(tǒng)的相關(guān)資料，感興趣的小伙伴們可以參考一下2016-07-04在網(wǎng)頁標(biāo)題欄上和收藏夾顯示網(wǎng)站logo的實(shí)現(xiàn)方法
下面小編就為大家分享一篇在網(wǎng)頁標(biāo)題欄上和收藏夾顯示網(wǎng)站logo的實(shí)現(xiàn)方法。希望對大家有所幫助。一起跟隨小編過來看看吧，祝大家游戲愉快哦2016-03-16Visual Foxpro 6.0 中文版安裝向?qū)?圖解)
基于很多用戶都在下載Visual Foxpro 6.0，但是有安裝vtp6.0經(jīng)驗(yàn)的朋友確很少，在安裝過程中總會(huì)出現(xiàn)這樣那樣的問題，基于這些問題，下面小編抽個(gè)時(shí)間把Visual Foxpro 6.02015-09-09網(wǎng)站日志200 0 64狀態(tài)碼的分析(協(xié)議子狀態(tài))
網(wǎng)站日志200 0 64狀態(tài)碼的分析介紹2012-10-29
