(二) 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>

仅记录本身的学习总结，若有错误，还请评论指正~