参考资料

1. html表格标签详细说明以及案例
2. HTML 背景颜色
3. HTML 符号实体
4. HTML 图像
5. HTML 块引用格式化
6. HTML 内联元素
7. HTML 内联式
8. HTML 元素语法

HTML 内联元素

HTML 内联元素

详细介绍

内联元素（inline elements）是HTML中不会独占一行的元素，它们会在同一行内从左到右排列，直到空间不足才会换行。内联元素通常用于标记文档中的一小部分内容。

常见内联标签

• <span>：通用内联容器

• <a>：超链接

• <strong>：加粗强调

• <em>：斜体强调

• <img>：图像

• <input>：输入框

• <button>：按钮

• <label>：表单标签

• <br>：换行

• <code>：代码片段

• <small>：小号文本

• <sup>/<sub>：上标/下标

• <time>：时间日期

用法特点

1. 默认不换行

2. 只能包含数据或其他内联元素

3. 不能设置宽度和高度（除非转换为块级或内联块）

4. 边距(margin)和填充(padding)只影响左右，不影响上下

实例

<p>这是一段包含<a href="#">链接</a>和<strong>强调文本</strong>的内容。</p>
<span style="color: red;">红色文本</span>
<img src="image.jpg" alt="示例图片">

CSS扩展

可以通过CSS改变内联元素的显示方式：

/* 转换为块级元素 */
.inline-to-block {
  display: block;
}

/* 转换为内联块元素（保留内联特性但允许设置宽高） */
.inline-to-inline-block {
  display: inline-block;
  width: 100px;
  height: 50px;
}

/* 修改内联元素样式 */
a {
  color: blue;
  text-decoration: none;
  padding: 0 10px;
}

/* 垂直对齐 */
img {
  vertical-align: middle;
}

功能

1. 标记文档中的特定部分

2. 插入小部件（如图片、输入框）

3. 应用样式到文本片段

4. 创建交互元素（如链接、按钮）