# 第 8 章 嵌入元素
學習要點:
1.嵌入元素總匯
2.嵌入元素解析
主講教師:李炎恢
本章主要探討 HTML5?中嵌入元素,嵌入元素主要功能是把外部的一些資源插入到HTML 中。
**一.嵌入元素總匯**
這里所列出的元素,并非本節課全部涉及到,比如音頻 audio、視頻 video、以及動態圖像 canvas?和媒體資源 source、track?等會在后面章節或季度講解。
| **元素名稱** | **說明** |
| --- | --- |
| img | 嵌入圖片 |
| map | 定義客戶端分區響應圖 |
| area | 表示一個用戶客戶端分區響應圖的區域 |
| audio | 表示一個音頻資源 |
| video | 表示一個視頻資源 |
| iframe | 嵌入一個文檔 |
| embed | 用插件在 HTML?中嵌入內容 |
| canvas | 生成一個動態的圖形畫布 |
| meter | 嵌入數值在許可值范圍背景中的圖形表示 |
| object | 在 HTML?文檔中嵌入內容 |
| param | 表示將通過 object?元素傳遞給插件的參數 |
| progress | 嵌入目標進展或任務完成情況的圖形表示 |
| source | 表示媒體資源 |
| svg | 表示結構化矢量內容 |
| track | 表示媒體的附加軌道(例如字幕) |
**二.嵌入元素解析**
**1.<img>****嵌入圖像**
```
<img src="img.png">
```
解釋:<img>元素主要是插入一張外部的圖片,那么圖片的路徑問題和超鏈接一致。
**img 的私有屬性**
| **屬性名稱** | **說明** |
| --- | --- |
| src | 嵌入圖像的 URL |
| alt | 當圖片不加載時顯示的備用內容 |
| width | 定義圖片的長度(單位是像素) |
| height | 定義圖片的高度(單位是像素) |
| ismap | 創建服務器端分區響應圖 |
| usemap | 關聯<map>元素 |
```
<a href="index.html">
<img src="img.png" width="339" height="229" alt="風景圖" ismap> </a>
```
**2.<map>****創建分區響應圖**
```
<img src="img.png" alt="風景圖" width="339" height="229" usemap="#Map"> <map name="Map">
<area shape="rect" coords="31,28,112,100" href="http://www.baidu.com" target="_blank" alt="方形">
<area shape="circle" coords="187,142,47" href="http://www.google.com" target="_blank" alt="圓形">
<area shape="poly" coords="287,26,240,66,308,112" href="http://www.soso.com" target="_blank" alt="多邊形">
</map>
```
解釋:通過圖片中的熱點進行超鏈接,這里我們采用 Dreamweaver?進行操作生成的。
**3.<iframe>****嵌入另一個文檔**
```
<a href="index.html" target="in">index</a> | <a href="http://www.baidu.com" target="in">百度</a>
<iframe src="http://www.ycku.com" width="600" height="500" name="in"></iframe>
```
解釋:<iframe>表示內嵌一個 HTML?文檔。其下的 src?屬性表示初始化時顯示的頁面, width 和?height 表示內嵌文檔的長度和高度,name 表示用于?target 的名稱。
**4.<embed>****嵌入插件內容**
```
<embed src="http://www.tudou.com/v/i4ZZvFwfluI/&bid=05&rpid=50797543&resourceId=50797543_05_05_99/v.swf" type="application/x-shockwave-flash" width="480" height="400"></embed>
```
解釋:<embed>元素是擴展瀏覽器的功能,大部分用于添加對插件的支持。這里添加了一個土豆網的 flash?視頻。type?類型表示被插入內容的類型,這里不列出所有,后面如果遇到其他類型的文件,再繼續探討;width?和 height?表示寬高;src?表示文件路徑。
**5.<object>****和****<param>****元素**?
解釋:<object>元素和<embed>一樣,只不過 object?是 html4?的標準,而 embed?是 html5 的標準。而?object 不但可以嵌入?flash,還可以嵌入圖片等其他內容。由于圖片、音頻、視頻、插件都有相應標簽元素代替,我們這里暫時不對其詳細講解。
**6.<progress>****顯示進度**
```
<progress value="30" max="100"></progress>
```
解釋:<progress>元素可以顯示一個進度條,一般通過 JS?控制內部的值。IE9?以及更低版本不支持此元素。
**7.<meter>****顯示范圍里的值**
```
<meter value="90" min="10" max="100" low="40" high="80" optimum="60"></meter>
```
解釋:<meter>元素顯示某個范圍內的值。其下的屬性包含:min?和 max?表示范圍邊界, low 表示小于它的值過低,high 表示大于它的值過高,optimum 表示最佳值,但不出現效果。IE?瀏覽器不支持此元素。
- 介紹
- HTML/CSS 教程
- 第 1 章 HTML5 概述
- 第 2 章 基本格式
- 第 3 章 文本元素
- 第 4 章 超鏈接和路徑
- 第 5 章 分組元素
- 第 6 章 表格元素
- 第 7 章 文檔元素
- 第 8 章 嵌入元素
- 第 9 章 音頻和視頻
- 第 10 章 表單元素[上]
- 第 10 章 表單元素[中]
- 第 10 章 表單元素[下]
- 第 11 章 全局屬性和其他
- 第 12 章 CSS 入門
- 第 13 章 CSS 選擇器[上]
- 第 14 章 CSS 顏色與度量單位
- 第 15 章 CSS 文本樣式[上]
- 第 15 章 CSS 文本樣式[下]
- 第 16 章 CSS 盒模型[上]
- 第 16 章 CSS 盒模型[下]
- 第 17 章 CSS 邊框與背景[上]
- 第 17 章 CSS 邊框與背景[下]
- 第 18 章 CSS 表格與列表
- 第 19 章 CSS 其他樣式
- 第 20 章 CSS3 前綴和 rem
- 第 21 章 CSS3 文本效果
- 第 21 章 CSS3 文本效果
- 第 23 章 CSS3 邊框圖片效果
- 第 24 章 CSS3 變形效果[下]
- 第 25 章 CSS3 過渡效果
- 第 26 章 CSS3 動畫效果
- 第 27 章 CSS 傳統布局[上]
- 第 27 章 CSS 傳統布局[下]
- 第 28 章 CSS3 多列布局
- 第 29 章 CSS3 彈性伸縮布局[上]
- 第 29 章 CSS3 彈性伸縮布局[中]
- 第 29 章 CSS3 彈性伸縮布局[下]
- 第 30 章 使用 Emmet 插件
- Bootstrap 教程
- 第 1 章 Bootstrap 介紹
- 第 2 章 排版樣式
- 第 3 章 表格和按鈕
- 第 4 章 表單和圖片
- 第 5 章 柵格系統
- 第 6 章 輔組類和響應式工具
- 第 7 章 圖標菜單按鈕組件
- 第 8 章 輸入框和導航組件
- 第 9 章 路徑分頁標簽和徽章組件
- 第 10 章 巨幕頁頭縮略圖和警告框組件
- 第 11 章 進度條媒體對象和 Well 組件
- 第 12 章 列表組面板和嵌入組件
- 第 13 章 模態框插件
- 第 14 章 下拉菜單和滾動監聽插件
- 第 15 章 標簽頁和工具提示插件
- 第 16 章 彈出框和警告框插件
- 第 17 章 按鈕和折疊插件
- 第 18 章 輪播插件
- 第 19 章 附加導航插件
- 第 20 章 項目實戰--響應式導航[1]
- 第 20 章 項目實戰--響應式輪播圖[2]
- 第 20 章 項目實戰--首頁內容介紹[上][3]
- 第 20 章 項目實戰--首頁內容介紹[下][4]
- 第 20 章 項目實戰--資訊內容[5,6]
- 第 20 章 項目實戰--案例和關于[7]
- javaScript 教程
- javascript快速入門1--JavaScript前世今生,HelloWorld與開發環境
- javascript快速入門2--變量,小學生數學與簡單的交互
- javascript快速入門3--分支判斷與循環
- javascript快速入門4--函數與內置對象
- javascript快速入門5--數組與對象
- javascript快速入門6--Script標簽與訪問HTML頁面
- javascript快速入門7--ECMAScript語法基礎
- javascript快速入門8--值,類型與類型轉換
- javascript快速入門9--引用類型
- javascript快速入門10--運算符,語句
- javascript快速入門11--正則表達式
- javascript快速入門12--函數式與面向對象
- javascript快速入門13--BOM——瀏覽器對象模型(Browser Object Model)
- javascript快速入門14--DOM基礎
- javascript快速入門15--節點
- javascript快速入門15--表單
- javascript快速入門16--表格
- javascript快速入門17--事件
- javascript快速入門18--樣式
- javascript快速入門19--定位
- javascript快速入門20--Cookie
- javascript快速入門21--DOM總結
- javascript快速入門22--Ajax簡介
- javascript快速入門23--XHR—XMLHttpRequest對象
- javascript快速入門24--XML基礎
- javascript快速入門25--瀏覽器中的XML
- javascript快速入門26--XPath
- javascript快速入門27--XSLT基礎
- PHP 教程
- 第一章 如何加載運行已發布的PHP項目
- 第二章 PHP基礎
- 第三章 操作符與控制結構
- 第四章 數學運算
- 第五章 數組
- 第六章 目錄與文件
- 第七章 自定義函數
- 第八章 字符串處理
- 第九章 正則表達式
- 第十章 日期與時間
- 第十一章 表單與驗證
- 第十二章 會話控制
- 第十三章 上傳文件
- 第十四章 處理圖像
- 第十五章 MySQL 數據庫
- 第十六章 PHP 操作MySQL
- 第十七章 面向對象基礎
- 第十八章 面向對象的特性
- 第十九章 面向對象的工具