Html的Element基本元素講解

本人寫這篇文章是我在IT修真園裡學習了一段時間，反過來複習時整理的。雖然只是些基礎知識內容，希望能幫到大家。

首先我們要了解所謂的html它的定義是什麼？

HTML DOM 節點

在HTML DOM （文件物件模型）中，每個部分都是節點：

文件本身是文件節點

所有HTML 元素是元素節點

所有HTML 屬性是屬性節點

#HTML 元素內的文字是文字節點

#註解是註解節點

Element 物件

在HTML DOM 中，Element 物件表示HTML 元素。

Element 物件可以擁有類型為元素節點、文字節點、註解節點的子節點。

NodeList 物件表示節點列表，例如 HTML 元素的子節點集合。

元素也可以擁有屬性。屬性是屬性節點。

【html：超文本標記語言，文字：txt格式的文件，標記：用標籤對給文字附加語義】

如果你已經透過上文對html有個了解後，我們就著手研究它的三個元素。

區塊級(block-level)元素和內聯(inline)元素以及行內快元素(inline-block)

科普一些背景：html佈局：文檔流，float浮動，position定位以及display：flex彈性佈局。

是基於最先出現的文件流，有些元素也被賦予了它原先的語意。

Block:區塊級元素單獨霸占一行，可設定寬高；如果不給寬度，區塊級元素就預設為瀏覽器的寬度，即就是100%寬；

Inline：行內元素：可以多個標籤存在一行，對寬高屬性值不生效，完全靠內容撐開寬高！

 Inline-block:行內區塊元素：結合的行內和區塊級的要點，不僅可以設定寬高，還可以多個標籤存在一行顯示;

(div，p，ul，li)容器：區塊級元素

預設屬性是前後各加< ;br>換行。

(Span,img,input,a)文字：行內元素
標籤沒語義，作用：可單獨設定屬性

#給了一些主要要掌握的元素。同時我相信看眾也比較容易理解和記憶這些內容。如果還是沒在腦海中形成它們的樣子。你可以參考word文件中，一段文字預設狀態下是不是鋪滿一行一行的從左到右，從上到下的排列。表格是不是新增一行兩列或是一行多列預設是鋪滿整張A4紙。說到這裡大家應該可以記得他們了。

概念和代表已經說了，但是我們不但要理解他們的語義，還要踏實的使用它們。

先說inline吧，文字與img它要實現位置偏右，居中等位移，是跟word編輯器裡的6個位置是 一模一樣的。而網頁設定中，頻繁使用的是Text-align：center。

就不一一解釋了，奉上內經，如下

 

Text-align:是設定在父盒子標籤裡，規定盒子內的行內元素（文字或img標籤）居中顯示。

Line-height:是指文字的行框（行高）高。由（上，下間距和文字高度組成）

實現垂直的原理:容器高度=行框高度。文字高度預設為16px，當設定容器高度=line-height=200px時，上，下間距會自動平分184px。

Margin：0 auto：是設定在要居中的盒子標籤裡。一般還要設定盒子寬度。

vertical-align:middle：是設定在兩個行內元素標籤裡，讓兩個行內元素兩者間和最後行內元素前面的行內元素互相垂直對齊。

 

Tex-align和line-height常常搭配使用在一行文字的垂直置中。

Vertical-align:middle常用於文本和img的垂直對齊。

vertical-align這個屬性，如果要細究，那真的要搭入好多新內容。其實我們也不要了解他的基線，中線，頂線這些內容，知道怎麼使用就好。

還有一點必須要說的：vertical-align是inline-block依賴型元素。如果不是inline-block元素，就會不理不睬。有些元素是預設支援它的：圖片，按鈕，單一複選框，單行/多行文字方塊等HTML控制項

#

以上是Html的Element基本元素講解的詳細內容。更多資訊請關注PHP中文網其他相關文章！