html行內元素和塊狀元素有哪些

html行內元素有：a（錨點元素）、b（粗體）、br（換行）、code、em（強調）、font（字體設定）、i（斜體）、img（圖片）、input（輸入框）、span、strong（粗體強調）、textarea、u等；塊狀元素有：address（地址）、blockquote（塊引用）、center（居中對齊塊）、div、h1~h6 （標題）、hr（水平分隔線）、p、ul、ol等。

本教學操作環境：windows7系統、HTML5版、Dell G3電腦。

關於行內元素和區塊狀元素的說明

根據CSS規範的規定，每一個網頁元素都有一個display屬性，用於確定該元素的類型，每個元素都有預設的display屬性值，例如div元素，它的預設display屬性值為“block”，成為“區塊級”元素(block-level)；而span元素的預設display屬性值為“inline ”，稱為“行內”元素。

div這樣的區塊級元素，就會自動佔據一定矩形空間，可以透過設定高度、寬度、內外邊距等屬性，來調整的這個矩形的樣子；與之相反，像“span” 「a」這樣的行內元素，則沒有自己的獨立空間，它是依附於其他區塊級元素存在的，因此，對行內元素設定高度、寬度、內外邊距等屬性，都是無效的。

行內、區塊狀元素差異：

(1).區塊層級元素會獨佔一行，其寬度會自動填滿其父元素寬度
行內元素不會獨佔一行，相鄰的行內元素會排列在同一行裡，直到一行排不下，才會換行，其寬度隨元素的內容而變化
(2). 一般情況下，塊級元素可以設置width, height屬性，行內元素設定width, height無效
(注意：區塊級元素即使設定了寬度，仍然是獨佔一行的)
(3).區塊級元素可以設定margin 和padding. 行內元素的水平方向的padding-left,padding-right,margin-left,margin-right 都產生邊距效果，但是垂直方向的padding-top,padding-bottom,margin-top,margin-bottom都不會產生邊距效果。 （水平方向有效，垂直方向無效）

區塊元素(block element)   

　　* address - 位址   

#　　* blockquote - 區塊參考   

　　* blockquote - 區塊參考   

　　* center - 居中對齊區塊   

　　* dir - 目錄清單   

　　* div - 常用區塊層級容易，也是「css layout的主要標籤  - 定義清單   

　　* form - form控制組   

　　* form - 互動表單   

　　* h1 - 大標題#     

　　* h1 - 大標題#     

　# 

　　* h3 - 3級標題   

　　* h4 - 4級標題   

　　* h5 - 5級標題   

#　　* h5 - 5級標題   

#　　* h6 - 5級標題   

#n　* #　　* hr - 水平分隔線   

　　* isindex - input prompt   

　　* menu - 選單清單   

#　　* menu - 選單清單   

#　　* 瀏覽內容的選擇不支持內容，對於 frames name 支援器顯示此區塊內容   

　　* noscript - 可選腳本內容（對於不支持script的瀏覽器顯示此內容）   

　　* ol - 排序表單   

　　* p - 段落   

　　* pre - 格式化文字   

　　* table - 表格   

#　　* ul - 非排序元素順序列表#問題

##　　* ul - 非排序元素排序清單# ( element)   

　　* a - 錨點   

　　* abbr - 縮寫   

　　* ac〠 - 首字* 前綴#推薦)   

　　* bdo - bidi override   

　　* big - 大字體   

　　* br - 換行# * code - 電腦程式碼(在引用原始碼的時候需要)   

　　* dfn - 定義欄位   

　　* em - 強調   

　　* font - 字型設定不建議字)

　　* i - 斜體   

　　* img - 圖片   

　　* input - 輸入鍵盤框   

　#　* kbd - 定義鍵盤文字框   

label - 表格標籤   

　　* q - 短引用   

　　* s - 中劃線(不推薦)   

　　* 中劃線(不推薦)   

　　* samp - 定義範例電腦程式碼 - 定義範例電腦程式碼# * select - 專案選擇   

　　* small - 小字體文字   

　　* span - 常用內嵌容器，定義內區塊

#　　* strong - 粗體強調   

　　* sub - 下標   

　　* sup - 上標   

#　　* sup - 上標   

#　##　　* tt - 電傳文字   

##

　　* u - 底線   

　　* var - 定義變數   

可變元素   

　　可變元素為依據情境情境決定此元素為依據情境情境決定此元素為依據情境情境決定此元素為依據情境情境決定該元素為依據情境情境決定該元素為依據情境情境決定該元素為依據情境情境決定該元素為依據情境情境決定該元素為依據情境情境決定該元素為依據情境情境決定此元素為依據情境情境決定為塊元素或內聯元素。

　　* applet - java applet   

　　* button - 按鈕   

　　* del - 刪除文字* 

#　　* del - 刪除文字ins - 插入的文字   

　　* map - 圖片區塊(map)   

　　* object - 圖片區塊(map)   

　　* object - object物件   

　* script - object物件   

##　* script - 客戶端腳本* script - 客戶端腳本# 推薦：《

html影片教學》

以上是html行內元素和塊狀元素有哪些的詳細內容。更多資訊請關注PHP中文網其他相關文章！