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