首先我們要了解所謂的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)容器：塊級元素
div 默認屬性是前后各加 br 換行。

(Span,img,input,a)文本：行內元素
span 標簽沒語義，作用：可單獨設置屬性

給出了一些主要要掌握的元素。同時我相信看眾也比較容易理解和記憶這些內容。如果還是沒在腦海中形成它們的樣子。你可以參考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基本元素講解的詳細內容，html教程

鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。