a) 替換元素

替換元素就是瀏覽器根據元素的標籤和屬性，來決定元素的具體顯示內容。

例如瀏覽器會根據<img>標籤的src屬性的值來讀取圖片資訊並顯示出來，而如果檢視(X)HTML程式碼，則看不到圖片的實際內容；又例如根據<input>標籤的type屬性來決定是顯示輸入框，還是單選按鈕等。

(X)HTML中的<img>、<input>、<textarea>、<select>、<object>都是替換元素。這些元素往往沒有實際的內容，即是一個空元素，例如：

    <img src="http://img01.sogoucdn.com/app/a/100520024/2a658a12477435a46bade1d5c832f193" alt="tutu1"  />
 

</pre><p style="MARGIN-BOTTOM: 0px; FONT-SIZE: 14px; FONT-FAMILY: Arial; PADDING-BOTTOM: 0px; PADDING-TOP: 0px; MARGIN-TOP: 0px; LINE-HEIGHT: 26px"></p><h4 style="FONT-FAMILY: Arial; PADDING-BOTTOM: 0px; PADDING-TOP: 0px; PADDING-LEFT: 0px; MARGIN: 0px; LINE-HEIGHT: 26px; PADDING-RIGHT: 0px"><h4 style="FONT-FAMILY: Arial; PADDING-BOTTOM: 0px; PADDING-TOP: 0px; PADDING-LEFT: 0px; MARGIN: 0px; LINE-HEIGHT: 26px; PADDING-RIGHT: 0px"><span style="font-size:14px;FONT-WEIGHT: normal"><span style="WHITE-SPACE: pre"></span>替換元素一般有內在尺寸，所以具有width和height，可以設定。例如你不指定img的width和height時，就按其內在尺寸顯示，也就是圖片被儲存的時侯的高度和寬度</span></h4><h4 style="FONT-FAMILY: Arial; PADDING-BOTTOM: 0px; PADDING-TOP: 0px; PADDING-LEFT: 0px; MARGIN: 0px; LINE-HEIGHT: 26px; PADDING-RIGHT: 0px"><span style="font-size:14px;FONT-WEIGHT: normal">對於表單元素，瀏覽器也有預設的樣式，包括寬度和高度。</span></h4><h4 style="FONT-FAMILY: Arial; PADDING-BOTTOM: 0px; PADDING-TOP: 0px; PADDING-LEFT: 0px; MARGIN: 0px; LINE-HEIGHT: 26px; PADDING-RIGHT: 0px"><h4 style="FONT-SIZE: 14px; FONT-FAMILY: Arial; PADDING-BOTTOM: 0px; PADDING-TOP: 0px; PADDING-LEFT: 0px; MARGIN: 0px; LINE-HEIGHT: 26px; PADDING-RIGHT: 0px"><span style="font-size:24px;"></span></h4><h4 style="FONT-SIZE: 14px; FONT-FAMILY: Arial; PADDING-BOTTOM: 0px; PADDING-TOP: 0px; PADDING-LEFT: 0px; MARGIN: 0px; LINE-HEIGHT: 26px; PADDING-RIGHT: 0px"><span style="font-size:24px;"></span></h4><span style="font-size:12px;"></span></h4></h4><h4 style="FONT-SIZE: 14px; FONT-FAMILY: Arial; PADDING-BOTTOM: 0px; PADDING-TOP: 0px; PADDING-LEFT: 0px; MARGIN: 0px; LINE-HEIGHT: 26px; PADDING-RIGHT: 0px">b) 不可替換元素</h4><p></p><p style="MARGIN-BOTTOM: 0px; FONT-SIZE: 14px; FONT-FAMILY: Arial; PADDING-BOTTOM: 0px; PADDING-TOP: 0px; MARGIN-TOP: 0px; LINE-HEIGHT: 26px"><span style="WHITE-SPACE: pre"></span>(X)HTML 的大多數元素是不可替換元素，即其內容直接表現給使用者端（例如瀏覽器）。例如：</p><p style="MARGIN-BOTTOM: 0px; FONT-SIZE: 14px; FONT-FAMILY: Arial; PADDING-BOTTOM: 0px; PADDING-TOP: 0px; MARGIN-TOP: 0px; LINE-HEIGHT: 26px"><pre class="html" name="code">    <p></p>
 

<h4 style="margin: 0px; padding: 0px; font-family: Arial; font-size: 14px; line-height: 26px;">c) 塊級元素</h4><p style="margin-top: 0px; margin-bottom: 0px; padding-top: 0px; padding-bottom: 0px; font-family: Arial; font-size: 14px; line-height: 26px;"><span style="white-space:pre">	
</span>在視覺上被格式化為塊的元素，最明顯的特徵就是它預設在橫向充滿其父元素的內容區域，而且在其左右兩邊沒有其他元素，即塊級元素預設是獨佔一行的。</p><p style="margin-top: 0px; margin-bottom: 0px; padding-top: 0px; padding-bottom: 0px; font-family: Arial; font-size: 14px; line-height: 26px;">
典型的塊級元素有：<div>、<p>、<h1>到<h6>，等等。</p><p style="margin-top: 0px; margin-bottom: 0px; padding-top: 0px; padding-bottom: 0px; font-family: Arial; font-size: 14px; line-height: 26px;">通過CSS設定了浮動（float屬性，可向左浮動或向右浮動）以及設定顯示（display）屬性為“block”或“list-item”的元素都是塊級元素。</p><p style="margin-top: 0px; margin-bottom: 0px; padding-top: 0px; padding-bottom: 0px; font-family: Arial; font-size: 14px; line-height: 26px;">但是浮動元素比較特殊，由於浮動，其旁邊可能會有其他元素的存在。而“list-item”（列表項<li>），會在其前面生成圓點符號，或者數字序號。</p><p style="margin-top: 0px; margin-bottom: 0px; padding-top: 0px; padding-bottom: 0px; font-family: Arial; font-size: 14px; line-height: 26px;"></p><h4 style="margin: 0px; padding: 0px; font-family: Arial; font-size: 14px; line-height: 26px;">d) 行內元素</h4><p style="margin-top: 0px; margin-bottom: 0px; padding-top: 0px; padding-bottom: 0px; font-family: Arial; font-size: 14px; line-height: 26px;"></p><p style="margin-top: 0px; margin-bottom: 0px; padding-top: 0px; padding-bottom: 0px; font-family: Arial; font-size: 14px; line-height: 26px;"><span style="white-space:pre">	</span>行內元素不形成新內容塊，即在其左右可以有其他元素，例如<a>、<span>、<strong>等，都是典型的行內級元素。</p><p style="margin-top: 0px; margin-bottom: 0px; padding-top: 0px; padding-bottom: 0px; font-family: Arial; font-size: 14px; line-height: 26px;">display屬性等於“inline”的元素都是行內元素。幾乎所有的可替換元素都是行內元素，例如<img>、<input>等等。</p><p style="margin-top: 0px; margin-bottom: 0px; padding-top: 0px; padding-bottom: 0px; font-family: Arial; font-size: 14px; line-height: 26px;">不過元素的型別也不是固定的，通過設定CSS 的display屬性，可以使行內元素變為塊級元素，也可以讓塊級元素變為行內元素。</p>