搜索
首页web前端html教程关于HTML中rel属性的分析

关于HTML中rel属性的分析

Jun 20, 2018 am 10:27 AM
html

这篇文章主要介绍了HTML中rel属性分析,需要的朋友可以参考下

由于发现有同学在微博转播和收藏这篇文章,所以回头来再审视下这篇随性翻译的文章,后来发现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属性在所有主流浏览器都得到了支持

<strong>注:</strong>浏览器渲染时会忽略此属性,然而搜索引擎可以从它获得更多的信息(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。

属性值

描述 场景|示例 HTML4.01 HTML5
appendix 链接到文档的附录页      
alternate 链接到一个备选的源(比如:打印页, 译本和镜像) head标签内配置网站的atom,feed    
shortcut icon 快捷方式 小图标 指定标题栏,地址栏,收藏栏小图标    
archives 链接到文档集或历史数据 a0201b64f44e617b0ed1ca6a04e4a375    
author 链接到文档的作者 head标签内申明文档作者    
canonical 权威,典范

让搜索引擎知道当前网站中的重复或相似网页中,哪一个页面才是站长想让其抓取与收录的

5b1a6bbe339a499f00a98e72fd340e3b            
  • canonical属性值通常在,rel属性中出现

  • 引用网址:http://www.xxoo.com/xhtml/rel_canonical/

  • canonical从功能上来讲,可理解为301永久重定向的辅助功能

  • canonical可以与相对链接或绝对链接一起使用,但是建议使用绝对链接

  • Google对canonical的定义是:规范网页是一组内容高度相似的网页的首选版本

  • canonical:中文"典范"的意思

   
stylesheet 文档的外联样式表 ffa9e93c45b9e97635715e3ed25eb939    
home 连接到站点的主页 ec88fb1017b684c313e9a2ca2a4824cf    
first 链接到集合中的首个文档 46f4b057dfd067bac314e509eec33bc3    
start 链接到当前文档的第一页 18e94beb14b653c64015faf023d36385    
next 链接到集合中的下一个文档 a180899e1638d1be93bcfd54fbaf6964    
prev 链接到集合中的前一个文档 83a0a3faf601f282321705a321e3028a    
last 链接到集合中最后的文档 124f94eb4e8a86ef163e82e2146d0c69    
up 提供指向一个文档的链接。该文档提供当前文档的上下文关系      
search 链接到文档的搜索工具      
sidebar 链接到应该在浏览器边栏中显示的文档      
contents 链接到当前文档的内容目录 一般放在文档主内容的侧栏,方便在当前页面各主题之间跳转    
index 链接到当前文档的索引      
glossary 链接到当前文档术语表      
copyright 链接到当前文档的版权或隐私页面 网站底部版权    
chapter 从当前文档链接到一个章节      
section 链接到文档列表中的一个小节      
subsection 链接到当前文档列表中的子小节。(一个小节可拥有多个子小节。)      
head 链接到集合中的顶级文档      
toc 链接到集合的目录      
parent 链接到源上面的文档      
child 链接到源下面的文档      
help 链接到帮助文档 82cc14e75ddca56a0db3cad234e5932b    
bookmark 用作书签的永久 URL 列表标题    
external 链接到外部文档 文章中引用到的外部连接    
nofollow 链接到未认可的文档,比如付费链接
Google 使用 "nofollow" 来规定其搜索蜘蛛不跟踪该链接
站内相关文章,站内随机文章,评论回复,列表及文章页面中的评论、浏览和作者链接,侧边栏的评论地址,首页导航中的“首页”链接,评论最多文章,访问最多文章    
noreferrer 规定当用户跟随该超链接时,浏览器不应发送 HTTP referer 头      
license 链接到文档的版权信息      
tag 当前文档标签(关键词) 侧边栏中的标签云,文章中的标签,列表中的标签,标签页面的标签    
friend 赞助 友情链接,底部的 themes by    

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

以上就是本文的全部内容,希望对大家的学习有所帮助,更多相关内容请关注PHP中文网!

相关推荐:

去掉HTML中Inline-Block的空白的方法

html页面中meta的作用以及页面的缓存与不缓存设置的解析

以上是关于HTML中rel属性的分析的详细内容。更多信息请关注PHP中文网其他相关文章!

声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
举一个带有属性的HTML标签的示例。举一个带有属性的HTML标签的示例。May 16, 2025 am 12:02 AM

HTML标签和属性的使用方法包括:1.基本用法:使用标签如和,通过属性如src和href添加必要信息。2.高级用法:使用data-*自定义属性实现复杂交互。3.避免常见错误:确保属性值用引号包围。4.性能优化:保持简洁,使用标准属性和CSS类名,确保图像有alt属性。掌握这些将提升网页开发技能。

HTML标签和HTML属性有什么区别?HTML标签和HTML属性有什么区别?May 14, 2025 am 12:01 AM

HTMLtagsdefinethestructureofawebpage,whileattributesaddfunctionalityanddetails.1)Tagslike,,andoutlinethecontent'splacement.2)Attributessuchassrc,class,andstyleenhancetagsbyspecifyingimagesources,styling,andmore,improvingfunctionalityandappearance.

