前端連載

[前端連載] html巢狀結構基礎——div 和 span

簡介

上次介紹了基本的html tag,這次來講一下,html中很重要的巢狀結構。如果有仔細看的話,應該會發現html是一層一層包住的,最外層是html tag,再來有body tag,還有我們寫的tag,包括h1 ~ h6之類的。

這次,我們要介紹兩個很重要的東西,分別是 div 和 span tag。這兩個 tag 在 html 之中很常出現,並清楚的標示我們的html結構。要學好網頁前端,一定要搞清楚他們的功能和差異性。

開始囉!

尿布和啤酒,是否該放一起賣?

談到很紅的big data,就不得不介紹一個經典的例子——尿布和啤酒。美國的零售業者沃爾瑪,裡頭的資料科學家在分析購買數據時,發現了一個很重要的事實。每到星期五晚上,尿布和啤酒的銷售量有正向關,而且同時提升。

蛤?尿布和啤酒?這個組合也太奇怪了吧。

你沒聽錯,就是尿布和啤酒。

該不會是星期五會定期舉行什麼奇怪的尿布啤酒party吧。

Nice Guess! 不過有其它原因,我們繼續聽下去。

這實在是不太尋常。經過調查之後,才知道,原來星期五晚上,爸爸們會到超市們幫baby買尿布,然後順便買些啤酒,回家看球賽。於是,沃爾瑪調整銷售策略,把啤酒和尿布放在同一區,果不其然,尿布和啤酒的銷量都大大的提升。

所以,這和我們的網頁架構有什麼關係?

當然我們這篇不是要講大數據多麼威猛。只是你是否在寫網頁時,發現常常會有某些東西,像是啤酒和尿布一樣,該被放在一起的?譬如一篇文章,便含有標題、副標題,文章預覽、日期……。若是如此,那我們就用個div把他給包起來,他們就算是一個區塊。請看下圖,每一個紅色包起來的範圍,都算是一個區塊。再仔細看一下左邊的文章,還可以發現大區塊裡有很多小區塊,分別包含標題、副標題,文章預覽、日期,這也是div包起來的喔。

divstructure

把它包成區塊有什麼好處呢?好處一,設定css方便。如果我們要為這個區塊設定樣式,那我們只要在這個div區塊加上css即可,其它的地方就不會被動到。如果我們一次要給很多類似的區塊設定個樣式,設個 id 或 class(id 和 class是什麼,我們下一篇會提到),全部類似的區塊就變為相同樣式了。

準備好囉,我們要把啤酒和尿布包在一起賣了。讓我們看看下面的範例,css的語法部分看不懂沒關係:

看,我們用div隔出一格一格的商品。每格商品縱然內容物的顏色不同,還是有相同的橘色外包裝。看一下css的部分,甚至可以發現我們只用一個goods的class,就把我們尿布和啤酒套裝商品的外包裝給設定好了。這是 div + css的威力。

我們也設定了尿啤組合(打字太累了,以下將尿布啤酒組合簡稱尿啤組合)的長寬,皆為100px。因此,你可以試著把 width: 100px 和 height: 100px 都拿掉看看,或者將其改為不同的數值。

商品的「排列」也是很重要的!

除了統一設定樣式之外,包成div或span的另一個原因是為了排列。我們剛剛還沒把我們的尿啤組合上架,現在可以來把它們上一下架了。我另外將尿啤組合們外再包一個div,他的class設定成shelf,代表的是商品架。背景是水藍色,如果你想給他改個底色的話,就把 background: cyan 的顏色換一個就好了。

下面 demo 的畫面會有一點長,點進去 codepen 的網頁後,建議按右上角的Change View,改成左右顯示的模式。會比較好對照。雖然程式碼有一點多,但主要都是重複的程式碼。關注的重點放在 css 的 goods1、goods2、goods3 這些class就好。

goods1 使用的是div,而div預設的排列方式就是一塊一塊的,對應到的的css屬性是display-block。goods2 使用的是span,而span的預設排列方式 display: inline。為了測試看看div和span的預設排列屬性,你可以將 goods1 和 goods2 前面的註解拿掉,會發現排列沒有改變。display常用的屬性除了這兩個外,也有另一種是display: inline-block。以下是這三種class的程式碼,我把它剝離出來,方便客倌們看。

.goods1{
 //display: block;
}
.goods2{
 //display: inline;
}
.goods3{
 display: inline-block;
}

