iT邦幫忙

2025 iThome 鐵人賽

DAY 9
0
Modern Web

從骨架到靈魂:網頁構成三部曲系列 第 9

Day - 09HTML認識div標記和span&使用註解

  • 分享至 

  • xImage
  •  

html認識div標記和span&使用註解

div 標記

<div> 是 區塊標記且沒有語意,要切出一個區塊時會用 div,且會獨佔一行,前後會換行,可設定寬度和高度,也可以當作容器使用
格式:<div>...</div>

程式碼

 <div class="profile">
      <p>高木在校成績為全校前十的優等生,很受歡迎。</p>
    </div>

    <div class="profile">
      <p>艾蜜莉可是一個,性格單純善良,天真且勤勞。</p>
  </div>

成果

https://ithelp.ithome.com.tw/upload/images/20250918/20178756eww9gms3SU.png

span標記

span標記是一個行內標記,和div差別在div大多用在一個區塊,span則是在同一行內且不換行,比較適合針對部分文字或小型元素設定樣式,這邊我再搭配css讓部分文字變紅色
格式:<span>...</span>

程式碼

https://ithelp.ithome.com.tw/upload/images/20250918/201787562q0LLGFhpn.png

成果

https://ithelp.ithome.com.tw/upload/images/20250918/20178756j6yJd1kkO6.png

html註解

在 HTML 程式碼中,註解是用來添加說明或備註的文字,這些文字不會顯示在瀏覽器中。註解的格式是使用 <!-- 開始,並以 --> 結束。
格式:<!-- 這是一個註解 -->
註解可以用在不少地方,例如:

  1. 留下代辦事項:這裡的窗戶(某張圖片)尺寸待確認
  2. 說明程式碼的功能:這段程式碼是用來顯示標題
  3. 暫時移除程式碼:

上一篇
Day - 08 HTML圖片和超連結
下一篇
Day -10 CSS的文字樣式
系列文
從骨架到靈魂:網頁構成三部曲11
圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言