html中link的用法

简介:
概述 
link标签,当在文档中声明使用外接资源(比如CSS)时使用此标签
link标签是单独出现的
属性
href -- 指定需要加载的资源(CSS文件)的地址URI
media -- 媒体类型
rel -- 指定链接类型,设定是指对象和链接目标的关系,可选值, link还可以用Shortcut Icon等
rev -- 指定链接类型
type -- 指定所连接文档的MIME类型,css的MIME是type/css,一般使用type="text/css"

rel 属性
link标签中的rel属性,定义了文档与链接的关系.
rel属性通常出现在a,link标签中
属性值
Alternate -- 定义交替出现的链接
Stylesheet -- 定义一个外部加载的样式表
Start -- 通知搜索引擎,文档的开始
Next -- 记录文档的下一页.(浏览器可以提前加载此页)
Prev -- 记录文档的上一页.(定义浏览器的后退键)
Contents
Index -- 当前文档的索引
Glossary -- 词汇
Copyright -- 当前文档的版权
Chapter -- 当前文档的章节
Section -- 作为文档的一部分
Subsection -- 作为文档的一小部分
Appendix -- 定义文档的附加信息
Help -- 链接帮助信息
Bookmark -- 书签

rev 属性
link标签中的rev属性,定义了文档与链接的关系
rev与rel很相似,属于保留标签

Alternate 属性值
alternate是LinkTypes的一个值,网页设计者可以通过此值,设计交替出现的链接
Alternate属性值通常在,rel,rev属性中出现

示例
定义两种不同的样式,用户可以通过浏览器选择样式(ie不支持此属性)
<link rel="stylesheet" type="text/css" title="blue" href="dreamdublue.css" />
<link rel="alternate stylesheet" type="text/css" title="red" href="dreamdured.css" />
可以通过http://www.dreamdu.com/feed/读取http://www.dreamdu.com/的内容
<link rel="alternate" type="application/rss+xml" href="http://www.dreamdu.com/feed/" />
HTML alternate 事例 切换样式表示例

start next prev 属性值
start next prev,全部属于LinkTypes,此值通常可以提示浏览器文章的开始,下一篇,上一篇的url
start next prev属性值通常在,rel,rev属性中出现
示例
<link rel="start" type="text/html" href="http://www.dreamdu.com/xhtml/" />
<link rel="prev" type="text/html" href="http://www.dreamdu.com/xhtml/alternate/" />
<link rel="next" type="text/html" href="http://www.dreamdu.com/xhtml/attribute_rel/" />
HTML start next prev 示例
next -- 记录文档的下一页.(浏览器可以提前加载此页)
prev -- 记录文档的上一页.(定义浏览器的后退键)
start -- 通知搜索引擎,文档的开始
目录
相关文章
|
移动开发 前端开发 JavaScript
HTML 框架高阶用法
HTML框架,或前端框架,如Bootstrap、Vue.js等,显著提升了Web应用开发的速度与用户体验。本文介绍了一些高级技巧,如自定义样式与组件、响应式设计实践、JavaScript功能增强及性能优化策略等,帮助开发者更好地利用这些工具,实现高效开发并提升应用性能与灵活性。
|
安全 Java Spring
【Java用法】Java 过滤html标签获取纯文本信息
【Java用法】Java 过滤html标签获取纯文本信息
560 0
|
Web App开发 移动开发 JavaScript
【前端用法】HTML5 Video标签如何屏蔽右键视频另存为的js代码以及如何禁用浏览器控件,Video 禁止鼠标右键下载
【前端用法】HTML5 Video标签如何屏蔽右键视频另存为的js代码以及如何禁用浏览器控件,Video 禁止鼠标右键下载
1338 0
|
移动开发 前端开发 JavaScript
Twaver-HTML5基础学习(12)连线(Link)
本文介绍了Twaver HTML5中的连线(Link)元素,包括设置起始和结束节点的方法,以及如何管理和操作多个连线。通过示例代码展示了如何在React组件中创建和管理Link,包括设置连线颜色和标签偏移量。
357 2
Twaver-HTML5基础学习(12)连线(Link)
html基本用法
HTML(超文本标记语言)是用于创建网页的标记语言。它通过标签定义文档结构,如文档类型、根元素、元数据和内容。常用标签包括段落、图像、分区、文本格式化、超链接和列表等。例如,使用 `&lt;p&gt;` 标签创建段落,`&lt;img&gt;` 插入图像,`&lt;a&gt;` 创建链接,`&lt;ul&gt;` 和 `&lt;ol&gt;` 分别创建无序和有序列表。
213 16
|
移动开发 弹性计算 前端开发
Html5和Webpack3:Webpack5的常见用法
本实验将介绍Webpack5的打包工具的一些常见用法
|
移动开发 前端开发 JavaScript
Twaver-HTML5基础学习(13)连线(Link)连线的绑定与展开
本文介绍了Twaver HTML5中连线(Link)的绑定与展开功能,包括分组绑定、自环绑定、绑定与展开以及展开间隙等属性的设置。通过示例代码展示了如何在React组件中创建Link并设置其绑定属性,实现连线的分组管理。
231 4
Twaver-HTML5基础学习(13)连线(Link)连线的绑定与展开
|
前端开发
Twaver-HTML5基础学习(34)Link显示流动效果
本文介绍了如何在Twaver-HTML5中为Link添加流动效果,通过设置流动颜色、模式等来实现动态视觉效果。
209 3
Twaver-HTML5基础学习(34)Link显示流动效果
|
移动开发 前端开发 JavaScript
Twaver-HTML5基础学习(14)连线(Link)连线类型(直线、延伸直线、正交直线)
本文介绍了Twaver HTML5中连线(Link)的不同类型,包括直线、延伸直线和正交直线,并通过示例代码展示了如何在React组件中设置Link的类型和样式。
375 1
Twaver-HTML5基础学习(14)连线(Link)连线类型(直线、延伸直线、正交直线)
|
移动开发 JavaScript 前端开发
【前端用法】html5实现地理位置定位(JS获取当前地理位置的方法)
【前端用法】html5实现地理位置定位(JS获取当前地理位置的方法)
709 0

热门文章

最新文章