嵌入內容

本文轉載自查看原文 2021-10-24 02:04 80 前端/ HTML

嵌入內容

嵌入圖像

img元素允許我們在HTML文檔里嵌入圖像。下表概述了這個元素，它是使用最為廣泛的HTML元素之一。

img元素

要嵌入一張圖像需要使用src和alt屬性，如代碼清單1所示。

代碼清單1 嵌入一張圖像

<!DOCTYPE HTML>
<html>
    <head>
        <title>嵌入一張圖像</title>
        <meta name="作者" content="黃子涵"/>
        <meta name="描述" content="嵌入一張圖像"/>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <link rel="shortcut icon" href="http://120.77.46.246/src/img/ba_favicon.ico" type="image/x-icon"/>
        <style>
            #img {
                position: fixed;
            }
        </style>
    </head>
    <body>
        這里有一張關於黃子涵的圖片。
        <p>
            <img src="http://120.77.46.246/src/img/pikaqiu.jpeg" alt="黃子涵" width="600" height="400"/>
        </p>
        黃子涵真棒！
    </body>
</html>

src屬性指定了欲嵌入圖像的URL。在這個案例里，我給這個圖像文件指定了一個相對URL。alt屬性定義了img元素的備用內容。此內容會在圖像無法顯示時呈現（原因也許是圖像無法找到，圖像格式不被瀏覽器支持，或者用戶所用的瀏覽器或設備無法顯示圖像）。從下面可以看到這張圖像。

嵌入一張圖像

可以使用width和height屬性來指定img元素所代表圖像的尺寸（單位是像素）。圖像在HTML標記處理完畢后才會加載，這就意味着如果你省略了width和height屬性，瀏覽器就不知道該為圖像留出多大的屏幕空間。造成的結果是，瀏覽器必須依賴圖像文件本身來確定它的尺寸，然后重定位屏幕上的內容來容納它。這可能會讓用戶感覺到晃動，因為他們可能已經開始閱讀HTML里直接包含的內容了。指定width和height屬性讓瀏覽器能夠在圖像尚未載入時正確擺放網頁里的各個元素。

警告

width和height屬性告訴瀏覽器圖像的尺寸有多大，而不是你希望它有多大。不應該使用這些屬性來動態縮放圖像。

在超鏈接里嵌入圖像

img元素的一個常見用法是結合a元素創建一個基於圖像的超鏈接。它類似表單里基於圖像的提交按鈕。代碼清單2展示了如何結合使用img和a元素。

代碼清單2 使用img和a元素創建服務器端的分區響應圖

<!DOCTYPE HTML>
<html>
    <head>
        <title>使用img和a元素創建服務器端的分區響應圖</title>
        <meta name="作者" content="黃子涵"/>
        <meta name="描述" content="使用img和a元素創建服務器端的分區響應圖"/>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <link rel="shortcut icon" href="http://120.77.46.246/src/img/ba_favicon.ico" type="image/x-icon"/>
    </head>
    <body>
        這里有一張關於黃子涵的圖片。
        <p>
            <a href="http://120.77.46.246/ZihanGroup/FBG/HTML_AG/chap15/code03.html">
                <img src="http://120.77.46.246/src/img/pikaqiu.jpeg" ismap alt="黃子涵" width="600" height="400"/>
            </a>
        </p>
        黃子涵真棒！
    </body>
</html>

瀏覽器顯示這張圖像的方式沒有什么不同，正如下圖所示。因此，重要的一點是要向用戶提供視覺提示，表明特定圖像所代表的是超鏈接。具體的做法可以是利用CSS，能在圖像內容里表達則更好。

使用img和a元素創建服務器的分區響應圖

如果點擊這張圖像，瀏覽器會導航至父元素a的href屬性所指定的URL上。給img元素應用ismap屬性就創建了一個服務器端分區響應圖，意思是在圖像上點擊的位置會附加到URL上。舉個例子，如果點擊的位置是距圖像頂部4像素，左邊緣10像素，瀏覽器就會導航到下面的地址：

https://www.cnblogs.com/huang-zihan/

