好程序员web前端分享绝对路径与相对路径的引用

简介: html文件中绝对路径与相对路径的引用一、..的作用(上一级目录)在html中../表示上一级目录,也就是html文件所在目录的上一级目录,如果想引用上两级目录,可以....\二、同级目录的引用如果引用文件和被引用文件在同一级目录下,那可以直接写,如果上面的在同一级目录下,那可以直接写jquery-1.3.1.jshtml引用外部样式表后在样式表文件中定义的样式并不等于在html头文件中定义的样式了,它依然存放在定义的文件中被一起下载到客户端,因此外部样式表中的相对路径是相对于改样式表的路径,并不是相对于引用该样式表的html 的路径。

html文件中绝对路径与相对路径的引用
一、..的作用(上一级目录)
在html中../表示上一级目录,也就是html文件所在目录的上一级目录,

如果想引用上两级目录,可以....\

二、同级目录的引用
如果引用文件和被引用文件在同一级目录下,那可以直接写,如果上面的在同一级目录下,那可以直接写jquery-1.3.1.js

html引用外部样式表后在样式表文件中定义的样式并不等于在html头文件中定义的样式了,它依然存放在定义的文件中被一起下载到客户端,因此外部样式表中的相对路径是相对于改样式表的路径,并不是相对于引用该样式表的html 的路径。

如果是纯手工编写html或者css、js的话,建议用相对路径,比如:../../css/main.css

如果是动态文件,比如jsp、php等,最好用网站的绝对路径。比如

{ctx}/resources/main.css,其中ctx是自己定义的变量,它的值等于类似于http://localhost这种地址。

相对路径的缺点:例如:../images/zollty.png,这种写法,一旦我改变了引用页面文件的目录,这张图片就无法显示了。如果换成网站的绝对路径{ctx}/images/zollty.png,那么不论我怎么移动引用的页面文件,只要图片的地址不变,都是可以访问的。

绝对路径的缺点:对于静态文件,往往无法自动获取网站的根路径({ctx}),所以要写绝对路径比较麻烦。

相关文章
|
5天前
|
缓存 前端开发 JavaScript
现代Web开发中的前端性能优化策略
在当今快节奏的Web开发环境中,前端性能优化至关重要。本文探讨了一些实用的策略和技术,帮助开发人员提升网页加载速度和用户体验。
|
19天前
|
前端开发 JavaScript API
现代前端开发中的Web组件化设计与实践
在现代前端开发中,Web组件化已经成为了一个关键的设计思想和实践方法。本文探讨了Web组件化的概念、优势以及如何在实际项目中进行设计和应用。通过分析实例和最佳实践,展示了如何利用组件化开发提升前端开发效率和代码可维护性,同时也解决了在大型项目中常见的代码重用和团队协作问题。
|
24天前
|
监控 JavaScript 前端开发
前端 JS 经典:Web 性能指标
前端 JS 经典:Web 性能指标
15 1
|
5天前
|
前端开发 JavaScript 数据管理
现代Web开发中的前端框架选择指南
选择合适的前端框架是现代Web开发中的关键决策之一。本文探讨了几种流行的前端框架,比较它们的特点和适用场景,帮助开发者在众多选项中做出理性的选择。
|
5天前
|
缓存 前端开发 JavaScript
现代Web开发中的前端性能优化策略
在当今快节奏的Web开发环境中,前端性能优化是确保用户体验和网站成功的关键。本文探讨了一些实用的前端性能优化策略,涵盖了从代码优化到资源加载的各个方面,帮助开发者有效提升网页加载速度和响应性能。
|
7天前
|
编解码 前端开发 JavaScript
现代Web开发中的前端技术趋势与挑战
随着互联网的迅猛发展,现代Web开发中前端技术正日益成为关注的焦点。本文探讨了当前前端技术的主要趋势和面临的挑战,从性能优化到跨平台适配,为开发者提供了深入的洞见和解决方案。
|
25天前
|
XML 前端开发 JavaScript
前端概论 web
前端概论 web
19 0
|
27天前
|
前端开发 JavaScript 开发者
现代前端开发中的Web组件化设计
随着Web应用程序复杂性的增加,现代前端开发越来越倾向于采用组件化设计。本文将探讨Web组件化的定义、优势以及实际应用中的最佳实践,帮助开发者更好地理解和应用这一技术。
|
29天前
|
前端开发 计算机视觉
视觉智能开放平台操作报错合集之人脸对比1:1,采用web前端直接调用,使用了base64处理图片,提示http错误码414,该如何处理
在使用视觉智能开放平台时,可能会遇到各种错误和问题。虽然具体的错误代码和消息会因平台而异,但以下是一些常见错误类型及其可能的原因和解决策略的概述,包括但不限于:1. 认证错误、2. 请求参数错误、3. 资源超限、4. 图像质量问题、5. 服务不可用、6. 模型不支持的场景、7. 网络连接问题,这有助于快速定位和解决问题。
|
29天前
|
缓存 JavaScript 前端开发
程序员必知:广告等第三方应用嵌入到web页面方案之使用js片段
程序员必知:广告等第三方应用嵌入到web页面方案之使用js片段
19 0