一些重要的標籤

• 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 >標籤。