作為前端人員,我們就是要與各種超文本標記打交道,用到各種不同的標簽元素。在使用的時候不知道有沒有註意到他們的分類歸屬?現在就來說一說博主的見解: 目前博主總結了三種分類方法:一是按封閉來劃分,一是按顯示內容來劃分,一是按文檔流來劃分。 一、按封閉可分為雙標簽和單標簽。 雙標簽也就是封閉標簽,我們經常 ...
作為前端人員,我們就是要與各種超文本標記打交道,用到各種不同的標簽元素。在使用的時候不知道有沒有註意到他們的分類歸屬?現在就來說一說博主的見解:
目前博主總結了三種分類方法:一是按封閉來劃分,一是按顯示內容來劃分,一是按文檔流來劃分。
一、按封閉可分為雙標簽和單標簽。
雙標簽也就是封閉標簽,我們經常寫的<html></html>、<div></div>等等成對出現的都是雙標簽,一般也叫標簽對兒。單標簽不是說不需要封閉,一般單標簽里放的都是文本內容,可在第二個尖括弧前加一個反斜線表示封閉,比如<hr />、<img src="1.jpg" />、<input type="text" />,也可以不加。
二、按顯示內容可劃分為容器級標簽和文本級標簽。
所謂文本級標簽就是標簽裡面只能放文字、圖片、鏈接等等,比如<p>、<a>、<em>、<b>等等。而容器級標簽就是標簽裡面還可以繼續使用標簽,比如<div>、<li>、<h1>、<pre>等等。一般都是容器級標簽和文本級標簽組合使用來滿足我們編寫代碼的需求的。
三、按文檔流可分為塊級標簽和行級標簽
不太好理解,先來說說他他們的特點吧
塊級元素具有以下特點:
①總是在新行上開始,占據一整行;
②高度,行高以及外邊距和內邊距都可控制;
③寬頻始終是與瀏覽器寬度一樣,與內容無關;
④它可以容納內聯元素和其他塊元素。
行內元素的特點:
①和其他元素都在一行上;
②高,行高及外邊距和內邊距部分可改變;
③寬度只與內容有關;
④行內元素只能容納文本或者其他行內元素。
常見的塊級標簽有<div>、<h1>、<dl>、<P>等等,常見的行級標簽有<span>、<img>、<input>、<sub>等等。
塊級標簽和行級標簽可以使用 display 屬性通過設置不同的值來相互轉換,
display:block;轉換為塊元素;display:inline;轉換為行內元素,而display:inline-block;轉換為行內塊元素。
所有的文本標簽都是行內標簽,所有的容器級標簽都是塊級標簽
需要註意的是 <p>標簽,它既是文本標簽,又是塊級標簽