html元素类型

根据css显示分类，XHTML元素被分为

三种类型：

块状元素，内联（行内）元素，可变元素

&&

三种类型：

块状元素，内联（行内）元素，内联”（行内）块元素（css2.1增加）

块元素的特点：

A：块状元素在网页中就是以块的形式显示，所谓块状就是元素显示为矩形区域；

B：默认情况下，块元素都会占据一行，通俗地说，两个相邻块状元素不会出现并列显示的现象；默认情况下，块元素会按顺序自上而下排列

C：块状元素都可以定义自己的宽度和高度

D：块状元素一般都作为其他元素的容器，它可以容纳其它块状元素。我们可以把这种容器比喻为一个盒子。

*嵌套规则:p>p(错误)  p>div(错误)  span>p(错误)  div>p(正确)  p>span(正确)

 

内联（行内）元素的特点

A：内联元素的表现形式是始终以行内逐个进行显示；

B：内联元素没有自己的形状，不能定义它的宽和高，它显示的宽度、高度只能根据所包含内容的高度和宽度来确定，它的最小内容单元也会呈现矩形形状

C：内联元素也会遵循盒模型基本规则，如何定义padding，border，margin，background等属性，但个别属性不能正确显示；（padding-top/bottom;margin-top/bottom）

 

可变元素

需要根据上下文关系确认该元素是块元素或者内联元素。

 

常见的标签

块元素标签

div - 最常见的块级元素

dl - 和 dt - dd搭配使用的块级元素

form - 交互表单

h1 - h6  大标题

hr - 水平分割线

ol - 有序列表

p - 段落

ul - 无序列表

li

fieldset - 表单字段集

colgroup-col - 表单列分组元素

table-tr-td  表格及行 - 表单格

 

行内元素

a - 超链接（锚点）

b - 粗体（不推荐）

br - 换行

i - 斜体

em - 强调

label - 表单标签

span - 常用内联容器，定义文本内区块

strong - 粗体强调

sub - 下标

sup - 上标

u - 下划线

select - 项目选择

 

行内块元素

img - 图片

input - 输入框

textarea  -  多行文本输入框

 

1、块级元素eg: div、p、h1-h6、ul、li
     特点：1：可以设置width、height
　　　　 2：独占一行显示
2、行内元素eg:em、a、i、span
　  特点：1：不可以设置width、height
　　　　  2：多个在一行显示
3、行内块元素eg:img、input、textarea
　  特点：1：可以设置width、height
　　　　  1：多个在一行显示