（很明顯，這個URL基於我從自己的開發服務器上載入了最初的HTML文檔，而a元素上的href屬性是一個相對URL。）代碼清單3展示了huangzihan.html中的內容，它包含了一個簡單的腳本，用來顯示點擊位置的坐標。

代碼清單3 huangzihan.html中的內容

<!DOCTYPE>
<html>
    <head>
        <title>黃子涵</title>
        <meta name="作者" content="黃子涵"/>
        <meta name="描述" content="黃子涵好厲害！"/>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <link rel="shortcut icon" href="http://120.77.46.246/src/img/ba_favicon.ico" type="image/x-icon"/>
    </head>
    
    <body>
        <p>黃子涵的X軸坐標是<b><span id="xco">??</span></b></p>
        <p>黃子涵的Y軸坐標是<b><span id="yco">??</span></b></p>
        <script>
            var coords = window.location.href.split('?')[1].split(',');
            document.getElementById('xco').innerHTML = coords[0];
            document.getElementById('yco').innerHTML = coords[1];
        </script>
    </body>
</html>

從下圖可以看到鼠標點擊產生的效果。

服務器端分區響應圖通常意味着服務器會根據用戶在圖像上點擊區域的不同做出有差別的反應，比如返回不同的響應信息。如果省略了img元素上的ismap屬性，鼠標點擊的坐標就不會被包含在請求URL之中。

創建客戶端分區響應圖

我們可以創建一個客戶端分區響應圖，通過點擊某張圖像上的不同區域讓瀏覽器導航到不同的URL上。這一過程不需要通過服務器引導，因此需要使用元素來定義圖像上的各個區域以及它們所代表的行為。客戶端分區響應圖的關鍵元素是map，下表概括了這個元素。

map元素

map元素包含一個或多個area元素，它們各自代表了圖像上可被點擊的一塊區域。下表概述了area元素。

area元素

area元素的屬性可以被分為兩類，第一類處理的是area所代表的圖像區域被用戶點擊后瀏覽器會導航到的URL。下表介紹了這一類屬性，它們類似於你在其他元素上見到過的對應屬性。

與目標地址相關的area元素屬性

屬性	說明
href	此區域被點擊時瀏覽器應該加載的URL
alt	替代內容，參見img元素的對應屬性
target	應該用來顯示URL的瀏覽上下文
rel	描述了當前文檔和目標文檔之間的關系此區域適用的媒介
media	此區域適用的媒介
hreflang	目標文檔的語言
type	目標文檔的MIME類型

第二類則包含了更有意思的屬性：Shape和coords屬性。可以用這些屬性來標明用戶可以點擊的各個圖像區域。shape和coords屬性是共同起作用的。coords屬性的意思根據shape屬性的值而定，正如下表所介紹的。

shape和coords屬性的值

shape值	coords值的性質和意思
rect	這個值代表了一個矩形區域。coords屬性必須由四個用逗號分隔的整數組成，它們代表了下列位置之間的距離：圖像的左邊緣與矩形的左側、圖像的上邊緣與矩形的上側、圖像的右邊緣與矩形的右側、圖像的下邊緣與矩形的下側
circle	這個值代表了一個圓形區域。coords屬性必須由三個用逗號分隔的整數組成，它們代表了下列參數：從圖像左邊緣到圓心的距離、從圖像上邊緣到圓心的距離、圓的半徑
poly	這個值代表了一個多邊形。coords屬性必須至少包含六個用逗號分隔的整數，每一對數字各代表多邊形的一個頂點
default	這個值的意思是默認區域，即覆蓋整張圖片。shape屬性使用這個值時不需要提供coords值

介紹完這些元素后，我們現在來看一個例子。演示分區響應圖的一大難點是area元素在瀏覽器屏幕上不可見。出於這個目的，下圖展示了兩個我想在這個例子里定義的區域，使用的是前面里的圖像。簡單起見，我把這兩個區域做成矩形。

根據這張示意圖可以創建map和area元素，如代碼清單4所示。

代碼清單4 創建分區響應圖

