Html的基本元素 Element

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

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

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

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

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

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

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

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

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

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

預設屬性是前後各加

換行。(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控制項