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裡更多的標籤