<!DOCTYPE HTML>
<html>
    <head>
        <title>創建分區響應圖</title>
        <meta name="作者" content="黃子涵"/>
        <meta name="描述" content="創建分區響應圖"/>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <link rel="shortcut icon" href="http://120.77.46.246/src/img/ba_favicon.ico" type="image/x-icon"/>
    </head>
    <body>
        這里有一張關於黃子涵的圖片。
        <p>
            <img src="http://120.77.46.246/src/img/pikaqiu.jpeg" usemap="#mymap" alt="黃子涵" />
        </p>
        黃子涵真棒！
        
        <map name="mymap">
            <area href="http://120.77.46.246/src/html/Xu_Weizhou.html" shape="rect" coords="3,5,98,450" alt="許魏洲"/>
            <area href="http://120.77.46.246/src/html/jay_chou.html" shape="rect" coords="100,5,200,450" alt="周傑倫"/>
            <area href="http://120.77.46.246/src/html/mayday.html" shape="default" coords="" alt="default"/>
        </map>
    </body>
</html>

創建分區響應圖

請注意我給img元素添加的usemap屬性。這個屬性的值必須是一個井號串名稱引用（hash-name reference），意思是一個由#字符開頭的字符串。這樣你就能把map元素與圖像關聯起來。

如果用戶點擊了圖像上的游泳部分，瀏覽器就會導航至swimpage.html。如果用戶點擊的是圖像上的騎車部分，瀏覽器則會導航至cyclepage.html。點擊圖像上的其他位置會讓瀏覽器導航至huangzihan.html。

提示

請注意，在制作客戶端分區響應圖時，無需使用a元素來顯式創建超鏈接。

嵌入另一張HTML文檔

iframe元素允許我們在現有的HTML文檔中嵌入另一張文檔。下表概括了這個元素。

iframe元素

代碼清單5展示了iframe元素的用法。

代碼清單5 使用iframe元素

<!DOCTYPE HTML>
<html>
    <head>
        <title>使用iframe元素</title>
        <meta name="作者" content="黃子涵"/>
        <meta name="描述" content="使用iframe元素"/>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <link rel="shortcut icon" href="http://120.77.46.246/src/img/ba_favicon.ico" type="image/x-icon"/>
    </head>
    <body>
        <header>
            <h1>歌手</h1>
            <nav>
                <ul>
                    <li>
                        <a href="http://120.77.46.246/src/img/Xu_Weizhou.jpeg" target="myframe">許魏洲</a>
                    </li>
                    <li>
                        <a href="http://120.77.46.246/src/img/jay_chou.jpeg" target="myframe">周傑倫</a>
                    </li>
                    <li>
                        <a href="http://120.77.46.246/src/img/lei_zhao.jpeg" target="myframe">趙雷</a>
                    </li>
                    <li>
                        <a href="http://120.77.46.246/src/img/nicholas_tse.jpeg" target="myframe">謝霆鋒</a>
                    </li>
                    <li>
                        <a href="http://120.77.46.246/src/img/pu_shu.jpeg" target="myframe">朴樹</a>
                    </li>
                    <li>
                        <a href="http://120.77.46.246/src/img/mayday.jpeg" target="myframe">五月天</a>
                    </li>
                </ul>
            </nav>
        </header>
        <iframe name="myframe" width="750" height="750">                
        </iframe>
    </body>
</html>

在這個例子里，我創建了一個name屬性為myframe的iframe。這樣就創建了一個名為myframe的瀏覽上下文。然后我就可以把這個瀏覽上下文與其他元素（具體是指a、form、button、input和base）的target屬性結合使用。我用a元素創建了一對超鏈接，它們會把href屬性中指定的URL載入iframe。從下圖可以看到這一過程。

使用iframe元素

width和height屬性指定了像素尺寸。src屬性指定了iframe一開始應該載入並顯示的URL，而srcdoc屬性讓你可以定義一張用於內嵌顯示的HTML文檔。

HTML5引入了兩個新的iframe元素屬性。第一個是seamless，它指示瀏覽器把iframe的內容顯示得像主HTML文檔的一個整體組成部分。從圖中可以看出，默認情況下會有一個邊框，如果內容比width和height屬性所指定的尺寸要大，還會出現一個滾動條。

