本節書摘來自異步社群《html5 開發執行個體大全》一書中的第1章，第1.14節,作者： 張明星 更多章節内容可以通路雲栖社群“異步社群”公衆号檢視。
https://yqfile.alicdn.com/c3099a64423cf37b3835db6db85d6fba788aed79.png" >
執行個體說明
在全新的html 5中，可以使用< meter >标記元素實作百分比效果。< meter >是html 5中新增的标記，用于表示在一定數量範圍中的值，例如，投票中各個候選人各占比例情況及考試分數等。< meter >元素僅是幫助浏覽器識别html中的數量，而不對該數量做任何的格式修飾。在< meter >元素中有6個屬性，通過這些屬性會根據浏覽器的特征以最好的方式展示這個數量。
< meter >标記元素的屬性資訊如表1-4所示。
low、hight、optimum這3個屬性值的功能是，将meter元素展示的測量範圍劃分為“low”、“medium”以及“high”3個部分，以此來判斷該測量的哪個部分是最優的。請讀者考慮下面的這個meter元素：
在上述代碼中，最低值可能為0，用min表示。但是實際最低為0.1，用low表示。最高值可能為1，但實際最高為0.9。
low、high将測量範圍【0 ~ 1】劃分為【0 ~ 0.1】（low）、【0.1 ~ 0.9】（medium）、【0.9 ~ 1】（high）3個範圍，optimum指明最優位置在1處，此時該值比“high”值大，那麼就表示value值越大越好；類似的，如果optimum值比“low”小，則表示value值越小越好；如果optimum值落在“low”值與“high”值之間，則表示value不高不低最好。
例如，下面的代碼示範了此元素的基本用法：
上述代碼的執行效果如圖1-26所示。
在< meter >元素中，屬性值“optimum”表示是最佳數量值，如果該值比屬性 “high”值大，表示實際值越高越好。如果該值比屬性“low”值小，則表示實際值越低越好。
本執行個體的功能是，顯示兩個投票候選人的票數比例。
具體實作
使用dreamweaver建立一個名為“014.html”的檔案，具體代碼如下所示：
在上述代碼中，候選人“東方不敗”所占的比例是百分制中的70，最低比例可能為0，但實際最低為10；最高比例可能為100，但實際最高為90。其實< meter >元素中的數量也可以使用浮點數表示，如上述代碼中所示。為了展示這些比例值，可以引入其他的元素，例如，本執行個體中使用了< span >元素展示這些數值。
執行後的效果如圖1-27所示。