HTML標籤參考（一）

hi，小哥哥小姐姐們，咱們今天要說的是前端的入門，卻也是十分重要的意識的培養哦！

• html中的標籤數量是不少的，據人統計大概有300個左右，而且每一年都會以20-30個的速度增長着，可是這麼多的標籤咱們沒必要都去記住，由於不少標籤都是不經常使用的或者能夠用基礎的標籤搭配組合，實際上咱們須要掌握的大概在30個左右。

• 在前端開發中咱們要知道，並非你用的技術多麼先進就顯得多麼厲害，咱們要考慮到代碼的可讀性以及後期的可維護性，用常見的標籤來寫纔會讓其餘人都能讀懂你的代碼。

• 代碼中還有一點很重要的就是要勤寫註釋喲~ 順便一提在html中的註釋形式是<! – – your code – – >

好了前言說完了，咱們正式開始介紹一些標籤吧！

（這裏的標籤都是屬於html4中的內容，html5會有新的標籤和新的內容，我在後面的文章中再介紹。）

幾個基礎的標籤

• p標籤

<p></p>是段落標籤，在<p></p>中間寫的內容會當作一個段落來處理。

p標籤的特色是獨佔一行，而且段落上下都會有必定的間隔距離。

• 標題標籤 h1-h6

標題標籤的做用是着重顯示文字，通常用在標題上，它會將裏面的文字加粗放大而且獨佔一行。其中h4的默認大小是正常的文字大小，不過是加粗的。

<h1></h1><h2></h2><h3></h3><h4></h4><h5></h5><h6></h6>

• strong標籤

<strong></strong>標籤的做用是將裏面的文字加粗處理。

• em標籤

<em></em>的做用是將裏面的文字變成斜體。

• del標籤

<del></del>是刪除標籤，它會在裏面的文字的中間畫一條橫線，通常在打折的時候使用。

• address 標籤

<address></address>是地址標籤，它會將裏面的內容變成斜體而且獨佔一行。

這六個是很基礎很簡單的標籤，做用也是顯而易見，還有另一種結構化標籤，它們沒有特殊的效果，而是用來當作容器來盛放其餘的標籤，這有點相似於每一個家庭中都會單獨分出來廚房臥室大廳等區域，而後每一個區域中還有各類各樣的設備，這裏的家庭中的區域就是咱們的結構化標籤的做用。

結構化標籤還有另一個做用就是用來爲裏面的子元素設置樣式。通常的元素若是某一條屬性沒有被開發者設置樣式的話，它會自動繼承父級元素的相應屬性的樣式。

好比咱們如今有三個p標籤，咱們想讓三個p標籤裏面的文字都變成紅色，給三個p標籤都寫上color:red 是很是麻煩的，最簡單的方法是將三個p標籤都放到一個結構化標籤裏面，給這個結構化標籤一個color:red的樣式，這樣裏面的三個p標籤就都會有這個樣式了。

這兩點做用是最多見的，所以咱們在寫一個頁面以前，最早考慮的就是結構問題，所以通常先寫結構化標籤。

下面咱們就介紹最多見的兩個結構化標籤。

• div

<div></div>標籤能夠說是咱們在前端開發中用的最多的標籤了。

• span

<span></span>標籤裏面多數狀況下盛放文字或者小icon之類的小物件。

咱們如今爲div標籤設置一下樣式，而且在中間加一些文字。

<div style=」width: 100px; height:100px; 這是一個實例的結構化標籤，一切正常</div>

咱們發現文字會在這個div標籤的邊界處自動換行，也就是說這個div標籤圈定了一個範圍，裏面的文字或者其餘標籤都默認在這個範圍裏面顯示。

可是當咱們在中間書寫的不是中文而是一串英文字符的時候，咱們會發現這一串英文字符在div的邊界處並無換行，而是一直顯示下去，這是爲何呢？

文字分隔符與編碼集

• 這是由於咱們的每個漢字，計算機都會認出來是一個單獨的單詞，每個漢字都會默認地和其餘漢字分隔開，可是英文字母卻不會默認地分隔開，由於計算機不知道多少個英文字母纔算是一個單詞，所以咱們須要手動爲其添加分隔符。

而這個分隔符咱們也不陌生，就是咱們經常使用的空格，只要咱們在這一串字符中間加幾個空格，那麼被空格隔開的字符就會被當作是一個單詞從而與其餘的單詞分隔開。

那麼如今問題來了，空格的做用是當作分隔符來使用，並非咱們所想的那種空白的一個格，那麼咱們怎麼在html中寫空白格呢？

• 這裏咱們就要提到一個名詞叫作編碼集了。咱們在書寫html的時候，不少特殊的符號是沒法寫出來的，這個時候咱們只能用編碼來讓瀏覽器識別咱們所想的符號。編碼的格式是&編碼; 千萬不能忘記後面的分號喲~

• 空格的編碼就是&nbsp; 當咱們寫多個&nbsp;的時候，在頁面中咱們也就能夠看到多個空白格了。

• 其次，用來當作標籤的尖括號<>也是沒法正常經過符號來顯示出來的，咱們一樣須要用編碼集讓瀏覽器識別出來。< 小於號的編碼是&lt; less than的意思，同理，> 大於號的編碼時&gt; great than的意思。咱們只要在html中寫這兩個編碼，那麼大於號和小於號就能夠正常顯示出來了喲~我記得有一個表情是 &gt;_&lt;~

• 一樣的，回車也是屬於分隔符，在html中回車是沒有做用的，咱們想要在網頁上讓文字顯示出回車換行的效果的話，編碼一樣也是沒有辦法實現的，咱們須要一個標籤叫作<br>標籤，這個標籤的做用就是換行。w3c標準中提到：<br> 標籤是空標籤（意味着它沒有結束標籤，所以這是錯誤的：<br></br>）。在 XHTML 中，把結束標籤放在開始標籤中，也就是 <br />。

下一篇咱們會繼續教給你們HTML裏更多的標籤