學習html後, 你會了解一些基本的html元素(Element), 如p, h1~h6, br, div, li, ul, img等.
若是將這些元素細分, 又能夠分別歸爲頂級(top-level)元素,塊級(block-level)元素和內聯(inline)元素.
1. Top-level element 【頂級元素】: { html, body, frameset }
包括html, body, frameset, 表現如Block-level element, 屬於高級塊級元素.
2. Block-level element 【塊級元素】: { p, h1~h6, div, ul }
顧名思義就是以塊顯示的元素，高度寬度都是能夠設置的。好比咱們經常使用的 p, h1~h6, div, ul 默認狀態下都是屬於塊級元素。塊級元素比較霸道，默認狀態下每次都佔據一整個行，後面的內容也必須再新起一行顯示。固然非塊級元素也能夠經過css的display:block;將其更改爲塊級元素。此外還有個特殊的，float也具備此功能。
塊級元素可以獨立存在, 通常的塊級元素之間以換行(如一個段落結束後另起一行)分隔。塊級元素是構成一個html的主要和關鍵元素, 而任意一個塊級元素都可以用Box model來解釋說明.
3. Inline element 【內聯元素】: { a, br, em, img, li, span }
通俗點來講就是文本的顯示方式，與塊級元素相反，內聯元素的高度寬度是不能夠設置的，其寬度就是自身文字或者圖片的寬度。咱們經常使用到的<a>、<span>、<em>都屬於內聯元素。內聯元素的顯示特色就是像文本同樣的顯示，不會獨自佔據一個行。固然內聯元素也能變成塊級元素，那就是經過css的display:inline;和float來實現。
內聯元素依附其餘塊級元素存在, 緊接於被聯元素之間顯示, 而不換行.
在《CSS權威指南》這樣定義到，「任何不是塊級元素的可見元素都是內聯元素。其表現的特性是「行佈局」形式。」我我的不太習慣「行佈局」的說話，由於我認爲塊級元素從表現上更像「行」顯示，而內聯元素更像是「文本」的顯示屬性。這其中一點記住很關鍵，「內聯元素的高度寬度都是不能夠設置的，其寬度就是自身文字或者圖片的寬度」。由於在你設置寬度高度大半天后沒反應才發現，原來這只是個內聯元素。