第二個屬性是sandbox,它對HTML文檔進行限制。應用這個屬性時如果不附帶任何值，就像這樣：

<iframe sandbox name="myframe" width="3OO" height="100">
</iframe>

下面這些元素就會被禁用：

腳本
表單
插件
指向其他瀏覽上下文的鏈接

另外，iframe的內容被視為與HTML文檔的其余部分來源不同，這樣會引發額外的安全措施。可以通過定義sandbox屬性的值來獨立啟用各種功能，就像這樣:

<iframe sandbox="allow-fonns" name="myframe" width="3OO" height="100">
</iframe>

下表介紹了可以使用的值。

iframe的sandbox屬性所接受的allow值

值	說明
allow-forms	啟用表單
allow-scripts	啟用腳本
allow-top-navigation	允許鏈接指向頂層的瀏覽上下文，這樣就能用另一個文檔替換當前整個文檔，或者創建新的標簽和窗口
allow-same-origin	允許iframe里的內容被視為與文檔其余部分擁有同一個來源位置

通過插件嵌入內容

object和embed元素最初都是作為擴展瀏覽器能力的一種方式，用於添加插件支持，而插件能夠處理瀏覽器不直接支持的內容。這些元素是瀏覽器戰爭時期被引入的，分別來自於不同的陣營。

之后，object元素成了HTML4規范的一部分，而embed元素卻沒有（盡管embed元素已經被廣泛使用）。為了公平對待這兩種元素，HTML5添加了對embed元素的支持。這樣，出於兼容性的緣故，你就有了兩個非常相似的元素。

雖然object和embed元素通常用於插件，但它們也可以用來嵌入瀏覽器能直接處理的內容，比如圖像。

使用embed元素

我將從embed元素開始，下表概述了這個元素。

embed元素

代碼清單6展不了embed元素的用法。在這個例子里，我嵌入一個來自騰訊視頻的視頻。

代碼清單6 使用embed元素

<!DOCTYPE HTML>
<html>
    <head>
        <title>使用embed元素</title>
        <meta name="作者" content="黃子涵"/>
        <meta name="描述" content="使用embed元素"/>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <link rel="shortcut icon" href="http://120.77.46.246/src/img/ba_favicon.ico" type="image/x-icon"/>
    </head>
    <body>
        <h1>黃子涵找到的視頻</h1>
        <embed src="https://v.qq.com/txp/iframe/player.html?vid=r0528ooloyc" type="video/mp4" width=100% height=500px />
    </body>
</html>

使用embed元素

src屬性指定了內容的地址，type屬性則指定了內容的MIME類型，這樣瀏覽器就知道該如何處理它。width和height屬性決定嵌入內容將在屏幕上占據的空間大小。你應用的其他任何屬性都會被當做是插件或內容的參數。在這個例子中，我應用了一個名為allowfullscreen的屬性，騰訊視頻播放器通過它來啟用全屏觀看功能。從上面可以看到瀏覽器是如何渲染這一內容的。

使用object和param元素

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

object元素

代碼清單7展示了如何用object元素嵌入前面例子中的騰訊視頻。

代碼清單7 使用object和param元素的屬性

<!DOCTYPE HTML>
<html>
    <head>
        <title>使用object和param元素的屬性</title>
        <meta name="作者" content="黃子涵"/>
        <meta name="描述" content="使用object和param元素的屬性"/>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <link rel="shortcut icon" href="http://120.77.46.246/src/img/ba_favicon.ico" type="image/x-icon"/>
    </head>
    <body>
        <h1>黃子涵找到的視頻</h1>
        <object
            width=100% height=500px
            data="https://v.qq.com/txp/iframe/player.html?vid=r0528ooloyc"
            type="video/mp4">
            <param name="allowFullScreen" value="true"/>
        </object>
    </body>
</html>

使用object和param元素的屬性

data屬性提供了內容的地址，type、width和height屬性和在embed元素里的意思一致。使用param元素來定義將要傳遞給插件的參數，每個需要定義的參數都各自使用一個param元素。下表概述了這個元素。你可能已經猜到了，name和value屬性定義了參數的name和value。

