文档章节

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

HandMU
 HandMU
发布于 2012/07/06 09:38
字数 1520
阅读 1260
收藏 0
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标签里最好不要再有子元素。

© 著作权归作者所有

HandMU

HandMU

粉丝 3
博文 5
码字总数 2553
作品 0
厦门
高级程序员
私信 提问
关于Jsoup的一个小问题

利用Jsoup可以实现对网页信息进行有效解析和提取,例如有网页内容如下: Hello, Jsoup! Jsoup的官方网站 欢迎大家使用Jsoup! 利用Jsoup提取标签的内容,代码如下: Document doc = null; t...

ojs
2011/11/13
1K
1
Beautiful Soup模块使用

1.Beautiful Soup模块的介绍 Beautiful Soup 是一个可以从HTML或XML文件中提取数据的Python库,简单来说,它能将HTML的标签文件解析成树形结构,然后方便地获取到指定标签的对应属性,还可以...

彩色泡泡糖
06/20
21
0
HTML_关于现代前端必要知识

由VS Code空.html文件打出或按下tab建后默认生成的.html基本框架代码说起 第一行: 很庆幸,如今我们只需要这么一个自闭合标签即可告诉浏览器,请使用html5的标准来解析下面的代码 从第二行起,...

风蓝小栖
2018/07/11
0
0
前端开发.Html5.HTML5基本格式

HTML5文档结构? 1.DOCTYPE文档类型声明,不区分大小写,告诉浏览器所查看的文档类型,在以往的HTML4.01和XHTML1.0中,它表示具体的HTML版本和风格 2.html元素/标签/标记,是文档开始和结尾的元素,...

满满李
2016/06/13
36
0
深入理解html5系列-文本标签

文章简介: 关于html5相信大家早已经耳熟能详,但是他真正的意义在具体的开发中会有什么作用呢?相对于html,他又有怎样的新的定义与新理念在里面呢?为什么一些专家认为html5完全完成后,所...

东辉在线
2015/04/20
170
0

没有更多内容

加载失败,请刷新页面

加载更多

微服务架构一直火,为什么服务化要搞懂?

微服务架构,这 5 年左右一直被认可,是软件架构的未来方向。需要大家理解的是,为什么需要服务化。比如微服务架构对企业来说,带来什么价值?有啥弊端? 这里浅谈一下微服务架构,主要还是在...

泥瓦匠BYSocket
43分钟前
4
0
总结:单机与分布式

传统计算方案演变 1、单机并行运算 1,打开数据源 2,统计出有多少个文件。 3,为每个文件执行相同的统计命令 4,等待所有命令执行成功。 5,合并统计后结果输出或执行进一步统计 2、分布式并...

浮躁的码农
54分钟前
6
0
关于怎么解决CENTOS7没有ETH0网卡这个问题

CentOS7系统安装完毕之后,输入ifconfig命令发现没有eth0,不符合我们的习惯。而且也无法远程ssh连接。 1.进入目录/etc/sysconfig/network-scripts/ 2.将文件ifcfg-ens33重命名为ifcfg-eth0;...

无名氏的程序员
今天
5
0
HTML5 Web Storage 存储介绍

Web Storage是HTML5 API提供一个新的重要的特性; 最新的Web Storage草案中提到,在web客户端可用html5 API,以Key-Value形式来进行数据持久存储; 目前主要的浏览器已经支持该功能: 常见的...

前端老手
今天
5
0
安装mxnet出现的错误

我出现下面的错误:是因为我前面的安装步骤都正确,只是这一步出现错误,sudo python setup.py install 其实我看了下我默认的python是3.6,是大于3.5 ,改为sudo python3 setup.py install就...

南桥北木
今天
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部