一些重要的標簽

? ol li

<ol><li></li></ol>這是一組標簽，它們二者都是成對出現的，每一個標簽單獨出現都是沒有意義的事情。

這一組標簽叫做有序列表，ol是外面的列表框，li是裏面的子項，並且每一個li子項的前面都會帶有序號。

? ol有一個屬性叫做type屬性，這個屬性的作用是用來設置每一個子項前面的顯示內容的。默認情況下按照數字來排序的，我們可以改成type=”a” ，這樣前面序號是按照小寫字母來排序的。

同樣的，type的屬性值還可以設置成A–>按照大寫字母來排序；i—>按照i的個數來排序（羅馬數字？）；I—>大寫I的個數來排序，除此之外，設置成其他的屬性都是錯誤的，而錯誤的情況下ol會按照默認的數字來排序，2和b等都算是錯誤的值喲~

? ol的第二個屬性叫做reversed屬性，當我們給ol加上reversed=”reversed”的時候，子項就會變成倒序來排列。這個屬性直接寫reversed也是可以的，不過我同樣認為reversed=”reversed”才是規範的寫法。

? ol的第三個屬性叫做start屬性，這個屬性的意思是我們讓子項從第幾個序號開始顯示，當我們寫start=”2″的時候，前面的序號就會變成2、3、4 而不是默認的1、2、3，字母也是同樣的道理。

但是有一個很重要的問題就是，我們在哪個網頁看到文字前面有這些什麽數字啊字母啊的序號嗎？

所以最後的結果就是，我們基本很少用到ol、li標簽喲~

? ul li

<ul><li></li></ul>

這一組標簽是無序列表，除了前面的序號都變成了點（? ）之外，其他的和有序列表基本一樣。

? ul同樣有一個type屬性，這個屬性的值設置的是每一個子項前面顯示的符號的形式，默認的值是disc圓點，當值是square的時候，前面顯示的就是小方塊，值是circle 的時候前面顯示的就是空心圓圈。

但是同樣的道理，我們也沒有在哪個網頁上看到文字前面帶有這些惡心的圓點方塊之類的，因此我們在使用ul、li標簽的時候，都會先把ul的默認樣式list-style改成none，list-style: none;不過這已經屬於css的部分了~

無序列表一般用來當做導航欄之類的，裏面的結構樣式都一樣的部分，像淘寶什麽的網頁的導航欄就都是用ul、li來寫的。

? a

<a></a>標簽是一個非常重要的標簽，它有一個必須寫的屬性叫做href —> hyperText reference 超文本鏈接，裏面寫的是地址。

a的英文單詞是anchor錨點的意思，因此這個標簽的作用主要有兩點：

1.定點跳轉我們指定的id的元素位置。這個用法需要我們在href中寫上id的值 <a href=”#clickme”>點擊我跳轉</a>這樣就會跳轉到那個id是clickme的元素的位置

2.超鏈接。我們自href中寫一個本地的或者網上的鏈接，比如www.baidu.com ，這樣我們點擊的時候就會跳轉到這個網頁上去了。

3.協議限定符。在href中我們可以寫javascript代碼，比如href=”javascript:while(1){alert(‘你中毒了’)}”，當我們寫上這行代碼的時候，我們點擊這個a標簽之後瀏覽器就會一直彈出對話框。

通常在移動端我們都用a標簽來調用接口，比如：href=”phoneto:12234512345″ 調用手機的撥號功能來撥打電話，像美團外賣之類的就是用的這個功能。

? a標簽默認的是藍色的字體並且帶有下劃線，我們在頁面初始化的時候通常也習慣與將a標簽的顏色和下劃線的默認屬性都去掉。

? img

<img></img>標簽是image圖片的意思，它有一個必備的屬性叫做src –->source，這個src屬性的值就是我們的圖片的地址。一般來說我們給src填寫兩種值：

1.網上的鏈接

