HTML5的結(jié)構(gòu)和語義(4):語義性的內(nèi)聯(lián)元素
互聯(lián)網(wǎng) 發(fā)布時間:2008-10-17 18:55:34 作者:佚名
我要評論
HTML4用5個不同的內(nèi)聯(lián)元素表示略有差異的計算機代碼:var、code、kbd、tt和samp。但是,它無法表示時間、數(shù)字等基本數(shù)值。HTML5提供了幾個新的內(nèi)聯(lián)元素來滿足非技術(shù)作者的需求。
m
m元素表示文本被“加上標志”,但是不一定要強調(diào)。可以把它想像成書中突出
HTML4用5個不同的內(nèi)聯(lián)元素表示略有差異的計算機代碼:var、code、kbd、tt和samp。但是,它無法表示時間、數(shù)字等基本數(shù)值。HTML5提供了幾個新的內(nèi)聯(lián)元素來滿足非技術(shù)作者的需求。
m
m元素表示文本被“加上標志”,但是不一定要強調(diào)??梢园阉胂癯蓵型怀鲲@示的一節(jié)。Google的緩存頁面就是典型的用例。如果鏈接到一個緩存的副本,搜索詞就被加上標志。例如,如果搜索“Egret”,那么緩存的Google頁面可能像下面這樣:
TheGreat<m>Egret</m>(alsoknownasthe
American<m>Egret</m>)isalargewhitewadingbirdfoundworldwide.
TheGreat<m>Egret</m>flieswithslowwingbeats.The
scientificnameoftheGreat<m>Egret</m>is<i>Casmerodius
albus</i>.
對于這個元素的名稱當前還有爭議。在規(guī)范發(fā)布之前,它可能從m改為mark。
time
time元素表示一個時間值,比如5:35P.M.,EST,April23,2007。例如:
<p>Iamwritingthisexampleat
<time>5:35P.M.onApril23rd</time>.
</p>
time元素可以幫助瀏覽器和其他程序識別出HTML頁面中的時間。它不要求對元素內(nèi)容應(yīng)用任何特定的格式。但是,每個time元素都應(yīng)該有一個datetime屬性,其中包含更適合機器識別的時間值,比如:
<p>Iamwritingthisexampleat
<timedatetime="2007-04-23T17:35:00-05:00">5:35P.M.onApril23rd</time>.
</p>
適合機器讀取的時間值可能對搜索引擎、日歷程序等有幫助。
meter
meter元素表示指定范圍內(nèi)的數(shù)字值。例如,可以用它表示薪水、投票給LePen的法國選民的百分比或考試分數(shù)。在這里,我使用meter標出SoftwareDevelopment2007上一位Google程序員提供的數(shù)據(jù):
<p>AnentrylevelprogrammerinSiliconValley
canexpecttostartaround<meter>$90,000</meter>peryear.
</p>
meter元素幫助瀏覽器和其他客戶機識別HTML頁面中的數(shù)量。它不要求對元素內(nèi)容應(yīng)用任何特定的格式。但是,每個meter元素可以有最多6個屬性,它們按照更適合機器識別的形式表示這個數(shù)量:
value
min
low
high
max
optimum
這些屬性都應(yīng)該包含一個十進制數(shù)字。例如,期末考試的分數(shù)可以寫成下面這樣:
<p>Yourscorewas
<metervalue="88.7"min="0"max="100"low="65"high="96"optimum="100">B </meter>.
</p>
這表示這個學生的分數(shù)是百分制中的88.7??赡艿淖畹头謹?shù)是0,但是實際的最低分數(shù)是65??赡艿淖罡叻謹?shù)是100,但是實際的最高分數(shù)是96。用戶代理可以用某種數(shù)值控件顯示這一信息,也可以在工具提示中顯示額外的數(shù)據(jù),但是最常見的情況可能是像其他內(nèi)聯(lián)元素一樣對它應(yīng)用樣式。
progress
progress元素表示一個正在進行的過程的狀態(tài),就像圖形用戶界面(GUI)應(yīng)用程序中的進度條。例如,可以用它表示一個文件已經(jīng)下載的百分比或者播放電影時的當前位置。下面這個進度控件表示下載已經(jīng)完成了33%:
<p>Downloaded:
<progressvalue="1534602"max="4603807">33%</progress>
</p>
value屬性表示操作的當前狀態(tài)。max屬性表示操作的總量。這個元素指出要下載的數(shù)據(jù)總量是4,603,807字節(jié),已經(jīng)下載了1,534,602字節(jié)。
忽略max屬性,就可以顯示無限的進度。
在操作進行時,應(yīng)該使用JavaScript語言動態(tài)地更新進度條。在靜態(tài)情況下,這個元素沒什么意義。
(待續(xù))
m
m元素表示文本被“加上標志”,但是不一定要強調(diào)??梢园阉胂癯蓵型怀鲲@示的一節(jié)。Google的緩存頁面就是典型的用例。如果鏈接到一個緩存的副本,搜索詞就被加上標志。例如,如果搜索“Egret”,那么緩存的Google頁面可能像下面這樣:
TheGreat<m>Egret</m>(alsoknownasthe
American<m>Egret</m>)isalargewhitewadingbirdfoundworldwide.
TheGreat<m>Egret</m>flieswithslowwingbeats.The
scientificnameoftheGreat<m>Egret</m>is<i>Casmerodius
albus</i>.
對于這個元素的名稱當前還有爭議。在規(guī)范發(fā)布之前,它可能從m改為mark。
time
time元素表示一個時間值,比如5:35P.M.,EST,April23,2007。例如:
<p>Iamwritingthisexampleat
<time>5:35P.M.onApril23rd</time>.
</p>
time元素可以幫助瀏覽器和其他程序識別出HTML頁面中的時間。它不要求對元素內(nèi)容應(yīng)用任何特定的格式。但是,每個time元素都應(yīng)該有一個datetime屬性,其中包含更適合機器識別的時間值,比如:
<p>Iamwritingthisexampleat
<timedatetime="2007-04-23T17:35:00-05:00">5:35P.M.onApril23rd</time>.
</p>
適合機器讀取的時間值可能對搜索引擎、日歷程序等有幫助。
meter
meter元素表示指定范圍內(nèi)的數(shù)字值。例如,可以用它表示薪水、投票給LePen的法國選民的百分比或考試分數(shù)。在這里,我使用meter標出SoftwareDevelopment2007上一位Google程序員提供的數(shù)據(jù):
<p>AnentrylevelprogrammerinSiliconValley
canexpecttostartaround<meter>$90,000</meter>peryear.
</p>
meter元素幫助瀏覽器和其他客戶機識別HTML頁面中的數(shù)量。它不要求對元素內(nèi)容應(yīng)用任何特定的格式。但是,每個meter元素可以有最多6個屬性,它們按照更適合機器識別的形式表示這個數(shù)量:
value
min
low
high
max
optimum
這些屬性都應(yīng)該包含一個十進制數(shù)字。例如,期末考試的分數(shù)可以寫成下面這樣:
<p>Yourscorewas
<metervalue="88.7"min="0"max="100"low="65"high="96"optimum="100">B </meter>.
</p>
這表示這個學生的分數(shù)是百分制中的88.7??赡艿淖畹头謹?shù)是0,但是實際的最低分數(shù)是65??赡艿淖罡叻謹?shù)是100,但是實際的最高分數(shù)是96。用戶代理可以用某種數(shù)值控件顯示這一信息,也可以在工具提示中顯示額外的數(shù)據(jù),但是最常見的情況可能是像其他內(nèi)聯(lián)元素一樣對它應(yīng)用樣式。
progress
progress元素表示一個正在進行的過程的狀態(tài),就像圖形用戶界面(GUI)應(yīng)用程序中的進度條。例如,可以用它表示一個文件已經(jīng)下載的百分比或者播放電影時的當前位置。下面這個進度控件表示下載已經(jīng)完成了33%:
<p>Downloaded:
<progressvalue="1534602"max="4603807">33%</progress>
</p>
value屬性表示操作的當前狀態(tài)。max屬性表示操作的總量。這個元素指出要下載的數(shù)據(jù)總量是4,603,807字節(jié),已經(jīng)下載了1,534,602字節(jié)。
忽略max屬性,就可以顯示無限的進度。
在操作進行時,應(yīng)該使用JavaScript語言動態(tài)地更新進度條。在靜態(tài)情況下,這個元素沒什么意義。
(待續(xù))
相關(guān)文章

