关于HTML中rel属性的分析

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

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

示例

带有rel属性的连接:

浏览器支持

立即学习“前端免费学习笔记(深入)”;

关于HTML中rel属性的分析关于HTML中rel属性的分析关于HTML中rel属性的分析关于HTML中rel属性的分析关于HTML中rel属性的分析

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

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

定义和使用

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

语法

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链接到文档集或历史数据  author链接到文档的作者head标签内申明文档作者  canonical权威,典范

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

           

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

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

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

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

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

canonical:中文”典范”的意思

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

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

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

相关推荐:

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

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

以上就是关于HTML中rel属性的分析的详细内容,更多请关注创想鸟其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 chuangxiangniao@163.com 举报,一经查实,本站将立刻删除。
发布者:程序猿,转转请注明出处:https://www.chuangxiangniao.com/p/1546343.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2025年12月21日 18:08:16
下一篇 2025年12月21日 18:08:33

相关推荐

  • 使用html和css实现康奈尔笔记的模板

    这篇文章主要介绍了使用html和css实现康奈尔笔记(5r笔记)模板的相关资料,需要的朋友可以参考下 缘起 人家都说 康奈尔笔记 法,很好用呢,能抵抗遗忘曲线,让你的笔记事半功倍,有兴趣的同学自行百度哈。 网上有很多现成的模板,下载下来之后吧,看着好像在上面写英文可能更方便一点,行距很小,而且还有网…

    好文分享 2025年12月21日
    000
  • html标签的基本格式

    1.元素:页面中可以看见的内容,都是元素,元素是用标签来表示的 2.标签:用来描述元素的,根据元素的不同,标签也有很多种类,例如文本,图像等 3.根据标签描述的对象不同,分为双标签和单标签二类。 4.如果标签中有文本或者子标签的话,一般采用双标签来描述,例如 … 5.如果标签中的内容来自…

    好文分享 2025年12月21日
    000
  • html标签属性的作用/语法

    1.每个元素都有一些自己与众不同的地方,这些可以通过属性来进行设置 2.属性: 必须写在起始标签内,如果是单标签就直接写在标签内 3.属性的基本格式: 属性名=”属性值”,值可以加引号,也可不加引号,也可以是单引号, 推荐使用双引号,这是大家都在遵守的行业约定 1. 标签有一…

    好文分享 2025年12月21日
    000
  • HTML打折计算价格的实现原理与脚本代码

    大概原理就是设置计算价格事件函数,取不同下拉打折数,计算结果送入文字框,感兴趣的朋友可以参考下 打折后价格计算 function calculator(){ var prices=document.getElementById(“price”); var discounts=document.get…

    好文分享 2025年12月21日
    000
  • 关于HTML基础的讲解

    一、框架标签的简单使用 框架集标签 运行结果: 二、框架标签应用 网站后台系统显示页面 left.html: 会员管理 品牌管理 商品管理 分类管理 right.html: 所有用户信息 运行结果: 三、HTML表单 表单标签 用户名: 密码: 确认密码: 性别:男 女 爱好:钓鱼 打电动 写代码 …

    2025年12月21日 好文分享
    000
  • JS实现简易版贪吃蛇小游戏

    新建网页 //① 绘制地图 function Map() { //私有成员(不会随便发生变化) var w = 800; var h = 400; //成员方法,绘制地图 this.showmap = function () { //创建p、设置css样式、追加给body var tu = docu…

    好文分享 2025年12月21日
    000
  • HTML转Excel,并实现打印,下载功能

    会签单流转会议名称自动获取编号自动获取主持自动获取类型自动获取人自动获取日期自动获取内容自动获取备注自动获取意见序号人部门意见时间节点状态1顾办公室同意!2018/5/14 15:21已提交超链接_导出表格// 使用outerHTML属性获取整个table元素的HTML代码(包括标签),然后包装成一…

    好文分享 2025年12月21日
    000
  • 向HTML中插入视频并兼容浏览器

    这篇文章主要介绍了关于CSS自定义绿色复选框按钮的样式,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下 向HTML中插入视频有两种方法,一种是古老的object标签,一种是html5中的video标签,前者兼容性相对好些,后者兼容性让人头疼 最常用的向HTML中插入视频的方法有两种,一…

    好文分享 2025年12月21日
    000
  • 使用Html制作简单登录页面的方法

    这篇文章主要为大家详细介绍了html制作简单而漂亮的登录页面具体代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 先来看看样子。 html源码: Login Login 登录 css代码: 立即学习“前端免费学习笔记(深入)”; html{ width: 100%; height: 100%;…

    2025年12月21日
    000
  • 如何使用JS中DOM来控制HTML元素

    这篇文章主要介绍了js中使用dom来控制html元素的相关资料,需要的朋友可以参考下 1.getElementsByName():获取name. ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~` 例: hello hello hello function getName(){ …

    2025年12月21日
    000
  • HTML实现网页动态时钟

    本文通过实例代码给大家介绍了html写一个网页动态时钟效果,需要的的朋友参考下吧 用html写一个动态网页时钟,代码如下所示: 时钟特效 function disptime(){ var today=new Date(); var hh=today.getHours(); var mm=today.…

    2025年12月21日
    000
  • HTML的表格布局

    这篇文章主要介绍了html表格布局实际使用详解,是html入门学习中的基础知识,需要的朋友可以参考下 什么时候会用到表格 现在,表格 一般不再用于网页整体的布局。不过,在面对某些特定的设计,如表单输入、数据呈现时,表格则可能是最恰当的选择。 关于表格的直观印象,就是由多个单元格(cell)整齐排列而…

    2025年12月21日 好文分享
    000
  • HTML的a标签href属性指定相对路径与绝对路径的用法讲解

    href是链接前端文件的一个最常用的重要属性,这里我们就来看一下html的a标签href属性指定相对路径与绝对路径的用法讲解,需要的朋友可以参考下 在实际Web开发中,插入图片、包含CSS文件等都需要有路径,如果文件路径的添加错误,就会导致引用失效(无法浏览链接文件,或无法显示插入的图片等)。很多初…

    好文分享 2025年12月21日
    000
  • Html 实现动态显示颜色块的报表效果(实例代码)

    本文通过实例代码讲解如何使用html的颜色块动态展示数据功能,非常不错,代码简单易懂,需要的朋友参考下 利用html的颜色块动态展示数据 *{ padding: 0; margin: 0; } .tubiao,.jihua,.shiji,.riqi{ width: 100%; overflow: h…

    好文分享 2025年12月21日
    000
  • JS实现加载时锁定HTML页面元素的方法

    这篇文章主要介绍了js实现加载时锁定html页面元素的方法,涉及javascript针对页面元素的遍历与属性操作相关实现技巧,需要的朋友可以参考下 本文实例讲述了JS实现加载时锁定HTML页面元素的方法。分享给大家供大家参考,具体如下: 在html加载时js锁定页面内所有input,textarea…

    好文分享 2025年12月21日
    000
  • JS实现改变HTML上文字颜色和内容的方法

    这篇文章主要介绍了js实现改变html上文字颜色和内容的方法,涉及js数学运算与页面元素动态操作相关技巧,需要的朋友可以参考下 本文实例讲述了JS实现改变HTML上文字颜色和内容的方法。分享给大家供大家参考,具体如下: 1. JavaScript Day 1 // to change the col…

    2025年12月21日
    000
  • html中table表格的内容水平和垂直居中显示

    这篇文章主要介绍了html中table表格的内容水平和垂直居中显示的相关资料,需要的朋友可以参考下  在CSS样式文件中指定 #class td /*设置表格文字左右和上下居中对齐*/ { vertical-align: middle; text-align: center; }/*class 是所…

    2025年12月21日
    000
  • 关于HTML表格边框的设置的技巧

    下面为大家带来一篇有关html表格边框的设置小技巧。内容挺不错的,现在分享给大家,也给大家做个参考 对于很多初学HTML的人来说,表格 是最常用的标签了,但对于表格边框的控制,很多初学者却不甚其解。 一般我们用表格的时候总会给它个border属性,比如: ,其效果如下: 立即学习“前端免费学习笔记(…

    2025年12月21日 好文分享
    000
  • html禁止清除input文本输入缓存的两种方法

    有时候浏览器有很多缓存,我们就执行不了某种操作,必须要清除缓存才可以运行,其实多数浏览器默认会缓存input的值,只有使用ctl+f5强制刷新的才可以清除缓存记录。如果不想让浏览器缓存input的值,有两种方法,请如下文   多数浏览器默认会缓存input的值,只有使用ctl+F5强制刷新的才可以清…

    好文分享 2025年12月21日
    000
  • 多种实例解析HTML表单form的使用方法

    这篇文章主要以多种实例的方式帮助大家了解分析html表单form的使用方法,讲解了form表单如何与用户进行交互,感兴趣的小伙伴们可以参考一下 九个简单实例为大家分析了HTML表单form的使用方法,供大家参考,具体内容如下 1 form表单标签 网站怎样与用户进行交互?答案是使用HTML表单(fo…

    2025年12月21日 好文分享
    000

发表回复

登录后才能评论
关注微信