HTML之圖片元素

圖片元素

img元素

image縮寫，空元素

src屬性： source

alt屬性：當圖片資源失效時，將使用該屬性的文字替代圖片

和a元素聯用

 <a href="https://baike.baidu.com/item/%E5%A4%AA%E9%98%B3%E7%B3%BB/173281?fr=aladdin" target="_blank" >
    <img src="./img/timg.jpg" alt="這是一張太陽系的圖片">
 </a>

和map元素

map：地圖

map的子元素：area

衡量座標時，爲了避免衡量誤差，需要使用專業的衡量工具：

px、pxcook

 <img usemap="#solarMap" src="./img/timg.jpg" alt="這是一張太陽系的圖片">

    <map name="solarMap">
        <area shape="circle" coords="134,194,14" href="https://baike.baidu.com/item/%E5%9C%B0%E7%90%83/6431?fr=aladdin"
            alt="地球介紹" target="_blank">
        <area shape="rect" coords="420,14,474,86"
            href="https://baike.baidu.com/item/%E6%B5%B7%E7%8E%8B%E6%98%9F/30351?fr=aladdin" alt="海王星介紹"
            target="_blank">
        <area shape="polygon" coords="272,172,252,208,296,198,305,164"
            href="https://baike.baidu.com/item/%E5%9C%9F%E6%98%9F/136354?fr=aladdin" alt="土星介紹" target="_blank">
    </map>

和figure元素

指代、定義、通常用於把圖片、圖片標題、描述包裹起來

子元素描述標題：figcaption

界面沒有改變，但是加上後有利於搜索引擎優化

    <figure>
        <img usemap="#solarMap" src="./img/timg.jpg" alt="這是一張太陽系的圖片">
        <figcaption>
            <h2>太陽系</h2>
        </figcaption>
        <p>
            太陽系（Solar System），是質量很大的太陽，以其巨大的引力維持着周邊行星、衛星、小行星和彗星繞其運轉的天體系統 [1] 。
            太陽位於距銀河系中心（銀心）約2.7萬光年、距邊緣2.3萬光年的地方。而銀河系直徑約有10萬光年，包含1500億顆恆星，太陽只是其中之一。太陽以250千米/秒的速度繞銀心運動，大約2.5億年繞行一週，地球氣候及整體自然界也因此發生2.5億年的週期性變化
            [1] 。
            截至2019年10月，太陽系包括太陽、8個行星、205個衛星和至少50萬個小行星，還有矮行星和少量彗星。若以海王星作爲太陽系邊界，則太陽系直徑爲60個天文單位，即約90億千米。若將彗星軌道計算在內，則太陽系的直徑可達6-8萬個天文單位，即0.9-1.2萬億千米
            [1] 。
        </p>
    </figure>