参考资料

1. HTML 布局
2. HTML 框架
3. HTML 表格的嵌套
4. HTML 文字方向格式化
5. HTML 强调
6. HTML 图像格式化
7. HTML 水平线
8. CSS 实现购物按钮

HTML <span> 元素详解

基本介绍

<span> 是 HTML 中的内联容器元素，用于对文档中的一部分文本或内联内容进行分组和样式化。

标签语法

<span>内容</span>

主要功能

1. 对文本的一部分应用样式

2. 通过 JavaScript 操作特定文本片段

3. 为文本的一部分添加语义信息

基本用法

<p>这是一段<span style="color: red;">红色</span>文字。</p>

CSS 扩展

<span> 常与 CSS 结合使用：

常用 CSS 属性

span {
  color: blue;
  font-weight: bold;
  background-color: yellow;
  font-size: 1.2em;
  text-decoration: underline;
}

类选择器应用

<p>这是<span class="highlight">高亮</span>文本。</p>

<style>
.highlight {
  background-color: #FFFF00;
  padding: 2px 4px;
  border-radius: 3px;
}
</style>

实际示例

示例1：文本样式

<p>会议将在<span style="font-weight:bold; color:#0066cc;">下周三</span>举行。</p>

示例2：动态内容

<p>当前温度: <span id="temperature">25</span>°C</p>

<script>
document.getElementById("temperature").textContent = "28";
</script>

示例3：图标结合

<p>下载文件 <span class="icon-download"></span></p>

<style>
.icon-download:before {
  content: "↓";
  margin-right: 5px;
}
</style>

注意事项

1. <span> 是内联元素，不会自动换行

2. 默认没有视觉样式，需要配合 CSS 使用

3. 不应滥用，只在需要时才使用

4. 对于语义化标记，优先考虑更具体的元素如 <strong>, <em> 等

声明：本站所有文章资源内容，如无特殊说明或标注，均为采集网络资源。如若本站内容侵犯了原著者的合法权益，可联系本站删除。