首页 / HTML / HTML中rel属性分析

HTML中rel属性分析

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了HTML中rel属性分析，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含2867字，纯文字阅读大概需要5分钟。

内容图文

由于发现有同学在微博转播和收藏这篇文章,所以回头来再审视下这篇随性翻译的文章,后来发现w3cschools.com.cn已经有了对照的中文译文,所以这里我就继续完善下这篇文章吧,让它显得更有价值点。最初想到翻译这篇文档源于http://vanessa.b3log.org/research-a-rel-value这篇文章,发现rel属性拥有非常多不常见的语义化值,原文着重是想列举这些属性值的使用场景,觉得非常有必要通过这样的方式来了解rel属性。

示例

带有rel属性的连接:

<a rel="external" href="http://www.xxoo.com/">ooxx</a>

浏览器支持

技术分享

rel属性在所有主流浏览器都得到了支持

注:浏览器渲染时会忽略此属性,然而搜索引擎可以从它获得更多的信息(a标签仅在href属性存在时有效)。

定义和使用

rel属性指定了当前文档和被连接文档之间的关系

语法

<a rel="value">

HTML 4.01 与 HTML 5 之间的差异

已删除的值：appendix, chapter, contents, copyright, glossary, ~~index~~, section, start, subsection。

新的值：archives, author, bookmark, external, first, ~~index~~, last, license, nofollow, noreferrer, search, sidebar, tag,up。

属性值

值	描述	场景\|示例
appendix	链接到文档的附录页
alternate	链接到一个备选的源(比如:打印页, 译本和镜像)	head标签内配置网站的atom,feed
shortcut icon	快捷方式小图标	指定标题栏,地址栏,收藏栏小图标
archives	链接到文档集或历史数据	`<link rel=‘archives‘ href=‘http://www.ooxx.com/2012/07‘ />`
author	链接到文档的作者	head标签内申明文档作者
canonical	权威,典范	让搜索引擎知道当前网站中的重复或相似网页中，哪一个页面才是站长想让其抓取与收录的 `<link rel="canonical" href="http://xxoo.com/" />` canonical属性值通常在，rel属性中出现引用网址:http://www.xxoo.com/xhtml/rel_canonical/ canonical从功能上来讲，可理解为301永久重定向的辅助功能 canonical可以与相对链接或绝对链接一起使用，但是建议使用绝对链接 Google对canonical的定义是：规范网页是一组内容高度相似的网页的首选版本 canonical：中文"典范"的意思
stylesheet	文档的外联样式表	`<link rel="stylesheet" href="base.css">`
home	连接到站点的主页	`<link href="http://www.ooxx.com" rel="home" />`
first	链接到集合中的首个文档	`<link rel="first" href="index.html">`
start	链接到当前文档的第一页	`<link rel="start" href="about:blank">`
next	链接到集合中的下一个文档	`<link rel="next" href="about:blank">`
prev	链接到集合中的前一个文档	`<link rel="chapter" href="about:blank">`
last	链接到集合中最后的文档	`<link rel="last" href="index.html">`
up	提供指向一个文档的链接。该文档提供当前文档的上下文关系
search	链接到文档的搜索工具
sidebar	链接到应该在浏览器边栏中显示的文档
contents	链接到当前文档的内容目录	一般放在文档主内容的侧栏,方便在当前页面各主题之间跳转
index	链接到当前文档的索引
glossary	链接到当前文档术语表
copyright	链接到当前文档的版权或隐私页面	网站底部版权
chapter	从当前文档链接到一个章节
section	链接到文档列表中的一个小节
subsection	链接到当前文档列表中的子小节。（一个小节可拥有多个子小节。）
head	链接到集合中的顶级文档
toc	链接到集合的目录
parent	链接到源上面的文档
child	链接到源下面的文档
help	链接到帮助文档	`<link rel="help" href="http://www.xxoo.net/help.html" />`
bookmark	用作书签的永久 URL	列表标题
external	链接到外部文档	文章中引用到的外部连接
nofollow	链接到未认可的文档，比如付费链接 Google 使用 "nofollow" 来规定其搜索蜘蛛不跟踪该链接	站内相关文章，站内随机文章，评论回复，列表及文章页面中的评论、浏览和作者链接，侧边栏的评论地址，首页导航中的“首页”链接，评论最多文章，访问最多文章
noreferrer	规定当用户跟随该超链接时，浏览器不应发送 HTTP referer 头
license	链接到文档的版权信息
tag	当前文档标签（关键词）	侧边栏中的标签云，文章中的标签，列表中的标签，标签页面的标签
friend	赞助	友情链接，底部的 themes by