HTML的未来:进化和趋势HTML的未来:进化和趋势May 13, 2025 am 12:01 AM

HTML的未来将朝着更加语义化、功能化和模块化的方向发展。1)语义化将使标签更明确地描述内容,提升SEO和无障碍访问。2)功能化将引入新元素和属性,满足用户需求。3)模块化将支持组件化开发,提高代码复用性。

为什么HTML属性对Web开发很重要?为什么HTML属性对Web开发很重要?May 12, 2025 am 12:01 AM

htmlattributesarecrucialinwebdevelopment forcontrollingBehavior,外观和功能

Alt属性的目的是什么?为什么重要?Alt属性的目的是什么?为什么重要?May 11, 2025 am 12:01 AM

alt属性是HTML中标签的重要部分,用于提供图片的替代文本。1.当图片无法加载时,alt属性中的文本会显示,提升用户体验。2.屏幕阅读器使用alt属性帮助视障用户理解图片内容。3.搜索引擎索引alt属性中的文本,提高网页的SEO排名。

HTML,CSS和JavaScript:示例和实际应用HTML,CSS和JavaScript:示例和实际应用May 09, 2025 am 12:01 AM

HTML、CSS和JavaScript在网页开发中的作用分别是:1.HTML用于构建网页结构;2.CSS用于美化网页外观;3.JavaScript用于实现动态交互。通过标签、样式和脚本,这三者共同构筑了现代网页的核心功能。

如何在标签上设置lang属性?为什么这很重要?如何在标签上设置lang属性?为什么这很重要?May 08, 2025 am 12:03 AM

设置标签的lang属性是优化网页可访问性和SEO的关键步骤。1)在标签中设置lang属性,如。2)在多语言内容中,为不同语言部分设置lang属性,如。3)使用符合ISO639-1标准的语言代码,如"en"、"fr"、"zh"等。正确设置lang属性可以提高网页的可访问性和搜索引擎排名。

HTML属性的目的是什么?HTML属性的目的是什么?May 07, 2025 am 12:01 AM

htmlattributeseresene forenhancingwebelements'functionalityandAppearance.TheyAdDinformationTodeFineBehavior,外观和互动,使网站互动,响应式,visalalyAppealing.AttributesLikutesLikeSlikEslikesrc,href,href,href,类,类型,类型,和dissabledtransfransformformformformformformformformformformformformformformforment

See all articles

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

Video Face Swap

Video Face Swap

使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸!

热门文章

北端:融合系统,解释
1 个月前By尊渡假赌尊渡假赌尊渡假赌
Mandragora:巫婆树的耳语 - 如何解锁抓钩
4 周前By尊渡假赌尊渡假赌尊渡假赌
<🎜>掩盖:探险33-如何获得完美的色度催化剂
2 周前By尊渡假赌尊渡假赌尊渡假赌

热工具

EditPlus 中文破解版

EditPlus 中文破解版

体积小,语法高亮,不支持代码提示功能

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

SublimeText3 英文版

SublimeText3 英文版

推荐:为Win版本,支持代码提示!

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用