明輝手游網(wǎng)中心：是一個(gè)免費(fèi)提供流行視頻軟件教程、在線學(xué)習(xí)分享的學(xué)習(xí)平臺(tái)！

html標(biāo)簽元素有哪一些種類？html的常用標(biāo)簽元素的說明

發(fā)表時(shí)間：2023-08-29 來源：明輝站整理相關(guān)軟件相關(guān)文章人氣：

[摘要]本篇文章給大家?guī)淼膬?nèi)容是介紹html標(biāo)簽元素的種類，讓大家了解html中常用的標(biāo)簽元素有哪些？有一定的參考價(jià)值，有需要的朋友可以參考一下，希望對你們有所幫助。首先我們來了解一下html標(biāo)簽元素可以分成哪些類型？HTML中標(biāo)簽元素一般會(huì)分成三種不同類型，分別為：塊狀元素，行內(nèi)元素，行內(nèi)塊狀元素。下...
本篇文章給大家?guī)淼膬?nèi)容是介紹html標(biāo)簽元素的種類，讓大家了解html中常用的標(biāo)簽元素有哪些？有一定的參考價(jià)值，有需要的朋友可以參考一下，希望對你們有所幫助。

首先我們來了解一下html標(biāo)簽元素可以分成哪些類型？

HTML中標(biāo)簽元素一般會(huì)分成三種不同類型，分別為：塊狀元素，行內(nèi)元素，行內(nèi)塊狀元素。

下面我們來詳細(xì)介紹一下這三種類型元素的特點(diǎn)以及用處，并且讓大家了解常用的塊狀元素與行內(nèi)元素有哪些？

塊狀元素

特點(diǎn)：

1、獨(dú)占一行，每一個(gè)塊狀元素都會(huì)從新的一行重新開始，從上到下排布

2、可以直接控制寬度、高度以及盒子模型的相關(guān)css屬性（元素的高度、寬度、行高以及頂和底邊距都可設(shè)置）

3、在不設(shè)置寬度的情況下，塊級元素的寬度是它父級元素內(nèi)容的寬度

4、在不設(shè)置高度的情況下，塊級元素的高度是它本身內(nèi)容的高

因?yàn)樗陨砭哂械倪@些特點(diǎn)，我們通常會(huì)使用塊狀元素來進(jìn)行大布局（大結(jié)構(gòu)）的搭建。

常用的塊狀元素：

1、普通元素

div（常用塊狀容器，也是css layout的主要標(biāo)簽）、p（段落）、hr（水平分隔線）、table（ 表格）、form（交互表單）

2、標(biāo)題元素：

h1（大標(biāo)題）、h2（副標(biāo)題）、h3（三級標(biāo)題）、h4 （四級標(biāo)題）、h5 （五級標(biāo)題）、h6（六級標(biāo)題）

3、列表元素

menu（菜單列表）、ol（有序列表）、ul（無序列表）、li（列表項(xiàng)）、dl（定義列表）、dt（定義術(shù)語）、dd（定義描述）

我們通過簡單代碼來看看這些塊狀元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>塊狀元素</title>
		<style>
			div{
				background-color: palegoldenrod;
			}
			p{
				background-color:paleturquoise ;
			}
			h4{
				background-color:papayawhip;
			}
			ul{
				background-color: peru;
			}
		</style>
	</head>
	<body>
		<div>div標(biāo)簽元素，占據(jù)一行</div>
		<p>p標(biāo)簽元素，占據(jù)一行</p>
		<h4>標(biāo)題元素，占據(jù)一行</h4>
		<ul>
			<li>ul1 li 標(biāo)簽 元素</li>
			<li>ul1 li 標(biāo)簽 元素</li>
		</ul>
		<ul>
			<li>ul2 li 標(biāo)簽 元素</li>
			<li>ul2 li 標(biāo)簽 元素</li>
		</ul>
	</body>
</html>

效果圖：

1.jpg

