span标签的title属性

dr努力再努力

已于 2024-02-03 22:15:30 修改

阅读量721

点赞数 4

文章标签：前端 javascript html

于 2024-02-03 22:06:41 首次发布

本文链接：https://blog.csdn.net/qq_51976882/article/details/136016833

版权

前言

今天突发奇想想再刷一下vue2的官网，举了如下这个例子，不知道大家还有没有印象：

<div id="app-2">
  <span v-bind:title="message">
    鼠标悬停几秒钟查看此处动态绑定的提示信息！
  </span>
</div>

var app2 = new Vue({
  el: '#app-2',
  data: {
    message: '页面加载于 ' + new Date().toLocaleString()
  }
})

官方举这个例子是为了说响应式变量，但看这个例子的时候我看到了绑定的是title，然后有又看看span，就很疑惑span有这个属性吗？后来查了一下相关资料才知道，span标签支持HTML全局属性。

HTML全局属性

HTML的全局属性是所有元素都可以使用的属性，这些属性可以用来配置所有元素的共有行为。以下是一些HTML的全局属性：

class：用于指定元素的一个或多个类名，用于样式化和JavaScript操作。
id：规定元素的唯一id，id在HTML文档中必须是唯一的，可用作链接锚，通过JavaScript（HTML DOM）或通过CSS可以为带有指定id的元素改变或添加样式。
style：用于设置元素的行内样式。
tabindex：用于改变tab键的跳转顺序。
title：用于设置元素的额外信息（显示为工具提示）。
accesskey：为元素设定快捷键。
hidden：隐藏元素。
lang：设置元素的自然语言。
spellcheck：检查元素的拼写。
dir：设置元素的文本方向。
contenteditable：设置元素的内容是否可编辑。
draggable：设置元素是否可拖动。

以上是部分HTML的全局属性，如果需要更多信息，可以查阅相关文档或书籍。

sapn中title属性的作用

主要起到一个备注提示作用，在UI层类似于第三方插件中的悬浮文字提示气泡，在sapn标签上面悬停几秒就能看到title里的内容，例如：

<!DOCTYPE html>
<html>
<body>

<p><abbr title="World Health Organization">WHO</abbr> 成立于 1948 年。</p>
<span title="免费的 Web 教程">W3School.com.cn</span>

</body>
</html>