html5元素类型的转换,XHTML元素类型

XHTML元素分类

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

三种类型：块状元素，内联(行内)元素，可变元素。

块状/块级元素(block element)

三大特点：

1.默认情况下，块状元素占一行，两个相邻块状元素不会并列显示；默认情况下，块状元素会按顺序从上到下排列。

2.块状元素可以定义宽度和高度。

3.块状元素一般作为其他元素的容器，开始标签和结束标签之间可以嵌套内联元素和块状元素。一个块级元素可以看作一个盒子，盒子里可以装其他的物件。常用块级元素：div--最常用的块级元素

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

form--交互表单

h1-h6--大标题

ol--有序列表

p--段落

ul--无序列表

fieldset--表单字段集

colgroup-col--表单列分组元素

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

内联元素/行内元素(inline element)

三大特点：

1.一行可以显示多个内联元素

2.内联元素不能定义宽和高,它的宽度、高度由元素内的内容的高度和宽度决定。

3.内联元素也会遵循盒模型基本规则，可以定义padding,border,margin,background等属性，但个别属性不能正确显示;(padding-top/bottom;margin-top/bottom;)常用行内元素a –-超链接(锚点)

b -- 粗体(不推荐)

br -- 换行

i -- 斜体

em -- 强调

font -- 字体设定(不推荐)

img -- 图片

input -- 输入框

label -- 表单标签

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

strong -- 粗体强调

sub -- 下标

sup -- 上标

textarea -- 多行文本输入框

select -- 项目选择

其他元素

如：行内块级(inline-block)，列表项(list-item)

XHTML元素类型转换通过css的display属性来改变默认的显示类型

display属性与属性值 (18个属性值)

属性值：block/inline/inline-block/none/list-item

/table-header-group/table-footer-group

作用：该属性设置或检索元素生成的类型。block：块状显示，类似在元素后面添加换行符，其他元素不能在其后并列显示。(将元素转为块状元素，使该元素拥有块状元素的特点；)

inline：内联显示，多个元素可以在一行内并列显示。(元素转换为内联元素)

inline-block：行内块级元素显示，一行显示多个、可以设置宽高。

none：隐藏元素，不占位置。

list-item:将元素转换成列表项。

1.当元素设置了float属性后，就相当于给该元素加了display:inline-block;声明(设置宽高、一行显示多个)。

2.大部分块元素display属性值默认为block，其中列表li的默认值为list-item。

3.大部分内联元素的display属性值默认为inline,其中img,input,textarea默认为inline-block。

内联元素/行内元素在容器中垂直居中

div {

width: 200px;

height: 200px;

text-align: center;

background: pink;

}

p {

display: inline-block;

width: 40px;

height: 40px;

vertical-align: middle;

background: green;

}

span {

vertical-align: middle;

width: 0;

height: 100%;

display: inline-block;

}

三个条件：

1：给父元素加上text-align:center;

2：当前元素转成行内块元素(display:inline-block;)再设置vertical-align:middle;

3：在当前元素的后面加上同级元素span;并对span进行vertical-align:middle;width:0;height:100%;display:inline-block;

文字在容器中垂直居中

div {

width: 200px;

height: 200px;

text-align: center;

line-height: 200px;

}

测试测试

关键：

text-align: center;

line-height: 200px;

line-height的值保持和height一致。

置换元素(行内可置换元素)与非置换元素

1.置换元素：

浏览器根据元素的标签和属性，来决定元素的具体显示内容。例如：

浏览器会根据img标签的src属性的值来读取图片信息并显示出来，而如果查看(x)html代码，则看不到图片的实际内容，input标签的type属性来决定是显示输入框，还是单选按钮等； (x)html中的img、input、textarea、select都是置换元素,这些元素往往没有实际的内容，即是一个空元素。置换元素在其显示中生成了框，这也就是有的内联元素(img,input)能够设置宽高的原因。

2.不可替换元素(非置换元素):

(x)html 的大多数元素是不可替换元素，即其内容直接表现在客户端(如浏览器)。