行內(nèi)元素

特點(diǎn)：

1、和其他內(nèi)聯(lián)元素從左到右在一行顯示

2、不能直接控制寬度、高度以及盒子模型的相關(guān)css屬性，但是直接設(shè)置內(nèi)外邊距的左右值是可以的

3、內(nèi)聯(lián)元素的寬高是由本身內(nèi)容的大小決定（文字、圖片等）

4、內(nèi)聯(lián)元素只能容納文本或者其他內(nèi)聯(lián)元素（此處請注意，不要在內(nèi)聯(lián)元素中嵌套塊級元素）

因?yàn)樗陨砭哂械倪@些特點(diǎn)，我們通常會(huì)使用行內(nèi)元素來進(jìn)行文字、小圖標(biāo)（小結(jié)構(gòu)）的搭建。

常用的行內(nèi)元素：

1、普通元素標(biāo)簽

span（常用內(nèi)聯(lián)容器，定義文本內(nèi)區(qū)塊），a（錨點(diǎn)，鏈接），img（引入圖片），br（強(qiáng)制換行），sub（下標(biāo)），sup（上標(biāo)）

2、文本文字修飾標(biāo)簽

b（加粗），strong（加粗強(qiáng)調(diào)），i（斜體），em（斜體強(qiáng)調(diào)），，big（大字體文本），small（ 小字體文本），s（中劃線（不推薦使用）），strike（中劃線），del（文檔中已被刪除的文本），u（下劃線）

3、表單內(nèi)使用的標(biāo)簽元素

textarea（多行文本輸入框），input（輸入框），select（下拉列表），label input（元素定義標(biāo)注（標(biāo)記））

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>行內(nèi)元素</title>
		<style>
			span{
				background-color: palegoldenrod;
			}
			p{
				background-color:paleturquoise ;
			}
		</style>
	</head>
	<body>
		<span>span標(biāo)簽元素1</span>
		<span>span標(biāo)簽元素2</span>
		<img src="1.png" width="100px" />
		<img src="1.png" width="100px" />
		<p>換一行看看文字效果，我是一段測試代碼，<b>被b標(biāo)簽加粗</b>。我是一段測試代碼，<i>被i標(biāo)簽變成斜體</i>。</p>
</html>

效果圖：

2.jpg

行內(nèi)塊狀元素

特點(diǎn)：

1、和其他元素都在一行上，不會(huì)自動(dòng)換行，默認(rèn)排列方式為從左到右；

2、元素的高度、寬度、行高以及頂和底邊距都可設(shè)置。

行內(nèi)塊狀元素綜合了行內(nèi)元素和塊狀元素的特點(diǎn)，但是各有取舍。因此行內(nèi)塊狀元素在日常的使用中，由于其特點(diǎn)，使用的次數(shù)也比較多，在很多方面都很有用。

總結(jié)：以上就是本篇文章所介紹的html標(biāo)簽元素的三個(gè)類型，分別為：塊狀元素，行內(nèi)元素，行內(nèi)塊狀元素；以及常用的塊狀元素與行內(nèi)元素介紹。每種類型的標(biāo)簽都有每種的特點(diǎn)，大家可以自己動(dòng)手嘗試，看看不同標(biāo)簽的使用，加深理解，根據(jù)需要在不同的情況下使用不同的標(biāo)簽。希望能對大家的學(xué)習(xí)有所幫助，更多相關(guān)教程請?jiān)L問： HTML視頻教程，Html5視頻教程，bootstrap視頻教程！

以上就是html標(biāo)簽元素有哪些種類？html的常用標(biāo)簽元素的介紹的詳細(xì)內(nèi)容，更多請關(guān)注php中文網(wǎng)其它相關(guān)文章！


網(wǎng)站建設(shè)是一個(gè)廣義的術(shù)語，涵蓋了許多不同的技能和學(xué)科中所使用的生產(chǎn)和維護(hù)的網(wǎng)站。