iT邦幫忙

2021 iThome 鐵人賽

DAY 6
0
Modern Web

30天學網頁設計系列 第 6

Day6 HTML 語法簡易介紹(三)

常見的 HTML elements

圖片 (img)

想要在網頁放上圖片,可以使用img標籤,他不用開頭和結尾標籤,單獨一個img即可,我們稱這樣的標籤為空元素(empty element)。不像段落文字標籤,需要開頭與結尾這種成雙成對的包覆規則,只需要一個標籤即可發揮功能。
在使用上,主要是標籤的屬性,包括圖片檔案來源src、圖片替代文字alt、高度height、寬度width。

例如我要在網頁放上一張圖片,HTML可以這麼寫:

<p> 圖片範例 </p>
<img src="minecraft.jpg" alt="minecraft" height="691" width="1632">

程式執行後的網頁內容將會是:

img是圖片的英單image之簡稱,取此單字的前三個字母代表。而屬性名稱src則是來源檔案source file之簡稱,alt是alternative text替代文字,height與width則是高度與寬度的英文。
這邊需要注意的是,src屬性必須要有圖片的副檔名,這邊的例子是.jpg,如果沒有副檔名則圖片無法顯示。

常見的圖片附檔名包括:

  • .jpeg
    靜態影像壓縮格式的圖片,與jpg是相同的意思,只是早期副檔名只能三個字母,所以只取jpg。雖有圖片失真的缺點,但因為檔案小的特性,有利於網頁傳輸,是很常見的網頁圖片格式。
  • .png
    可攜式網路圖形,圖片品質比.jpeg好,但檔案較大,可有透明底圖,常用於logo圖片。
  • .gif
    圖像互換格式,可以插入多個影格產生動畫效果。
  • .svg
    可縮放向量圖形,向量圖的特性就是縮放不失真。

標籤的屬性雖然有點複雜,但其實只是將屬性名稱加上等號,要添加的屬性填入引號內,不同屬性空一格表示。屬性可以選擇性的添加,依照需求為標籤添加屬性,當然如是img這類標籤,一定要有src屬性,才可加上圖片。

屬性名稱="要給屬性的值"

而選擇性的添加屬性的意思是,如只想填寫檔案來源、替代文字,以及圖片高度,寬度並不想設定,那麼瀏覽器會按照原本的圖面比例,調整圖片寬度。例如:

<img src="minecraft.jpg" alt="minecraft" height="300" >

程式執行後的網頁內容將會是:

超連結 (anchor)

超連結的標籤是anchor的縮寫,主要使用屬性由href展現功能,href是hypertext reference的縮寫。

<p> 超連結範例 </p>
<a href="https://reurl.cc/rgpVV4" target="_blank">理想混蛋 Bestards【行星】</a>

程式執行後的網頁內容將會是:

如範例所示,點選「理想混蛋 Bestards【行星】」後,網頁就會轉跳到你在href屬性所設定的位置或網址。超連結標籤除了href這個屬性外,還有一個很常用的屬性是target,將屬性的值設為blank,就可以讓超連結自動開新分頁,而非預設的直接覆蓋掉原本的網頁。

超連結標籤的內容除了文字,也可以是圖片,若想建立圖片的超連結,直接將文字替換為img標籤即可。

<p> 超連結範例 </p>
<a href="https://reurl.cc/rgpVV4" target="_blank"><img src='Galaxy Version.png' alt='Galaxy' height='200'></a>

程式執行後的網頁內容將會是:

超連結對於網頁是相當常見,如點即某個圖片或某個文字,而轉跳到網頁的特定位置,皆是超連結的呈現。

註解

前面所提到的各種標籤都會顯示在網頁上,但如果在編寫HTML時想在某個地方做小筆記,提醒自己或他人,就可以使用註解標籤了。

<!-- 填入你的註解-->

在中填入文字,瀏覽器就不會把顯示在網頁上。使用Ctrl+/(windows系統)可以在編輯器快速打出註解的符號。


上一篇
Day5 HTML 語法簡易介紹(二)
下一篇
Day7 HTML 區塊標籤:div、span
系列文
30天學網頁設計30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言