iT邦幫忙

2023 iThome 鐵人賽

DAY 5
0
Modern Web

從零寫出捷運美食介紹網頁(HTML/CSS)系列 第 5

[Day5]HTML-簡介及元素(下)

  • 分享至 

  • xImage
  •  

今天要講的是巢狀結構和空元素,那就直接開始吧!


巢狀結構

特別要注意的部分是,HTML內的元素排序為巢狀結構,就是像洋蔥一樣一層一層地包覆。

以範例「今天是第五天」來說,假如要將「第五天」顯示為粗體,就必須在「第五天」的左右兩邊分別加上粗體的起始標籤<strong>及結束標籤</strong>

<p>今天是第五天</p>
<p>今天是<strong>第五天</strong></p>

顯示結果:
https://ithelp.ithome.com.tw/upload/images/20230917/20162303DjeeexbNNO.png

空元素

昨天有提到大部分元素會包含起始標籤、內容及結束標籤,而少部分只有起始標籤的元素,就稱為「空元素」。以下舉一些常見的例子。

<meta>

  • 放在<head>
  • 提供有關網頁的無數據訊息,例如網站的關鍵字或描述
<meta charset="UTF-8">

<link>

  • 放在<head>
  • 規定外部資源與HTML檔案的關係
  • 須搭配rel屬性和href屬性一起使用,常用於引入CSS檔
<link rel="stylesheet" href="style.css">

<img>

  • 在網頁中插入圖片
  • 須搭配src屬性和alt屬性一起使用
<img src="https://www.google.com.tw/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" alt="Google商標">

顯示結果:
https://ithelp.ithome.com.tw/upload/images/20230917/20162303ECLwar2v3v.png

<br>

  • 換行工具
  • 在HTML中若想要幫段落換行,直接按enter鍵是不會顯示出來的,必須使用<br>元素
  1. 使用enter鍵:

    <p>在HTML中想要幫段落換行
       直接按Enter鍵只會顯示一個空格
       必須使用換行元素才能成功換行</p>
    

    顯示結果:
    https://ithelp.ithome.com.tw/upload/images/20230917/20162303qFpJmKBBcB.png

  2. 使用<br>

    <p>在HTML中想要幫段落換行<br>直接按Enter鍵只會顯示一個空格<br>必須使用換行元素才能成功換行</p>
    

    顯示結果:
    https://ithelp.ithome.com.tw/upload/images/20230917/201623033NdhGALkvB.png

原本只想用一天簡單介紹HTML和元素構成,不知不覺內容越來越多,但又不希望每篇的內容太長,只好分成兩天。雖然都是一些很基礎的內容,但做任何事情打好基礎是很重要的開始。那今天就到這邊,我是YQ,明天見。


上一篇
[Day4]HTML-簡介及元素(上)
下一篇
[Day6]HTML-架構
系列文
從零寫出捷運美食介紹網頁(HTML/CSS)30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言