HTML塊級元素與行內元素
用法:
塊級元素只能用於<body>標籤中
塊級元素與行內元素
塊級元素與行內元素的幾個區別
格式:
在默認情況下,塊級元素會從新起一行
內容模型:
塊級元素可以包含其他的塊級元素和行內元素,這種模型會比行內元素有著更加大的結構
塊級元素列表:
1. <address></address> ---聯繫方式信息
2. <blockquote></blockquote> ---塊引用
3. <dd></dd> ---定義列表中的條目描述
4. <div></div> ---文檔分區
5. <dl></dl> ---定義列表
Advertisements
6. <fieldset></fieldset> ---表單元素分組
7. <form></form> ---form表單
8. <blockquote></blockquote> ---塊引用
9. <h1></h1> ---大標題
10. <h2></h2> ---副標題
11. <h3></h3> ---定義標題
12. <h4></h4> ---定義標題
13. <h5></h5> ---定義標題
14. <h6></h6> ---最小標題
Advertisements
15. <hr> ---水平分割線
16. <noscript></noscript> ---不支持腳本或禁用腳本
17. <ol></ol> ---有序列表
18. <p></p> ---行
19. <pre></pre> ---預格式化文本
20. <table></table> ---表格
21. <tfoot></tfoot> ---表腳註
22. <ul></ul> ---無序列表
html5新增塊級元素:
23. <article></article> ---文章內容
24. < aside></aside> ---伴隨內容
25. <audio></audio> ---音頻播放
26. <canvas></canvas> ---繪製圖形
27. <figure></figure> ---圖文信息組
28. < figcaption></figcaption> ---圖文信息組標題
29. <footer></footer> ---區段尾或頁尾
30. <header></header> ---區段頭或頁頭
31. <hgroup></hgroup> ---標題組
32. < output></output> ---表單輸出
33. <section></section> ---一個頁面區段
34. <video></video> ---視頻
行內元素與塊級元素的區別
內容:
通常情況下,行內元素只能包含數據或其它行內元素
格式:
默認情況下,行內元素不會重新起一行,而塊級元素會重新起一行
行內元素列表:
1.<a> --- a標籤元素
2.<abbr> ---表示一個縮寫形式
3.<acronym> ---定義只取首字母縮寫
4.<b> ---字體加粗
5.<bdo> ---可覆蓋的文本方向
6.<big> ---大號字體加粗
7.<br> ---換行
8.<cite> ---引用進行定義
9.<code> ---定義計算機代碼文本
10.<dfn> ---定義一個定義項目
11.<em> ---定義為強調內容
12.<i> ---斜體文本效果
13.<img> ---引入圖片標籤
14.<input> ---文本輸入框
15.<kbd> ---定義鍵盤文本
16.<lebal> ---標籤為input 元素定義標註(標記)
17.<q> ---定義短的引用
18.<samp> ---定義樣本文本
19.<section> ---下拉列表菜單
20.<small> ---顯示小號字體效果
31.<span> ---組合文本中的行內元素
32.<strong> ---加粗
33.<sub> ---定義下標文本
34.<sup> ---定義上標文本
35.<textarea> ---多行文本輸入控制項
36.<tt> ---打字機或者等寬的文本效果
37.<var> ---定義變數
可變元素
可變元素為根據上下文語境決定該元素是塊級元素或內聯元素
1.applet --- java applet
2.button --- 按鈕
3.del --- 刪除文本
4.iframe --- inline frame
5.ins --- 插入文本
6.map --- 圖片區塊
7.object --- object對象
8.script --- 客戶端腳本
總結:
區別:
1、塊級元素會獨佔一行,其寬度會自動填滿父級元素的寬度
行內元素不會獨佔一行,相鄰間的行內元素會拍到一行內,直到一行的內容排滿才會自動換行,寬度會隨內容的變化而變化
變化:
2、塊級元素可以設置width與height;而行內元素設置了width和height會沒有效果
註:塊級元素雖然設置了,但其還會獨佔一行
3、塊級元素可以設置margin與padding,可是行內元素設置了,只有水平方向上有效果、垂直方向上沒有效果
就是說行內元素設置margin-left;margin-right;padding-left;padding-right;有效果;而設置margin-top;margin-bottom;padding-top;padding-bottom;沒有效果