.y { background: url(//files.jb51.net/images/o_y.png) no-repeat center; } .n { background: url(//files.jb51.net/images/o_n.png) no-repeat center; } 由于发现有同学在微博转播和收藏这篇文章,所以回头来再审视下这篇随性翻译的文章,后来发现w3cschools.com.cn已经有了对照的中文译文,所以这里我就继续完善下这篇文章吧,让它显得更有价值点。最初想到翻译这篇文档源于http://vanessa.b3log.org/research-a-rel HTML中的`rel`属性是一个非常重要的属性,用于定义当前文档与被链接文档之间的关系。这个属性主要用于`<a>`和`<link>`标签,提供了一种语义化的方式来描述链接的目的,增强了网页的结构和可读性,同时也对搜索引擎优化(SEO)有着积极的影响。 在HTML4.01和HTML5中,`rel`属性有一些差异。一些在HTML4.01中使用但现在已废弃的值包括:appendix、chapter、contents、copyright、glossary、index、section、start和subsection。而HTML5引入了一些新的值,如:archives、author、bookmark、external、first、index、last、license、nofollow、noreferrer、search、sidebar、tag和up。 以下是`rel`属性的一些常见值及其用途: 1. `alternate`:链接到替代版本的文档,如打印版、翻译版或镜像。在`<head>`标签中,常用来设置网站的RSS或Atom订阅链接。 示例:`<link rel="alternate" type="application/rss+xml" href="feed.xml" />` 2. `shortcut icon`:定义快捷方式图标,通常显示在浏览器的地址栏或收藏夹中。 示例:`<link rel="shortcut icon" href="favicon.ico" />` 3. `archives`:链接到文档集或历史数据,帮助用户访问网站的历史内容。 示例:`<link rel="archives" href="http://www.example.com/archives" />` 4. `author`:链接到文档的作者,可以是作者的个人主页或其他与作者相关的信息。 示例:`<link rel="author" href="http://www.author.com" />` 5. `canonical`:用于告诉搜索引擎哪个页面是重复内容的首选版本,有助于解决SEO问题。 示例:`<link rel="canonical" href="http://www.example.com/original-page" />` 6. `stylesheet`:指定外部样式表,用于定义文档的样式。 示例:`<link rel="stylesheet" href="styles.css" />` 7. `home`:链接到网站的主页,方便用户快速返回首页。 示例:`<a rel="home" href="/">Home</a>` 8. `first`、`next`、`prev`和`last`:用于链接文档集合中的序列,帮助用户在多页内容中导航。 示例: - `<link rel="first" href="first-page.html">` - `<link rel="next" href="next-page.html">` - `<link rel="prev" href="previous-page.html">` - `<link rel="last" href="last-page.html">` 9. `search`:链接到文档的搜索工具,用户可以快速进行站内搜索。 示例:`<link rel="search" href="/search.php" />` 10. `sidebar`:链接的内容适合在浏览器的侧栏显示,如侧边栏小工具或额外信息。 示例:`<a rel="sidebar" href="sidebar-content.html">Sidebar Content</a>` 11. `contents`:链接到文档的内容目录,便于用户浏览文档的不同部分。 示例:`<link rel="contents" href="table-of-contents.html">` 12. `index`:链接到文档的索引,用于查找特定信息。 示例:`<link rel="index" href="index.html">` 13. `glossary`:链接到文档的术语表,解释专业术语。 示例:`<link rel="glossary" href="glossary.html">` 14. `copyright`:链接到文档的版权或隐私页面,展示网站的法律信息。 示例:`<a rel="copyright" href="copyright.html">Copyright Information</a>` 15. `chapter`、`section`和`subsection`:用于链接到文档的章节、子章节,构建文档的层次结构。 示例: - `<a rel="chapter" href="chapter1.html">Chapter 1</a>` - `<a rel="section" href="section1.html">Section 1</a>` - `<a rel="subsection" href="subsection1.html">Subsection 1</a>` 16. `nofollow`:指示搜索引擎不要追踪此链接,通常用于广告链接或不受信任的外部链接,防止权重传递。 示例:`<a rel="nofollow" href="http://example.com">Untrusted Link</a>` 17. `noreferrer`:阻止浏览器发送referrer信息给目标页面,增强用户隐私。 示例:`<a rel="noreferrer" href="http://example.com">Privacy Protected Link</a>` `rel`属性的使用不仅可以提升用户体验,还可以帮助搜索引擎更好地理解和索引网页内容。因此,在创建网页时正确使用`rel`属性是非常关键的。
- 粉丝: 2
- 资源: 937
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
评论0