HTML-圖片和多媒體

1、圖片和多媒體

（1）    圖片：img元素

src 屬性：圖片路徑；

alt 屬性：圖片無法顯示時使用的替代文字；

title：滑鼠懸停時顯示的文字 ；

1 <img src="圖片路徑" alt="圖片無法顯示時使用的替代文本"title="滑鼠懸停時出現的文字">

（2）    視頻：video元素

 src 屬性：視頻路徑 ；

controls 屬性：【布爾屬性】指定後，會顯示播放控制項；

autoplay ：【布爾屬性】指定後，視頻在頁面顯示後立即進入播放狀態；

muted ：靜音，某些瀏覽器強制提升用戶體驗自動播放時需設置該屬性；

loop ：【布爾屬性】指定後，視頻將迴圈播放；

height：設置視頻播放器的高度；

width：設置視頻播放器的寬度；

poster：規定視頻下載時顯示的圖像，或者是在當用戶點擊播放按鈕前顯示的圖像。

Preload：如果出現該屬性，則視頻在頁面載入時進行載入，並預備播放。如果使用“autoplay”則忽略該屬性。

  <video src="img/herocute.mp4" controls width="100%" muted autoplay poster="img/gallery-img3.png"></video>

（3）    音頻：audio元素

src 屬性：音頻路徑；

controls 屬性：【布爾屬性】指定後，會顯示播放控制項；

autoplay ：【布爾屬性】指定後，視頻在頁面顯示後立即進入播放狀態；

muted ：靜音 某些新瀏覽器強制提升用戶體驗 自動播放時需設置該屬性；

loop  ：【布爾屬性】指定後，視頻將迴圈播放；

（4）    figure元素

（5）    可替換元素和非可替換元素

可替換元素：元素的顯示內容，由其屬性決定，比如img、video、audio；

非可替換元素：元素的顯示內容，由元素內容決定，絕大部分元素都是非可替換元素。

2、嵌入式元素

嵌入式元素用於向網頁中嵌入外部資源。

（1）    向網頁中嵌入圖片資源，img元素、area元素、map元素；

（2）    向網頁嵌入視頻資源，video元素；

（3）    向網頁中嵌入音頻資源，audio元素；

（4）     向網頁嵌入flash程式 data相當於路徑，embed元素、object元素； 

（5）    Iframe元素向網頁嵌入圖另一個頁面

 <ul>
        <li>
            <a target="all" href="https://www.baidu.com/">百度一下</a>
        </li>
        <li><a target="all" href="https://www.wikizero.com/">維基百科</a></li>
        <li><a target="all" href="https://w3.org/">W3C</a></li>
    </ul>
    <iframe id="all" name="all" src="https://www.baidu.com/" frameborder="1"></iframe>

效果圖：

3、圖片地圖 map元素劃分圖片細小區域

   子元素 area區域 sharp區域形狀（rectangle矩形 兩個坐標點對角 circle圓 一個坐標 半徑 ）coords區域坐標範圍 id 和name相容 在 img 上使用 usemap=“#id名”

    <figure>
        <img usemap="#a" src="img/gallery-img3.png" alt="">
        <figcaption>綠色的蘋果</figcaption>
    </figure>
    <map id="a" name="a">
    <area shape="circle" coords="79,119,75" href="https://baike.sogou.com/v5228.htm?fromTitle=%E8%8B%B9%E6%9E%9C%EF%BC%88%E6%B0%B4%E6%9E%9C%EF%BC%89" alt="" target="_blank">
<area shape="rectangle" coords="98,43,145,177" href="https://baike.sogou.com/v5228.htm?fromTitle=%E8%8B%B9%E6%9E%9C%EF%BC%88%E6%B0%B4%E6%9E%9C%EF%BC%89" alt="">
</map>

 當點擊圖片上的源泉部分，網頁就會跳轉到https://baike.sogou.com/v5228.htm?fromTitle=蘋果（水果）這個網頁。

4、行盒和塊盒

（1）  行盒：display屬性為inline（預設值）的元素；

（2）  常見的行盒：大部分文字元素：span、abbr、em、i、strong、b；

圖片和多媒體：img、video、audio。

（3）  行盒的特征：

l  行盒可被折斷，因為內容可被折斷換行；

l  同一個包含塊中，連續的多個行盒水平依次排列；

l  空白摺疊的規則僅適用於行盒內部和行盒之間；

l  行盒與行盒之間的距離可使用水平方向上的margin和padding進行設置。