HTML中关于a标签的title属性怪事

最新推荐文章于 2022-10-18 11:01:50 发布
最新推荐文章于 2022-10-18 11:01:50 发布
阅读量914 收藏
点赞数
文章标签： python xhtml
原文链接：https://my.oschina.net/chenfengzhan/blog/65172
版权

2019独角兽企业重金招聘Python工程师标准>>> hot3.png

HTML的a标签用于建立超链接，其title属性规定关于超链接元素的额外信息，即提供额外的提示信息。有代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>

<body>
<a href="#" title="看得见吗？"><img src="http://www.baidu.com/img/baidu_sylogo1.gif" />看看啊！<font color="#FF0000">第一层</font><div style="color:#00F"> 第二层</div></a><br />
<a href="#" title="看得见吗？"><img src="http://www.baidu.com/img/baidu_sylogo1.gif" />看看啊！<font color="#FF0000">第一层</font><div style="color:#00F"> 第二层</div></a><br />
<a href="#" title="看得见吗？"><img src="http://www.baidu.com/img/baidu_sylogo1.gif" />看看啊！<font color="#FF0000">第一层</font><div style="color:#00F"> 第二层</div></a><br />
<a href="#" title="看得见吗？"><img src="http://www.baidu.com/img/baidu_sylogo1.gif" />看看啊！<font color="#FF0000">第一层</font><div style="color:#00F"> 第二层</div></a><br />
<a href="#" title="看得见吗？"><img src="http://www.baidu.com/img/baidu_sylogo1.gif" />看看啊！<font color="#FF0000">&nbsp;第一层</font><div style="color:#00F"> 第二层</div></a><br />
<a href="#" title="看得见吗？"><img src="http://www.baidu.com/img/baidu_sylogo1.gif" /></a><br />
<a href="#" title="看得见吗？"><img src="http://www.baidu.com/img/baidu_sylogo1.gif" />看看啊！</a><br />
<a href="#" title="看得见吗？"><img src="http://www.baidu.com/img/baidu_sylogo1.gif" />看看啊！<font color="#FF0000">&nbsp;第一层</font></a><br />
<a href="#" title="看得见吗？"><img src="http://www.baidu.com/img/baidu_sylogo1.gif" />看看啊！<font color="#FF0000">&nbsp;第一层</font><div style="color:#00F"> 第二层</div></a><br />
<a href="#" title="看得见吗？"><img src="http://www.baidu.com/img/baidu_sylogo1.gif" /><font color="#FF0000">&nbsp;第一层</font></a><br />
<a href="#" title="看得见吗？"><img src="http://www.baidu.com/img/baidu_sylogo1.gif" /><font color="#FF0000">&nbsp;第一层</font></a><br />
<a href="#" title="看得见吗？"><img src="http://www.baidu.com/img/baidu_sylogo1.gif" /><font color="#FF0000">&nbsp;第一层</font></a><br />
<a href="#" title="看得见吗？"><img src="http://www.baidu.com/img/baidu_sylogo1.gif" /><font color="#FF0000">&nbsp;第一层</font></a><br />
<a href="#" title="看得见吗？"><img src="http://www.baidu.com/img/baidu_sylogo1.gif" /><font color="#FF0000">&nbsp;第一层</font></a><br />
<a href="#" title="看得见吗？"><img src="http://www.baidu.com/img/baidu_sylogo1.gif" />看看啊！</a><br />
<a href="#" title="看得见吗？"><img src="http://www.baidu.com/img/baidu_sylogo1.gif" />看看啊！</a><br />
<a href="#" title="看得见吗？"><img src="http://www.baidu.com/img/baidu_sylogo1.gif" />看看啊！</a><br />
<a href="#" title="看得见吗？"><img src="http://www.baidu.com/img/baidu_sylogo1.gif" />看看啊！</a><br />
<a href="#" title="看得见吗？"><img src="http://www.baidu.com/img/baidu_sylogo1.gif" />看看啊！<font color="#FF0000">&nbsp;第一层</font></a><br />
<a href="#" title="看得见吗？"><img src="http://www.baidu.com/img/baidu_sylogo1.gif" />看看啊！<font color="#FF0000">&nbsp;第一层</font></a><br />
<a href="#" title="看得见吗？"><img src="http://www.baidu.com/img/baidu_sylogo1.gif" />看看啊！<font color="#FF0000">&nbsp;第一层</font></a><br />
</body>
</html>