2.本地的鏈接

說道本地的鏈接就不得不提到本地鏈接的書寫形式。本地鏈接分為兩種：相對地址和絕對地址。而絕對地址我們通常是不用的，因為當文件上傳到服務器上的時候，凡是用絕對地址寫的鏈接統統都會失效的，因此我們都要選擇相對地址。

相對地址中 ../的意思是返回當前文件的上一層目錄 ，./的意思是當前文件所在的目錄，比如說我們有一張圖片和這個html文件在同一個文件夾下面，那麽我們就可以寫<img src=”./tupian.png”></img>

同時這個圖片標簽還有兩個屬性。

1.alt屬性。這個屬性是為其設置圖片占位符，也就是說當圖片因為網速或者鏈接錯誤等原因加載不出來的時候，就會顯示alt裏面我們設置的值。

2.title屬性。圖片提示符。當我們鼠標移入圖片的時候，在鼠標旁邊會出現一個黃色的小方塊來顯示這個title屬性裏面設置的值。

以上就是幾個比較重要的標簽的介紹了，還有一個不太常見也不太重要但是需要了解的標簽，table標簽。

? table

<table></table>是一個三級結構標簽，它要搭配<tr><td></td></tr>這兩個標簽一起使用才可以。

table是表格的意思，<table><table>這個標簽就是設置外層的表格，然後tr是表格的行，td是表格的數據單元，我們可以理解為列。

<table>

<tr>

<td></td>

<td></td>

</tr>

<tr>

<td></td>

<td></td>

</tr>

</table>

table標簽的大概結構是這個樣子的，同時td還有幾個屬性。

1.cellpadding內邊距屬性，我們可以為每一個單元格都設置內邊距 cellpadding=”10px”;

2.cellspacing 屬性，這個屬性的作用規定單元之間的空間，當我們設置為0的時候就可以去掉邊線了。

3.colspan屬性，這個屬性規定了這一個td占了幾個單位，默認的一個td占一個單位，類似於excel中的合並單元格的作用。

我們現在一般都不用table標簽了，這是一個結構化標簽，以前用這個標簽來給頁面進行布局，但是現在我們直接用div + css來對頁面進行布局。

那麽為什麽我們要棄用table標簽呢？

說道這裏我們就不得不提一下異步和同步的概念。

在生活中，我們常說的異步是指順序的幹兩件事情，比如先吃飯，再玩遊戲；同步的意思是同時幹，一邊吃飯一邊打遊戲。

但是在計算機領域中，異步指的是生活中的同步，同時加載的意思，同步則是生活中的順序加載的意思。

這個概念一定要搞清楚。

table的缺點在於服務器把代碼加載到本地服務器的過程中，本來是加載一行執行一行，但是table標簽是裏面的東西全都下載完之後才會顯示出來，那麽如果圖片很多的話就會導致網頁一直加載不出來，除非所有的圖片和內容都加載完。以前的手機網速慢，廠家重視內容的展現而不是樣式的展現，所以那個時候用table，而現在網速很快，大家都重視用戶體驗，當我們瀏覽淘寶店鋪的時候，如果要等到所有的圖片全都加載完之後才顯示出來的話那也太蠢了，所以table標簽現在我們基本放棄使用了。

但是基本不使用不代表不使用，有些情況下還是可以用table標簽的喲~

最後我們再來介紹一個非常重要的標簽——表單

<form></form>表單元素，這個元素可以讓我們實現前端和後臺的數據交互。

我們通過form表單向後臺發送數據，數據都是由兩部分組成的：數據名+數據內容。

表單都是成組出現的，裏面有各種各樣的元素。

我們先介紹一下form表單元素擁有的屬性：

1.action屬性 填寫服務器地址，這個屬性的意思是我們把數據傳遞到那個服務器。