由于本人水平有限,难免存在一些错误,看官们如果觉得有不妥或者需要补充的地方,请留言指出,谢谢!

参考

http://www.w3schools.com/TAGS/att_a_rel.asp

http://vanessa.b3log.org/research-a-rel-value

http://www.w3school.com.cn/htmldom/prop_anchor_rel.asp

不得不提一下的rel-author 标签

HTML rel canonical 属性值

link标签rel 属性的含义

关于 rel="canonical"(google 网站站长工具)

原文：http://www.jb51.net/web/372345.html

内容总结

以上是互联网集市为您收集整理的HTML中rel属性分析全部内容，希望文章能够帮你解决HTML中rel属性分析所遇到的程序开发问题。如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/1160947.html

来源：【匿名】

【上一篇】生成HTML 报告【下一篇】PHP 和 HTML

更多 ►

【HTML中rel属性分析】教程文章相关的互联网学习教程文章

MVC @Html.TextBox 添加属性和样式

1、添加属性： @Html.TextBox("txtNameOne", "", new { maxlength = "90" }) // txtNameOne=文本框的name 和id maxlength 属性规定输入字段的最大长度，以字符个数计 2、添加样式：@Html.TextBox("txtNameTwo", "", new { @class = "txtNameTwo", style = "width:86px; border-color:red;" }) // txtNameOne=文本框的name 和id 后为添加的样式原文：https://www.cnblogs.com/YangWenStudent/p/8267500.html

HTML元素的ID和Name属性的区别

今天對 <a href="#13"></a> 有點疑惑，加上#表示一個錨，後面跟上13，就會跳到本頁面的13的位置，而這個13就是 Name屬性值。怎麼不是ID值呢？？？所以查了下ID 和Name的區別，特記錄最classical的答案：ID就像是一个人的身份证号码，而Name就像是他的名字，ID显然是唯一的，而Name是可以重复的。显然这个ID和Name的解答说的太笼统了，当然那个解释对于ID来说是完全对的，它就是Client端HTML元素的Identity。而Name其实要复杂的...

Html5新增加的属性【图】

用2中方法给单复选框增加新的特性，使直接点击文字就可以被选中1.将选项放入label标签内添加for属性，并在input标签内添加id，两者值相同。2.将input标签放到label标签内，注意label标签内不使用for属性。?1.在optgroup里面添加label属性，可以给每组添加标题，标题为不可选；?2.当在option里面添加label属性，选项默认label的属性值原文：http://www.cnblogs.com/Litter-Tulip/p/5261487.html

HTML5 data-* 自定义属性【代码】【图】

读写方式data-*有两种设置方式，可以直接在HTML元素标签上书写<div id="test" data-age="24">Click Here</div>其中的data-age就是一种自定义属性，当然我们也可以通过JavaScript来对其进行操作，HTML5中元素都会有一个dataset的属性，这是一个DOMStringMap类型的键值对集合var test = document.getElementById(‘test‘);test.dataset.my = ‘Byron‘;这样就为div添加了一个data-my的自定义属性，使用JavaScript操作dataset有两个需...

HTML DOM Table summary 属性