在IE测试下，第一个链接的title属性只在div“第二层”生效，而<a href="#" title="看得见吗？"><img src="http://www.baidu.com/img/baidu_sylogo1.gif" /><font color="#FF0000">&nbsp;第一层</font></a><br />则是<font>标签内全部无效。

继续进行测试，代码如下：
 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>

<body>
<a href="#" title="看得见吗？"><img src="http://www.baidu.com/img/baidu_sylogo1.gif" />看看啊！</a><br />
<a href="#" title="看得见吗？"><img src="http://www.baidu.com/img/baidu_sylogo1.gif" />看看啊！</a><br />
<a href="#" title="看得见吗？"><img src="http://www.baidu.com/img/baidu_sylogo1.gif" />看看啊！</a><br />
<a href="#" title="看得见吗？"><img src="http://www.baidu.com/img/baidu_sylogo1.gif" />看看啊！</a><br />
<a href="#" title="看得见吗？"><img src="http://www.baidu.com/img/baidu_sylogo1.gif" />看看啊！<font color="#FF0000">第一层</font><div style="color:#00F"> 第二层</div></a><br />
<a href="#" title="看得见吗？"><img src="http://www.baidu.com/img/baidu_sylogo1.gif" />看看啊！<font color="#FF0000">第一层</font><div style="color:#00F"> 第二层</div></a><br />
<a href="#" title="看得见吗？"><img src="http://www.baidu.com/img/baidu_sylogo1.gif" />看看啊！<font color="#FF0000">第一层</font><div style="color:#00F"> 第二层</div></a><br />
<a href="#" title="看得见吗？"><img src="http://www.baidu.com/img/baidu_sylogo1.gif" />看看啊！<font color="#FF0000">第一层</font><div style="color:#00F"> 第二层</div></a><br />
<a href="#" title="看得见吗？"><img src="http://www.baidu.com/img/baidu_sylogo1.gif" />看看啊！<font color="#FF0000">&nbsp;第一层</font><div style="color:#00F"> 第二层</div></a><br />
<a href="#" title="看得见吗？"><img src="http://www.baidu.com/img/baidu_sylogo1.gif" /></a><br />
<a href="#" title="看得见吗？"><img src="http://www.baidu.com/img/baidu_sylogo1.gif" />看看啊！</a><br />
<a href="#" title="看得见吗？"><img src="http://www.baidu.com/img/baidu_sylogo1.gif" />看看啊！<font color="#FF0000">&nbsp;第一层</font></a><br />
<a href="#" title="看得见吗？"><img src="http://www.baidu.com/img/baidu_sylogo1.gif" />看看啊！<font color="#FF0000">&nbsp;第一层</font><div style="color:#00F"> 第二层</div></a><br />
<a href="#" title="看得见吗？"><img src="http://www.baidu.com/img/baidu_sylogo1.gif" /><font color="#FF0000">&nbsp;第一层</font></a><br />
<a href="#" title="看得见吗？"><img src="http://www.baidu.com/img/baidu_sylogo1.gif" /><font color="#FF0000">&nbsp;第一层</font></a><br />
<a href="#" title="看得见吗？"><img src="http://www.baidu.com/img/baidu_sylogo1.gif" /><font color="#FF0000">&nbsp;第一层</font></a><br />
<a href="#" title="看得见吗？"><img src="http://www.baidu.com/img/baidu_sylogo1.gif" /><font color="#FF0000">&nbsp;第一层</font></a><br />
<a href="#" title="看得见吗？"><img src="http://www.baidu.com/img/baidu_sylogo1.gif" /><font color="#FF0000">&nbsp;第一层</font></a><br />
<a href="#" title="看得见吗？"><img src="http://www.baidu.com/img/baidu_sylogo1.gif" />看看啊！</a><br />
<a href="#" title="看得见吗？"><img src="http://www.baidu.com/img/baidu_sylogo1.gif" />看看啊！</a><br />
<a href="#" title="看得见吗？"><img src="http://www.baidu.com/img/baidu_sylogo1.gif" />看看啊！</a><br />
<a href="#" title="看得见吗？"><img src="http://www.baidu.com/img/baidu_sylogo1.gif" />看看啊！</a><br />
<a href="#" title="看得见吗？"><img src="http://www.baidu.com/img/baidu_sylogo1.gif" />看看啊！<font color="#FF0000">&nbsp;第一层</font></a><br />
<a href="#" title="看得见吗？"><img src="http://www.baidu.com/img/baidu_sylogo1.gif" />看看啊！<font color="#FF0000">&nbsp;第一层</font></a><br />
<a href="#" title="看得见吗？"><img src="http://www.baidu.com/img/baidu_sylogo1.gif" />看看啊！<font color="#FF0000">&nbsp;第一层</font></a><br />
</body>
</html>

