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;沒有效果

Advertisements

你可能會喜歡