业界动态
html怎么引用网页链接,网页中各种链接引用方法小结
2024-12-17 07:43

网页中各种链接引用方法小结

在网页中的引用(比如引用css,js,img等对象),总的来说可以分为以下几种方式

本文是我平时实践而来,若有错误,请读者指出

在网页中的引用(比如引用css,js,img等对象),总的来说可以分为以下几种方式

" rel="stylesheet" type="text/css" />

下面,我在分析一下这四种方法的优缺点

方法一: /url

用法

这个是从域名顶部开始查找文件

如果你的页面是:https://www.jb51.net/article/1.aspx

引用的css文件时:/css/site.css

最后的css路径就是:https://www.jb51.net/css/site.css

也就是说,它会忽略 https://www.jb51.net 后面的所有东西,然后加上自身

局限性

如果你的网站是一个子网站,比如在IIS下的一个网站中建立应用程序(而不是直接建立一个网站)

那么你网站的根目录就会是:http://www.test.com/website

问题来了,因为引用都是根据url来判断的,它根本无法区别你网站的根目录是什么,所以解析出来的地址也会错误,会把"website"都忽略掉

方法二: url

用法

这个是相对的路径

如果你的页面是:https://www.jb51.net/article/1.aspx

引用的css文件时:css/site.css

最后的css路径就是:https://www.jb51.net/article/css/site.css

也就是说,它会去除最后一个"/"后的东西,然后加生自身

局限性

这个的局限性有2个

第一:如果你在masterpage中做了一个引用,但是内容页却在不同的文件夹,最后的引用是根据内容页来判断的,所以就出错了。

第二:如果你用了UrlRewrite,那url和实际文件系统是不同的,那很明显也会出错。

方法三: https://blog.csdn.net/weixin_42332497/article/url

用法

其实这个和方法二一样,https://blog.csdn.net/weixin_42332497/article/ 是返回上一级的意思

如果你的页面是:https://www.jb51.net/article/1.aspx

引用的css文件时:https://blog.csdn.net/weixin_42332497/article/css/site.css

最后的css路径就是:https://www.jb51.net/css/site.css

局限性

局限性和方法二一样

另外,IIS默认不允许用 https://blog.csdn.net/weixin_42332497/article/ 来返回父级,所以要配置一下

方法四

用法

这个用法和方法一差不多,但是有个好处,就是可以避免方法一的局限性

因为这个是靠服务器解析出来的,而不是在客户端执行的,所以能识别子网站

如果你的页面是:http://www.cnblogs.com/dozer/article/1.aspx

引用的css文件时

最后的css路径就是:http://www.cnblogs.com/dozer/site.css

局限性

这个方法是万能的,但是也不是完美的

因为要靠服务器解析,所以当然不能所见即所得啦,还有就是要多打那么多字,很麻烦

Tag:链接引用

相关文章

这篇文章主要介绍了纯 CSS 实现【点击展开阅读全文】功能,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2020-10-13

这篇文章主要介绍了CSS实现两个元素相融效果(粘滞效果),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学2020-10-12

这篇文章主要介绍了css为什么要放在head标签中,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2020-10-12

这篇文章主要介绍了CSS两种常用的封装示例,帮助大家更好的利用CSS制作网页,感兴趣的朋友可以了解下2020-10-12

这篇文章主要介绍了CSS标签模式display属性,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2020-10-12

这篇文章主要介绍了css 收货地址平行四边形的线条样式示例代码,代码简单易懂,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2020-10-09

这篇文章主要介绍了css实现鼠标放上去时图片过渡转换动画,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2020-10-09

这篇文章给大家介绍了CSS中width和height的默认值auto与%案例,本文通过实例案例给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧2020-09-30

这篇文章主要介绍了css一些不常见但很有用的属性操作大全,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2020-09-28

这篇文章主要介绍了解决搜索框和搜索按钮button边框不能重合的问题,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2020-09-28

    以上就是本篇文章【html怎么引用网页链接,网页中各种链接引用方法小结】的全部内容了,欢迎阅览 ! 文章地址:https://sicmodule.kub2b.com/news/9025.html
     栏目首页      相关文章      动态      同类文章      热门文章      网站地图      返回首页 企库往资讯移动站 https://sicmodule.kub2b.com/mobile/ , 查看更多   
最新文章
手机单扬声器和双扬声器有什么区别?原来差别这么大手机扬声器「手机单扬声器和双扬声器有什么区别?原来差别这么大」
随着手机的普及和发展,音频体验成为消费者选择手机的重要因素之一。而在手机音频方面,单扬声器和双扬声器是常见的设计方案。那
手机维修知识大全维修手机「手机维修知识大全」
修理手机维修知识大全手机是高科技精密电子产品。工作原理、制造工艺、软件和硬件、测试、技术标准在所有的电器设备中是最复杂的
2k分辨率手机有哪些(2k分辨率的手机哪款性价比最高)
  关于《2K分辨率手机有哪些》的文章  随着科技的不断发展,手机已经成为了我们日常生活中不可或缺的一部分。而在手机的各种
红手指云手机苹果版(红雀浏览器) v1.0.23 iPhone版红手指云手机「红手指云手机苹果版(红雀浏览器) v1.0.23 iPhone版」
红手指手游专用虚拟手机是一款非常实用的手机挂机软件,在这里玩家随时随地离线挂机、自动帮助你闯关升级,非常强大的游戏挂机神
1手机2(一加11手机)
  《手机2》:探索科技与生活的无限可能  在当今数字化时代,智能手机无疑是我们生活中不可或缺的一部分。随着科技的飞速发
手机NFC是什么?怎么使用?手机nfc「手机NFC是什么?怎么使用?」
但很多人不知道的是,除了这三种无线通信技术外,很多智能手机里还有一种无线通信技术,那就是NFC。2004年,飞利浦半导体,诺基
360手机 官网(360手机官网入口)
  探索《360手机官网》:一站式手机技术与服务的平台  在当今数字化时代,手机已经成为我们日常生活中不可或缺的一部分。而
关于手机电池的冷知识:机身温度过高,会永久降低手机电池容量手机电量「关于手机电池的冷知识:机身温度过高,会永久降低手机电池容量」
相信大家在日常使用手机时,最关注的就是我们手机的电量还剩多少,尤其是现在我们一般出门都不带现金,直接通过手机进行支付,所
260手机助手(360手机助手官方版下载)
  《260手机助手》:一站式手机管理和服务的新选择  随着智能手机的普及,我们的生活越来越离不开手机。为了更好地管理和优
小米发布迄今最强被动散热系统,两倍于VC散热,原神满帧运行手机散热「小米发布迄今最强被动散热系统,两倍于VC散热,原神满帧运行」
你的手机“烫”吗? 玩局游戏,瞬间化身暖手宝?拍拍视频就过热,需要“冷静”一下才能继续使用!充电是很快,温度升的也很快…