一.串列元素

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>

效果：
在這里插入圖片描述

轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/250734.html

標籤：區塊鏈

上一篇：狗狗幣錢包更新慢怎么處理快速更新區塊資料狗狗幣錢包無法同步

下一篇：如何解決H5開發使用wx.hideMenuItems無效果不生效

HTML5頁面元素及屬性

一.串列元素

1.ul元素

2.ol元素

3.dl元素

4.串列的嵌套應用

二.結構元素

1.header元素

2.nav元素

3.article元素

4.aside元素

5.section元素

6.footer元素

三.分組元素

1.figure元素和figcaption元素

2.hgroup元素

四.頁面互動元素

1.details元素和summary元素

2.progress元素

3.meter元素

五.文本層次語意元素

1.time元素

2.mark元素

3.cite元素

六.全域屬性

1.draggable屬性

2.spellcheck屬性

3.contenteditable屬性