淺析HTML5頁面元素及屬性
我要評論一.列表元素
1.ul元素
ul為無序列表，各個(gè)列表項(xiàng)之間沒有順序級別之分，通常是并列的，排序不分先后。
語法為：
<ul> <li>列表項(xiàng)1</li> <li>列表項(xiàng)2</li> <li>列表項(xiàng)3</li> ... </ul>
例：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ul元素的使用</title> </head> <body> <ul> <li>春</li> <li>夏</li> <li>秋</li> <li>冬</li> </ul> </body> </html>
效果：
在ul li標(biāo)簽中各元素前面為點(diǎn)
2.ol元素
ol為有序列表，即為有排列順序的列表。
格式為：
<ol>
<li>列表項(xiàng)1</li>
<li>列表項(xiàng)2</li>
<li>列表項(xiàng)3</li>
...
</ol>
例：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ol元素的使用</title> </head> <body> <ol> <li>蘋果</li> <li>香蕉</li> <li>橘子</li> <li>檸檬</li> </ol> </body> </html>
效果：
在ol li標(biāo)簽中各元素前面為數(shù)字
3.dl元素
dl為自定義列表，自定義列表的列表項(xiàng)前沒有任何符號。
格式為：
<dl> <dt>名詞1</dt> <dd>名詞1解釋1</dd> <dd>名詞1解釋2</dd> ... <dt>名詞2</dt> <dd>名詞2解釋1</dd> <dd>名詞2解釋2</dd> </dl>
例：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>dl元素的使用</title> </head> <body> <dl> <dt>計(jì)算機(jī)</dt> <!-- 定義術(shù)語名詞 --> <dd>用于大型運(yùn)算的機(jī)器</dd> <!-- 解釋和描述名詞 --> <dd>可以上網(wǎng)沖浪</dd> <dd>工作效率非常高</dd> </dl> </body> </html>
效果:
4.列表的嵌套應(yīng)用
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ol元素的使用</title> </head> <body> <h2>飲品</h2> <ul> <li>咖啡 <ol> <li>拿鐵</li> <li>摩卡</li> </ol> </li> <li>茶 <ul> <li>碧螺春</li> <li>龍井</li> </ul> </li> </ul> </body> </html>
效果：
二.結(jié)構(gòu)元素
（此元素一般應(yīng)用較少）
1.header元素
該元素可以包含所有通常放在頁面頭部的內(nèi)容，該元素通常用來放置整個(gè)頁面或頁面內(nèi)的一個(gè)內(nèi)容區(qū)塊的標(biāo)題
格式：
<header> <h1>網(wǎng)頁主題</h1> ... </header>
2.nav元素
用于定義導(dǎo)航鏈接，該元素可以將具有導(dǎo)航性質(zhì)的鏈接歸納在一個(gè)區(qū)域中，使頁面的語義更加明確。
格式：
<nav>
<ul>
<li><a href="#">首頁</a></li>
<li><li><a href="#">公司概況</a></li>
<li><li><a href="#">產(chǎn)品展示</a></li>
<li><li><a href="#">聯(lián)系我們</a></li>
</ul>
</nav>
nav元素一般用于以下幾種場合：
- 傳統(tǒng)導(dǎo)航條
- 側(cè)邊欄導(dǎo)航頁
- 內(nèi)導(dǎo)航
- 翻頁導(dǎo)航
3.article元素
article元素代表文檔，頁面或者應(yīng)用程序中上下文不相關(guān)的獨(dú)立部分，該元素用于定義一篇日志，一條新聞或用戶評論等。
例：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>article元素的使用</title> </head> <body> <article> <header> <h2>第一章</h2> </header> <section> <header> <h2>第1節(jié)</h2> </header> </section> <section> <header> <h2>第2節(jié)</h2> </header> </section> </article> <article> <header> <h2>第二章</h2> </header> </article> </body> </html>
效果：
4.aside元素
aside元素用來定義當(dāng)前頁面或者文章的附屬信息部分，它可以包含與當(dāng)前頁面或主要內(nèi)容相關(guān)的引用，側(cè)邊欄，廣告，導(dǎo)航條等其他類似的有別于主要內(nèi)容的部分。
aside元素的用法主要分為兩種：
- 被包含在article元素內(nèi)作為主要內(nèi)容的附屬信息在 article元素之外使用，作為頁面或站點(diǎn)全局的附屬信息部分。
- 最常用的使用形式是側(cè)邊欄，其中的內(nèi)容可以是友情鏈接，廣告單元等。
5.section元素
section元素用于對網(wǎng)站或應(yīng)用程序中頁面上的內(nèi)容進(jìn)行分塊，一個(gè)section元素通常由內(nèi)容和標(biāo)題組成。
- 不要將section元素用做設(shè)置樣式的頁面容器，那是div的特性。
- 如果article元素，aside元素或nav元素更加符合使用條件，那么不要使用section元素。
- 沒有標(biāo)題的內(nèi)容區(qū)塊不要使用section元素定義。
6.footer元素
footer元素用于定義一個(gè)頁面或者區(qū)域的底部，它可以包含所有通常放在頁面底部的內(nèi)容。
三.分組元素
1.figure元素和figcaption元素
figure元素用于定義獨(dú)立的流內(nèi)容（圖像、圖表、照片、代碼等），一般指一個(gè)單獨(dú)的單元。figure元素的內(nèi)容應(yīng)該與竹內(nèi)潤相關(guān)，但如果被刪除，也不會對文檔流產(chǎn)生影響。figcaption元素用于為figure元素組添加標(biāo)題，一個(gè)figure元素內(nèi)最多允許使用一個(gè)figcaption元素，該元素應(yīng)該放在figure元素的第一個(gè)或者最后一個(gè)子元素的位置。
2.hgroup元素
hgroup元素用于將多個(gè)標(biāo)題（主標(biāo)題和副標(biāo)題或者子標(biāo)題）組成一個(gè)標(biāo)題組，通常它與h1~h6元素組合使用。
使用hgroup要注意以下幾點(diǎn)：
- 如果只有一個(gè)標(biāo)題元素不建議使用hgroup元素
- 當(dāng)出現(xiàn)一個(gè)或者一個(gè)以上的標(biāo)題與元素是，推薦使用hgroup元素作為標(biāo)題元素。
- 當(dāng)一個(gè)標(biāo)題包含副標(biāo)題、section或者article元素時(shí)，建議將hgroup元素和標(biāo)題元素存放到header元素容器中。
例：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>hgroup元素的使用</title> </head> <body> <header> <hgroup> <h1>我的個(gè)人網(wǎng)站</h1> <h2>我的個(gè)人作品</h2> </hgroup> <p>開心快樂每一天</p> </header> </body> </html>
效果：
四.頁面交互元素
1.details元素和summary元素
details元素用于描述文檔或文檔某個(gè)部分的細(xì)節(jié)。summary元素經(jīng)常與details元素配合使用，作為details元素的第一個(gè)子元素，用于為details定義標(biāo)題。標(biāo)題是可見的，當(dāng)用戶單擊標(biāo)題時(shí)，會顯示或隱藏details中的其他內(nèi)容。
例：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>details和summary元素的使用</title> </head> <body> <details> <summary>顯示列表</summary> <ul> <li>列表1</li> <li>列表2</li> </ul> </details> </body> </html>
效果圖：
點(diǎn)擊“顯示列表”效果如下：
2.progress元素
progress元素用于表示一個(gè)任務(wù)的完成進(jìn)度。
progress元素的常用屬性值有兩個(gè)：
- value：已經(jīng)完成的工作量。
- max：總共有多少工作量。
（value和max屬性的值必須大于0，且value的值要小于或等于max屬性的值）
例：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>progress元素的使用</title> </head> <body> <h1>我的工作進(jìn)展</h1> <p><progress value="50" max="100"></progress></p> </body> </html>
效果：
3.meter元素
meter元素用于表示指定范圍內(nèi)的數(shù)值。例如，顯示硬盤容量或者對某個(gè)候選者的投票人數(shù)的比例等。
meter元素有多個(gè)常用的屬性
| 屬性 | 說明 |
|---|---|
| high | 定義度量的值位于那個(gè)點(diǎn)被界定為高的值 |
| low | 定義度量的值位于那個(gè)點(diǎn)被界定為低的值 |
| max | 定義最大值，默認(rèn)值為1 |
| min | 定義最小值，默認(rèn)值為0 |
| optimum | 定義什么樣的度量值是最佳的值 |
| value | 定義度量的值 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>meter元素的使用</title> </head> <body> <h1>學(xué)生成績列表</h1> <p> 小紅：<meter value="65" min="0" max="100" low="60" high="80" title="65分" optimum="100">65</meter><br/> 小明：<meter value="80" min="0" max="100" low="60" high="80" title="80分" optimum="100">80</meter><br/> 小李：<meter value="75" min="0" max="100" low="60" high="80" title="75分" optimum="100">75</meter><br/> </p> </body> </html>
效果：
五.文本層次語義元素 1.time元素
time元素用于定義事件或日期，可以代表24小時(shí)中的某一時(shí)間。
time元素有兩個(gè)屬性：
- datetime：用于定義相應(yīng)的時(shí)間或日期。取值為具體時(shí)間或具體日期，不定義該屬性時(shí)，由元素的內(nèi)容給定日期/時(shí)間
- pubdate：用于定義time元素中的日期/時(shí)間是文檔的發(fā)布日期
2.mark元素
mark元素主要的功能是在文本中高亮顯示某些字符，以引起用戶注意。
例：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>mark元素的使用</title> </head> <body> <h3>小蘋果</h3> <p>我種下一顆<mark>種子</mark>，終于長出了<mark>果實(shí)</mark></p> </body> </html>
效果：
3.cite元素
cite元素可以創(chuàng)建一個(gè)引用標(biāo)記，用于對文檔參考文獻(xiàn)的引用說明，一旦在文檔中使用了該標(biāo)記，該標(biāo)記的文檔內(nèi)容將以斜體的樣式展示在頁面中，以區(qū)別段落中的其他字符。
例：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>cite元素的使用</title> </head> <body> <p>也許愈是美麗就愈是脆弱，就像盛夏的泡沫</p> <cite>——明曉溪《泡沫之夏》</cite> </body> </html>
效果：
六.全局屬性
1.draggable屬性
draggable屬性用來定義元素是否可以拖動(dòng)，該屬性有兩個(gè)值：true和false，當(dāng)只為true時(shí)表示元素選中之后可以進(jìn)行拖動(dòng)操作，否則不能拖動(dòng)
格式：
<h3>元素拖動(dòng)屬性</h3> <article draggable="true">這些文字可以被拖動(dòng)</article> 可拖動(dòng)的圖片<img src="img/2021-01-17%20(2).png" draggable="true">
2.spellcheck屬性
spellcheck屬性主要針對于input元素和textarea文本輸入框，對用戶輸入的文本內(nèi)容進(jìn)行拼寫和語法檢查。spellcheck屬性有兩個(gè)值：true（默認(rèn)值）和false，值為true時(shí)檢測輸入框中的值，反之不檢測。
例：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>spellcheck元素的使用</title> </head> <body> <h3>輸入框語法檢測</h3> <p>spellcheck屬性值為true<br/> <textarea spellcheck="true">html5</textarea> </p> <p>spellcheck屬性值為false<br/> <textarea spellcheck="false">html5</textarea> </p> </body> </html>
效果：
3.contenteditable屬性
contenteditable屬性規(guī)定是否可編輯元素的內(nèi)容，但是前提時(shí)該元素必須可以獲得鼠標(biāo)焦點(diǎn)并且其內(nèi)容不是只讀的。
例：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>contenteditable元素的使用</title> </head> <body> <h3>可編輯列表</h3> <ul contenteditable="true"> <li>列表1</li> <li>列表2</li> <li>列表3</li> </ul> </body> </html>
效果：
到此這篇關(guān)于淺析HTML5頁面元素及屬性的文章就介紹到這了,更多相關(guān)HTML5頁面元素及屬性內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！
相關(guān)文章
- 下面小編就為大家?guī)硪黄獪\談html5增強(qiáng)的頁面元素。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-06-14
這篇文章主要介紹了HTML5中CSS外觀屬性的相關(guān)知識，本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，,需要的朋友可以參考下2020-09-10
Html5為我們提供了以 "data-" 為前綴定義需要的屬性即可設(shè)置自定義屬性。使用H5自定義屬性對象dataset來獲取。2020-04-01html5實(shí)現(xiàn)滑塊功能之type="range"屬性
這篇文章主要介紹了html5實(shí)現(xiàn)滑塊功能之type="range"屬性的相關(guān)資料,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-02-18- 這篇文章主要介紹了Html5之自定義屬性(data-,dataset),文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)2019-11-19
