iT邦幫忙

2025 iThome 鐵人賽

DAY 8
0
Modern Web

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

Day - 08 HTML圖片和超連結

  • 分享至 

  • xImage
  •  

html圖片和超連結簡單說明~

圖片

<img>標籤用於在網頁上嵌入圖片,不需要 </img> 的結束標籤。

src屬性:指圖片檔案的路徑或網址

src="cat.jpg"
https://ithelp.ithome.com.tw/upload/images/20250916/20178756uKfgQcgz5O.png

alt屬性:圖片無法顯示時會顯示的文字

除此之外alt對引擎優化有幫助~
alt="貓咪圖片"
https://ithelp.ithome.com.tw/upload/images/20250916/20178756XBsg4Yf3hl.png

title屬性:移動到圖片上時會顯示的文字

title="這是一隻可愛的貓咪"
https://ithelp.ithome.com.tw/upload/images/20250916/20178756BXWIPcv1tZ.png

超連結

使用超連結就可以幫你連結到其他網站
格式:<a>...</a>
超連結有三個屬性:
<href>:

  1. 外部網站,需要提供包含 https:// 的完整網址
  2. 內部網站: <href="index.html">
  3. 連到其他協定: ftp://,mailto://
    <name>:用來設定內部文件被連結點
    <target>:案連結後指定顯示的視窗
    1.<target="_self">:把目前在的視窗開啟連結目標
    2.<target="_blank">:在一個新的分頁或視窗中開啟。這是最常用的值
    3.<target="_parent">:父框架開啟連結
    4.<target="_top">:最上層顯示目標

程式碼

超連結:<a href="https://example.com/cat-image">貓咪</a>
https://ithelp.ithome.com.tw/upload/images/20250917/20178756x5h5FgDgOL.png


上一篇
DAY07 - HTML表單
系列文
從骨架到靈魂:網頁構成三部曲8
圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言