推 qwer820404:根據w3c文件, h1 h2 h3這些在預設的css是用em去定議的 04/12 18:44
→ qwer820404:所以我們現在要看em的部份影響範圍 04/12 18:44
→ qwer820404:em 這個單位用法是 會繼承父級元素 (父級的font-size) 04/12 18:46
→ qwer820404:以預設狀態來說body的font-size 是16px 04/12 18:47
→ qwer820404:所以1em =16px,以此類推 04/12 18:47
→ qwer820404:但如果你的元素是用section or div這類的東西去包 04/12 18:47
→ qwer820404:那就要去看section or div他的font-size是多少 04/12 18:48
推 qwer820404:然後提醒一下 你可以去測試看看position設定後 04/12 18:50
→ qwer820404:會不會影響到h1這些的繼承邏輯 04/12 18:51
→ qwer820404:希望有回答到你的問題 04/12 18:52
感謝回答,不過我的問題並非 em 大小,那單純是舉例說明我想做的效果。
我的問題是,正確的 HTML 標籤應該是怎麼寫?
以往的話直接 DIV 包一包就了事,但是現在混了 article、section、
header、footer、aside、nav 等新標籤,實在不知道應該怎麼用才對。
就定義上來說,所有語義標籤都不適合的情況下,才去用 DIV。
因此我覺得應該是用 section 來包。
<header><h1>網站名稱</h1></header>
<section id="main">
<section class="big">分類一的框框</section>
<section class="small">分類二的框框</section>
<section class="small">分類三的框框</section>
</section>
<footer>(C) Copyright</footer>
問題就在於各 section 裡的標題應該用 h1 還是 h2。
另外, "big" 和 "small" 的 section 又似乎應該用 article,
因為他們各自是獨立的,雖然都擺在首頁,但相互之間毫無關聯;
但是 "small" 的兩個又只是摘要,並非全文,
這是否代表用 article 不合適呢?
或者,把 "big" 視為 article,然後 "small" 的視為 aside。
<header><h1>網站名稱</h1></header>
<article><h?>分類一文章名稱</h?>文章全文</article>
<aside>
<section><h?>分類二</h?>摘要</section>
<section><h?>分類三</h?>摘要</section>
</aside>
<footer>(C) Copyright</footer>
變成這樣,是否更符合 HTML 的意義呢?
※ 編輯: zxcvforz (1.34.87.23), 04/12/2014 23:49:38
推 qwer820404:沒有必要為了使用html5新的tag而去煩惱這件事情吧 04/13 02:49
→ qwer820404:說穿了他們還是區塊元素 只是先幫你定義好了 04/13 02:49
推 qwer820404:我收回上面二句話 04/13 02:57
推 qwer820404:看一下 4.3 Sections的部份 應該就能得到你要的答案 04/13 03:02
→ lyforever:hgroup? 04/13 14:53
→ zxcvforz:謝謝樓上,我再研究一下! 04/17 14:09
根據 W3:
article 用於原則上為完整而且獨立的個體,可重覆使用、可匯出。
例如討論串裡的每一篇回文、部落格的每一篇文章、訪客的每一篇留言。
例如部落格文章為 article,裡面可再將訪客留言巢狀標記成 article。
當網頁本身就只是一個 article 時不需要再包 article 標記。
section 用於章、節等有獨自主題,適合加入 h1~6 標題的區塊。
例如章節、分頁式對話框的每一個分頁等等。
網站首頁的簡介、新內容、聯絡資訊也各屬一個 section。
基本上,只有在這個區塊應該列入該網頁大綱時才用 section,
否則為排版或程式用途的區塊應使用 div。
aside 用於非本文但是與本文有所關聯的區塊。重點在於「非本文」。
例如排版上為凸顯效果而獨立出來的引言("pull quotes"),
或是要擺在側欄的導覽選單、廣告等等。
至於 section 裡應該統一用 h1 還是照網頁整體架構去降級,
依 W3 的範例是應該要照整體架構去降級。
另外,section 並非必要。一個依 h1~h6 架構撰寫的網頁,在 HTML 語義上,
有沒有把每個區塊用 section 再包起來,毫無分別。
因此原本的問題最終解答是如此做:
<body>
<header><h1>網站名稱</h1></header>
<div>
<section><h2>...</h2></section>
<section><h2>...</h2></section>
</div>
<footer>(C) Copyright</footer>
</body>
DIV 單純是為了制定浮動區塊的範圍,如果要讓浮動區塊自由佔整個 BODY,
那麼連這個 DIV 都不必了;但 section 則是讓各分類獨立浮動而有所必要。
如果不做浮動區塊的話,前面的 div 和 section 都不用了。
※ 編輯: zxcvforz (1.34.87.23), 04/18/2014 05:42:51