嵌入影象

在超連結裡嵌入圖片

<a href="連結地址" target="">
    <img src="圖片地址" title="" align="">
</a>

建立客戶端分割槽響應圖

我們可以建立一個客戶端分割槽響應圖，通過點選某張影象上的不同區域讓瀏覽器導航到不同的URL上。這一過程不需要通過伺服器引導，因此需要使用元素來定義影象上的各個區域以及它們所代表的行為。客戶端分割槽響應圖的關鍵元素是‘map’。

map元素包含多個‘area’元素，它們各自代表了影象可被點選的一塊區域。

1、area 元素常用屬性：

• shape：指定熱點響應區域形狀，值為：rect、circle、poly以及default；

• coords：指定對應的shape值；

• hreflang：目標文件語言；

• title：相應區域標題；

• alt：與img的alt屬性類似；

• target：開啟連線的目標視窗；

注意：shape和coords屬性標明使用者可以點選的各個影象區域。shape和coords屬性是共同起作用的。coords屬性的意思根據shape屬性的值而定。

下面程式碼演示了當shape值為‘rect’以及‘circle’時coords值得配置方法：

<!-- shape="rect"  矩形，參照方向為左和上，從左開始，順時針賦值。 -->
<area shape="rect"
 
 coords="影象‘左’邊緣與矩形‘左’側距離，影象‘上’邊緣與矩形‘上’側距離，影象‘左’邊緣與矩形‘右’側距離，影象‘上’邊緣與矩形‘下’側距離" href="#">

<!-- shape="circle"  圓形 -->
<area shape="circle" coords="從影象‘左’邊緣到‘圓心’的距離，從影象‘上’邊緣到圓心的距離，圓的半徑" href="#">

程式碼示例：

<p>
    <img src="map.jpeg" usemap="#mymap">
    <map name="mymap"
 
>
        <area shape="rect" coords="0, 0, 150, 117"  href="http://baike.baidu.com/item/%E9%AA%91%E8%A1%8C" alt="riding" title="騎行" target="_blank">
        <area shape="rect" coords="150, 0, 300, 117" href="http://baike.baidu.com/item/%E6%B8%B8%E6%B3%B3/65394" alt="swiming" title="游泳" target="_blank">
        <area shape="rect" coords="300, 0, 450, 117" href="http://baike.baidu.com/item/%E6%8B%B3%E5%87%BB/53858" alt="pugilism" title="拳擊" target="_blank">
    </map>
</p>

效果演示：

素材圖片：

嵌入網頁 iframe 內嵌框架

iframe 常用屬性

• name：設定‘iframe’的名稱；

• width：用於設定‘iframe’的寬度，值可以為畫素（不用新增“px”單位）和百分數；

• height：用於設定‘iframe’的高度，值可以為畫素（不用新增“px”單位）和百分數；

• src：用於設定‘iframe’元素內需要顯示頁面或檔案的URL地址，該屬性的值可以由與之關聯的‘a’標籤點選設定（通過將‘a’標籤的“target”屬性的值設定為該‘iframe’的“name”屬性的值進行關聯）。

• frameborder：是否顯示邊框，它只有兩個值，‘0’表示不顯示邊框，‘1’表示要顯示邊框；

• marginwidth：用於設定‘iframe’內容的左側和右側的距離，值為畫素（不用新增“px”單位），若‘iframe’內的頁面設定有CSS的“margin”屬性，則‘iframe’設定的“marginwidth”屬性將無效。

• marginheight：用於設定‘iframe’內容的頂部和底部的距離，值為畫素（不用新增“px”單位），若‘iframe’內的頁面設定有CSS的“margin”屬性，則‘iframe’設定的“marginheight”屬性將無效。（不過通常也不建議設定“marginwidth”和“marginheight”這兩個屬性，因為基本上都會被‘iframe’所關聯網頁的CSS樣式所覆蓋，除非‘iframe’所關聯的檔案並非一個Web頁面，而是文字檔案、圖片檔案及其它多媒體檔案等）

• scrolling：是否在‘iframe’中顯示滾動條，有三個可用值：

  • auto：預設，根據內容自動出現或隱藏滾動條；
  • yes：始終顯示滾動條；
  • no：始終隱藏滾動條；

程式碼示例

<nav>
    <ul>
        <li><a href="http://news.baidu.com/" target="_ifm">百度新聞</a></li>
        <li><a href="http://www.qq.com/" target="_ifm">騰訊新聞</a></li>
    </ul>
