乐趣区

关于html:XHTML元素类型

jiezi

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 的大多数元素是不可替换元素，即其内容间接体现在客户端（如浏览器）。

退出移动版