一.列表元素
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>
效果: