1. 程式人生 > >HTML標簽參考(一)

HTML標簽參考(一)

正常的 div 計算機 麻煩 組合 code 屬於 格式 而是

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裏更多的標簽

HTML標簽參考(一)