html標籤元素有哪些種類？ html的常用標籤元素的介紹-html教學-PHP中文網

首頁

web前端

html教學

html標籤元素有哪些種類？ html的常用標籤元素的介紹

青灯夜游

Oct 23, 2018 pm 02:33 PM

html塊狀元素行內元素

本篇文章帶給大家的內容是介紹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 id="标题元素-占据一行">标题元素，占据一行</h4>
		<ul>
			<li>ul1 li 标签 元素</li>
			<li>ul1 li 标签 元素</li>
		</ul>
		<ul>
			<li>ul2 li 标签 元素</li>
			<li>ul2 li 标签 元素</li>
		</ul>
	</body>
</html>

效果圖：

html標籤元素有哪些種類？ 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="/static/imghwm/default1.png"  data-src="1.png"  class="lazy"      style="max-width:90%" / alt="html標籤元素有哪些種類？ html的常用標籤元素的介紹" >
		<img  src="/static/imghwm/default1.png"  data-src="1.png"  class="lazy"      style="max-width:90%" / alt="html標籤元素有哪些種類？ html的常用標籤元素的介紹" >
		<p>换一行看看文字效果，我是一段测试代码，<b>被b标签加粗</b>。我是一段测试代码，<i>被i标签变成斜体</i>。</p>
</html>

效果圖：

html標籤元素有哪些種類？ html的常用標籤元素的介紹

##################### ##行內塊狀元素############特點：###### 1、和其他元素都在一行上，不會自動換行，預設排列方式為從左到右； ###### 2、元素的高度、寬度、行高以及上方和底邊距都可設定。 ######行內塊狀元素綜合了行內元素和塊狀元素的特點，但是各有取捨。因此行內塊狀元素在日常的使用中，由於其特點，使用的次數也比較多，在許多方面都很有用。 ###

總結：以上就是本篇文章所介紹的html標籤元素的三個類型，分別為：塊狀元素，行內元素，行內塊狀元素；以及常用的塊狀元素與行內元素介紹。每種類型的標籤都有每種的特點，大家可以自己動手嘗試，看看不同標籤的使用，加深理解，根據需要在不同的情況下使用不同的標籤。希望能對大家的學習有所幫助，更多相關教學請造訪： HTML影片教學，Html5影片教學，bootstrap影片教學！

以上是html標籤元素有哪些種類？ html的常用標籤元素的介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

超越HTML：網絡開發的基本技術Apr 26, 2025 am 12:04 AM

要構建一個功能強大且用戶體驗良好的網站，僅靠HTML是不夠的，還需要以下技術：JavaScript賦予網頁動態和交互性，通過操作DOM實現實時變化。 CSS負責網頁的樣式和佈局，提升美觀度和用戶體驗。現代框架和庫如React、Vue.js和Angular，提高開發效率和代碼組織結構。

HTML中的布爾屬性是什麼？舉一些例子。Apr 25, 2025 am 12:01 AM

布爾屬性是HTML中的特殊屬性，不需要值即可激活。 1.布爾屬性通過存在與否控制元素行為，如disabled禁用輸入框。 2.它們的工作原理是瀏覽器解析時根據屬性的存在改變元素行為。 3.基本用法是直接添加屬性，高級用法可通過JavaScript動態控制。 4.常見錯誤是誤以為需要設置值，正確寫法應簡潔。 5.最佳實踐是保持代碼簡潔，合理使用布爾屬性以優化網頁性能和用戶體驗。

如何驗證您的HTML代碼？Apr 24, 2025 am 12:04 AM

HTML代碼可以通過在線驗證器、集成工具和自動化流程來確保其清潔度。 1)使用W3CMarkupValidationService在線驗證HTML代碼。 2)在VisualStudioCode中安裝並配置HTMLHint擴展進行實時驗證。 3)利用HTMLTidy在構建流程中自動驗證和清理HTML文件。

HTML與CSS和JavaScript：比較Web技術Apr 23, 2025 am 12:05 AM

HTML、CSS和JavaScript是構建現代網頁的核心技術：1.HTML定義網頁結構，2.CSS負責網頁外觀，3.JavaScript提供網頁動態和交互性，它們共同作用，打造出用戶體驗良好的網站。

HTML作為標記語言：其功能和目的Apr 22, 2025 am 12:02 AM

HTML的功能是定義網頁的結構和內容，其目的在於提供一種標準化的方式來展示信息。 1）HTML通過標籤和屬性組織網頁的各個部分，如標題和段落。 2）它支持內容與表現分離，提升維護效率。 3）HTML具有可擴展性，允許自定義標籤增強SEO。

HTML，CSS和JavaScript的未來：網絡開發趨勢Apr 19, 2025 am 12:02 AM

HTML的未來趨勢是語義化和Web組件，CSS的未來趨勢是CSS-in-JS和CSSHoudini，JavaScript的未來趨勢是WebAssembly和Serverless。 1.HTML的語義化提高可訪問性和SEO效果，Web組件提升開發效率但需注意瀏覽器兼容性。 2.CSS-in-JS增強樣式管理靈活性但可能增大文件體積，CSSHoudini允許直接操作CSS渲染。 3.WebAssembly優化瀏覽器應用性能但學習曲線陡，Serverless簡化開發但需優化冷啟動問題。