span如何使用举例

`<span>` 标签主要用于行内元素的样式修改或标记，它的内容默认会保持在其父元素内的文本流中，不影响文本的换行。以下是一些 `span` 使用的例子：

1. **基本用法**：

<p>这是一个<span style="color: red;">红色</span>的段落。</p>

在这个例子中，"红色"这个词被设置了红色的字体颜色。

2. **CSS选择器**：

<style>
  .highlight { background-color: yellow; }
</style>

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

通过CSS类 `.highlight`，可以将高亮部分的背景色设为黄色。

3. **与JavaScript结合**：

<button onclick="changeTextColor()">点击改变颜色</button>
<p id="mySpan">这是<span id="textToChange">初始文本</span></p>

<script>
function changeTextColor() {
  document.getElementById("textToChange").innerHTML = "新的文字";
}
</script>

点击按钮后，通过 JavaScript 获取 `#textToChange` 的 `span` 内容并更改文本。

4. **语义性增强**：

<a href="#" title="这是链接的描述"><span class="tooltip">链接</span></a>

给链接的文字添加了一个提示信息，鼠标悬停时显示 tooltip。