HTML5實現(xiàn)的移動端購物車自動結(jié)算功能示例代碼
本文介紹HTML5實現(xiàn)移動端購物車自動結(jié)算,通過WebStorage、事件監(jiān)聽、DOM操作等技術(shù),確保實時更新與數(shù)據(jù)同步,優(yōu)化性能及無障礙性,提升用戶體驗,感興趣的朋友一起看看吧2025-06-18- 在HTML5中,<button>標簽用于定義一個可點擊的按鈕,它是創(chuàng)建交互式網(wǎng)頁的重要元素之一,本文將深入解析HTML5中的<button>標簽,詳細介紹其屬性、樣式以及實際2025-06-18
基于 HTML5 Canvas 實現(xiàn)圖片旋轉(zhuǎn)與下載功能(完整代碼展示)
本文將深入剖析一段基于 HTML5 Canvas 的代碼,該代碼實現(xiàn)了圖片的旋轉(zhuǎn)(90 度和 180 度)以及旋轉(zhuǎn)后圖片的下載功能,通過對代碼的解讀,我們可以學習到如何利用 Canvas API2025-06-18
HTML5 getUserMedia API網(wǎng)頁錄音實現(xiàn)指南示例小結(jié)
本教程將指導(dǎo)你如何利用這一API,結(jié)合Web Audio API,實現(xiàn)網(wǎng)頁錄音功能,從獲取音頻流到處理和保存錄音,整個過程將逐步詳解,此外,還討論了getUserMedia API的使用限制和最2025-06-16- HTML5的搜索框是一個強大的工具,能夠有效提升用戶體驗,通過結(jié)合自動補全功能和適當?shù)臉邮?,可以?chuàng)建出既美觀又實用的搜索界面,這篇文章給大家介紹HTML5 搜索框Search Box2025-06-13
- Checkbox是HTML5中非常重要的表單元素之一,通過合理使用其屬性和樣式自定義方法,可以為用戶提供豐富多樣的交互體驗,這篇文章給大家介紹HTML5中Checkbox標簽的深入全面解2025-06-13
- 本實例展示了一種基于HTML5技術(shù)的圖片上傳功能,無需外部插件即可通過拖放圖片實現(xiàn)上傳,涉及到HTML5的拖放API和File API,以及使用CSS來增強用戶界面的交互性和視覺反饋,2025-05-16
- 在HTML5和CSS中,定位(positioning)是控制元素在頁面上位置的重要機制,主要有四種定位方式:靜態(tài)定位(static)、相對定位(relative)、絕對定位(absolute)和固定定位(fixed),2025-05-13
- Microdata作為HTML5新增的一個特性,它允許開發(fā)者在HTML文檔中添加更多的語義信息,以便于搜索引擎和瀏覽器更好地理解頁面內(nèi)容,本文將探討HTML5中Microdata的使用方法以及2025-04-21
在HTML語法中,表格主要通過< table >、< tr >和< td >3個標簽構(gòu)成,本文通過實例代碼講解HTML5表格語法格式,感興趣的朋友一起看看吧2025-04-21