所謂的block,就是「塊狀」的意思。設定此屬性後,div會直接佔據一塊,而「所有 block 屬性的兄弟元件」,在這邊是div,會一個佔一行。inline則是代表「單行」的意思。設定此屬性後,「所有inline屬性的兄弟元件」,在這邊也就是span,會盡可能的擠到同一行。至於inline-block,則是會把所有包含這屬性的,都盡量排到同一行,但是又保留div塊狀的特色。如果容器內含display-block屬性的元件過多,超過容器的寬度(這裡是500px),就會排到下一行去。inline-block 這個屬性,可是非常的好用。

這也是為什麼我要別於goods,另外設 goods1 ~ goods3 的 class。因為我只要設定這些的css,不同商品架的商品,就全部按照我要的排列方式排列囉。

不對啊,你說goods2是用span包起來的,但我看他還是塊狀排列耶。而且為什麼底色都不見了?

哈哈,你講到重點了,讓我來解釋一下。

goods2 的 span 之所以分成一行一行,且底色不見的原因,是因為被它包住的h3。h3預設的屬性也是block,所以會在span內排成兩行。然而 display: inline 的 tag 本來就是設計成單行顯示的,因此在inline 的 tag 裡面包一個 block ,是一個不好的寫法。想要讓 span 的顏色顯示正常,那我們就得把 h3 的預設屬性換掉,換成 inline 就可以了。我已經在程式碼最底部幫你註解起來了,只要把註解拿掉就好囉!

當然,因為這個 h3 的 css 屬性是設定給所有的 h3,因此把註解拿掉後,goods1 和 goods3也會受到影響,你可以觀察看看差異性喔!

上一篇曾經談到 tag 預設屬性的問題,這裡剛好可以再複習一下。strong、b、em、span、img這類的tag,都是預設 display: inline 的,而其它如 h1~h6、ul、ol、blockquote,這種的都是預設 display: block的。想要更改也可以,只要在 css 的地方做更改就好囉。

觀察網頁結構

當然囉,現實中的網頁結構可沒有這麼簡單。話雖如此,仍然是一層包一層的結構。要看網頁結構的話,可以使用 chrome developer 或 firefox 的開發者工具。此外,firefox 也提供一個功能,可以把網頁的結構立體化。請按照以下步驟,開啟它。

工具->網頁開發者->檢測器->右上角立體盒子圖案

這樣子就可以了,以下是Google的結構圖,你看,簡單的網頁就這麼多層了,有沒有覺得當前端工程師很興奮呢?

2016-06-11 21-40-27 的螢幕擷圖

結語

這次介紹的 div 和 span,是html 主要的架構。身為一個前端工程師要絕對要弄清楚的。懂了這些後,對於html的排版有很大的幫助。但是,排版是很吃經驗的一項工作,唯有多寫多做多看,才能讓架構更完美,也更具有彈性。

嘿,你下次要給我講一下 css 的 class在幹麻,今天講了一堆class的東西,我有點霧煞煞。

好的,沒問題!所以可以給我來罐啤酒嗎?

粉絲專頁

https://www.facebook.com/noootownnotes/

 

 

2 thoughts on “[前端連載] html巢狀結構基礎——div 和 span

  1. 這一段沒有看得很懂~
    1. h3預設的屬性也是block,所以會在span內排成兩行。
    為什麼block 加上在 span 內 就會被排成兩行?
    2. 而排成兩行的這個現象,造成span的高度不見了,變成0.
    為什麼兩行的這個現象, 會造成span高度不見?
    懇請詳解~

    Liked by 1 person

    1. 學長,我這邊講得有一點不太好,謝謝你的提醒

      1. 因為 h1 和 div tag一樣,預設的屬性都是 display: block,因為display block的特性就是一塊佔一行,所以h1會分成兩行來顯示。

      2. 這個地方我發現寫的有誤,span的高度還是會在,不過因為span 是 inline,所以沒有高度的屬性。我現在的認知是,沒有特別為什麼,會導致背景不見。因為inline 本來就是設計來只能一行的,在inline裡面包block是一個不好的設計,而且也沒有意義。

      喜歡

發表迴響

在下方填入你的資料或按右方圖示以社群網站登入:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / 變更 )

Twitter picture

You are commenting using your Twitter account. Log Out / 變更 )

Facebook照片

You are commenting using your Facebook account. Log Out / 變更 )

Google+ photo

You are commenting using your Google+ account. Log Out / 變更 )

連結到 %s