HTML結構問題

css html layout

syuanlu 2022-03-18 09:28:31 ‧ 1216 瀏覽

分享至

大家好，由於最近剛接觸html和css，目前在練習切版，這是我在網路上看到某個youtuber切的板，但有個問題HTML的部分我不太懂，下圖是我需要做出來的結果，我要在一個區塊裡放入一個P和H2

這是我先自己寫的 HTML

   <section >
       <p>Lorem, ipsum dolor.</p>
       <h2>Responsive layouts don’t have to be a struggle</h2>
   </section>

然後下面是那位youtuber寫的

 <section>
     <div class="container">
       <p>Lorem, ipsum dolor.</p>
       <h2>Responsive layouts don’t have to be a struggle</h2>

     </div>
   </section>

我不太懂為什麼外層已經有<section>將P和H2包起來了，還要再用<div class="container">去將我的P和H2包起來，這樣寫在之後的排版上會有什麼好處嗎，還是其實不用<div>也沒有差呢?

看更多先前的討論...收起先前的討論...

來杯拿鐵 iT邦新手 2 級 ‧ 2022-03-18 10:04:48 檢舉

學到CSS章節，就會知道class作用。
class像是分組，
之後可以設定container組的p，文字統一變綠色。

kaguya0614 iT邦新手 3 級 ‧ 2022-03-18 11:34:21 檢舉

section 主要是表示這個區塊的「主題」。
div是一般排版會用到的容器，因為div沒有代表任何意思，就是一個「乾淨」的容器
另外不要被class = "container"給混淆了，那個標籤是給CSS使用的

kaguya0614 iT邦新手 3 級 ‧ 2022-03-18 11:36:11 檢舉

你可以把section視為一個獨立的區塊，而在裡面使用div則是為了在「section」裡面進行排版而使用的「容器」。

窮嘶發發發 iT邦高手 1 級 ‧ 2022-03-21 10:40:12 檢舉

其實這跟SEO有關係，如果樓主不考慮SEO的話，隨便弄也沒關係啦
到HTML5之後語意標籤其實都可以自行定義，沒有規定一定要表列的那堆
瀏覽器已經可以分析標籤宣告與結尾的模式，所以，真的不用太在意
如果不考慮SEO，隨便寫都可以的，真的，還有很多人都會RESETCSS
所以一樓說的那個預設值清零之後，就是清零上面統一寫的值，不會是預設的
如果你抓的RESETCSS又自己去改過定義值，那就真的是看人高興怎麼弄就怎麼弄
只是，樓主真的不在意SEO嘛

登入發表討論

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

2 個回答

Bobby

iT邦新手 5 級 ‧ 2022-03-18 09:57:31

div可以用來被CSS控制，你可以看看那個youtuber在CSS那邊的container寫了什麼
也可以參考這篇文章

回應 4
分享
檢舉

看更多先前的回應...收起先前的回應...

syuanlu iT邦新手 5 級 ‧ 2022-03-18 16:22:41 檢舉

可是section不也是可以被CSS控制嗎? 這是那位youtuber針對section和div.container寫的css

section {
    padding: 4rem 0;
  }
  
  .container {
    margin-inline: auto;
    width: min(90%, 70.5rem);
  }

想請問我不能直接將div.container的css直接寫在section上嗎?

來杯拿鐵 iT邦新手 2 級 ‧ 2022-03-19 18:03:16 檢舉

可以這樣做，但是新手課程建議照抄，後面教到JS(javaScript)，可能會用到container 這個class。

grimmq52156 iT邦新手 5 級 ‧ 2022-03-19 18:06:35 檢舉

僅就此例子而言，寫在container中或寫在section，沒有任何差別。
youtuber的寫法，在我的解讀中，隱含的意思是「網站中所有的section預設都是padding: 4rem 0，而在所有section中的.container預設都是maring-inline:auto;width: min(90%, 70.5rem);」

如果你把.container的css寫在section中，意思就會變成「網站中所有的section預設都是padding: 4rem 0;maring-inline:auto;width: min(90%, 70.5rem);」

有看出其中的差別嗎？除非我確定整個網站的section都預設擁有padding、margin-inline、width這些css屬性，我才會把這些屬性寫給section，若我目前僅能確定只有padding是所有section預設都一樣，那麼我就只會把padding寫給section，剩下的先寫給其他的class，日後再視情況調整。