<ruby id="bdb3f"></ruby>

    <p id="bdb3f"><cite id="bdb3f"></cite></p>

      <p id="bdb3f"><cite id="bdb3f"><th id="bdb3f"></th></cite></p><p id="bdb3f"></p>
        <p id="bdb3f"><cite id="bdb3f"></cite></p>

          <pre id="bdb3f"></pre>
          <pre id="bdb3f"><del id="bdb3f"><thead id="bdb3f"></thead></del></pre>

          <ruby id="bdb3f"><mark id="bdb3f"></mark></ruby><ruby id="bdb3f"></ruby>
          <pre id="bdb3f"><pre id="bdb3f"><mark id="bdb3f"></mark></pre></pre><output id="bdb3f"></output><p id="bdb3f"></p><p id="bdb3f"></p>

          <pre id="bdb3f"><del id="bdb3f"><progress id="bdb3f"></progress></del></pre>

                <ruby id="bdb3f"></ruby>

                合規國際互聯網加速 OSASE為企業客戶提供高速穩定SD-WAN國際加速解決方案。 廣告
                # 第 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.&lt;img&gt;****嵌入圖像** ``` <img src="img.png"> ``` 解釋:&lt;img&gt;元素主要是插入一張外部的圖片,那么圖片的路徑問題和超鏈接一致。 **img 的私有屬性** | **屬性名稱** | **說明** | | --- | --- | | src | 嵌入圖像的 URL | | alt | 當圖片不加載時顯示的備用內容 | | width | 定義圖片的長度(單位是像素) | | height | 定義圖片的高度(單位是像素) | | ismap | 創建服務器端分區響應圖 | | usemap | 關聯&lt;map&gt;元素 | ``` <a href="index.html"> <img src="img.png" width="339" height="229" alt="風景圖" ismap> </a> ``` **2.&lt;map&gt;****創建分區響應圖** ``` <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.&lt;iframe&gt;****嵌入另一個文檔** ``` <a href="index.html" target="in">index</a> | <a href="http://www.baidu.com" target="in">百度</a> &lt;iframe src="http://www.ycku.com" width="600" height="500" name="in"&gt;&lt;/iframe&gt; ``` 解釋:&lt;iframe&gt;表示內嵌一個 HTML?文檔。其下的 src?屬性表示初始化時顯示的頁面, width 和?height 表示內嵌文檔的長度和高度,name 表示用于?target 的名稱。 **4.&lt;embed&gt;****嵌入插件內容** ``` <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> ``` 解釋:&lt;embed&gt;元素是擴展瀏覽器的功能,大部分用于添加對插件的支持。這里添加了一個土豆網的 flash?視頻。type?類型表示被插入內容的類型,這里不列出所有,后面如果遇到其他類型的文件,再繼續探討;width?和 height?表示寬高;src?表示文件路徑。 **5.&lt;object&gt;****和****&lt;param&gt;****元素**? 解釋:&lt;object&gt;元素和&lt;embed&gt;一樣,只不過 object?是 html4?的標準,而 embed?是 html5 的標準。而?object 不但可以嵌入?flash,還可以嵌入圖片等其他內容。由于圖片、音頻、視頻、插件都有相應標簽元素代替,我們這里暫時不對其詳細講解。 **6.&lt;progress&gt;****顯示進度** ``` <progress value="30" max="100"></progress> ``` 解釋:&lt;progress&gt;元素可以顯示一個進度條,一般通過 JS?控制內部的值。IE9?以及更低版本不支持此元素。 **7.&lt;meter&gt;****顯示范圍里的值** ``` <meter value="90" min="10" max="100" low="40" high="80" optimum="60"></meter> ``` 解釋:&lt;meter&gt;元素顯示某個范圍內的值。其下的屬性包含:min?和 max?表示范圍邊界, low 表示小于它的值過低,high 表示大于它的值過高,optimum 表示最佳值,但不出現效果。IE?瀏覽器不支持此元素。
                  <ruby id="bdb3f"></ruby>

                  <p id="bdb3f"><cite id="bdb3f"></cite></p>

                    <p id="bdb3f"><cite id="bdb3f"><th id="bdb3f"></th></cite></p><p id="bdb3f"></p>
                      <p id="bdb3f"><cite id="bdb3f"></cite></p>

                        <pre id="bdb3f"></pre>
                        <pre id="bdb3f"><del id="bdb3f"><thead id="bdb3f"></thead></del></pre>

                        <ruby id="bdb3f"><mark id="bdb3f"></mark></ruby><ruby id="bdb3f"></ruby>
                        <pre id="bdb3f"><pre id="bdb3f"><mark id="bdb3f"></mark></pre></pre><output id="bdb3f"></output><p id="bdb3f"></p><p id="bdb3f"></p>

                        <pre id="bdb3f"><del id="bdb3f"><progress id="bdb3f"></progress></del></pre>

                              <ruby id="bdb3f"></ruby>

                              哎呀哎呀视频在线观看