param元素

指定備用內容

object元素的一大優點是可以包含備用內容，在指定內容不可用時顯示出來。代碼清單8提供了一個簡單的演示。

代碼清單8 使用object元素的備用內容功能

<!DOCTYPE HTML>
<html>
    <head>
        <title>使用object元素的備用內容功能</title>
        <meta name="作者" content="黃子涵"/>
        <meta name="描述" content="使用object元素的備用內容功能"/>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <link rel="shortcut icon" href="http://120.77.46.246/src/img/ba_favicon.ico" type="image/x-icon"/>
    </head>
    <body>
        <h1>黃子涵找到的視頻</h1>
        <object
            width=100% height=500px
            data="http://120.77.46.246/src/img/pikachu.mp4"
            type="video/mp4">
            <param name="allowFullScreen" value="true"/>
            <b>對不起！</b>我們暫時不能顯示這個視頻
        </object>
    </body>
</html>

使用object元素的備用內容功能

在這個例子里，我讓data屬性引用了一個不存在的文件。瀏覽器會嘗試載入這個不存在的內容，如果失敗了，就會轉而顯示object元素中的內容。param元素會被忽略，只剩下短語和流內容會被顯示出來，正如上面所示。

請注意我在代碼清單里去掉了type屬性。當type屬性不存在時，瀏覽器會嘗試從數據本身判斷其內容類型。對於某些瀏覽器上的特定插件而言，即使數據不存在，插件也會被加載。這就意味着屏幕上顯示的是一片空白區域，而不是備用內容。

object元素的其他用途

雖然object元素主要用於嵌入插件內容，但它最初是作為一種更具通用性的元素來取代某些元素，其中包括img。雖然這些功能在HTML規范里已經存在一段時間了，但不是所有瀏覽器都能支持全部的功能。

提示

form屬性讓object元素可以關聯HTML表單，這是HTML5新增的。當前沒有任何瀏覽器支持這個屬性，HTML5規范對這一功能如何運作也語焉不詳。

使用object元素嵌入圖像

我之前提到過，object本打算取代的一種元素是img，因此可以用object元素在HTML文檔里嵌入圖像。代碼清單9提供了一個演示。

代碼清單9 用object元素嵌入一張圖像

<!DOCTYPE HTML>
<html>
    <head>
        <title>用object元素嵌入一張圖像</title>
        <meta name="作者" content="黃子涵"/>
        <meta name="描述" content="用object元素嵌入一張圖像"/>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <link rel="shortcut icon" href="http://120.77.46.246/src/img/ba_favicon.ico" type="image/x-icon"/>
    </head>
    <body>
        <h1>黃子涵找到的一張圖片</h1>
        <object data="http://120.77.46.246/src/img/pikaqiu.jpeg" type="image/png">
        </object>
    </body>
</html>

在這個例子里，我讓data屬性引用了之前所使用的那張圖像。瀏覽器嵌入和顯示了圖像, 就跟使用img元素一樣，如下圖所示。

用object元素嵌入一張圖像

使用object元素創建分區響應圖

同樣可以用object元素來創建客戶端分區響應圖。usemap屬性可以用於關聯map元素和object元素，如代碼清單10所示。我使用的map和area元素跟之前在img上所用到的一樣。

代碼清單10 用object元素創建一張客戶端分區響應圖

<!DOCTYPE HTML>
<html>
    <head>
        <title>用object元素創建一張客戶端分區響應圖</title>
        <meta name="作者" content="黃子涵"/>
        <meta name="描述" content="用object元素創建一張客戶端分區響應圖"/>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <link rel="shortcut icon" href="http://120.77.46.246/src/img/ba_favicon.ico" type="image/x-icon"/>
    </head>
    <body>
        <map name="mymap">
            <area href="http://120.77.46.246/src/html/Xu_Weizhou.html" shape="rect" coords="3,5,98,450" alt="許魏洲"/>
            <area href="http://120.77.46.246/src/html/jay_chou.html" shape="rect" coords="100,5,200,450" alt="周傑倫"/>
            <area href="http://120.77.46.246/src/html/mayday.html" shape="default" coords="" alt="default"/>
        </map>
        
        <object data="http://120.77.46.246/src/img/pikaqiu.jpeg" type="image/jpeg" usemap="#mymap"></object>
    </body>
