<link> rel属性详解

最新推荐文章于 2023-10-03 00:05:34 发布
最新推荐文章于 2023-10-03 00:05:34 发布
阅读量1k 收藏 4
点赞数
CC 4.0 BY-SA版权
分类专栏： HTML 文章标签： CSS 搜索引擎 浏览器 XHTML HTML
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/yangxueyong/article/details/83637702
本文详细介绍了HTML中的rel属性及其各种用途，包括定义文档之间的不同关系如stylesheet、nofollow等，并解释了rel与rev属性的区别。

HTML rel 属性

<!-- start content -->
rel 属性 -- rel属性,描述了当前页面与 href所指定文档的关系.
  • rel属性通常出现在a,link标签中
  • 属性值
    • alternate -- 定义交替出现的链接
    • appendix -- 定义文档的附加信息
    • bookmark -- 书签
    • chapter -- 当前文档的章节
    • contents
    • copyright -- 当前文档的版权
    • glossary -- 词汇
    • help -- 链接帮助信息
    • index -- 当前文档的索引
    • next -- 记录文档的下一页.(浏览器可以提前加载此页)
    • nofollow -- 不被用于计算PageRank
    • prev -- 记录文档的上一页.(定义浏览器的后退键)
    • section -- 作为文档的一部分
    • start -- 通知搜索引擎,文档的开始
    • stylesheet -- 定义一个外部加载的样式表
    • subsection -- 作为文档的一小部分
  • rel是relationship的英文缩写.
  • 引用网址:http://www.dreamdu.com/xhtml/attribute_rel/

rel与rev属性相同,它们都是属于LinkTypes属性.

示例

<link rel="stylesheet" href="http://www.dreamdu.com/style.css" type="text/css">

定义了梦之都的样式表,rel属性定义为stylesheet样式表,相关的文档为http://www.dreamdu.com/style.css.

rel与rev的区别

rel与rev具有互补的作用,rel指定了向前链接的关系,rev指定了反向链接的关系.

猴子提示: nofollow非w3标准定义的rel属性值,此值为Google,MSN等搜索引擎定义.

参考

