?
一 字體標簽
字體標簽包含：h1~h6、<font>、<u>、<b>、<strong><em>、<sup>、<sub>
標題
標題使用<h1>至<h6>標簽進行定義。<h1>定義最大的標題，<h6>定義最小的標題。具有align屬性，屬性值可以是：left、center、right。
<h1>路飛學城</h1> <h2>路飛學城</h2> <h3>路飛學城</h3> <h4>路飛學城</h4> <h5>路飛學城</h5> <h6>路飛學城</h6>
字體標簽<font>(已廢棄)
color="紅色"或color="#ff00cc"或color="new rgb(0,0,255)"：設置字體顏色。設置方式：單詞 ? #ff00cc ? rgb(0,0,255)
size：設置字體大小。 取值范圍只能是：1至7。取值時，如果取值大于7那就按照7來算，如果取值小于1那就按照1來算。如果想要更大的字體，那就只能通過css樣式來解決-
face="微軟雅黑"：設置字體類型。注意在寫字體時，“微軟雅黑”這個字不能寫錯。
實例：
<font face="微軟雅黑" color="green" size="8">字體</font>
粗體標簽<b>或<strong>(已放棄)
示例：
小馬哥 <b>小馬哥</b> <strong>小馬哥</strong>
效果：
下劃線標記?<u>?中劃線標記<s>（已廢棄）
示例：
<u>小馬哥</u> <s>小馬哥</s>
效果：
斜體標記?<i>或<em>（已廢棄）
示例：
小馬哥 <i>小馬哥</i> <em>小馬哥</em>
效果：
?
上標<sup> 下標<sub>
上小標這兩個標簽容易混淆，怎么記呢？這樣記：b的意思是bottom：底部
例子：
5<sup>2</sup> 8<sub>2</sub>
效果：
?
? 特殊字符
：空格 （non-breaking spacing，不斷打空格）<：小于號（less than）>：大于號（greater than）&：符號&"：雙引號'：單引號©：版權?™：商標?
要求大家背過的特殊字符： 、<、>、©
比如說，你想把<p>作為一個文本在頁面上顯示，直接寫<p>是肯定不行的，因為這代表的是一個段落標簽，所以這里需要用到轉義字符。應該這么寫：
?
這是一個HTML語言的<p>標簽
效果顯示：
如果還想知道其它的HTML特殊字符：HTML特殊字符參考表
?
段落標簽<p>
段落：是英文paragraph的縮寫。
屬性：
- align='屬性值'：對齊方式。屬性值包括：left、center、right
示例：
<p>這是一個段落</p> <p align="center">這是另一個段落</p>
效果：
?
ok,下面這幾句話，大家一定牢牢記住。HTML標簽是分等級的。HTML將所有的標簽分為兩種：
1.文本級標簽：p、span、a、b、i、u、em。文本標簽里只能放文字、圖片、表單元素。
2.容器級標簽：div、h系列、li、dt、dd。容器級標簽里可以放任何東西。
從學習p的第一天開始，就要死死記住：p標簽是一個文本級標簽，p里面只能放文字、圖片、表單元素。其他的一律不能放。
錯誤寫法：（把h系列的標簽放到p里）
<p>我是個段落<h2>我是二級標題</h2> </p>
效果如下：
?
上圖顯示，瀏覽器不允許你這么做。我們使用Chrome的F12審查元素發現，瀏覽器自己把p封閉掉了，不讓你去包裹h2。
PS：Chrome瀏覽器是世界上HTML5支持最好的瀏覽器。提供了非常好的開發工具，非常適合我們開發人員使用。審查元素功能的快捷鍵是F12。
?
塊級標簽 <div>和<span>
div和span是非常重要的標簽，div的語義是division“分割”； span的語義就是span“范圍、跨度”。CSS課程中你將知道，這兩個東西，都是最最重要的“盒子”。
?
div：把標簽中的內容作為一個塊兒來對待(division)。必須單獨占據一行。
div標簽的屬性：
1.align="屬性值"：設置塊兒的位置。屬性值可選擇：left、right、 center
<span>和<div>唯一的區別在于：<span>是不換行的，而<div>是換行的。
如果單獨在網頁中插入這兩個元素，不會對頁面產生任何的影響。這兩個元素是專門為定義CSS樣式而生的。或者說，DIV+CSS來實現各種樣式。
? 示例：
<body><div>導航欄</div><div>中心banner</div><span>路飛</span><span>alex</span></body>
?
效果：
div在瀏覽器中，默認是不會增加任何的效果的，但是語義變了，div中的所有元素是一個小區域。
div標簽是一個容器級標簽，里面什么都能放，甚至可以放div自己。
span也是表達“小區域、小跨度”的標簽，但是是一個文本級的標簽。
就是說，span里面只能放置文字、圖片、表單元素。?span里面不能放p、h、ul、dl、ol、div。
span舉例：
<p>商品簡介:<span><a href="">詳細信息</a><a href="">生產日期</a></span> </p>
?
div舉例：
<div class="header"><div class="logo"></div><div class="nav"></div></div><div class="content"><div class="guanggao"></div><div class="shop"></div></div> <div class="footer"></div>
?
所以，我們親切的稱呼這種模式叫做“div+css”。div標簽負責布局，負責結構，負責分塊。css負責樣式。
ps:這個class屬性名就與css有很大關聯，講到css模塊會詳細講這塊內容。
?
換行標簽<br> （已廢棄）
當你打算結束一行，而又不想開始一個新段落時，<br>標簽就派上用場了。無論你將它置于何處，<br>標簽都會產生一個強制的換行。
? 示例：
This <br> is a para<br>graph with line breaks
效果：
?
上圖顯示，<p>標簽和<br>標簽的區別在于：<p>標簽會在段落的前后自動插入一個空行，而<br>標簽沒有空行；而且<br>標簽沒有屬性。
注意<br>?沒有結束標簽，把<br>標簽寫為?<br/>?是經得起未來考驗的做法，XHTML 和 XML 都接受在打開的標簽內部來關閉標簽的做法。
?
水平線標簽<hr>（已廢棄）
水平分隔線（horizontal rule）可以在視覺上將文檔分隔成各個部分
示例：
<p>小馬哥</p><hr><hr> <p>我是段落</p> This <br> is a para<br>graph with line breaks
效果如下：
?
內容居中標簽?<center>
此時center代表是一個標簽，而不是一個屬性值了。只要是在這個標簽里面的內容，都會居于瀏覽器的中間。
示例：
<center><p>小馬哥</p> </center>
效果如下：
?
? 到了H5里面，center標簽不建議使用。
?
預定義（預格式化）標簽：<pre>
含義：將保留其中的所有的空白字符(空格、換行符)，原封不動的輸出結果（告訴瀏覽器不要忽略空格和空行）
說明：真正排網頁過程中，<pre>標簽幾乎用不著。但在PHP中用于打印一個數組時使用。
示例：
<pre>鵝鵝鵝作者：李白曲項向天歌白毛浮綠水</pre>
?
?
<pre>鵝鵝鵝作者：李白曲項向天歌白毛浮綠水</pre>
效果如下：
上圖中，好像pre標簽部分的字體變小了，而且還出現了縮進，好吧， 這個其實是瀏覽器搞的鬼。
為什么要有<pre>這個標簽呢？答案是：
所有的瀏覽器默認情況下都會忽略空格和空行。
好吧，其實這個標簽也用的比較少。排版標簽就給大家介紹到這里。
?超鏈接有三種形式：
1、外部鏈接：鏈接到外部文件。舉例：
<a href="new.html">點擊進入到新網頁</a>
a是英語anchor“錨”的意思，就好像這個頁面往另一個頁面扔出了一個錨。是一個文本級的標簽。
href是英語hypertext reference超文本地址的縮寫。讀作“喝瑞夫”，不要讀作“喝夫”。
效果：
當然，我們也可以直接點進鏈接，訪問一個網址。舉例如下；
<a href="http://www.baidu.com" target="_blank">進入百度</a>
?
2、錨鏈接：
指給超鏈接起一個名字，作用是在本頁面或者其他頁面的的不同位置進行跳轉。比如說，在網頁底部有一個向上箭頭，點擊箭頭后回到頂部，這個就是利用到了錨鏈接。
首先我們要創建一個錨點，也就是說，使用name屬性或者id屬性給那個特定的位置起個名字。效果如下：
?
上圖中解釋：
11行代碼表示，頂部這個錨的名字叫做top。
然后在底部設置超鏈接，點擊時將回到頂部（此時，網頁中的url的末尾也出現了#top）。注意上圖中紅框部分的#號不要忘記了，表示跳到名為top的特定位置，這是規定。如果少了#號，點擊之后，就會跳到top這個文件或者top這個文件夾中去。
如果我們將上圖中的第23行代碼寫成：
<a href="new.hhml#top">回到頂部</a>
就表示，點擊之后，跳轉到new.html頁面的top錨點中去。
說明：name屬性是HTML4.0以前使用的，id屬性是HTML4.0后才開始使用。為了向前兼容，因此，name和id這兩個屬性都要寫上，并且值是一樣的。
3、郵件鏈接：
代碼舉例：
<a href="mailto:zhaoxu@tedu.cn">聯系我們</a>
效果：點擊之后，會彈出outlook，作用不大。
前提：計算機中必須安裝郵件客戶端，并且配置好了郵件相關信息
?
特殊幾個鏈接：
返回頁面頂部的位置
<a href="#">跳轉到頂部</a>
與js有關：
<a href="javascript:alert(1)">內容</a><a href="javascript:;">內容</a>
1.javascript:;表示什么都不執行，這樣點擊<a>時就沒有任何反應 例如：<a?href="javascrip:;">內容</2
2.javascript:是表示在觸發<a>默認動作時，執行一段JavaScript代碼。 例如：<ahref="javascript:alert()">內容</a>
?
超鏈接的屬性
href：目標URLtitle：懸停文本。name：主要用于設置一個錨點的名稱。target：告訴瀏覽器用什么方式來打開目標頁面。target屬性有以下幾個值：_self：在同一個網頁中顯示（默認值）_blank：在新的窗口中打開。_parent：在父窗口中顯示_top：在頂級窗口中顯示
blank就是“空白”的意思，就表示新建一個空白窗口。為啥有一個_ ，就是規定，沒啥好解釋的。
也就是說，如果不寫target=”_blank”那么就是在相同的標簽頁打開，如果寫了target=”_blank”，就是在新的空白標簽頁中打開。
?
ps:a是一個文本級的標簽
比如一個段落中的所有文字都能夠被點擊，那么應該是p包含a；
<p><a href="">段落段落段落段落段落段落</a> </p>
而不是a包裹p：
<a href=""><p>段落段落段落段落段落段落</p> </a>
a的語義要小于p，a就是可以當做文本來處理，所以p里面相當于放的就是純文字。
?img: 代表的就是一張圖片。是單邊標記。
img是自封閉標簽，也稱為單標簽。
能插入的圖片類型：
-
能夠插入的圖片類型是：jpg(jpeg)、gif、png、bmp。類型和類型之間有什么區別，css課上講。
-
不能往網頁中插入的圖片格式是：psd、ai
HTML頁面不是直接插入圖片，而是插入圖片的引用地址，所以也要把圖片上傳到服務器上。
src屬性：圖片的相對路徑和絕對路徑
這里涉及到圖片的一個屬性：
src屬性：指圖片的路徑。
在寫圖片的路徑時，有兩種寫法：相對路徑、絕對路徑
1、寫法一：相對路徑
相對當前頁面所在的路徑。兩個標記?.?和?..?分表代表當前目錄和父路徑。
舉例1：
<!-- 當前目錄中的圖片 --> <img src="2.jpg"> <img src=".\2.jpg"> <!-- 上一級目錄中的圖片 --> <img src="..\2.jpg">
img 是image“圖片”的簡寫，src 是英語source“資源”的縮寫。
舉例2：
<img src="images/1.jpg">
上方代碼的意思是說，當前頁面有一個并列的文件夾images，在文件夾images中存放了一張圖片1.jpg
?
2、寫法二：絕對路徑
（1）以盤符開始的絕對路徑。舉例：
<img src="C:\Users\aaa\Desktop\html-01\images\1.jpg">
（2）網絡路徑。舉例：
<img src="http://www.baidu.com/2016040102.jpg">
相對路徑和絕對路徑的總結
相對路徑的好處：站點不管拷貝到哪里，文件和圖片的相對路徑關系都是不變的。
相對路徑使用有一個前提，就是網頁文件和你的圖片，必須在一個服務器上。
問題：我的網頁在C盤，圖片卻在D盤，能不能插入呢？
答案： 用相對路徑不能，用絕對路徑也不能。
注意：可以使用file://來插入，但是這種方法，沒有任何意義！因為服務器上沒有所謂c盤、d盤。
下面的方法是行的，但是沒有任何工程上的意義，這是因為服務器沒有盤符，linux系統沒有盤符：
<img src="file://C:\Users\Danny\Pictures\明星\1.jpg" alt="" />
總結一下：
-
我們現在無論是在a標簽、img標簽，如果要用路徑。只有兩種路徑能用，就是相對路徑和絕對路徑。
-
相對路徑，就是../ image/ 這種路徑。從自己出發，找到別人；
-
絕對路徑，就是http://開頭的路徑。
-
絕對不允許使用file://開頭的東西，這個是完全錯誤的！
img標簽的常用其它屬性
width：寬度height：高度title：提示性文本。公有屬性。也就是鼠標懸停時出現的文本。align：指圖片的水平對齊方式，屬性值可以是：left、center、right-
alt：當圖片顯示不出來的時候，代替圖片顯示的內容。alt是英語 alternate “替代”的意思。（有的瀏覽器不支持）
舉例：
?
示例：
嘿嘿<img src="images/bojie.jpeg" alt="波姐" title='波多野結衣' width="400" height="400">幺幺
文本級的標簽顯示在瀏覽器上時，不管你的圖片多高，它總會底邊對齊，這是一種現象，“高矮不齊，底邊對齊”。
此時大家可以給圖片設置align屬性，來查看效果吧！
注意事項：
（1）如果要想保證圖片等比例縮放，請只設置width和height中其中一個。
（2）如果想實現圖文混排的效果，請使用align屬性，取值為left或right
?
如果想點擊圖片的時候跳轉到某個鏈接，應該是：
<a><img src="images/bojie.jpeg" alt="波姐" title='波多野結衣'> </a>
一 列表標簽
列表標簽分為三種。
1、無序列表<ul>，無序列表中的每一項是<li>
英文單詞解釋如下：
a.ul：unordered list，“無序列表”的意思。
b.li：list item，“列表項”的意思。
示例：
<ul><li>張三</li> <li>李四</li> <li>王五</li> </ul>
?
效果：
注意：
a.li不能單獨存在，必須包裹在ul里面；反過來說，ul的“兒子”不能是別的東西，只能有li。
b.我們這里再次強調，ul的作用，并不是給文字增加小圓點的，而是增加無序列表的“語義”的。
屬性：
1.type="屬性值"。屬性值可以選：?disc(實心原點，默認)，square(實心方點)，circle(空心圓)。
效果如下：
?
列表之間是可以嵌套的。我們來舉個例子：
代碼：
<ul><li><b>北京市</b><ul><li>海淀區</li><li>朝陽區</li><li>東城區</li></ul></li><li><b>廣州市</b><ul><li>天河區</li><li>越秀區</li></ul></li></ul>
效果:
?
聲明：ul的兒子，只能是li。但是li是一個容器級標簽，li里面什么都能放。甚至可以再放一個ul。
2、有序列表<OL>，里面的每一項是<li>
英文單詞：Ordered List。
例如：
<ol> <li>嘿哈</li><li>哼哈</li><li>呵呵</li> </ol>
效果：
屬性：
1.type="屬性值"。屬性值可以是：1(阿拉伯數字，默認)、a、A、i、I。結合start屬性表示從幾開始。
效果：
和無序列表一樣，有序列表也是可以嵌套的哦，這里就不舉類似的例子了。
ol和ul就是語義不一樣，怎么使用都是一樣的。
ol里面只能有li，li必須被ol包裹。li是容器級。
ol這個東西用的不多，如果想表達順序，大家一般也用ul。舉例如下：
<ul><li>1. 嘿哈</li><li>2. 哼哈</li><li>3. 呵呵</li> </ul>
3、定義列表<dl>
定義列表的作用非常大。
<dl>英文單詞：definition list，沒有屬性。dl的子元素只能是dt和dd。
a.<dt>：definition title 列表的標題，這個標簽是必須的
b.<dd>：definition description 列表的列表項，如果不需要它，可以不加
備注：dt、dd只能在dl里面；dl里面只能有dt、dd。
代碼：
<dl><dt>第一條規則</dt><dd>不準睡覺</dd><dd>不準交頭接耳</dd><dd>不準下神</dd><dt>第二條規則</dt><dd>可以泡妞</dd><dd>可以找妹子</dd><dd>可以看mv</dd> </dl>
效果：
?
上圖可以看出，定義列表表達的語義是兩層：
（1）是一個列表，列出了幾個dd項目
（2）每一個詞兒都有自己的描述項。
備注：dd是描述dt的。
定義列表用法非常靈活，可以一個dt配很多dd：
<dl><dt>北京</dt><dd>國家首都，政治文化中心</dd><dd>污染很嚴重，PM2.0天天報表</dd><dt>上海</dt><dd>魔都，有外灘、東方明珠塔、黃浦江</dd><dt>廣州</dt><dd>中國南大門，有珠江、小蠻腰</dd></dl>
還可以拆開，讓每一個dl里面只有一個dt和dd，這樣子感覺清晰一些：
<dl><dt>北京</dt><dd>國家首都，政治文化中心</dd><dd>污染很嚴重，PM2.0天天報表</dd></dl><dl><dt>上海</dt><dd>魔都，有外灘、東方明珠塔、黃浦江</dd></dl><dl><dt>廣州</dt><dd>中國南大門，有珠江、小蠻腰</dd></dl>
京東案例（京東首頁最下方）
dt、dd都是容器級標簽，想放什么都可以。所以，現在就應該更加清晰的知道：用什么標簽，不是根據樣子來決定，而是語義（語義本質上是結構）。
二 表格標簽
表格標簽用<table>表示。
一個表格<table>是由每行<tr>組成的，每行是由<td>組成的。
所以我們要記住，一個表格是由行組成的（行是由列組成的），而不是由行和列組成的。
在以前，要想固定標簽的位置，唯一的方法就是表格。現在可以通過CSS定位的功能來實現。但是現在在做頁面的時候，表格作用還是有一些的。
例如，一行的單元格：
<table><tr><td></td><td></td><td></td><td></td></tr></table>
上面的表格中沒有加文字，所以在生成的網頁中什么都看不到。
例如，3行4列的單元格：
<table><tr><td>小馬哥</td><td>18</td><td>男</td><td>山東</td></tr><tr><td>小岳岳</td><td>45</td><td>男</td><td>河南</td></tr><tr><td>鄧紫棋</td><td>23</td><td>女</td><td>香港</td></tr></table>
效果：
上圖中的表格好像沒看到邊框呀，不急，接下來看看<table>標簽的屬性。
<table>的屬性：
border：邊框。像素為單位。style="border-collapse:collapse;"：單元格的線和表格的邊框線合并width：寬度。像素為單位。height：高度。像素為單位。bordercolor：表格的邊框顏色。align：表格的水平對齊方式。屬性值可以填：left right center。
注意：這里不是設置表格里內容的對齊方式，如果想設置內容的對齊方式，要對單元格標簽<td>進行設置）cellpadding：單元格內容到邊的距離，像素為單位。默認情況下，文字是緊挨著左邊那條線的，即默認情況下的值為0。
注意不是單元格內容到四條邊的距離哈，而是到一條邊的距離，默認是與左邊那條線的距離。如果設置屬性dir="rtl"，那就指的是內容到右邊那條線的距離。cellspacing：單元格和單元格之間的距離（外邊距），像素為單位。默認情況下的值為0bgcolor="#99cc66"：表格的背景顏色。background="路徑src/..."：背景圖片。
背景圖片的優先級大于背景顏色。
單元格帶邊框的效果：
備注：表格中很細表格邊線的制作：
CSS的寫法：
style="border-collapse:collapse;"
<tr>：行
一個表格就是一行一行組成的嘛。
屬性：
dir：公有屬性，設置這一行單元格內容的排列方式。可以取值：ltr：從左到右（left to right，默認），rtl：從右到左（right to left）bgcolor：設置這一行的單元格的背景色。
注：沒有background屬性，即：無法設置這一行的背景圖片，如果非要設置，可以用css實現。height：一行的高度align="center"：一行的內容水平居中顯示，取值：left、center、rightvalign="center"：一行的內容垂直居中，取值：top、middle、bottom
?
<td>：單元格
屬性：
align：內容的橫向對齊方式。屬性值可以填：left right center。
如果想讓每個單元格的內容都居中，這個屬性太麻煩了，以后用css來解決。valign：內容的縱向對齊方式。屬性值可以填：top middle bottomwidth：絕對值或者相對值(%)height：單元格的高度bgcolor：設置這個單元格的背景色。background：設置這個單元格的背景圖片。
?
單元格的合并
如果要將兩個單元格合并，那肯定就要刪掉一個單元格。
單元格的屬性：
colspan：橫向合并。例如colspan="2"表示當前單元格在水平方向上要占據兩個單元格的位置。rowspan：縱向合并。例如rowspan="2"表示當前單元格在垂直方向上
效果：（橫向合并）
效果舉例：（縱向合并）
<th>：加粗的單元格。相當于<td>?+?<b>
a.屬性同<td>標簽
?
<caption>：表格的標題。使用時和tr標簽并列
效果：
?
表格的<thead>標簽、<tbody>標簽、<tfoot>標簽
這三個標簽有與沒有的區別：
1、如果寫了，那么這三個部分的代碼順序可以任意，瀏覽器顯示的時候還是按照thead、tbody、tfoot的順序依次來顯示內容。如果不寫thead、tbody、tfoot，那么瀏覽器解析并顯示表格內容的時候是從按照代碼的從上到下的順序來顯示。
2、當表格非常大內容非常多的時候，如果用thead、tbody、tfoot標簽的話，那么數據可以邊獲取邊顯示。如果不寫，則必須等表格的內容全部從服務器獲取完成才能顯示出來。
例子：
<table border="1"><caption>人物介紹</caption><tbody><tr><td>小馬哥</td><th>18</th><td>男</td><td rowspan="3">中國</td></tr></tbody><tfoot><tr><td>小岳岳</td><td>45</td><td>男</td></tr></tfoot><thead><tr><td>鄧紫棋</td><td>23</td><td>女</td> </tr></thead></table>
效果：
三 表單標簽
表單標簽用<form>表示，用于與服務器的交互。表單就是收集用戶信息的，就是讓用戶填寫的、選擇的。
?
屬性：
a.name：表單的名稱，用于JS來操作或控制表單時使用；
b.id：表單的名稱，用于JS來操作或控制表單時使用；
c.action：指定表單數據的處理程序，一般是PHP，如：action=“login.php”
d.method：表單數據的提交方式，一般取值：get(默認)和post
form標簽里面的action屬性和method屬性，在后面課程給大家講解。稍微說一下：action屬性就是表示，表單將提交到哪里。 method屬性表示用什么HTTP方法提交，有get、post兩種。?
get提交和post提交的區別：
GET方式：
將表單數據，以"name=value"形式追加到action指定的處理程序的后面，兩者間用"?"隔開，每一個表單的"name=value"間用"&"號隔開。
特點：只適合提交少量信息，并且不太安全(不要提交敏感數據)、提交的數據類型只限于ASCII字符。
POST方式：
將表單數據直接發送(隱藏)到action指定的處理程序。POST發送的數據不可見。Action指定的處理程序可以獲取到表單數據。
特點：可以提交海量信息，相對來說安全一些，提交的數據格式是多樣的(Word、Excel、rar、img)。
Enctype：
表單數據的編碼方式(加密方式)，取值可以是：application/x-www-form-urlencoded、multipart/form-data。Enctype只能在POST方式下使用。
a.Application/x-www-form-urlencoded：默認加密方式，除了上傳文件之外的數據都可以
b.Multipart/form-data：上傳附件時，必須使用這種編碼方式。
<input>：輸入標簽（文本框）
用于接收用戶輸入。
<input type="text" />
屬性：
type="屬性值"：文本類型。屬性值可以是：text（默認）password：密碼類型radio：單選按鈕，名字相同的按鈕作為一組進行單選（單選按鈕，天生是不能互斥的，如果想互斥，必須要有相同的name屬性。name就是“名字”。
）。非常像以前的收音機，按下去一個按鈕，其他的就抬起來了。所以叫做radio。checkbox：多選按鈕，名字相同的按鈕作為一組進行選擇。checked：將單選按鈕或多選按鈕默認處于選中狀態。當<input>標簽的type="radio"時，可以用這個屬性。屬性值也是checked，可以省略。hidden：隱藏框，在表單中包含不希望用戶看見的信息button：普通按鈕，結合js代碼進行使用。submit：提交按鈕，傳送當前表單的數據給服務器或其他程序處理。這個按鈕不需要寫value自動就會有“提交”文字。這個按鈕真的有提交功能。點擊按鈕后，這個表單就會被提交到form標簽的action屬性中指定的那個頁面中去。reset：重置按鈕，清空當前表單的內容，并設置為最初的默認值image：圖片按鈕，和提交按鈕的功能完全一致，只不過圖片按鈕可以顯示圖片。file：文件選擇框。
提示：如果要限制上傳文件的類型，需要配合JS來實現驗證。對上傳文件的安全檢查：一是擴展名的檢查，二是文件數據內容的檢查。
value="內容"：文本框里的默認內容（已經被填好了的）size="50"：表示文本框內可以顯示五十個字符。一個英文或一個中文都算一個字符。
注意size屬性值的單位不是像素哦。readonly：文本框只讀，不能編輯。因為它的屬性值也是readonly，所以屬性值可以不寫。
用了這個屬性之后，在google瀏覽器中，光標點不進去；在IE瀏覽器中，光標可以點進去，但是文字不能編輯。disabled：文本框只讀，不能編輯，光標點不進去。屬性值可以不寫。
例子：
<form>姓名：<input value="呵呵" >逗比<br>昵稱：<input value="哈哈" readonly=""><br>名字：<input type="text" value="name" disabled=""><br>密碼：<input type="password" value="pwd" size="50"><br>性別：<input type="radio" name="gender" value="male" checked="">男 <input type="radio" name="gender" value="female" >女<br>愛好：<input type="checkbox" name="love" value="eat">吃飯<input type="checkbox" name="love" value="sleep">睡覺<input type="checkbox" name="love" value="bat">打豆豆</form>
效果：
四種按鈕的舉例：
<form><input type="button" value="普通按鈕"><br><input type="submit" value="提交按鈕"><br><input type="reset" value="重置按鈕"><br><input type="image" src="images/bojie.jpeg" width="400" value="圖片按鈕2"><br><input type="file" value="文件選擇框"> </form>
效果：
<select>：下拉列表標簽
<select>標簽里面的每一項用<option>表示。select就是“選擇”，option“選項”。
select標簽和ul、ol、dl一樣，都是組標簽。
<select>標簽的屬性：
a.multiple：可以對下拉列表中的選項進行多選。沒有屬性值。
b.size="3"：如果屬性值大于1，則列表為滾動視圖。默認屬性值為1，即下拉視圖。
<option>標簽的屬性：
a.selected：預選中。沒有屬性值。
例子：
<form><select><option>小學</option><option>初中</option><option>高中</option><option>大學</option><option selected="">研究生</option></select><br><br><br><select size="3"><option>小學</option><option>初中</option><option>高中</option><option>大學</option><option>研究生</option></select><br><br><br><select multiple=""><option>小學</option><option>初中</option><option selected="">高中</option><option selected="">大學</option><option>研究生</option></select><br><br><br></form>
效果:
<textarea>標簽：多行文本輸入框
text就是“文本”，area就是“區域”。
屬性：
a.value：提交給服務器的值。
b.rows="4"：指定文本區域的行數。
c.cols="20"：指定文本區域的列數。
d.readonly：只讀。
<form><textarea name="txtInfo" rows="4" cols="20">路飛學城</textarea> </form>
效果：
?
表單的語義化
比如，我們在注冊一個網站的信息的時候，有一部分是必填信息，有一部分是選填信息，這個時候可以利用表單的語義化。
<form><fieldset><legend>賬號信息</legend>姓名：<input value="呵呵" >逗比<br>密碼：<input type="password" value="pwd" size="50"><br></fieldset><fieldset><legend>其他信息</legend>性別：<input type="radio" name="gender" value="male" checked="">男 <input type="radio" name="gender" value="female" >女<br>愛好：<input type="checkbox" name="love" value="eat">吃飯<input type="checkbox" name="love" value="sleep">睡覺<input type="checkbox" name="love" value="bat">打豆豆</fieldset></form>
效果：
?
?
<label>標簽
我們先來看下面一段代碼：
<input type="radio" name="sex" /> 男 <input type="radio" name="sex" /> 女
對于上面這樣的單選框，我們只有點擊那個單選框（小圓圈）才可以選中，點擊“男”、“女”這兩個文字時是無法選中的；于是，label標簽派上了用場。
本質上來講，“男”、“女”這兩個文字和input標簽時沒有關系的，而label就是解決這個問題的。我們可以通過label把input和漢字包裹起來作為整體。
解決方法如下：
<input type="radio" name="sex" id="nan" /> <label for="nan">男</label> <input type="radio" name="sex" id="nv" /> <label for="nv">女</label>
上方代碼中，input元素要有一個id，然后label標簽有一個for屬性，和id相同，那么這個label和input就有綁定關系了。
當然了，復選框也有label：（任何表單元素都有label）
<input type="checkbox" id="kk" /> <label for="kk">10天內免登陸</label>
?
ok,基本上HTML標簽就給大家介紹到這里，基本上呢，標準的div+css布局，我們常用的的標簽如下：
div p h1 span a img ul ol dl input
?