</nav>

<iframe src="" style="width:100%; height: 400px;" frameborder="1" scrolling="auto" name="_ifm"></iframe>

效果演示

通過外掛嵌入內容

embed 元素

常用屬性

• src：指定內容地址；

• type：指定內容的MIME型別；

• width/height：設定嵌入內容將在螢幕上佔據的空間大小；

• allowfullscreen：啟用全屏；

程式碼示例：

<embed src="宣傳資料.mp4" type="video/mp4" width="560" height="390" ></embed>

object 元素

object元素實現的效果和embed元素一樣，但它的工作方式稍有不同，並帶有一些額外的功能。

常用屬性：

• data：提供內容地址；

• type：指定內容的MIME型別；

• width/height：設定嵌入內容將在螢幕上佔據的空間大小；

• allowfullscreen：啟用全屏；

使用param元素來定義需要傳遞給外掛的引數，每個需要定義的引數都各自使用一個param元素。

<object data="宣傳資料.mp4" type="video/mp4" width="560" height="390">
    <param name="alloFullScreen" value="true">
</object>

如上程式碼所示，name和value屬性定義了引數的name和value。

object元素的一大優點就是可以包含備用內容，在指定內容不可用時顯示出來，類似於img的alt屬性。

<object data="../Desktop/WebTeaching/上課班級/IOS elite class/程式碼/Lesson02/media/chuai【>>】.mp4" type="video/mp4" width="560" height="390">
    <param name="alloFullScreen" value="true">
    <!-- 備用內容 -->
    <p><b>Soory!</b>We can't display this content!</p>
</object>

上面程式碼，我故意將data的值寫錯，執行之後將會顯示備用內容作為提示。

【object元素嵌入圖片】：

<object data="test.png" type="image/png"></object>

【object元素建立分割槽響應圖】：

<p align="center" style="border: 1px solid gray; border-radius: 10px;">
    <!-- <img src="map.jpg" usemap="#mymap"> -->
    <object data="map.jpg" usemap="#mymap"></object>
    <map name="mymap">
        <area shape="rect" coords="0, 0, 150, 117"  href="http://baike.baidu.com/item/%E9%AA%91%E8%A1%8C" alt="riding" title="騎行" target="_blank">
        <area shape="rect" coords="150, 0, 300, 117" href="http://baike.baidu.com/item/%E6%B8%B8%E6%B3%B3/65394" alt="swiming" title="游泳" target="_blank">
        <area shape="rect" coords="300, 0, 450, 117" href="http://baike.baidu.com/item/%E6%8B%B3%E5%87%BB/53858" alt="pugilism" title="拳擊" target="_blank">
    </map>
</p>

注意：Chrome和Safari瀏覽器不支援這一功能；

嵌入視訊和音訊

嵌入視訊使用‘video’元素，嵌入音訊使用‘audio’元素，二者在使用上沒有太大的區別，都需在內部巢狀‘source’元素配置音訊或視訊的連結地址以及MIME型別。

audio/video 元素常用屬性：

• width/height：視訊大小；

• autoplay：如果出現該屬性，則音訊在就緒後馬上播放；

• controls：如果出現該屬性，則向用戶顯示控制元件，比如播放按鈕；

• loop：如果出現該屬性，則每當音訊結束時重新開始播放；

• muted：規定視訊輸出應該被靜音；

• prelpad：如果出現該屬性，則音訊在頁面載入時進行載入，並預備播放。若和“autoplay”同時使用，則該屬性值會被忽略；

source 元素常用屬性：

• src：規定媒體檔案的URL地址；

• type：規定媒體資源的MIME型別（Multipurpose Internet Mail Extensions，它包含文字、影象、音訊、視訊以及其他應用程式專用的資料）；

• media：規定媒體資源的型別，如：“screen and (min-width:320px)”；

音訊程式碼示例：

<audio controls="controls" preload>
    <source src="../Material/media/cityOfSky.mp3" type="audio/mpeg">
    <source src="../Material/media/cityOfSky.ogg" type="audio/ogg">
</audio>

視訊程式碼示例：

<video controls="controls" preload width="500" height="400">
    <source src="../Material/media/scenery.mp4" type="video/mp4">
    <source src="../Material/media/scenery.ogg" type="video/ogg">
</video>

提示：在嵌入視訊或音訊時，為了各大瀏覽器支援，我使用‘ogg’，‘MP3’或‘MP4’格式的檔案。