html塊級元素與內聯元素的區別

一、  塊級元素（block element）：

概念理解：若是不用css控制，塊級元素在文檔流中以一行顯示，及它所佔的寬度爲其父級元素所佔的寬度，若超過寬度會從新另起一行顯示，高度會隨着內容高度的增長而增長。

              能夠用display:inline屬性將塊級元素轉換爲內聯元素形式顯示，這樣塊級元素就不會從新起行顯示，而是變成行內元素與其餘元素在一行內顯示。

              常見的html元素是：<p>。

常見塊級元素標籤有：

<address>：內容以斜體顯示；

<blockquote>:引用，有時候會是斜體，會在正常文本中脫離出來，若是不用css控制該屬性的margin:0;那麼該元素的內容會自動在左右進行縮進，上下也有必定的間邊距，

                     若是設置margin:0；那麼該塊引用的高度就是內容的高度，而寬度就是父級元素的寬度。

                     如需把頁面做爲 strict XHTML （嚴格的可擴展的html）進行驗證，那麼 <blockquote> 元素必須包含塊級元素，好比這樣：

                             <blockquote>

                                    <p>here is a long quotation here is a long quotation</p>

                            </blockquote>　

 <center>：水平居中

<dir>:目錄列表，同上，默認有margin值，並且有padding-left值。

<div>:區域或塊。

<dl>:定義列表：有默認的margin-top和margin-bottom值，且值相同。

<fieldset>:控制組，有默認的邊框。一般內嵌form元素。

<h1>…<h6>：標題，默認的有margin-top和margin-bottom值，且值的大小相同.

<isindex>：單標籤。會自動生成一個form表單，表單中有默認的索引搜索框，而且有上下兩條底邊，左右沒有。

<menu>:菜單。有默認的margin-top和margin-bottom值，值相同，還有padding-left值。

<pre>:格式化文本。有默認的margin-top和margin-bottom值，值相同。保留輸入時的樣式，不改變，經常使用於再網頁中輸入數學公式等格式不要求改變的餓內容。

<ol>:有序列表。有默認的margin-top和margin-bottom值，值相同，有必定的padding-left值，但該部分用於填充項目編號內容，若是css控制padding:0，

         那麼項目編號將會消失不存在，能夠經過改變list-style-type屬性來調整項目編號的樣式：

                 disc：實心圓；

                 circle：空心圓；    

                 square：實心方塊；    

                 decimal：十進制數字；    

                 lower-roman：小寫羅馬數字；    

                 upper-roman：大寫羅馬數字；    

                 lower-alpha：小寫英文字母；     

                 upper-alpha：大寫英文字母；    

                 none：不顯示項目符號和編號。

<table>:雖然寬度和高度根據須要須要設置，若是不設置tr和td，系統會認爲table高度和寬度爲0，如有tr和td而且當中有內容，那麼寬度和高度是隨內容決定的，

             可是有另外一個table元素時，就會另起一行顯示。它的寬度雖不是整行父級元素的寬度，可是該行剩下的寬度也不會被其餘元素佔用，由於元素內容後面至關於有一個換行符。

<ul>：同ol。只是項目符號默認的時實心原點。和ol標籤同樣能夠經過list-style-type屬性來改變項目符號的樣式。

<p>:段落，老是另起一行，經過display：inline 或者display:inline-block屬性來使段落與其餘元素在一行顯示。

 

 

二、  內聯元素/行內元素/內嵌元素/直進式元素（inline element）:

概念理解：內聯元素就是在一行中顯示的內容，和其餘元素都是在一行顯示，它的高度和寬度是由它當中的內容決定的，其中內容通常爲文字或圖片，這些文字或圖片的寬度有多少，

               該行內元素的寬度和高度就該是多少。用display:block 可使行內元素以塊元素形式顯示，它會另起一行顯示，寬度也變爲了其父級元素所在的寬度。常見的html元素是<a>。

* a - 錨點

* abbr - 縮寫

* acronym - 首字

* b - 粗體(不推薦)-----》改成：strong

* bdo - bidi override:定義文字的顯示方向（不經常使用）：有屬性dir=」ltr」或dir=」rtl」表示將文字從左向右輸出仍是從右向左輸出，例如：123，ltr就爲：123；rtl就爲：321顯示。該標籤不經常使用。

* big - 大字體-----》已被w3c拋棄，不使用

* small - 小字體文---》一般用css代替

* br - 換行

   用於定義的標籤：

* cite - 引用，有傾斜效果。

* code - 計算機代碼(在引用源碼的時候須要)，顏色會比通常問題顏色稍淺。

* dfn - 定義字段，一個定義項目：字體稍傾斜，程度不如cite強，且文字顏色比cite文字顏色稍深。

* em – 斜體強調

strong - 粗體強調

* samp - 定義樣本文本

* var - 定義變量

* kbd - 定義鍵盤文本

 

* font - 字體設定(不推薦)---》通常使用css來代替，而再也不在html中再使用該標籤來設置字體。

* i - 斜體  標籤訂義與文本中其他部分不一樣的部分，並把這部分文本呈現爲斜體文本。在沒有其餘元素可使用時，好比 <b>, <cite>, <dfn>, <em>, <q>, <small>, <strong>，請使用 <i> 標籤。

        可用font-style：normal;屬性去除其斜體效果。

* img - 圖片：單標籤

* input - 輸入框：單標籤

* label - 表格標籤 （它的for屬性，能夠將其和另外的元素對應起來 ，詳細見連接：http://www.w3school.com.cn/tiy/t.asp?f=html_label）

* q - 短引用：默認內容被雙引號包起來。

* s - 中劃線(不推薦)     和刪除線del以及strike效果相同，可是strike不適用，一般用del來代替，和s標籤效果相同。

* select - 項目選擇，常和option連用，構成一個下拉列表。默認的有margin值。

* span - 經常使用內聯容器，定義文本內區塊

* strike - 中劃線

* sub - 下標-à不經常使用

* sup - 上標-à不經常使用

* textarea - 多行文本輸入框：默認爲兩行的高度，如需設置高度和寬度能夠經過屬性cols=」X」和rows=」X」來設置。

* tt - 電傳文本：加小的字體。

* u - 下劃線