iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 4
1
Modern Web

HTML 與 CSS 學習筆記系列 第 4

Day04 - HTML (2) - head、body

  • 分享至 

  • xImage
  •  

<head>

  • 延續昨天的說明,<head> </head> 主要說明這個網頁的資訊,如編碼、標題,只會有一個
<head>
    <meta charset="UTF-8">
    <title>網頁標題</title>
</head>
  • <meta>:描寫網頁的資訊
    • charset="UTF-8" 表示網頁的編碼為 "UTF-8" 格式,可以讓我們中文顯示時不會出現亂碼
  • <title> </title>:如名稱就是一個網頁標題,在瀏覽器最上面的分頁上可以看到,以 word 來說我會定義成檔名
    • 如今年的鐵人賽網站:如果按 F12,在 Elements 的區塊裡面應該會看到縮排的 <head> </head>,點開後應該可以找到 <title> </title>,如果裡面的內容是 第 12 屆 iT邦幫忙鐵人賽::用30天向世界宣告,這一年來鋼鐵般的歷練,那就沒錯了
    • 可以試著把鐵人賽的標題改個名稱,圈選標題後修改成你要的名稱,再按 Enter,應該可以看到標題已經跟著改變了(這只是改變自己電腦顯示的狀況,別人是不會影響的,不用擔心)

<body>

  • <body> </body> 則是呈現這個網頁的內容,只會有一個
  • <h1> </h1><h1> ... <h6> 主要是這個網頁的標題,重要度從 1 ~ 6,可以當成是一種階層關係,通常 <h1> 就像 Word 的文章標題,只有一個,接下來是章 <h2>,再來是節 <h3>,最多就是細分到 <h6>
<body>
    <h1>這是 h1</h1>
    <h2>這是 h2</h2>
    <h3>這是 h3</h3>
    <h4>這是 h4</h4>
    <h5>這是 h5</h5>
    <h6>這是 h6</h6>
</body>

把這段存檔後,以瀏覽器開啟應該可以看到類似這樣的畫面,會呈現不同大小不同的字

  • <p> </p>:就是一般的段落 (paragraph),若有 2 個 <p> </p> 可以發現顯示時會幫你換行,若沒有用 <p> 隔開,就算自己換行,顯示出來也會是連在一起
<body>
    <p>這是 p 段落</p>
    <p>有 P 第一段</p><p>有 P 第二段</p>
    第一段
    第二段
</body>

把這段存檔後,比較一下有沒有 <p> 的差異

  • <br>:換行,當輸入 <br>後,會進行換行動作
<body>
    <p>這是 p 段<br>落</p>
    第一段<br>第二段
</body>

可以觀察到,在時被 <br> 強迫換行了

次回

繼續進行 HTML 的練習,來進行連結吧


上一篇
Day03 - HTML (1) - 標籤、架構、註解
下一篇
Day05 - HTML (3) - 列表、a、img
系列文
HTML 與 CSS 學習筆記31
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言