HTML里img的标签中rel属性是干什么的,有什么用处呢?
HTML代码中IMG标签的全部属性
例:写一段图片HTML代码
<img src="http://localhost/phpwind6/zx/6.jpg"
id="imgs" lang="en-us"
alt="测试">
该标签为img的代码中已可以看出已含有了四个属性,包括src id lang
alt,加上本身的img标签有5个属性.
那么该img标签在正常的情况下倒底还含有多个属性?(包含对象),我现在为大家一一列出来(以上面那句代码为例,并附上它的所有值),所有在IE环境下有效可用的对象属性都在下面.学习HTML的朋友可以借鉴学习,也可以拿去吓人,
以下通过测试的IMG的全属性为156个,不包括子属性,而且还只是这一个img标签的....虽然有些看起来用在IMG标签上不太合理,但确实是有效使
用,IE中无错且有返回值.关键在于看你怎么用了,除了有些不常用的属性不太清楚以外,以下全是手工输的,花了4个小时,对你有用没用就看你怎么想了.不
过如果你了解了以下的说明后网页的美化和代码的理解就可以扫盲和DIY了
以下的img可用的属性如果你只用过10个不到,那就只能说明你菜.......
1 language = //语言类型,如<script
language="vbs">这句代码中的language属性的值就为vbs
2 scrollHeight = 30
//自身元素的宽度(即显示的宽度)
3 isTextEdit = false
//是否可以获取可使用该对象创建一个TextRange的对象
4 currentStyle = 该属性含有114个对象
//返回当前属性的值,不可更改它的值
5 document = 该属性含有209个对象
//这个就不用说了吧,是文档属性,
6 onmouseup = null
//鼠标按下后松开鼠标时触发此事件
7 oncontextmenu = null
//鼠标点右键后触发的事件
8 isMultiLine = true
//是否允许含有多行文本,多用于文本框,用在img标签上无错,但效果不大
9 clientHeight = 30
//当前可见的该标签的高度为30,
10 onrowexit = null
//数据源控件更改这个标签内的当前的行时触发某事件,多用在form表中
11 onbeforepaste = null
//当在这个标签中粘贴内容时触发某事件,多用在文本框中
12 onactivate = null
//当这个控件被触发时(被点击或者焦点移到了该标签上)发生某事件,
13 scrollLeft = 0 //被卷入的离左边界的宽度
14 lang = en-us
//语言属性,和language不同,这个等同于网页语言
15 onmousemove = null
//当鼠标在该标签上移动时发生某事件
16 onmove = null
//浏览器的窗口被移动时触发此事件
17 onselectstart = null
//当这个标签中的文本被选择时发生某事件
18 parentTextEdit = 该属性含有352个对象
//又一个华丽的属性....用在框架中,作用详见第3条
19 oncontrolselect = null
//当用户将要对该对象制作一个控件选中区时触发某事件
20 canHaveHTML = false
//获取表明对象是否可以包含丰富的 HTML 标签的值,效果不明
21 onkeypress = null
//当键盘上的被按下时发生某事件,
22 oncut = null
//当该标签中发生剪切事件时触发某事件,常用于文本档标签,I
23 onrowenter = null //
当前记录指针被移动时发生某事件,常用于文本档,
24 onmousedown = null
//按下鼠标时触发某事件
25 onpaste = null
//当在该标签中发生粘贴事件时触发某事件
26 className =
//当前标签的样式名称,这个属性常和CSS混用,比如PW的贴子目录页就用了这个
27 id = imgs //该标签的ID值是多少
28 onreadystatechange = null
//在同步执行方式下返回的值为多少,该死的XML就和这个经常私混
29 onbeforedeactivate = null
//当前对象变为其它对象之前立即触发,好像不常用
30 hideFocus = false
//是否隐藏光标,常见于文本框
31 dir = //它定义文字在浏览器中的排列方向,如dir=
LTR则为从左到右显示反之则为 RTL,郁闷的特效
32 isContentEditable = false
//该标签无素是否可编辑,经常见于某个论坛的发贴"所见即所得"
33 onkeydown = null //当键盘某键被按下时
34 clientWidth = 30
//在IE中可见的高度为多少
35 onlosecapture = null
//当对象失去鼠标捕捉时触发某事件
36 parentElement = 该属性含有495个对象
//又来一个华丽的框架获取父页元素的对象...
37 ondrag = null
//这个标签被拖动结束时发生某事件
38 ondragstart = null
//这个标签被拖动开始时发生某事件
39 oncellchange = null //
在数据供应者中的数据变更时触发,XML可用这个玩意,我还没用过
40 recordNumber = null
//获取数据集中生成对象的原始记录,同上,XML可用
41 onfilterchange = null
//当该标签中的filter特效被改变时触发某事件
42 onrowsinserted = null
//当在当前记录集中插入新行后触发某事件
43 ondatasetcomplete = null
//数据设置完成时触发某事件,常用于控件当中,这个属性我也没用过
44 onmousewheel = null
//这个就是传说中的可以用鼠标滚动来触发某个事件...
45 ondragenter = null
//当鼠标拖动到这个标签中时触发某事件,没用过,不知道有没效
46 onblur = null
//当这个标签失去焦点时发生某事件,常见于文本框
47 onresizeend = null
//当用户更改完控件选中区中对象的尺寸时触发某事件
48 onerrorupdate = null
//更新数据源对象中的关联数据出错时在数据绑定对象上触发某事件,XML...
49 onbeforecopy = null
//在复制前触发某事件
50 ondblclick = null //鼠标双击时触发某事件
51 scopeName = HTML
//该元素定义的命名空间类型,不常用,反正我没用过
52 onkeyup = null
//当键按下之后被释放时触发某事件
53 onresizestart = null
//被开始改变其窗口大小时触发某事件
54 onmouseover = null
//当鼠标从该标签上移出去触发某事件
55 onmouseleave = null
//当用户将鼠标指针移出这个标签边界时触发某事件
56 outerText =
//用来获取该标签中的纯文本,包含起始处
57 innerText = //同上,但不包含起始处
58 onmoveend = null
//当前窗口被移动完成时触发某事件
59 tagName = IMG
//这个标签的名称是某值,如该值,即IMG
60 title = //主题说明,这个不说了,大家都用过
61 offsetWidth = 30
//可见的区域的高,与clientWidth不同,它还包含边线
62 onresize = null
//当窗口被改变大小时触发某事件
63 contentEditable = inherit
//该标签是否可直接编辑,不为FALSE,能为true,inherit是默认值,继承原设定
64 runtimeStyle = 该属性含有627个对象
//返回该标签的样式(总为空),和style与currentStyle有区别,
65 filters = 该属性含有628个对象
//这个比较郁闷,没用过
66 ondrop = null //拖动时发生某事件
67 onpage = null
//常用于XML的在线编辑,偶没用过,不知道具体例子
68 onrowsdelete = null
//当行将要从记录集中被删除时触发某事件
69 tagUrn =
//设置或获取在命名空间声明中指定的统一资源名称,没用过,应属于稀有属性了
70 offsetLeft = 10
//离左边相对窗口的宽值,常用于浮动的图或层显示
71 clientTop = 0
//距上边相对可见的窗口的高度为多少.这个倒没常用,凡正浮动特效不必靠它
72 style = 该属性含有760个对象
//该标签的风格属性,这个大家都用得多了
73 onfocusout = null
//在移动焦点到其它元素之后立即在当前拥有焦点的元素上触发某事件,..
74 clientLeft = 0 //同71,只是值为距左边的值
75 ondatasetchanged = null
//记录集中的数据修改完毕时触发某事件,XML中常见
76 canHaveChildren = false
//该标签是否可以包含子对象
77 ondeactivate = null
//用户切换到另一元素时触发,可见于网页编辑器的保存功能,
78 isDisabled = false
//是否可与该标签交互,常见于华丽的选项特效
79 onpropertychange = null
//当这标签属性被改变时发生某事件,这个巨有用,可用来作JS的安全检查
80 ondragover = null
//拖动移动该标签时发生某事件,感觉用JS写扑克牌游戏时经常用
81 onhelp = null
//当被按下F1或帮助按钮时发生某事件,这个可以用来自定义帮助信息,比如用在PW上
82 ondragend = null
//在拖动结束的时候,在源对象上出发某事件,这个还是感觉用来写扑克牌的....
83 onbeforeeditfocus = null
//在该标签被选中编辑前触发某事件,在线编辑,,,貌视不常用
84 disabled = false
//该标签的内容是否为禁止编辑,常见于文本框
85 onfocus = null
//当该标签获得焦点时触发某事件,常用于PW的百度广告点击插件..汗...
86 behaviorUrns = 该属性含有762个对象
//附加到该元素行为的URN字符串的集合,这个没用过.....
87 accessKey =
//服务器控件指定键盘快捷键,比较好的JS网页游戏这个经常用,汗死......
88 onscroll = null //滚动条被拉动时发生某事件
89 onbeforeactivate = null
//控件被触发前发生某事件,按钮之类的常用
90 onbeforecut = null
//在内容被剪切前发生某事件
91 readyState = uninitialized
//是否为只读属性,常用于该死的XMLHTTP
92 all = 该属性含有763个对象
//all这玩意JS里面常用,是属性全局属性
93 sourceIndex = 4
//获取对象在源序中的依次位置,常用在all集合中,是个很爽的属性
94 onclick = null //当被当击时发生某事件
95 scrollTop = 0 //被卷上去的高值为多少
96 oncopy = null //当被复制时发生某事件
97 onfocusin = null
//当将要被设置为焦点之前触发某事件
98 tabIndex = 0
//使用"Tab"键的遍历顺序,后面的数字就是顺序,从0到大的顺序,很爽的一个娱乐类属性
99 onbeforeupdate = null
//成功更新数据源对象中的关联对象前触发某事件,XMLHTTP中用
100 outerHTML =
//这个就是当前标签(包含标签)的全部内容是什么,返回HTML代码,JS常用的玩意
101 innerHTML =
//同上,但不包含标签,即不包含<和>两个符号之间的内容
102 ondataavailable = null
//只要一获得有效的数据就会被触发某事件,XMLHTTP.....
103 offsetHeight = 30
//可见区域高,包含边框
104 onmovestart = null
//当本标签开始移动时触发某事件
105 onmouseout = null
//当鼠标移出该标签时触发某事件
106 scrollWidth = 30 //全标签的宽值
107 offsetTop = 15 //在可见区域中离顶部的高
108 onmouseenter = null
//鼠标移入时发生某事件
109 onlayoutcomplete = null
//LayoutRect 停止响应后触发某事件
110 offsetParent = //该属性含有906个对象
//指定父座标的属性,...华丽的代码堆.....
111 onafterupdate = null
//当成功更新数据源对象中的关联对象后发生某事件
112 ondragleave = null
//当拖曳操作过程中将鼠标移出合法拖曳目标时在该标签上触发某事件
113 children = //该属性含有907个对象
//又是一个数组属性堆....
114 start = fileopen
//一个比较牛B的属性,可以定义当某事件发生时再执行该标签内容,常见于多媒体
115 firstChild = null
//指定节点的首个子节点的值是什么,XML DOM中用....偶没用过....
116 href = http
://localhost/phpwind6/zx/6. jpg
//标签中的链接地址
117 height = 30 //高度值
118 alt = 测试 //图片说明
119 isMap = false
//是否为热点图片,就是一个图片上可以有N个链接的那种
120 fileModifiedDate = 04/16/2008
//文件修改日期是多少,在图片上点个右键就可以看到的
121 fileUpdatedDate = 02/13/2008
//同上,但是为最后的更新日期,貌视2个大多数情况下都一样
122 dataSrc =
//指定绑定到指定对象的给定数据源的字段,看XML去.....
123 onerror = null
//标签中的内容被加载错误时触发某事件
124 hspace = 0
//设置或返回图像的左边缘和右边缘的空白,配合JS又将是一个华丽的图片特效....
125 previousSibling = null
//某节点之前紧跟的节点(处于同一树层级) ,又是XML.....
126 loop = 1
//媒体文件的开启次数,这个常见吧?没想到还能用在IMG标签.....
127 protocol = 超文本传输协议 //协议类型
128 lastChild = null
//返回指定节点中的最后一个子节点,还是XML.....
129 nodeName = IMG
//传回该标签的名称,..为只读属性....这就是和TagName的区别....
130 nodeType = 1
//返回已选节点的节点类型。仍是XML
131 dynsrc =
//你想给音乐加载前加上图片吗?那就用这个属性吧....
132 attributes = 该属性含有1008个对象
//返回文件或文件夹的属性.....用来检测用的....
133 childNodes = 该属性含有1009个对象
//可返回指定节点的子节点的节点列表,又一个XML数组
134 src = http
://localhost/phpwind6/zx/6. jpg
//图像标签的图片地址
135 dataFld =
//XML是靠这玩意来设定要描述元素的命称的
136 ownerDocument = 该属性含有1104个对象
//返回节点的根元素(文档对象)。我没用过,火星了.....
137 parentNode = 该属性含有1247个对象
//回指定节点的父节点的属性值,XML....
138 onabort = null //当被取消时发生某事件
139 fileSize = 782 //用这玩意来检测文件大小,单位
字节
140 dataFormatAs =
//可以为HTML或TEXT,貌视是用来格式化标签数据的
141 width = 30
//高度值,汗...这个常用属性被排后面来了
142 vrml =
//想要了解这个属性,先去学学vrml语言,反正我不想学...
143 onload = null
//当被完全载入完毕时发生某事件
144 align =
//水平对齐的属性,这个比较常用,比如居中就是align=center
145 useMap =
//指明所使用的图像地图名,IMG标签专用,汗....
146 lowsrc =
//可设置或返回分辨率比较低的图片地址,知道什么是缩略图吧.....
147 fileCreatedDate = 04/16/2008
//文件的创建日期,IMG标签倒是常用
148 complete = false
//可以检查图象是否加载完成,这个爽,用来仿FLASH的加载过程很爽
149 nextSibling = 该属性含有1260个对象
//文件子节点列表中传回下一个序列的节点,不说了,又是XML
150 vspace = 0
//设置或返回图像的顶部和底部的空白,经常和hspace一起鬼混
151 mimeType = JPEG 图像
//返回图像类型
152 nodeValue = null
//传回的文字代表以节点的nodeType,常用在XML中
153 nameProp = 6.jpg //获取由对象的
href 或 src 属性指定的文件名,用来判断地址的合法性很有用
154 border =
//边框值的大小,你经常看到图像周围都有一个难看的框框?把border=0加在标签中就行了
155 longDesc =
//这个是用来补ALT属性的不足的,可以用那种大段大段的文字来充当图片说明
156 name = //和ID差不多,常用在FORM表中
找了半天是不是发现你没有找到呢?
参考资料: http://blog.sina.com.cn/s/blog_7a9ff2920100r82k.html
最常见的:
如楼上说的,rel 属性规定当前文档与被链接文档之间的关系。
<link type='text/css' href='css.css' rel='stylesheet' />
rel是关联的意思,stylesheet是样式表的意思;它表示这个link在文档初始化时将被使用,渲染页面
另外一个是用作SEO:
<a href="baidu.com" rel="nofollow">百度</a>
这里的rel是用来告诉搜索引擎的爬虫无需追踪目标页,不给目标页传递权重,因为在SEO的角度,如果一篇文章有一个导向其他网站的链接,会给那个链接的页面增加权重,同时损失自身的部分权重,页面权重会影响到页面排名,进而影响网站的访问量。
最后大胆猜测下,不知道对不对
img的标签中rel也可能是搞前端的同学加上去的标识,没有实际意义,只是做的一个记号,区别其他图片,然后可以对其调用。
一、
<a> 标签的 rel 属性用于指定当前文档与被链接文档的关系。
浏览器支持
几乎没有浏览器支持 rel 属性。
二、
HTML <link> 标签的 rel 属性:
rel 属性规定当前文档与被链接文档之间的关系。
浏览器支持
只有 rel 属性的 "stylesheet" 值得到了所有浏览器的支持。其他值只得到了部分地支持。