HTML標籤參考(二)

一些重要的標籤

• ol li javascript

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

這一組標籤叫作有序列表,ol是外面的列表框,li是裏面的子項,而且每個li子項的前面都會帶有序號。html

• ol有一個屬性叫作type屬性,這個屬性的做用是用來設置每個子項前面的顯示內容的。默認狀況下按照數字來排序的,咱們能夠改爲type=」a」 ,這樣前面序號是按照小寫字母來排序的。前端

一樣的,type的屬性值還能夠設置成A–>按照大寫字母來排序;i—>按照i的個數來排序(羅馬數字?);I—>大寫I的個數來排序,除此以外,設置成其餘的屬性都是錯誤的,而錯誤的狀況下ol會按照默認的數字來排序,2和b等都算是錯誤的值喲~java

• ol的第二個屬性叫作reversed屬性,當咱們給ol加上reversed=」reversed」的時候,子項就會變成倒序來排列。這個屬性直接寫reversed也是能夠的,不過我一樣認爲reversed=」reversed」纔是規範的寫法。瀏覽器

• ol的第三個屬性叫作start屬性,這個屬性的意思是咱們讓子項從第幾個序號開始顯示,當咱們寫start=」2″的時候,前面的序號就會變成二、三、4 而不是默認的一、二、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 >標籤。

相關文章
相關標籤/搜索