From " HTML rel 属性 - HTML link 标签 - HTML中使用CSS - HTML教程,XHTML教程"
<!-- end content -->
CSS样式中的link和rel的含义和作用
ByteKnight的博客
10-04 1445
总结起来，link和rel在CSS样式中的作用是引入外部样式表，并建立文档与样式表之间的关系。通过使用link标签的rel属性，我们可以指定文档与外部样式表之间的关系类型，通常是"stylesheet"表示样式表。而rel是link标签的一个属性，用于指定文档与外部资源的关系类型。当我们使用link标签引入外部样式表时，rel属性的值通常设置为"stylesheet"，表示文档与引入的样式表的关系是样式表。在上面的示例中，link标签的rel属性被设置为"stylesheet"，表示外部资源是一个样式表。
HTML ＜link＞ 标签的作用及属性介绍
CbrFullstack的博客
09-29 795
HTML中的标签是关联文档与外部资源的重要元素。它的属性包括href、rel、type和media，分别用于指定资源的URL、关系、MIME类型和适用的媒体类型。HTML中的标签用于定义文档与外部资源的关联，最常见的应用是用于引入外部样式表（CSS），但它还可以用于引入其他类型的资源，如图标、字体、RSS订阅等。标签是一个空元素，不需要闭合标签。- prefetch：表示资源是页面加载后可能需要的，并在页面加载完成后尽早加载。- alternate：表示当前文档是外部资源的替代版本，如语言翻译的网页。
解析HTML中的rel属性：探索HTML和XHTML网页制作
TdMaster的博客
10-03 1161
通过合理使用rel属性，我们可以优化网页的样式、图标显示，改善搜索引擎优化，提供更好的用户体验等。本文介绍了rel属性的基本概念和常见取值，并提供了相应的源代码示例，希望能对你在网页制作中的实践有所帮助。rel属性是HTML和XHTML中的一项重要属性，用于定义与当前元素相关的关系或链接。本文将详细介绍rel属性的使用方法和常见取值，并提供相应的源代码示例。在使用rel属性时，建议参考相关的规范和文档，以确保正确使用和理解各个取值的含义。rel属性的取值是一个关键词列表，用空格分隔多个取值。
HTML link标记的rel属性
12-14
<link>标签定义了当前文档与 Web 集合中其他文档的关系。link 元素是一个空元素，它仅包含属性。此元素只能存在于 head 部分，不过它可出现任何次数。在 HTML 中，<link> 标签没有结束标签。在 XHTML 中，<link> 标签必须被正确的关闭。 除了HTML的标准通用属性之外，link元素还包括很多可选属性: charset, href, hreflang, media, rel, rev, target, title和type。这些属性中，target只允许在Transitional和Frameset两种DTD中使用，其它都可在Strict, Transitional
<link>标签的rel属性详解
热门推荐
雾里看花
11-08 2万+
标签定义了当前文档与 Web 集合中其他文档的关系。link 元素是一个空元素，它仅包含属性。此元素只能存在于 head 部分，不过它可出现任何次数。在 HTML 中， 标签没有结束标签。在 XHTML 中， 标签必须被正确的关闭。 除了HTML的标准通用属性之外，link元素还包括很多可选属性: charset, href, hreflang, media, rel, rev, target,
标签的rel属性全解析
weixin_30879833的博客
06-01 816
<link>标签定义了当前文档与 Web 集合中其他文档的关系。link 元素是一个空元素，它仅包含属性。此元素只能存在于 head 部分，不过它可出现任何次数。在 HTML 中，<link> 标签没有结束标签。在 XHTML 中，<link> 标签必须被正确的关闭。 除了HTML的标准通用属性之外，link元素还包括很多可选属性: charse...
<link>标签实现预加载功能详解
weixin_33717117的博客
06-15 2542
前言最近在研究 vue-cli 3.0生成的工程，在构建后生成的 index.html里面发现了下面这种用法：&lt;link as=style href=/css/app.f60416c7.css rel=preload&gt;复制代码&lt;link as=script href=/js/app.69189fdd.js rel=preload&gt;复制代码这就触到了本人的知识盲区了，本着扫盲...
HTML和HTML5基础：<HEAD>与<BASE>标签详解
`<LINK>`标签的关键属性包括`href`，定义被链接文档的位置，以及`rel`，定义当前文档与被链接文档的关系。`<META>`标签则用于定义文档的元数据，如字符集、搜索引擎关键词等。 HTML5作为HTML的最新版本，引入了许多...
<!DOCTYPE html> <html lang=""> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <link rel="icon" href="<%= BASE_URL %>favicon.ico"> <title><%= htmlWebpackPlugin.options.title %></title> </head> <body> <noscript> <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong> </noscript> <div id="app"></div> <!-- built files will be auto injected --> </body> </html>
04-09
这种方式能够有效避免手动维护复杂的 `<script>` 或 `<link>` 标签引用[^1]。 例如，常见的 `index.html` 结构如下所示： ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Vue ...
<head>    <meta charset="UTF-8">    <meta http-equiv="X-UA-Compatible" content="IE=edge">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>Document</title>    <link rel="stylesheet" href="./css/default.css"></head>
03-27
##### (4) `<link rel="stylesheet" href="styles.css">` 引入外部 CSS 文件，实现样式分离管理。 ```html <link rel="stylesheet" href="styles.css"> ``` ##### (5) 内联 CSS 使用示例 通过 `<style>` 标签嵌入...
HTML rel 属性
呆子
05-15 190
rel 属性 -- rel属性,描述了当前页面与href所指定文档的关系. rel属性通常出现在a,link标签中 属性值 alternate -- 定义交替出现的链接 appendix -- 定义文档的附加信息 bookmark -- 书签 chapter -- 当前文档的章节 contents copyright -- 当前文档的版权 glossary -- 词汇 help...
link标签中的rel
qq_25503949的博客
04-25 2879
link标签中的rel 我们在html文件中引入css文件： <link href="style.css" rel="stylesheet"> 如果没有rel属性 就不会成功引入css文件 这是为什么呢？ html的link标签是用于当前文档引用外部文知档用的，rel属性用于设置对象和链接目的间的关系。rel是relationship的英文缩写；道stylesheet中style是...
link标签的rel属性
草窝儿
05-04 554
首先，link标签是用于当前文档引用外部文档的，其次，这个标签的rel属性用于设置对象和链接目的间的关系，说白了就是指明你链进来的对象是个什么东西的，具体的值及其所表示的关系如下： Alternate:Substitute version of the file that contains the link. Appendix:Page that i...
HTML中rel属性
a240856742的博客
05-30 224
由于发现有同学在微博转播和收藏这篇文章,所以回头来再审视下这篇随性翻译的文章,后来发现w3cschools.com.cn已经有了对照的中文译文,所以这里我就继续完善下这篇文章吧,让它显得更有价值点。最初想到翻译这篇文档源于http://vanessa.b3log.org/research-a-rel-value这篇文章,发现rel属性拥有非常多不常见的语义化值,原文着重是想列举这些属性值...
rel（HTML属性）
culh2177的博客
08-13 1335
描述 (Description) The rel attribute defines the relationship that the linked resource has to the document from which it’s referenced. In most cases, this resource will simply be “stylesheet“, which me...
HTML中link的rel属性
XF的专栏
01-14 2611
rel：relation 意即：与当前HTML文档的关系。
HTML中rel属性详解
11-26 3418
HTML中rel属性详解 由于发现有同学在微博转播和收藏这篇文章,所以回头来再审视下这篇随性翻译的文章,后来发现w3cschools.com.cn已经有了对照的中文译文,所以这里我就继续完善下这篇文章吧,让它显得更有价值点。最初想到翻译这篇文档源于http://vanessa.b3log.org/research-a-rel-value这篇文章,发现rel属性拥有非常多不常见的语义化值,原文
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>关于龙族</title> <link rel="stylesheet" href="css/2.css"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <header> <h1>关于龙族</h1> <nav> <ul> <li><a href="龙族首页.html">龙族首页</a></li> <li><a href="书籍介绍.html">书籍介绍</a></li> <li><a href="介绍.html">介绍</a></li> </ul> </nav> </header> <section class="content"> <h2>龙族的起源</h2> <p>龙族是远古时代最强大的种族之一，传说他们掌握着元素之力与神秘魔法。</p> <p>据《龙族》小说所述，龙族曾经统治世界，但由于人类的崛起与反抗，最终逐渐走向衰落。</p> <h3>主要特征：</h3> <ul> <li>拥有强大魔力</li> <li>寿命极长甚至不死</li> <li>可以操控自然力量（如火焰、冰霜等）</li> <li>身形庞大，威严无比</li> </ul> <h3>知名成员：</h3> <ol> <li>尼德霍格（Nidhogg）—— 黑暗之龙</li> <li>伊格尼斯（Ignis）—— 火焰之龙</li> <li>瓦拉齐亚（Valachia）—— 冰霜女龙</li> </ol> <p><strong>注：</strong> 龙族的形象因文化不同而异，在中国、北欧、日本等地都有不同的神话版本。</p> </section> <footer> <p>© 2023 龙族网站</p> </footer> </body> </html>
最新发布
06-30
### 题目重述 请对给出的 HTML 页面进行分析，并解释其功能和结构，同时提出可能的优化建议以增强页面的可读性、响应式表现和可访问性。 --- ### 详解 该 HTML 页面是关于“龙族”的介绍页，主要内容包括： - **网页头部（header）**：展示标题 “关于龙族”，并包含一个导航栏，用于跳转到其他相关页面。 - **内容主体（section.content）**： - 对龙族的起源进行了文字介绍； - 列出了龙族的主要特征（无序列表 `<ul>`）； - 展示了知名龙族成员（有序列表 `<ol>`）； - 加入了一段注释说明不同文化中龙族形象的差异。 - **页脚（footer）**：版权信息 `© 2023 龙族网站`。 整体页面使用语义化标签构建结构，具有良好的基础语义，便于搜索引擎理解和辅助技术识别。 --- ### ✅ 优化建议 #### 1. **增强可访问性（Accessibility）** - 给 `<nav>` 添加 `aria-label="主菜单"` 或 `role="navigation"`，以便屏幕阅读器正确识别。 - 在 `<footer>` 中加入 `role="contentinfo"`，使其具备语义角色。 #### 2. **增强响应式布局** - 当前页面在小屏幕上可能会出现排版问题。可以在 CSS 中为 `.content` 区域添加 `max-width` 和居中样式，使其在大屏设备上更美观。 - 添加媒体查询，使文本和列表在移动端有更好的行间距与字体大小。 #### 3. **视觉层级优化** - 使用不同的 `<h2>`、`<h3>` 样式区分章节层级。 - 可以为列表项增加背景色或边框提升可视度。 --- ### 🎨 示例优化后的 CSS（添加至 `css/2.css`） ```css body { font-family: "微软雅黑", sans-serif; line-height: 1.6; color: #333; padding: 0 10px; } .content { max-width: 960px; margin: 0 auto; padding: 20px; background-color: #f9f9f9; border-radius: 10px; } .content h2 { color: #2c3e50; border-bottom: 2px solid #ddd; padding-bottom: 10px; } .content h3 { color: #34495e; } ul, ol { margin: 10px 0; padding-left: 20px; } li { margin-bottom: 5px; } footer { text-align: center; padding: 15px; font-size: 14px; background-color: #eee; border-top: 1px solid #ccc; } ``` --- ### 💡 知识点 1. **HTML语义化标签**：通过 `<section>`、`<header>`、`<footer>` 构建清晰结构，提升SEO与无障碍支持。 2. **响应式设计基础**：使用 `max-width`、`margin: 0 auto` 和 `padding` 实现自适应布局。 3. **无障碍网页设计（ARIA）**：通过 `aria-label` 和 `role` 提升网站的可访问性，支持屏幕阅读器用户。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值