网页页面中各种各样连接引入方式小结

日期:2021-03-13 类型:科技新闻 

关键词:h5互动游戏,微信h5怎么制作,h5转盘抽奖,h5测试制作,凡科H5

本文是我平常实践活动而来,若有不正确,请读者指出

在网页页面中的引入(例如引入css,js,img等目标),总的来讲能够分成下列几种方法

<%--第1种方式--%>
<link href="/site.css" rel="stylesheet" type="text/css" />

<%--第2种方式--%>
<link href="site.css" rel="stylesheet" type="text/css" />

<%--第3种方式--%>
<link href="../site.css" rel="stylesheet" type="text/css" />

<%--第4种方式--%>
<link href="<%=ResolveUrl("~/site.css")%>" rel="stylesheet" type="text/css" />
下面,我在剖析1下这4种方式的优缺陷

方式1: /url

用法:
这个是从网站域名顶部刚开始搜索文档

假如你的网页页面是:https://www.jb51.net/article/1.aspx
引入的css文档时:/css/site.css
最终的css相对路径便是:https://www.jb51.net/css/site.css

也便是说,它会忽视 https://www.jb51.net 后边的全部物品,随后再加本身


局限性:
假如你的网站是1个子网站,例如在IIS下的1个网站中创建运用程序流程(而并不是立即创建1个网站)
那末你网站的根文件目录就会是:http://www.test.com/website
难题来了,由于引入全是依据url来分辨的,它压根没法差别你网站的根文件目录是甚么,因此分析出来的详细地址也会不正确,会把"website"都忽视掉

方式2: url

用法:
这个是相对性的相对路径

假如你的网页页面是:https://www.jb51.net/article/1.aspx
引入的css文档时:css/site.css
最终的css相对路径便是:https://www.jb51.net/article/css/site.css

也便是说,它会除去最终1个"/"后的物品,随后加生本身

局限性:
这个的局限性有2个:
第1:假如你在masterpage中做了1个引入,可是內容页却在不一样的文档夹,最终的引入是依据內容页来分辨的,因此就错误了。
第2:假如你用了UrlRewrite,那url和具体文档系统软件是不一样的,那很显著也会错误。

方式3: ../url

用法:
实际上这个和方式21样,../ 是回到上1级的意思

假如你的网页页面是:https://www.jb51.net/article/1.aspx
引入的css文档时:../css/site.css
最终的css相对路径便是:https://www.jb51.net/css/site.css

局限性:
局限性和方式21样
此外,IIS默认设置不容许用 ../ 来回到父级,因此要配备1下

方式4: <%=ResolveUrl("~/site.css")%>

用法:
这个用法和方式1类似,可是有个益处,便是能够防止方式1的局限性
由于这个是靠服务器分析出来的,而并不是在顾客端实行的,因此能鉴别子网站

假如你的网页页面是:http://www.cnblogs.com/dozer/article/1.aspx
引入的css文档时:<%=ResolveUrl("~/site.css")%>
最终的css相对路径便是:http://www.cnblogs.com/dozer/site.css

局限性:
这个方式是全能的,可是也并不是完善的
由于要靠服务器分析,因此自然不可以所见即所得啦,也有便是要多打那末多字,很不便
上一篇:搜集的7个CSS3编码转化成专用工具 返回下一篇:没有了