只需三千字就能手把手帶你學會 HTML 頁面元素和屬性

入門級HTML、CSS_HTML頁面元素及屬性

你好，我是阿Ken

下面開始我們今天要複習鞏固的內容 —— HTML頁面元素及屬性

本博客暫適用於剛剛接觸HTML以及好久不看想要複習的小夥伴

去年暑假外公進了重症監護室
後來搶救過來
我在醫院住了半個月
方纔知道人竟如此脆弱
現在他老人家還好好的已很欣慰
真的
你愛的人和愛你的人可能看到不到你衣錦還鄉的一天了
還請務必努力

前面銜接
入門級HTML、CSS_HTML基礎

這部分基礎入門沒技術含量
直接堆實例多練就好了

2.1_列表元素

2.1.1_ul 元素(無序)

實例：
代碼如下：

運行後：

2.1.2_ol 元素(有序)

實例：
代碼如下：

運行後：

2.1.3_dl 元素

實例：
代碼如下：

運行後：

2.1.4_列表元素的嵌套

實例：
代碼如下：

運行後：

案例：舉一反三推出其他嵌套結構，

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		
		<dl>
			<dt>看</dt>
			<dd>
				<ul>
					<li>1</li>
					<li>2</li>
					<li>3</li>
				</ul>
			</dd>
			<dt>這</dt>
			<dd>
				<ul>
					<li>1</li>
					<li>2</li>
					<li>3</li>
				</ul>
			</dd>
			<dt>裏</dt>
			<dd>
				<ul>
					<li>1</li>
					<li>2</li>
					<li>3</li>
				</ul>
			</dd>

		</dl>


	</body>
</html>

運行結果：

2.2_結構元素

2.2.1_header 元素

header 元素通常用來放置在網站頁面頭部做標題，可以包含網站logo照片、搜索表單及其他內容。
具有引導和導航的作用。

實例：
代碼如下：

運行後：

2.2.2_nav 元素

nav元素用於定義導航鏈接

實例：
代碼如下：

運行後：

點擊1234中的任意一個鏈接:

在上面這段代碼中，通過在nav元素內部嵌套有序列表 ol 來搭建導航結構。通常，一個HTML頁面中可以包含多個nav元素，作爲頁面整體或不同部分的導航。具體來說，nav 元素可以用於以下幾種場合。

● 傳統導航條:目前主流網站上都有不同層級的導航條，其作用是跳轉到網站的其他主頁面。

● 側邊欄導航:目前主流博客網站及電商網站都有側邊欄導航，目的是將當前文章或當前商品頁面跳轉到其他文章或其他商品頁面。

● 頁內導航:它的作用是在本頁面幾個主要的組成部分之間進行跳轉。

● 翻頁操作:翻頁操作切換的是網頁的內容部分，可以通過單擊“上-頁"或“下一頁"切換，也可以通過單擊實際的頁數跳轉到某頁。

除了以上幾點以外，nav 元素也可以用於其他重要的、基本的導航鏈接組中。

2.2.3_article 元素

article 元素代表文檔、頁面或者應用程序中與上下文不相關的獨立部分，該元素經常被用於定義一篇日誌、一條新聞或用戶評論等。

2.2.4_aside 元素

aside 元素用來定義當前頁面或者文章的附屬信息部分，它可以包含與當前頁面或主要內容的引用、側邊欄、廣告、導航條等其他類似的有別於主要內容的部分。

aside元素的用法主要有如下兩種：

被包含在article元素內作爲主要內容的附屬信息。
在article元素之外使用，作爲頁面或站點全局的附屬信息部分。最常用的使用方式是側邊欄，其中的內容可以是友情鏈接、廣告單元等。

2.2.5_section 元素

section 元素用於對網站或應用程序中頁面上的內容進行分塊，一個section元素通常由內容和標題組成。

在使用 section 元素時，需注意：

不要將 section 元素用來設置樣式的頁面容器，那是 div 的特性。section 元素並非一個普通的容器元素，當一個容器需要被直接定義樣式或通過腳本定義行爲時，推薦使用 div。
如果 article 元素、aside 元素或 nav 元素更符合使用條件，那麼不要使用 section 元素。
沒有標題的內容區塊不要使用 section 元素定義

2.2.6_footer 元素

footer 元素用於定義一個頁面或者區域的底部，可以包含所有通常放在頁面底部的內容。
一個頁面可以包含多個 footer 元素，也可以在 article 元素或者 section 元素中添加 footer 元素。

2.3_分組元素

2.3.1_figure 元素和 figcaption 元素

figure 元素用於定義獨立的內容（如圖像、圖標、照片、代碼等）。
figcaption 元素用於爲figure元素組添加標題

一個figure元素內最多允許使用一個figcaption元素，該元素應放在figure元素的第一個或者最後一個子元素的位置

實例：
代碼如下：

運行後：

2.3.2_hgroup 元素

hgroup 元素用於將多個標題（主標題和副標題或者子標題）組成一個標題組，通常它與 h1 ~ h6 元素組合使用。
通常，將hgroup元素放在header元素中。

實例：
代碼如下：

運行後：

2.4_頁面交互元素

2.4.1_details 元素和 summary 元素

details 元素用於描述文檔或文檔某個部分的細節
details 元素經常與 summary 元素配合使用，一般用details定義標題

實例：代碼如下，

運行後：

2.4.2_progress 元素

progress 元素用於表示一個任務的完成度。
value：已經完成的工作量
max：總共有多少工作量

實例：代碼如下，

運行後：

2.4.3_meter 元素

meter 元素用於表示指定範圍內的數值。

屬性	說明
high	定義度量的值位於哪個點被界定爲高的值
low	定義度量的值位於哪個點被界定爲低的值
max	定義最大值，默認值是1
min	定義最小值，默認值是0
optimum	定義什麼樣的度量值是最佳的值。如果該值高於high屬性，則意味着值越高越好。如果該值低於low屬性的值，則意味着值越低越好
value	定義度量的值

實例：
代碼如下：

運行後：

當鼠標指針放在結果中的進度條上會顯示”99分“

2.5_文本層次語義元素

2.5.1_time 元素

time元素用於定義時間或日期，可以代表24小時中的某一時間。time元素不會在瀏覽器中呈現任何特殊效果，但是該元素能以機器可讀的方式對日期和時間進行編碼，這樣，用戶能夠將生日提醒或其他事件添加到日程表中，搜索引擎也能夠生成更智能的搜索結果。
datatime：用於定義相應的時間或日期。
pubdate：用於定義time元素中的日期/時間是文檔（或article元素）的發佈日期。取值一般爲“pubdate”。