</html>

用object元素創建一張客戶端分區響應圖

警告

不是所有的瀏覽器都支持用object元素創建客戶端分區響應圖。

將object元素作為瀏覽上下文環境

可以用object元素來將一張HTML文檔嵌入到另一張文檔之中，就像用iframe元素一樣。如果應用name屬性，就會創建一個瀏覽上下文，可以結合一些元素（比如a和form）的target屬性使用。代碼清單11展示了具體做法。

代碼清單11 用object元素創建瀏覽上下文

<!DOCTYPE HTML>
<html>
    <head>
        <title>用object元素創建瀏覽上下文</title>
        <meta name="作者" content="黃子涵"/>
        <meta name="描述" content="黃子涵好厲害！"/>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <link rel="shortcut icon" href="http://120.77.46.246/src/img/ba_favicon.ico" type="image/x-icon"/>
    </head>
    <body>
        <header>
            <h1>歌手</h1>
            <nav>
                <ul>
                    <li>
                        <a href="http://120.77.46.246/src/html/Xu_Weizhou.html" target="myframe">許魏洲</a>
                    </li>
                    <li>
                        <a href="http://120.77.46.246/src/html/jay_chou.html" target="myframe">周傑倫</a>
                    </li>
                    <li>
                        <a href="http://120.77.46.246/src/html/lei_zhao.html" target="myframe">趙雷</a>
                    </li>
                    <li>
                        <a href="http://120.77.46.246/src/html/nicholas_tse.html" target="myframe">謝霆鋒</a>
                    </li>
                    <li>
                        <a href="http://120.77.46.246/src/html/Xu_Weizhou.html" target="myframe">朴樹</a>
                    </li>
                    <li>
                        <a href="http://120.77.46.246/src/html/mayday.html" target="myframe">五月天</a>
                    </li>
                </ul>
            </nav>
        </header>
        <object type="text/html" name="myframe" width="750" height="750">
        </object>
    </body>
</html>

用object元素創建瀏覽上下文

這個功能僅僅在你把type屬性設置為text/html時可用，但即便如此，瀏覽器也不是普遍都支持。谷歌的Chrome和蘋果的Safari是支持這一功能的主流瀏覽器。

嵌入數字表現形式

HTML5有兩個新元素允許我們在文檔中嵌入數值的表現形式。

顯示進度

progress元素可以用來表現某項任務逐漸完成的過程。下表概述了progress元素。

progress元素

value屬性定義了當前的進度，它位於0和max屬性的值所構成的范圍之間。當max屬性被省略時，范圍是0至1。用浮點數來表示進度，比如0.3代表30%。

代碼清單12展示了progress元素和一些按鈕。按下某個按鈕會更新progress元素所顯示的值。我用一些簡單的JavaScript關聯了按鈕和progress元素。

代碼清單12 使用progress元素

<!DOCTYPE>
<html>
    <head>
        <title>使用progress元素</title>
        <meta name="作者" content="黃子涵"/>
        <meta name="描述" content="使用progress元素"/>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <link rel="shortcut icon" href="http://120.77.46.246/src/img/ba_favicon.ico" type="image/x-icon"/>
    </head>
    
    <body>
        <progress id="huangzihan_progress" value="10" max="100"></progress>
        <p>
            <button type="huangzihan_button" value="0">0%</button>
            <button type="huangzihan_button" value="10">10%</button>
            <button type="huangzihan_button" value="20">20%</button>
            <button type="huangzihan_button" value="30">30%</button>
            <button type="huangzihan_button" value="40">40%</button>
            <button type="huangzihan_button" value="50">50%</button>
            <button type="huangzihan_button" value="60">60%</button>
            <button type="huangzihan_button" value="70">70%</button>
            <button type="huangzihan_button" value="80">80%</button>
            <button type="huangzihan_button" value="90">90%</button>
            <button type="huangzihan_button" value="100">100%</button>
        </p>
        
        <script>
            var huangzihan_buttons = document.getElementsByTagName('BUTTON');
            var huangzihan_progress = document.getElementById('huangzihan_progress');
            for (var huangzihan_i = 0; huangzihan_i < huangzihan_buttons.length; huangzihan_i++) {
                huangzihan_buttons[huangzihan_i].onclick = function(huangzihan_e) {
                    huangzihan_progress.value = huangzihan_e.target.value;
                };
            }
        </script>
    </body>
