前端頁面元素及屬性簡單介紹！

猿友 2021-08-04 09:43:10 瀏覽數(shù) (3461)

反饋

今天我們就來說說：“前端頁面元素及屬性簡單介紹！”這方面的內(nèi)容分享，幫助大家鞏固自己的基礎(chǔ)方便后面的更高程度學(xué)習(xí)！

一.列表元素

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標(biāo)簽中各元素前面為點

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標(biāo)簽中各元素前面為數(shù)字

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>                    <!-- 定義術(shù)語名詞 -->
			<dd>用于大型運算的機器</dd>       <!-- 解釋和描述名詞 -->
			<dd>可以上網(wǎng)沖浪</dd>
			<dd>工作效率非常高</dd>
		</dl>
	</body>
</html>

效果:

在這里插入圖片描述

4.列表的嵌套應(yīng)用

<!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>

效果：

效果截圖

二.結(jié)構(gòu)元素

（此元素一般應(yīng)用較少）

1.header元素

該元素可以包含所有通常放在頁面頭部的內(nèi)容，該元素通常用來放置整個頁面或頁面內(nèi)的一個內(nèi)容區(qū)塊的標(biāo)題
格式：

<header>
  <h1>網(wǎng)頁主題</h1>
  ...
</header>

2.nav元素

用于定義導(dǎo)航鏈接，該元素可以將具有導(dǎo)航性質(zhì)的鏈接歸納在一個區(qū)域中，使頁面的語義更加明確。
格式：

<nav>
   <ul>
        <li><a href="#">首頁</a></li>
        <li><li><a href="#">公司概況</a></li>
        <li><li><a href="#">產(chǎn)品展示</a></li>
        <li><li><a href="#">聯(lián)系我們</a></li>
   </ul>
</nav>

nav元素一般用于以下幾種場合：

傳統(tǒng)導(dǎo)航條
側(cè)邊欄導(dǎo)航頁
內(nèi)導(dǎo)航
翻頁導(dǎo)航

3.article元素

article元素代表文檔，頁面或者應(yīng)用程序中上下文不相關(guān)的獨立部分，該元素用于定義一篇日志，一條新聞或用戶評論等。
例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>article元素的使用</title>
	</head>
	<body>
		<article>
			<header>
				<h2>第一章</h2>
			</header>
			<section>
				<header>
					<h2>第1節(jié)</h2>
				</header>
			</section>
			<section>
				<header>
					<h2>第2節(jié)</h2>
				</header>
			</section>
		</article>
		<article>
			<header>
				<h2>第二章</h2>
			</header>
		</article>
	</body>
</html>

效果：

章節(jié)效果

4.aside元素

aside元素用來定義當(dāng)前頁面或者文章的附屬信息部分，它可以包含與當(dāng)前頁面或主要內(nèi)容相關(guān)的引用，側(cè)邊欄，廣告，導(dǎo)航條等其他類似的有別于主要內(nèi)容的部分。
aside元素的用法主要分為兩種：

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

5.section元素

section元素用于對網(wǎng)站或應(yīng)用程序中頁面上的內(nèi)容進行分塊，一個section元素通常由內(nèi)容和標(biāo)題組成。

不要將section元素用做設(shè)置樣式的頁面容器，那是div的特性。
如果article元素，aside元素或nav元素更加符合使用條件，那么不要使用section元素。
沒有標(biāo)題的內(nèi)容區(qū)塊不要使用section元素定義。

6.footer元素

footer元素用于定義一個頁面或者區(qū)域的底部，它可以包含所有通常放在頁面底部的內(nèi)容。

三.分組元素

1.figure元素和figcaption元素

figure元素用于定義獨立的流內(nèi)容（圖像、圖表、照片、代碼等），一般指一個單獨的單元。figure元素的內(nèi)容應(yīng)該與竹內(nèi)潤相關(guān)，但如果被刪除，也不會對文檔流產(chǎn)生影響。figcaption元素用于為figure元素組添加標(biāo)題，一個figure元素內(nèi)最多允許使用一個figcaption元素，該元素應(yīng)該放在figure元素的第一個或者最后一個子元素的位置。

