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。

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

<!--html-->
<div>
    <p></p>
    <span></span>
</div>

<!--css-->
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;

文字在容器中垂直居中

<!--css-->
div {
    width: 200px;
    height: 200px;
    text-align: center;
    line-height: 200px;
}

<!--html-->
<div>
    <p>测试测试</p>
</div>

关键:
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 的大多数元素是不可替换元素,即其内容直接表现在客户端(如浏览器)。

阅读 113

推荐阅读