HTML 教學 (二)

去年開始撰寫的HTML教學我終於有時間繼續寫下去了 ...

上次我在HTML教學中教了兩個東西:

  1. 網頁的架構
  2. HTML 標籤的屬性

所以這次想要來談談標籤的嵌套以及標籤的類型。

標籤的類型

標籤有分為兩種,一種叫做區塊(Block)標籤,一種叫做行內(Inline)標籤,這兩種的差異最主要是在可不可以內嵌其他的標籤進去,關於內嵌的部分我們等等再說。

不過什麼是內嵌?我們可以想成把區塊標籤(或者稱為元素)當成是一個盒子,而這個盒子可以放入其他的容器或者非容器。舉個簡單的例子是:背包。我們可以把背包當成是一個區塊元素、錢包想成一個區塊元素,然後我們可以把錢包放到背包裡面,所以如果寫成HTML的話會類似這樣:

<背包>
  <錢包></錢包>
</背包>

然後,錢包可以放錢,但是錢不可以放東西「進去」,所以錢包是區塊元素,而錢是行內元素。化成HTML的話是這樣:

<背包>
  <錢包>
    <錢 />
  </錢包>
</背包>

至於我們常見的區塊元素有哪些呢?底下這個列表就是一些常見的:

  • h1 ~ h6 #=> 標題
  • div
  • p #=> 段落
  • ul, ol, li #=> 這個是無序跟有序列表,之後會介紹
  • table, thead, tfoot, tbody, tr, td #=> 這邊都跟表格有關

... etc

而行內元素有哪些呢?

  • a #=> 超連結
  • span
  • img #=> 圖片
  • br #=> 換行
  • hr #=> 水平線

標籤的嵌套

所以,我們現在已經知道了HTML的標籤分為區塊元素跟行內元素後,在撰寫HTML的過程當中我們就要小心不要套錯,雖然可能可以正常的顯示,但是在某些情況下可能會大亂哦!

簡單的展示一下標籤的嵌套吧:

<html>
  <head>
    <title>HTML教學</title>
  </head>
  <body>
    <h1>Hello, world</h1>
    <hr />
    <p>
      大家好,請多多指教,這是我的照片 <img src="" />
    </p>
  </body>
</html>

如此一來就可以嵌套網頁標籤囉!

最後

這次的教學最主要在簡單的介紹區塊元素跟行內元素還有標籤的嵌套,這在HTML的設計當中非常的常用,所以這次就不多介紹別的東西,下次我會來講一些比較應用面的東西。

來出個作業好了,請嘗試做出以下的網頁然後把網頁原始碼貼在 http://gist.github.com 上面,按下Create Public Gist後複製網頁網址然後貼到底下的回應區,有任何問題都歡迎詢問哦~

Comments

comments powered by Disqus