参考资料

1. HTML 框架
2. HTML 图像
3. HTML 属性
4. HTML 表格头部、主体、页脚
5. Excel转HTML表格有哪些
6. HTML 折行
7. HTML 表格和边框属性
8. 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. 创建交互元素（如链接、按钮）