一.列表元素
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標簽中各元素前面為數字
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元素
該元素可以包含所有通常放在頁面頭部的內容，該元素通常用來放置整個頁面或頁面內的一個內容區塊的標題
格式：
<header>
<h1>網頁主題</h1>
...
</header>
2.nav元素
用于定義導航鏈接，該元素可以將具有導航性質的鏈接歸納在一個區域中，使頁面的語義更加明確。
格式：
<nav>
<ul>
<li><a href="#">首頁</a></li>
<li><li><a href="#">公司概況</a></li>
<li><li><a href="#">產品展示</a></li>
<li><li><a href="#">聯系我們</a></li>
</ul>
</nav>
nav元素一般用于以下幾種場合：
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節</h2>
</header>
</section>
<section>
<header>
<h2>第2節</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元素。
- 沒有標題的內容區塊不要使用section元素定義。
6.footer元素
footer元素用于定義一個頁面或者區域的底部，它可以包含所有通常放在頁面底部的內容。
三.分組元素
1.figure元素和figcaption元素
figure元素用于定義獨立的流內容（圖像、圖表、照片、代碼等），一般指一個單獨的單元。figure元素的內容應該與竹內潤相關，但如果被刪除，也不會對文檔流產生影響。figcaption元素用于為figure元素組添加標題，一個figure元素內最多允許使用一個figcaption元素，該元素應該放在figure元素的第一個或者最后一個子元素的位置。
2.hgroup元素
hgroup元素用于將多個標題（主標題和副標題或者子標題）組成一個標題組，通常它與h1~h6元素組合使用。
使用hgroup要注意以下幾點：
- 如果只有一個標題元素不建議使用hgroup元素
- 當出現一個或者一個以上的標題與元素是，推薦使用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元素用于描述文檔或文檔某個部分的細節。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元素用于表示指定范圍內的數值。例如，顯示硬盤容量或者對某個候選者的投票人數的比例等。
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元素中的日期/時間是文檔的發布日期
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元素可以創建一個引用標記，用于對文檔參考文獻的引用說明，一旦在文檔中使用了該標記，該標記的文檔內容將以斜體的樣式展示在頁面中，以區別段落中的其他字符。
例：
<!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屬性規定是否可編輯元素的內容，但是前提時該元素必須可以獲得鼠標焦點并且其內容不是只讀的。
例：
<!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頁面元素及屬性內容請搜索腳本之家以前的文章或繼續瀏覽下面的相關文章，希望大家以后多多支持腳本之家！
