看板 Web_Design 關於我們 聯絡資訊
現在做的是個人的網站,主要還是以學習「正確」的 HTML5 為主。 網站的首頁上,我想要寫成這樣子的架構: <h1>網站名稱</h1> <h2>分類一最新:</h2> <h3>文章標題</h3> <!-- 這裡放「分類一」最新的文章整篇內容 --> <h2>分類二最新:</h2> <h3>文章標題</h3> <!-- 這裡放「分類二」最新的文章摘要 --> <h2>分類三最新:</h2> <h3>文章標題</h3> <!-- 這裡放「分類三」最新的文章摘要 --> <p>這是頁尾放些 powered by x 之類的東西假裝很專業。</p> 現在的問題是我想把這三個分類做成浮動的區塊, 分類一:佔 45em 寬 分類二:佔 20em 寬 分類三:佔 20em 寬 當訪客瀏覽器夠寬,分類二(甚至是分類三)就會排在右邊變兩/三欄式。 當訪客瀏覽器不夠寬,分類二和三就會排在分類一下面成兩欄。 這種情況下,「正確」的 HTML5 是否應該用 section 包住每一個浮動區塊? 還是說這邊用 section 是錯誤的,只能用 div 硬上? 如果用 section,那各 section 裡面原本的 h2 和 h3 是不是該從 h1 重新算? <h1>網站名稱</h1> <section id="bigsec"> <h1>分類一</h1> </section> <section id="smallsec"> <h1>分類二</h1> </section> 這樣子才對嗎? -- Sent from my HR-93. -- ※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 1.34.87.23 ※ 文章網址: http://www.ptt.cc/bbs/Web_Design/M.1397270516.A.E04.html
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
andrew43:定義在此: http://preview.tinyurl.com/npbklf5 04/13 22:47
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