[Table summary 属性Table 对象定义和用法summary 属性可设置或返回表格的概述。 summary 属性可设置或返回表格的概述。语法设置 summary 属性：tableObject.summary="text"返回 summary 属性：tableObject.summary提示： summary 属性没有默认值。值描述text摘要文本浏览器支持所有主要浏览器都支持 summary 属性实例实例弹出表格的摘要:<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>Break易站(runoob.com)</title...

HTML5新属性FormData+Ajax实现无刷新提交【图】

模板页面核心代码：<ignore_js_op> 核心js代码：<ignore_js_op>服务器端测试代码：<ignore_js_op> 效果图如下：<ignore_js_op> 、更多技术资讯可关注：gzitcast原文：https://www.cnblogs.com/heimaguangzhou/p/11452073.html

HTML form enctype 属性试验【代码】

HTML form enctypehttp://www.w3.org/TR/html401/interact/forms.html#h-17.13.1%E2%80%8D enctype= content-type[CI]This attribute specifies the content type used to submit the form to the server (when the value of method is "post"). The default value for this attribute is "application/x-www-form-urlencoded". The value "multipart/form-data" should be used in combination with the INPUT element,type="fi...

HTML5学习总结——HTML5新增属性与表单元素【代码】【图】

一HTML5新增属性1.1contcxtmcnucontextmenu的作用是指定右键菜单。<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title></head><body><div id="div1" style="height:900px; background: lightgreen;" contextmenu="menuShare"></div><menu id="menuShare" type="context"><menuitem label="分享到QQ空间" onclick="alert(‘QQ‘);"></menuitem><menuitem label="分享到朋友圈" onclick="alert(‘朋友圈‘);"></menui...

javascript操作html元素CSS属性

以下先记录一下JS控制CSS所使用的方法. 1.使用javascript更改某个css class的属性... <style type="text/css"> .orig { display: none; } </style> 你想要改变把他的display属性由none改为inline。解决的方法：在IE里： document.styleSheets[0].rules[0].style.display = "inline"; 在firefox里： document.styleSheets[0].cssRules[0].style.display = "inline"; 讨论：能够做一个函数来搜索特定名字的style对象：...

利用getElementsByTagName() 属性获取到的属性，获取不到innerHTML【代码】

Q：在利用getElementsByTagName()属性获得元素的时候，获取后的元素，利用alert弹出元素内容的时候显示undefined？A：getElementsByTagNames()方法获取的是一个数组，因此在要获得元素内容的时候，如果想要获取网页中所有p元素的内容，就要使用遍历循环。如果是只想要其中某一个元素的内容，那么就要指定下标，即使网页中只有一个p元素，也要标上下标[0]。var oBtn = document.getElementsByTagName(‘p‘); alert(oBtn[0].innerHT...

Html属性标签

? 跑马灯 <marquee>...</marquee>普通卷动 <marquee behavior=slide>...</marquee>滑动 <marquee behavior=scroll>...</marquee>预设卷动 <marquee behavior=alternate>...</marquee>来回卷动 <marquee direction=down>...</marquee>向下卷动 <marquee direction=up>...</marquee>向上卷动 <marquee direction=right></marquee>向右卷动 <marquee direction=’left’></marquee>向左卷动 <marquee loop=2>...</marquee>卷动...

HTML5实战与剖析之HTMLDocument变化(readyreState属性、兼容模式和head属性)【图】

之前为大家介绍了些许关于HTML5新添加的小东东，想必大家也有所了解了。今天为大家介绍HTML5中有关HTMLDocument方面新添加的内容。那么HTML5中有关HTMLDocument方面新添加的内容都有什么呢?HTML5中有关HTMLDocument方面新添加的内容有readyState属性、兼容模式判断和head属性。下面就为大家一一介绍这些新添加的小东东吧。　　1、readyState属性　　早在IE4时代的时候，document对象就引入了readyState属性了，但是一直都没有纳入标...

HTML_a标签的href属性取值解析

定义和用法<a> 标签的 href 属性用于指定超链接目标的 URL。href 属性的值可以是任何有效文档的相对或绝对 URL，包括片段标识符和 JavaScript 代码段。如果用户选择了 <a> 标签中的内容，那么浏览器会尝试检索并显示 href 属性指定的 URL 所表示的文档，或者执行 JavaScript 表达式、方法和函数的列表。 1 <a href="路径"></a>这种方法最常见，点击a标签，页面将会跳转到href指定的路径页面下。这里的路径可以是绝对路径，也可以是...

HTML元素的属性【代码】

HTML元素的属性多以name="value”的形式出现；常用的属性或者是大多数元素适用的属性有：id,class,style，tiltle;id:给予元素唯一值，id值不可重复，class:类值，一般是元素都具有共有样式时适用style:给元素赋予内敛样式时适用，title:规定元素的额外信息；使用方式如下<div id="content" class="content-syle" title="我是一个div" style="width:50px;height:89px;border:1px solid red"></div>HTML5新增的属性有：contenteditab...