</html>

從下圖可以看到如何讓progress元素顯示不同的值。

使用progress元素

顯示范圍里的值

meter元素顯示了某個范圍內所有可能值中的一個。下表概述了這個元素。

meter元素

min和max屬性設定了可能值所處范圍的邊界，它們可以用浮點數來表示。meter元素的顯示可以分為三個部分：過低、過高和最佳。low屬性設置了一個值，在它之下的所有值都被認為是過低；high屬性設置了一個值，在它之上的所有值都被認為是過高；optimum屬性則指定了“最佳”的值。代碼清單13展示了將這些屬性應用到meter元素。

代碼清單13 使用meter元素

<!DOCTYPE>
<html>
    <head>
        <title>使用meter元素</title>
        <meta name="作者" content="黃子涵"/>
        <meta name="描述" content="使用meter元素"/>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <link rel="shortcut icon" href="http://120.77.46.246/src/img/ba_favicon.ico" type="image/x-icon"/>
    </head>
    
    <body>
        <meter id="huangzihan_meter" value="100" min="0" max="100" low="40" high="80" optimum="60"></meter>
        <p>
            <button type="huangzihan_button" value="0">0%</button>
            <button type="huangzihan_button" value="10">10%</button>
            <button type="huangzihan_button" value="20">20%</button>
            <button type="huangzihan_button" value="30">30%</button>
            <button type="huangzihan_button" value="40">40%</button>
            <button type="huangzihan_button" value="50">50%</button>
            <button type="huangzihan_button" value="60">60%</button>
            <button type="huangzihan_button" value="70">70%</button>
            <button type="huangzihan_button" value="80">80%</button>
            <button type="huangzihan_button" value="90">90%</button>
            <button type="huangzihan_button" value="100">100%</button>
        </p>
        
        <script>
            var huangzihan_buttons = document.getElementsByTagName('BUTTON');
            var huangzihan_progress = document.getElementById('huangzihan_meter');
            for (var huangzihan_i = 0; huangzihan_i < huangzihan_buttons.length; huangzihan_i++) {
                huangzihan_buttons[huangzihan_i].onclick = function(huangzihan_e) {
                    huangzihan_progress.value = huangzihan_e.target.value;
                };
            }
        </script>
    </body>
</html>

在這個例子里，幾個button元素將meter元素的value屬性設置成過低和過高范圍內的值，以及最佳值。下圖顯示了瀏覽器如何呈現它們。

使用meter元素

在當前實現下，optimum屬性不會對meter元素的外觀產生任何可視效果。支持meter元素的瀏覽器僅在低於low值和高於high值（如上面所示）的值方面有區別。

其他嵌入元素

還有一些元素可以用來在HTML文檔里嵌入內容。

嵌入音頻和視頻

HTML5定義了一些新元素，它們支持在不借助插件的情況下給HTML文檔嵌入音頻和視頻。

嵌入圖形

canvas元素是HTML5引入的另一大功能領域，我們可以用它來給HTML文檔添加動態圖形。

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 Angular2 ng-content 在組件中嵌入內容關於去除滾動條（object/iframe等等嵌入內容）【HTML5】嵌入另一張HTML文檔、通過插件嵌入內容、嵌入數字表現形式 Bootstrap入門（十六）組件10：well和具有響應式特性的嵌入內容 IF函數，根據條件設定輸入內容帶表單功能的日歷，可插入內容的日歷 Python向Word文檔中寫入內容 C# 創建Excel並寫入內容 Vue 向組件中插入內容關於隱藏input輸入內容問題