1. 程式人生 > >html的分類與特點

html的分類與特點

設置 列表 margin 繼承 img 超鏈接 嵌套 str inter

##塊級元素##
|元素|描述|
|--|--|
|h1-h6|標題|
|div|區分大模塊|
|p|段落|
|ul>li|無序列表|
|ol>li|有序列表|
|dl>dt dd|自定義列表|
|table>tr td|表格|
###塊級元素的特點###
- 獨占一行,從上往下排布
- 可以設置CSS盒子模型的所有屬性(width/height/border/margin/padding)
- 在不設置寬高時,寬是繼承父級的寬度,高是由本身內容決定的
- 可以嵌套其他元素
- p元素不能嵌套p元素
- h1-h6,dt,dd一般不會嵌套塊級元素,有時會嵌套行內元素


##行內元素##
###行內元素###
|元素|描述|
|--|--|
|span|區分行內小模塊|
|em|斜體,有強調作用|
|i|斜體|
|strong|加粗,有強調作用|
|b|加粗|
|a|超鏈接|
|lable|用來描述表單功能|
###行內元素特點###
- 在一行顯示,從左向右排
- 不可以設置寬高,可以設置**左右padding 左右margin**
- 在不設置寬高時,寬高是由內容決定的
- 不可以嵌套塊級元素,可以嵌套行內元素
- **“a”元素**除外,可以嵌套其他元素
- 在編輯代碼時,行內元素與行內元素之間如果出現空格或者回車時,會出現間隙(4px)
- 解決辦法:給父元素或者body設置font-size:0;
- 基線對齊問題


###行內塊級元素###
|元素|描述|
|--|--|
|img|插入圖片|
|input|添加表單功能|
|select|下拉框|
|texteare|文本域|
###行內塊級元素特點###
- 在一行顯示,從左向右排
- 可以設置寬高
- 在不設置寬高時,寬高是由內容決定的
- 不可以嵌套塊級元素,可以嵌套行內元素
- **“a”元素**除外,可以嵌套其他元素
- 在編輯代碼時,行內元素與行內元素之間如果出現空格或者回車時,會出現間隙(4px)
- 解決辦法:給父元素或者body設置font-size:0;
- 基線對齊問題



html的分類與特點