HTML 替換元素與非替換元素

admin發表於2018-11-16
HTML

從不同的角度，元素可以有不同的分類。

比如HTML元素可以分為塊級元素，行內元素或者塊級行內（內聯）元素。

具體可以參閱CSS塊級/內聯元素一章節。

HTML元素還可以劃分為替換元素與非替換元素，下面簡單進行一下相關介紹。

一.替換元素：

所謂替換元素就是根據元素內相關屬性的不同，瀏覽器會有不同的解析展現。

比如input元素、img元素或者iframe元素等。

input會根據type屬性值的不同會有不同的展現，img會根據src屬性值的不同也會有不同的展現。

可以看到這些元素都是空元素，沒有實際內容。

程式碼如下：

[HTML] 純文字檢視 複製程式碼
<input type="text" value="螞蟻部落"/>
<img src="girl.jpg"/> 
<iframe src="http://www.softwhy.com">

二.非替換元素:

div、span或者p等都是非替換元素。

它們都是非常"直率"的元素，直接將內容展現給瀏覽器。

[HTML] 純文字檢視 複製程式碼
<div>螞蟻部落</div>

上述主要目的是讓讀者對替換元素與非替換元素有一個大致概念。

兩種型別元素還具有其他特點，本文不做介紹。

三.行內替換元素：

通常情況下，我們會說行內元素是不能進行如下操作：

（1）.設定元素的尺寸。

（2）.設定上下內外邊距。

但是行內替換元素是例外，比如img圖片和input元素。

程式碼例項如下：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
input{
  margin:50px;
  width:200px;
  height:60px;
}
</style>
</head>
<body>
  <input type="text" value="螞蟻部落"/>
</body>
</html>

程式碼執行效果截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/201811/16/095142ug4p0althjts0si2.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

input是一個行內元素，但是我們可以設定它的上下內外邊距和尺寸。

絕大多數替換元素都是行內元素。

四.行內非替換元素：

對於行內非替換元素會遵守我們經常提起的規則：

（1）.無法設定元素的尺寸。

（2）.無法設定元素的上下內外邊距。

相關文章