只需三千字就能手把手帶你學會 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”，
在這里插入圖片描述