阿嬤都看得懂的 HTML 標籤怎麼寫

前兩天我們提到前端工程師的 3 種語言：HTML、CSS，還有 JavaScript。其中

• HTML 標籤用來告訴瀏覽器，網頁裡有哪些元素。
• CSS 用來告訴瀏覽器，這些元素的樣式。
• JavaScript 用來告訴瀏覽器，在使用者做出某些行為後，這些元素如何改變。

今天，我們來仔細看看 HTML 標籤怎麼寫。

還記得我們昨天怎麼描述海報嗎？沒關係我知道你阿嬤年紀大記性不太好，但是應該依稀彷彿有印象是這樣：

有個元素...其中有6 個元素......

沒錯，這些元素不是彼此獨立的，它們可能相互包含。是說，為什麼我們不能讓這些元素互相獨立就好，非得要包含來包含去，搞得這麼複雜呢？

讓我們回顧昨天那張海報：

按照上面的思路，我們可以拒絕使用這樣的包含法：

有個區塊，這個區塊長得像這樣－－位置在整個海報的右上角，內容是 6 行文字，其中有行文字，這行文字長得像這樣－－位置在這個區塊的最上方，文字的顏色是白色，而文字的內容是 "Montreal"。又有行文字，這行文字長得像這樣－－位置在整個海報的右上方，剛剛那行文字的下方，文字的顏色是白色，而文字的內容是 "Winter"。......

而可以使用這樣的窮舉法：

有行文字，這行文字長得像這樣－－位置在整個海報的右上方，文字的顏色是白色，而文字的內容是 "Montreal"。又有行文字，這行文字長得像這樣－－位置在整個海報的右上方，剛剛那行文字的下方，文字的顏色是白色，而文字的內容是 "Winter"。......

然而，我們做出的海報 / 網頁，終究是要交給客戶的。客戶可能看了看說，我覺得這些文字應該再向右一些......

這時候，如果我們使用窮舉法，就會調整得非常辛苦，因為我等於要調整 6 次文字的水平距離。我們不要荼毒阿嬤，6 次對老人家是真的很辛苦了。假使你覺得不辛苦，拎鄒罵詛咒以後客戶叫你調整 500 行。

然而，如果我們使用包含法，就可以把整個文字區塊往右移動，帶動裡面包含的 6 行文字都往右移動就可以了，輕鬆愉快！

那麼，我們可以怎麼表示這種包含的關係呢？我們大概有 2 種方法：

1. 文字描述的方式，或者讓我掉個書袋把它叫做「命題式」，就是直接說明所有元素間的包含關係。例如：

整張海報包含 4 個區塊元素：藍色背景、白色字樣、白色滑雪場圖片、滑雪女人圖片。白色字樣又包含 3 組文字段落區塊：地點、事件、日期。日期又包含......

命題式的作法，在視覺呈現上，看起來會像棵橫倒的樹：

這棵樹，在前端工程領域有個炫炮的名字，叫做「DOM」。這個方式主要是 JavaScript 在使用，到時候我們會大肆玩弄這棵樹的枝葉，把它折磨得不成樹形 (其實通常是工程師被它折磨得不成人形)。

2. 直觀視覺描繪的方式，或者讓我姑且稱作「類比式」，讓我直接上圖比較清楚：
   
   不過，這樣畫框框包含起來的方式，要怎麼轉成文字描述呢？我們不就是要用文字告訴小劉 / 瀏覽器該怎麼渲染嗎？
   沒錯，那我們把邊框全部轉成文字吧！不過，由於文字內容也是文字，所以，讓我們把表示邊框的文字用特殊的符號－－左右角號標示起來吧！這個使用角號標示起來，表示元素範圍的文字，我們就叫作「HTML 標籤」。寫中文不太國際化，小劉 / 瀏覽器看不太懂，我們來把這些文字全部轉成英文吧！區塊的英文 "division" 好長啊，讓我寫 div 就好。文字段落的英文 "paragraph" 也爆幹長，阿嬤累了，只寫個 p 代表就好！(有沒有覺得工程師是個很體貼老人家的行業。)
   
   聰明的阿嬤們會發現，那我上面和左邊框線，還有右邊和下面框線的標示就重複啦！幹嘛這麼浪費筆墨，我直接省略，只留下開始和結束 2 個標籤就好。
   
   不過，標示這麼多，看得實在眼花撩亂。我來把結束標籤的左角號後加上斜線，這樣看起來比較清楚。
   
   沒錯，這就是 HTML 標籤的長相，通常會有成對的開始標籤與結束標籤。

那麼，有沒有不成對的單身狗標籤呢？當然有！剛剛說到，我們需要標籤成對，是因為需要限定標籤的範圍，也就是這些標籤對應的元素內部可以包含其他元素。假使某個元素內部無法再包含其他元素了，那自然就無須成對囉！大家看過這種可以複選打勾的方框框嗎？
點我點我
這個元素叫做「核取方塊」。核取方塊的內部不會再有其他元素，因此，對應到核取方塊的標籤，也就只需要開始標籤囉！

讓我們接著想這個問題：假使我有個區塊元素，包含著 2 個文字段落元素；當我把這個區塊元素移除的時候，裡面的 2 個文字段落元素會怎樣呢？

沒錯，就是跟著移除囉！也就是說，這 2 個文字段落元素的存在，是依賴著外面的區塊元素的存在；就好像乖孫的存在，是依賴著阿嬤的存在。因此，在程式語言中，我們就說

• 這 2 個文字段落元素是這個區塊元素的「子元素」，而
• 這個區塊元素是這 2 個文字段落元素的「父元素」(阿嬤表示......)。

今天我們介紹了 HTML 標籤該怎麼開始與結束，以及標籤之間的包含關係，各位阿嬤是不是很想開始寫第一支 html 程式了呢？沒錯，我們明天就要開始寫出第一個簡單的網頁囉！興奮吧！