html標籤元素有哪些種類？ html的常用標籤元素的介紹
- 青灯夜游原創
- 2018-10-23 14:33:3710311瀏覽
本篇文章帶給大家的內容是介紹html標籤元素的種類，讓大家了解html中常用的標籤元素有哪些？有一定的參考價值，有需要的朋友可以參考一下，希望對你們有幫助。
首先我們來了解一下html標籤元素可以分成哪些型別？
HTML中標籤元素一般會分成三種不同類型，分別為：塊狀元素，行內元素，行內塊狀元素。
下面我們來詳細介紹一下這三種類型元素的特點以及用處，並且讓大家了解常用的塊狀元素與行內元素有哪些？
塊狀元素
特徵：
1、獨佔一行，每一個塊狀元素都會從新的一行重新開始，從上到下排布
2、可以直接控制寬度、高度以及盒子模型的相關css屬性（元素的高度、寬度、行高以及頂和底邊距都可設定）
3、在不設定寬度的情況下，區塊級元素的寬度是它父級元素內容的寬度
4、在不設定高度的情況下，區塊級元素的高度是它本身內容的高
因為它本身擁有的這些特點，我們通常會使用塊狀元素來進行大佈局（大結構）的建構。
常用的塊狀元素：
1、普通元素
div（常用塊狀容器，也是css layout的主要標籤）、p （段落）、hr（水平分隔線）、table（ 表格）、form（互動表單）
#2、標題元素：
h1（大標題）、h2（副標題）、h3 （三級標題）、h4 （四級標題）、h5 （五級標題）、h6（六級標題）
3、列表元素
menu（選單列表）、ol（有序列表）、ul（無序列表）、li（列表項）、dl（定義列表）、dt（定義術語）、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标签元素，占据一行</div>
<p>p标签元素，占据一行</p>
<h4>标题元素，占据一行</h4>
<ul>
<li>ul1 li 标签 元素</li>
<li>ul1 li 标签 元素</li>
</ul>
<ul>
<li>ul2 li 标签 元素</li>
<li>ul2 li 标签 元素</li>
</ul>
</body>
</html>效果圖：
#行內元素
特點：
1、和其他內聯元素從左到右在一行顯示
2、無法直接控制寬度、高度以及盒子模型的相關css屬性，但直接設定內外邊距的左右值是可以的
3、內嵌元素的寬度是由本身內容的大小決定（文字、圖片等）
4、內嵌元素只能容納文字或其他內聯元素（這裡請注意，不要在內聯元素中嵌套區塊級元素）
因為它本身俱有的這些特點，我們通常會使用行內元素來進行文字、小圖標（小結構）的搭建。
常用的行內元素：
1、普通元素標籤
span（常用內嵌容器，定義文字內區塊），a（錨點，連結），img（引入圖片），br（強制換行），sub（下標），sup（上標）
2、文字文字修飾標籤
b（加粗），strong（加粗強調），i（斜體），em（斜體強調），，big（大字體文字），small（ 小字體文字），s（中劃線（不建議使用）），strike（中劃線），del（文件中已刪除的文字），u（底線）
3、表單內使用的標籤元素
textarea（多行文字輸入框），input （輸入框），select（下拉清單），label input（元素定義標註（標記））
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>行内元素</title>
<style>
span{
background-color: palegoldenrod;
}
p{
background-color:paleturquoise ;
}
</style>
</head>
<body>
<span>span标签元素1</span>
<span>span标签元素2</span>
<img src="1.png" style="max-width:90%" / alt="html標籤元素有哪些種類？ html的常用標籤元素的介紹" >
<img src="1.png" style="max-width:90%" / alt="html標籤元素有哪些種類？ html的常用標籤元素的介紹" >
<p>换一行看看文字效果，我是一段测试代码，<b>被b标签加粗</b>。我是一段测试代码，<i>被i标签变成斜体</i>。</p>
</html>效果圖：
##################### ##行內塊狀元素############特點：###### 1、和其他元素都在一行上，不會自動換行，預設排列方式為從左到右； ###### 2、元素的高度、寬度、行高以及上方和底邊距都可設定。 ######行內塊狀元素綜合了行內元素和塊狀元素的特點，但是各有取捨。因此行內塊狀元素在日常的使用中，由於其特點，使用的次數也比較多，在許多方面都很有用。 ###
總結：以上就是本篇文章所介紹的html標籤元素的三個類型，分別為：塊狀元素，行內元素，行內塊狀元素；以及常用的塊狀元素與行內元素介紹。每種類型的標籤都有每種的特點，大家可以自己動手嘗試，看看不同標籤的使用，加深理解，根據需要在不同的情況下使用不同的標籤。希望能對大家的學習有所幫助，更多相關教學請造訪： HTML影片教學，Html5影片教學，bootstrap影片教學！
以上是html標籤元素有哪些種類？ html的常用標籤元素的介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章！