HTML中rel属性分析资源-CSDN文库

189 浏览量 2020-12-13 22:17:36 上传评论收藏 78KB PDF 举报

.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`属性是非常关键的。

资源详情

资源评论

资源推荐