【前端】【head部分】 rel='stylesheet'

最新推荐文章于 2022-02-10 16:19:14 发布
最新推荐文章于 2022-02-10 16:19:14 发布
阅读量487 收藏 1
点赞数 1

<link type='text/css' href='Example 2-1.css' rel='stylesheet' />

     rel是Relations的所写 指关联到一个stylesheet（样式表单)

只写一个就可以了,由于目前的CSS还不能抓取rel与rev的属性值，所以没有办法给不同关系的链接提供不同的样式，所以现在rel与rev只是用来使得网页的语义性更为完善

     在<link>标签中，“rel=stylesheet”，rel是关联的意思，关联的是一个样式表(stylesheet)文档，它表示这个link在文档初始化时将被使用。一般这里是不需要改动的.

zwy122
关注
html+css基础入门教程标记语言——打印样式
html基础教程
02-24 945
讨论了几种为文档应用CSS的方法,这一章是要研究打印样式,指定特别用来打印页面的CSS规则.只要几条CSS规则,就能确保结构化标记内容打印到纸上的效果与屏幕上显示的一样好看.网页教学网 首先来看看media类型,以及它们与提供设备相关CSS的关系. 如何指定打印时采用的样式? 在回答这个问题之前,必须熟悉一个概念,那就是我们能为CSS指定媒体类型(media),声明媒体类型将能使样式针对特...
[前端案例]百行代码实现炫酷时钟
爱编程的糖小猫之博客
11-25 5500
百余行代码实现炫酷时钟 电脑右下角的时间是不是早就看腻了，字小而且样式单调，今天，就用百余行HTML + CSS + JavaScript代码实现一个网页版的炫酷时钟，当然也可以使用Electron封装前端代码，实现桌面版的炫酷时钟应用程序，话不多说，直接上效果图： 1.构造盒子雏形 在HTML标签中，我们可以把div比喻成一个盒子，在div标签中还可以嵌套div标签，这就好比大盒子中还装着一个或若干个小的盒子。每一个盒子都有一个边框(border)，盒子内容与边框之间的距离称之为内边距(paddi
Link 标签 rel=Stylesheet的实际作用
09-25
Link标签有两个作用 一是定义文档与外部资源的关系、二是链接样式表，下面有个示例，大家可以参考下
rel='stylesheet' 什么意思?
Democreen
01-09 3万+
<br /><link type='text/css' href='Example 2-1.css' rel='stylesheet' /><br />     rel是Relations的所写 指关联到一个stylesheet（样式表单)<br />只写一个就可以了,由于目前的CSS还不能抓取rel与rev的属性值，所以没有办法给不同关系的链接提供不同的样式，所以现在rel与rev只是用来使得网页的语义性更为完善<br />     在<link>标签中，“rel=stylesheet”，rel是关联的意
rel="stylesheet" 描述
weixin_30758821的博客
08-03 1634
<link type="text/css" rel="stylesheet" href="css/style.css"/> rel是relationship的英文缩写stylesheet中style是样式的意思,sheet是表格之意,总起来是样式表的意思rel="stylesheet" 描述了当前页面与href所指定文档的关系.即说明的是,href连接的文档是一个新式表 转载于...
rel="stylesheet"
wqqGo的博客
09-07 943
rel是relationship的英文缩写 stylesheet中style是样式的意思,sheet是表格之意,总起来是样式表的意思 rel=”stylesheet” 描述了当前页面与href所指定文档的关系.即说明的是,href连接的文档是一个新式表 rel 属性规定当前文档与被链接文档之间的关系。 rel的值极其所代表的意思（参考官网）： alternate: 文档的替代版本（比如打
CSS--rel=“stylesheet“
weixin_45406850的博客
02-10 3477
最近一次在写网页练习的时候，发现页面什么东西都不出现，只留滚动条在页面上。 也没有设置隐藏或者透明。 我打开代码的时候，发现link标签引入内容很短，当我把rel=“stylesheet” 写入之后，查看浏览器发现问题解决了。 rel=“stylesheet” 这个东西到底是什么？ 在< link >标签中，rel是relations的缩写，是关联的意思，关联的是一个样式表(stylesheet)文档，它表示这个link在文档初始化时将被使用。 由于css还不能抓取rel与rev的属性值，所以没
javascript实现前端分页功能
01-22
前言：今天给大家带来的是前端数据的分页功能，供大家参考，具体内容如下 ...link rel=stylesheet href=css/limitFace.css rel=external nofollow > </head> <body> <div class=all> <tabl
JavaScript动态创建link标签到head里的方法
10-25
JavaScript动态创建link标签到head里的方法是前端开发中常见的需求，尤其在动态加载或主题切换等场景下。这里我们将详细探讨三种实现方式：使用jQuery、原生JavaScript以及IE特有的createStyleSheet方法。 首先，...
新手学习前端之js模仿淘宝主页网站
12-29
先给大家展示下效果图： ...link rel=stylesheet href=css/base.css> <style type=text/css> </style> </head> <body> <div class=header> <div class=w> <div class=top
rel=stylesheet的意思
spaceX_91的博客
01-21 1万+
原文链接：点击这里 通常出现在link标签里。 “rel”是relationship的英文缩写，它描述了当前页面与href所指定文档的关系；   “stylesheet”中style是样式的意思，sheet是表格之意，连起来就是样式表的意思；中style是样式的意思，sheet是表格之意，连起来就是样式表的意思；   rel="stylesheet"就是声明此文件为样式表文件，...
聊聊前端中的页面样式CSS~
java面试笔试
09-11 332
前面我们了解了HTML的标签今天我们来一起聊聊CSS的样式昨天咱们用table标签布局了一个注册的页面~,但是table的布局存在一定的缺陷就是都写死了,不利于修改~现在...
link 标签中“rel=stylesheet”的作用
热门推荐
恬静的男子的博客
10-17 4万+
最近在用link标签引入外部css文件的时候，忘记加上rel=stylesheet，结果css样式显示不出来，疑惑万分。加上这个css效果就出现了。 那rel=stylesheet又是何方神圣呢？ 首先，我们要知道Link标签有两个作用：1. 定义文档与外部资源的关系；2. 是链接样式表。 link标签是用于当前文档引用外部文档的，其次，这个标签的rel属性用于设置对象和链接目的间的关系，说白了就...
利用link标签rel="alternate&…
senlin1202的博客
03-04 700
标签 rel="stylesheet"属性指定将一个样式表立即应用到文档. rel="alternate stylesheet"属性将其作为备用样式表而在默认情况下禁用它   通过js拿到link标签对象,disabled属性设置,可以实现变化页面导入样式表 disabled = true;表示它不会立即生效 disabled = false;表示立即生效 本人用了jquery插件，使用方法如下
link标签的href=与 rel=stylesheet是什么意思？
cx-young的博客
03-30 2万+
link标签的href与 rel=stylesheet是什么意思？ 此处是设置CSS样式的，叫做外部格式链接。 rel=“stylesheet” type=“text/css” 是固定写法，不可修改。 href是URL rel是relationship的英文缩写，意思是“关系”； stylesheet中style是“样式”的意思,sheet是”表格“，加起来是样式表的意思； href连接的文档是一...
＜link＞便签中的属性rel的作用汇总
谁人打的太极拳的博客
03-05 2286
<link>便签中的属性rel的作用 link标签引入外部css文件的时候，忘记加上rel=stylesheet，结果css样式显示不出来。 Link标签有两个作用：1. 定义文档与外部资源的关系；2. 是链接样式表。 link标签是用于当前文档引用外部文档的，其次，这个标签的rel属性用于设置对象和链接目的间的关系。就是说链接出来的对象是什么东西，什么内容。 rel各个属性值配置 Alternate – 定义交替出现的链接 Stylesheet – 定义一个外部加载的样式表 Star
html 学习2 link rel="stylesheet"
蚁人日记
04-25 1万+
在CSS中，link里 的rel="st 在<link>标签中，“rel=stylesheet”，rel是关联的意思，关联的是一个样式表(stylesheet)文档，它表示这个link在文档初始化时将被使用。 rel是Relations的缩写，指关联到一个stylesheet（样式表单)。 <head> <link rel="stylesheet" type=...
批注以下代码： <head> <title>主页</title> <meta name="format-detection" content="telephone=no"> <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta charset="utf-8"> <link rel="icon" href="images/home/favicon.ico" type="image/x-icon"> <!-- Stylesheets--> <link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Montserrat:400,500,600,700%7CPoppins:400%7CTeko:300,400"> <link rel="stylesheet" href="css/bootstrap.css"> <link rel="stylesheet" href="css/fonts.css"> <link rel="stylesheet" href="css/style.css"> <style>.ie-panel{display: none;background: #212121;padding: 10px 0;box-shadow: 3px 3px 5px 0 rgba(0,0,0,.3);clear: both;text-align:center;position: relative;z-index: 1;} html.ie-10 .ie-panel, html.lt-ie-10 .ie-panel {display: block;}</style> </head>
最新发布
03-21
<think>好的，我现在需要帮用户批注一段HTML代码，特别是<head>部分。首先，我要仔细看一下用户提供的代码，然后逐行分析每个标签和属性的作用。让我先通读一遍代码，确认每个元素的功能。 首先，用户给出的代码是HTML的<head>部分，包含各种元标签、链接和样式。我的任务是为每一行或每个部分添加注释，解释它们的作用。我需要确保我的批注准确且易于理解，适合不同水平的读者。 从第一行开始：<title>主页</title>。这显然是设置页面的标题，显示在浏览器标签上。这个部分比较简单，用户可能已经知道，但还是要标注清楚。 接下来是<meta name="format-detection" content="telephone=no">。这个元标签通常用于移动端浏览器，防止电话号码自动识别并转换为链接。需要解释content属性中的telephone=no的作用，可能还要提到其他可能的设置，比如email或address，但这里只涉及电话。 然后是viewport的meta标签：<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">。这个部分对于响应式设计非常重要，控制视口的行为。需要详细解释每个参数的作用，比如width=device-width让页面宽度适应设备宽度，initial-scale设置初始缩放，maximum-scale限制最大缩放，user-scalable禁止用户手动缩放。这里可能需要提到不同浏览器的兼容性，特别是iOS和Android的处理方式。 接下来是<meta http-equiv="X-UA-Compatible" content="IE=edge">，这个标签告诉IE浏览器使用最新的渲染引擎，避免兼容性视图。需要解释http-equiv的作用，以及IE=edge的含义，可能还要提到它在旧版IE中的重要性。 然后是字符集的设置：<meta charset="utf-8">。这个比较基础，声明文档使用UTF-8编码，确保正确显示字符。可能需要强调它的重要性，特别是在多语言环境中。 <link rel="icon" href="images/home/favicon.ico" type="image/x-icon">这是设置网站图标，也就是favicon。需要说明href的路径指向图标文件的位置，type指定MIME类型，可能提到不同浏览器支持的图标格式，比如ICO、PNG等。 然后是Stylesheets部分的注释。首先，链接到Google Fonts：<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Montserrat:400,500,600,700%7CPoppins:400%7CTeko:300,400">。这里加载了三种字体，Montserrat、Poppins和Teko，并指定了不同的字重。需要解释%7C是管道符|的URL编码，分隔不同的字体，可能提到使用外部字体对页面加载速度的影响。 接下来是Bootstrap的链接：<link rel="stylesheet" href="css/bootstrap.css">。Bootstrap是常见的前端框架，用于响应式布局和组件，需要说明路径指向本地文件，可能提到版本问题，但用户代码中没有版本号。 然后是字体图标库：<link rel="stylesheet" href="css/fonts.css">。可能使用了自定义图标字体，比如Font Awesome或其他，但具体要看文件内容，这里只能推测。 接着是主样式表：<link rel="stylesheet" href="css/style.css">。网站的主要自定义样式，覆盖或补充框架样式。 最后是内嵌的<style>标签，包含IE条件注释：.ie-panel{display: none;...}。这段样式是针对IE浏览器的提示面板，默认隐藏，当检测到IE10或更低版本时显示。需要解释html.ie-10和html.lt-ie-10的类是如何通过条件注释添加的，以及这段代码的作用是提示用户升级浏览器。 在批注过程中，我需要确保术语准确，比如区分meta标签、link标签、style标签的不同作用。同时，要注意用户可能不熟悉某些概念，如视口设置、字体加载、IE兼容性处理等，需要用简洁的语言解释清楚。 另外，要检查是否有遗漏的部分，比如注释中的<!-- Stylesheets-->，需要指出这是注释，对代码结构没有影响，但有助于开发者阅读。可能还要提到某些最佳实践，比如将样式表放在头部以优化渲染，或使用外部资源可能影响性能等。 最后，整理批注的结构，按照代码顺序逐条解释，保持清晰和逻辑性。确保每个部分都涵盖标签的作用、属性含义以及整体目的，帮助用户全面理解代码的结构和功能。</think>以下是对代码的逐行批注： ```html <!-- 文档头部开始，包含元数据和资源链接 --> <head> <!-- 设置页面标题，显示在浏览器标签页 --> <title>主页</title> <!-- 禁用移动端电话号码自动识别 --> <meta name="format-detection" content="telephone=no"> <!-- 响应式视口设置 (移动端优化核心) --> <meta name="viewport" content=" width=device-width, // 视口宽度=设备宽度 height=device-height, // 视口高度=设备高度 initial-scale=1.0, // 初始缩放比例1:1 maximum-scale=1.0, // 禁止放大 user-scalable=0"> // 禁用双指缩放 <!-- 强制IE使用最新渲染引擎 --> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <!-- 声明文档字符编码为UTF-8 --> <meta charset="utf-8"> <!-- 网站图标(favicon)设置 --> <link rel="icon" href="images/home/favicon.ico" type="image/x-icon"> <!-- 样式表加载区域 --> <!-- 加载Google Fonts网络字体 --> <link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Montserrat:400,500,600,700%7CPoppins:400%7CTeko:300,400"> <!-- %7C 是管道符 | 的URL编码，分隔多个字体 --> <!-- 加载Bootstrap框架 --> <link rel="stylesheet" href="css/bootstrap.css"> <!-- 加载字体图标库(如Font Awesome等) --> <link rel="stylesheet" href="css/fonts.css"> <!-- 加载网站主样式表 --> <link rel="stylesheet" href="css/style.css"> <!-- IE浏览器兼容性处理 --> <style> /* 默认隐藏IE提示面板 */ .ie-panel{ display: none; background: #212121; padding: 10px 0; box-shadow: 3px 3px 5px 0 rgba(0,0,0,.3); clear: both; text-align:center; position: relative; z-index: 1; } /* 当检测到IE10或更低版本时显示提示 */ html.ie-10 .ie-panel, html.lt-ie-10 .ie-panel { display: block; } </style> </head> ``` **关键功能说明**： 1. 移动端优化：通过`viewport`设置实现响应式布局，其中`user-scalable=0`可能会影响无障碍访问 2. 字体控制：同时使用了Google Fonts网络字体和本地字体文件 3. 渐进增强：通过`bootstrap.css`提供基础布局框架，`style.css`进行个性化定制 4. IE兼容：使用条件样式提示旧版IE用户升级浏览器，同时强制使用最高渲染模式 **注意事项**： - `maximum-scale=1.0`可能不符合WCAG可访问性规范 - 字体加载顺序影响渲染性能，建议使用`preconnect`优化 - IE检测样式需要配合服务器端条件注释使用
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值