2.method屬性 傳輸方法，我們在這裏填寫通過什麽方式來傳輸數據，一般填寫的都是POST/GET這兩種中的一個，雖然有其他的方式但是用的韓少，而post和get的區別我們在網絡篇會有介紹，這裏我們暫時都先寫get方法吧。

介紹完屬性之後，我們再介紹一下表單擁有的子元素：

? input標簽 這個標簽是一個單標簽，不需要閉合。

這個標簽有一個type屬性，而這個屬性的值決定了這個input標簽的類型是什麽。

1.text 如果type=”text”的話，這個input標簽就是一個輸入框，我們可以在裏面輸入文字信息。

2.password 如果type=”password “的話，這個input標簽就是一個密碼框，我們在裏面輸入的文字信息都會以隱藏的形式展現出來。

3.submit 如果type=”submit “的話，這個input標簽就是一個提交按鈕，我們點擊這個提交按鈕之後就會把整個表單的數據發送到後臺服務器上了。

我們剛才提到了發送數據一定要有數據名和數據內容，數據內容就是我們給input標簽設置的value屬性的值，而數據名我們就需要在input標簽裏面寫一個name屬性來告訴瀏覽器我們這個數據的名字是什麽了。

這裏我們寫一個簡單的用戶提交的表單：

在瀏覽器上的顯示內容是這個樣子的：

當我們隨便寫一個用戶名和密碼之後點擊提交按鈕，我們會發現我們的網頁地址上後面出現了我們所傳遞的數據的信息。

?username=123&password=123 這裏我們很容易就可以看出來數據的名字和數據的內容了。

同時，input還有其他的數據形式：

? type=”radio”

? type=”checkbox”

radio是單選框的意思，當我們給一個input設置radio的type之後，它就會變成一個圓點，我們可以選擇這個圓點，但是我們寫很多的單選框的時候，他們似乎都可以被選中，並沒有單選的作用。這裏是因為我們還沒有為這一組單選框設置名字，當我們給幾個radio都設置了同一個name的時候，它們就會變得只能選擇一個了的單選框了。

checkbox是復選框的意思，當input的type值設置成這個之後，和radio一樣的道理，設置好數據的名字，我們可以同時選擇很多的選項。

? 當我們開發的時候，我們其實是需要為每一項屬性都設置一個默認的值的，像sex這種單選框，我們設置一個默認值之後，就會有一半的用戶不需要去更改這個選項，會極大地提高用戶體驗。

? 設置這個默認的值的方法就是添加一個checked=”checked”屬性，我們在哪一個input標簽裏面設置了這個屬性，那麽哪一個選項就是默認被選擇的狀態

最後我們還有一個下拉列表的標簽<select></select>

<select>

<option>山東</option>

<option>黑龍江</option>

<option>北京</option>

</select>

下拉列表的name屬性是寫在<select>標簽上的，裏面option中間填寫的內容就是默認的數據值，但是如果我們給每一個option都加一個value屬性的話，那麽option中間添加的文字則不作為傳遞的數據的值，value的值作為傳遞的數據的值，同時下拉列表的默認選中的是第一個選項，如果我們要改變默認選項的話，要添加的屬性是selected=”selected”而不是上面的checked。

那麽我所總結的比較常用的重要的標簽主要就有以上幾種了，希望對大家有幫助喲~

標簽的分類

html的標簽主要分為兩類：

1.行級/內聯/行內元素 display: inline;

這一類元素的特點是：

? 不沾滿整行，元素所占空間完全由內容所控制

? 不可以改變寬高

標簽代表有：a em br select span strong

2.塊級元素 display: block;

這一類元素的特點是：

? 占滿整行，無論內容多還是少

? 可以改變寬高

標簽代表有：address div form h1-h6 p ul ol li table

其實還有第三種標簽，這一類標簽既不屬於行級元素也不屬於塊級元素，它們既不獨占一行，又可以隨意改變寬高，比如<img><input >標簽。

HTML標簽參考（二）