[前端連載] 賣咖啡學 html tag
簡介 上一篇簡單介紹完編輯器和html的tag,這篇就要來詳細介紹各種tag囉。說到html裡的每個tag,都有它存在的意義和目的。此外,這些tag可說是琳琅滿目,基本上沒有人可以全部認得喔! 那如果tag有這麼多種的話,我們要怎麼學呢?當然是挑出一些重要的、常見的tag,解釋它的使用時機和意義,其它的部分,就交給個人造化,需要的時候再去查囉。網路上有各式各樣的html5 cheat sheet可以參考,印下來,閒瑕時拿來蓋泡麵也是很不錯的XD 開始囉! 迎合老闆很重要 還記得你實驗室的老闆嗎?他平常的興趣是喝咖啡,上課時喝咖啡、下課時也喝咖啡。要罵你們這些研究生不長進之前,也是先喝一口咖啡漱口。此外,關於他最喜歡的程式語言,也是叫咖啡。但除了喝咖啡之外,他還有一個副業是賣咖啡。 什麼?賣咖啡?他不是教授嗎?幹麻去賣咖啡? 博士都可以賣雞排了,為什麼教授不能賣咖啡?說到這個,請給我一杯「教授咖啡」,我想喝喝看好不好喝。 這天你老闆走到你的座位,拍了你的肩膀。你覺得很奇怪,明明我今天準時早上九點到實驗室啊,難不成要罵我那天慶祝生日沒找他不成?正當你下半身發軟,想著要怎麼解釋的時候,老闆開口了: 可以幫我做一個網頁嗎?我想要向外行銷我的「教授咖啡」。 喔喔,當然可以啊! 即便有千百個不願意,但為了少幫他倒365天的咖啡,你還是硬著頭皮接下了這份差事,即便你沒有寫過任何的網頁。 想想看,你的網頁想要顯示什麼? 當然是標題囉!進一個網站的第一眼,一定是上方斗大的標題,這標題下的好不好,決定你87%的生意。我想你要賣杯咖啡的話,你的標題一定是跟咖啡有關,不會是什麼修理紗窗換玻璃之類的。 說到標題的話,你就需要一個h1 tag。除了h1 tag外,html 還提供我們6個大小的標題,分別是h1 h2 h3 h4 h5 h6,由大到小。每個瀏覽器顯示他絕對大小的部分,有可能會不一樣,但一般來說,都是h1>h2>h3>h4>h5>h6。所以囉,如果你要加上一個副標題的話,你就可以選擇使用h2。 除了標題之外,你還會需要一段內文,這時候,我們就需要一個p tag,代表的是paragraph。看到了嗎?這就是你第一步的網頁雛形。 http://codepen.io/noootown/pen/KzjNOP 那,我可不可以把h6拿來當內文呢? 當然可以囉,高興的話,連h1都可以拿來當內文。不過為了可讀性和瀏覽器SEO(搜尋排名),我們通常不會這麼做的。h1到h6和p都是一把刀,但不同種的刀適合切不一樣的東西,就是這個概念。…