Day10:網頁開發學習之路-icon與img

2022 iThome 鐵人賽

DAY 10

自我挑戰組

網頁開發（html.css）系列第 10 篇

14th鐵人賽

claireyang

2022-09-10 18:47:52

833 瀏覽

分享至

icon logo

瀏覽網站時，常可以看到網頁網址列上附有logo圖示
logo

作法是在<head>裡面加上

<link rel="shortcut icon" href="圖片的位置 "/>

href裡放圖片的路徑，存放在電腦裡的，或是網頁上的圖片連結網址都可以

這裏推薦幾個免費下載icon的網站：
icon8、ICONFINDER、flaticon
還有很多其他免費下載icon的網站，有興趣可以參考這裏
icon推薦網站
雖然是免費的，但使用上有些會要求要註明出處，也要留意

img

<img>是個空元素不需要結束標籤，標籤中有兩個必須的屬性是scr、alt
src
指定圖片位址 (URL)
alt
當圖片無法顯示時，瀏覽器會顯示此文字，建議圖片都需要有 alt。
width
一個整數值，指定圖片寬度像素 (pixels)，有指定的好處是可以避面頁面渲染時的跳動，因為瀏覽器不用等圖片下載完才能計算圖片寬度。
heigh
一個整數值，指定圖片高度像素 (pixels)，有指定的好處是可以避面頁面渲染時的跳動，因為瀏覽器不用等圖片下載完才能計算圖片高度。
title
可以指定一段文字，在當滑鼠滑過圖片時，會自動顯示這段文字。

插入的圖像可以是靜態的也可以是動態的圖片
以下的例子是連結維基百科中大熊貓網頁中的圖片
只要在圖片上按下滑鼠右鍵選擇複製連結網頁，再將網址貼在src
為了避免圖片無法正常顯示時加上替代文字，因此增加alt，在設定圖片的高度、寬度

<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/8d/Lightmatter_panda.jpg/440px-Lightmatter_panda.jpg"
       alt="敬請期待"
       width="200px"
       height="200px"/>

如果要讓滑鼠移到圖片上可以有連結點選的效果，可以在標籤前面加上超連結的標籤<a herf="要連結的網址">

<a href="https://zh.wikipedia.org/wiki/%E5%A4%A7%E7%86%8A%E7%8C%AB"
    ><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/8d/Lightmatter_panda.jpg/440px-Lightmatter_panda.jpg"
      alt="敬請期待"
      width="200px"
      height="200px"
  /></a>

要調整圖片的樣式也可以搭配style，舉例正方形圖片要變成圓形可以在標籤裡面加上
style="border-radius: 50％