(二) html元素显式模式

web标准

由结构, 表现, 行为三部分组组成

• 结构: 用于对网页元素进行整理和分类, 主要指html
• 表现: 用于设置网页元素的版式, 颜色,大小等外观样式, 主要指css
• 行为: 指网页模型的定义及交互的编写, 主要指js

HTML

元素显示模式

块级元素、行内元素、行内块元素

---

1. 块级元素

块级元素只能出现在标签之内

// 常见的块级元素
div  H1 ~ H6  ul  ol li  p  dl  form  table  hr

@特点:

• 独占一行
• 高度、宽度、内外边距都可以控制
• **宽度默认和父亲一样 **
• 可以当作一个容器使用

注意:

• p标签里面不能放块级元素
• 文字类标签也尽量不要放块级元素

---

2. 行内元素

// 常见的行内元素
span  a  em  strong  i  s  ins  br等

**@特点: **

• 行内元素可以一行显示
• 宽、高设置无效
• 默认宽度是本身内容的宽度
• 只能容纳文本或其他行内元素

**注意: **

• 链接里面不能再放链接
• 特殊情况下 a标签可以放块级元素, 但最好转换一下模式

---

3. 行内块元素

// 常见的行内块元素
img    input    button    td 等

**@特点: **

• 行内块元素可以一行显示, 但是彼此之间会有空白缝隙
• 宽、高、内外边距都可以控制
• 默认宽度是本身内容的宽度

三种模式的对比

元素模式	元素排列	设置宽高	默认宽度	子元素
块级元素	独占一行	可以	父亲的宽度	任何元素
行内元素	可在一行	不可以	本身内容的宽度	文本或行内元素
行内块元素	可在一行	可以	本身内容的宽度

---

模式转换

display

• 转成块级元素: displa: block
• 转成行内元素: displa: inline
• 转成行内块元素: displa: inline-block

---

空元素

首先空元素下是没有子级节点和内容的。然后空元素是在开始标签中关闭的，也就是说空元素没有闭合标签的。

在HTML中的空元素有以下几个：

<img>
<input>
<link>
<meta>
<hr>
<source>
<embed>
<keygen>
<param>
<track>
<wbr>