在前面加了几行<a href="#" title="看得见吗？"><img src="http://www.baidu.com/img/baidu_sylogo1.gif" />看看啊！</a><br />，竟然第五个链接（原本第一个链接）的全部元素都生效了，难道是因为受页面上端元素影响的？诡异啊。。。无解。
<a href="#" title="看得见吗？"><img src="http://www.baidu.com/img/baidu_sylogo1.gif" /><font color="#FF0000">&nbsp;第一层</font></a><br />依然无效。

上述测试只在IE下有效，非IE浏览器无此现象。

解决方法：为兼容性考虑，a标签里最好不要再有子元素。

转载于:https://my.oschina.net/chenfengzhan/blog/65172

weixin_34376986
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
html a 链接标签title属性换行鼠标悬停提示内容的换行效果
12-13
在HTML中，`<a>`标签用于创建超链接，它有一个重要的属性——`title`，该属性用于提供关于链接的额外信息，通常会在鼠标悬停时作为提示显示出来。然而，默认情况下，`title`属性的内容在显示时会被限制在一行内。当...
【a标签的使用和属性】
魔术师
05-14 5226
【a标签的使用和属性】 a标签的使用和属性 a标签的使用 属性（属性值） 1、href（需要跳转到哪个页面）（存放跳转的地址url） 2、target（打开目标的形式）（定义在何处打开链接） target="_blank" 打开方式为一个空白页 target="_self" 默认方式，在自身页面打开 3、title
a标签的title属性
热门推荐
tudas的专栏
08-24 6万+
【一】title属性使用 title 属性，可以让鼠标悬停在超链接上的时候，显示该超链接的文字注释。百度网站如果希望注释多行显示，可以使用 作为换行符。百度网站【二】如何能让超链接title中的内容回行？ 解决：在title(超链接里的)里需要回行的内容前加上“ ”。　　如：测试title中的内容回行　　代码：　　测试title中的内容回行【三】超链
access字段属性设置下拉列表_第一部分：HTML+CSSHTML+CSS之HTML属性
weixin_39575502的博客
11-20 439
一、HTML的基本语法1、<常规标记><标记 属性=“属性值” 属性=“属性值”></标记>例如：<head></head>2.空标记<标记 属性=“属性值” />例如：<常规标记也叫标签对（html,head,body,title）<常规标记 属性=“属性值” 属性=“属性值”></常规标记>空...
a标签的title属性及如何隐藏聚焦
weixin_34239169的博客
07-04 1041
title属性是指定的值用于当鼠标放在标签上显示的提示相关的内容，而隐藏聚焦可通过outline及hideFocus来设定，hideFocus用于ie,outline用于ff(firefox)等浏览器<style> a{ outline:none;//在火狐等浏览器下，隐藏聚焦，而不生成虚线框 ...
数组元素的删除
碳酸钙的01妖精的博客
09-20 297
//从被删的元素后面一个开始，后面的元素往前移动 #include <stdio.h> #include <stdlib.h> #include <string.h> typedef struct { int a[100]; int last; }LNode,*LinkList; void Delete(LinkList L,int b1)//b1是插入的位置,b2是插入的值 { //从被删的元素后面一个开始，后面的元素往前移动 in.
HTML title 属性换行的办法
12-13
前两天在写程序的时候，想给提示信息...将title属性分成几行来写，例如： <a>印象派</a> 2.第一行相对来说不够直观，我们还可以在需换行的地方添加 （将&改为半角，下同)或 来实现： <a>印象派</a> <a>印象派</a>
HTML教程：title属性与alt属性
12-14
综上所述，`title`和`alt`属性在HTML中扮演着至关重要的角色，它们不仅提高了网页的可访问性，也增强了用户体验。理解和正确使用这两个属性是每个Web开发者必备的基本技能。通过合理利用这两个属性，可以创建出既...
img标签中alt和title属性的正确使用
10-30
img标签中alt和title属性的正确使用
SEO初级|网站代码优化—A标记的title属性、精简网站代码结构
naive_sonaive的博客
08-02 463
一、A标记的title属性 锚文本 SEO发布文章要求： 标题中包含关键词、文章首段文字包含关键词、文章中配图需加Alt属性、Alt属性使用文章标题、文章中的关键词加粗（strong）加超级链接（连接到对应页面的URL）。 练习：熟练使用权重标记 二、精简网站代码结构 使用外部调用的方式调用外部的CSS和JS文件，不直接写在网页模板中； CSS：外部样式表（有利）；内联样式表 如JS必须写入网页模...
a标签里面title的使用
weixin_44540198的博客
01-16 6293
a标签的提示 开发工具与关键技术：dw 作者：Mr.Feng 撰写时间：2019.1.16 在a标签里面添加title=" "，在里面输入文字，鼠标移入有提示效果哦
a标签及其属性
m0_59592734的博客
04-18 1万+
我用#CSDN#这个app发现了有技术含量的博客，小伙伴们求同去《a标签及属性》, 一起来围观吧 https://blog.csdn.net/qq_46152483/article/details/119104670?utm_source=app&app_version=5.3.0&code=app_1562916241&uLinkId=usr1mkqgl919blen ...
html a title显示图片,自定义html中a标签的title提示tooltip
weixin_39701834的博客
06-04 837
自定义html中a标签的title提示tooltip简介用简单的jquery+CSS创建自定义的a标签title提示，用来代替浏览器默认行为。如图：Javascript代码$(function() {$("a[title]").each(function() {var a = $(this);var title = a.attr('title');if (title == undefined ||...
html a title显示,HTML中关于a标签的title属性怪事
weixin_32602727的博客
06-19 1421
HTML的a标签用于建立超链接，其title属性规定关于超链接元素的额外信息，即提供额外的提示信息。有代码如下：无标题文档 看看啊！第一层 第二层 看看啊！第一层 第二层 看看啊！第一层 第二层 看看啊！第一层 第二层 看看啊！第一层 第二层 看看啊！ 看看啊！第一层 看看啊！第一层 第二层 第一层 第一层 第一层 第一层 第一层 看看啊！ 看看啊！ 看看啊！ 看看啊！ 看看啊！...
html a title显示,html a title 自定义样式显示
weixin_28979369的博客
06-19 304
$(function() {// show try product title$(".tb7_try_box").find("a").each(function(d) {//这里是控制标签if ($(this).attr(‘mytitle‘)) {var c = $(this).attr(‘mytitle‘); //把title的赋给自定义属性 myTilte ，屏蔽自带提示var a = 30;...
HTML 基础
douziduoduo的博客
10-18 229
Html 基础
如何修改a标签title属性的样式
最新发布
06-06
要修改a标签title属性的样式，可以使用CSS中的伪元素 ::after 和 content 属性，将title属性的值作为伪元素的内容，并对伪元素进行样式设置。例如： ``` a[title]::after { content: attr(title); font-size: 14...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值