2.hgroup元素

hgroup元素用于將多個標(biāo)題（主標(biāo)題和副標(biāo)題或者子標(biāo)題）組成一個標(biāo)題組，通常它與h1~h6元素組合使用。
使用hgroup要注意以下幾點：

如果只有一個標(biāo)題元素不建議使用hgroup元素
當(dāng)出現(xiàn)一個或者一個以上的標(biāo)題與元素是，推薦使用hgroup元素作為標(biāo)題元素。
當(dāng)一個標(biāo)題包含副標(biāo)題、section或者article元素時，建議將hgroup元素和標(biāo)題元素存放到header元素容器中。

例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>hgroup元素的使用</title>
	</head>
	<body>
		<header>
			<hgroup>
				<h1>我的個人網(wǎng)站</h1>
				<h2>我的個人作品</h2>
			</hgroup>
			<p>開心快樂每一天</p>
		</header>
	</body>
</html>

效果：

個人網(wǎng)站效果

四.頁面交互元素

1.details元素和summary元素

details元素用于描述文檔或文檔某個部分的細(xì)節(jié)。summary元素經(jīng)常與details元素配合使用，作為details元素的第一個子元素，用于為details定義標(biāo)題。標(biāo)題是可見的，當(dāng)用戶單擊標(biāo)題時，會顯示或隱藏details中的其他內(nèi)容。
例：

<!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元素用于表示一個任務(wù)的完成進度。
progress元素的常用屬性值有兩個：

value：已經(jīng)完成的工作量。
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元素用于表示指定范圍內(nèi)的數(shù)值。例如，顯示硬盤容量或者對某個候選者的投票人數(shù)的比例等。
meter元素有多個常用的屬性

屬性	說明
high	定義度量的值位于那個點被界定為高的值
low	定義度量的值位于那個點被界定為低的值
max	定義最大值，默認(rèn)值為1
min	定義最小值，默認(rèn)值為0
optimum	定義什么樣的度量值是最佳的值
value	定義度量的值

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>meter元素的使用</title>
	</head>
	<body>
		<h1>學(xué)生成績列表</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：用于定義相應(yīng)的時間或日期。取值為具體時間或具體日期，不定義該屬性時，由元素的內(nèi)容給定日期/時間
pubdate：用于定義time元素中的日期/時間是文檔的發(fā)布日期

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元素可以創(chuàng)建一個引用標(biāo)記，用于對文檔參考文獻(xiàn)的引用說明，一旦在文檔中使用了該標(biāo)記，該標(biāo)記的文檔內(nèi)容將以斜體的樣式展示在頁面中，以區(qū)別段落中的其他字符。
例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>cite元素的使用</title>
	</head>
	<body>
		<p>也許愈是美麗就愈是脆弱，就像盛夏的泡沫</p>
		<cite>——明曉溪《泡沫之夏》</cite>
	</body>
</html>

效果：

在這里插入圖片描述

六.全局屬性

1.draggable屬性

draggable屬性用來定義元素是否可以拖動，該屬性有兩個值：true和false，當(dāng)只為true時表示元素選中之后可以進行拖動操作，否則不能拖動
格式：

<h3>元素拖動屬性</h3>
	<article draggable="true">這些文字可以被拖動</article>
	可拖動的圖片<img src="img/2021-01-17%20(2).png" draggable="true">

2.spellcheck屬性

spellcheck屬性主要針對于input元素和textarea文本輸入框，對用戶輸入的文本內(nèi)容進行拼寫和語法檢查。spellcheck屬性有兩個值：true（默認(rèn)值）和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屬性規(guī)定是否可編輯元素的內(nèi)容，但是前提時該元素必須可以獲得鼠標(biāo)焦點并且其內(nèi)容不是只讀的。
例：

<!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>

效果：

在這里插入圖片描述