• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >html/xhtml > HTML的a标签href属性指定相对路径与绝对路径的用法讲解

HTML的a标签href属性指定相对路径与绝对路径的用法讲解

作者:佚名 字体:[增加 减小] 来源:互联网 时间:2017-08-05

本文主要包含HTML,href,路径等相关知识,佚名 希望在学习及工作中可以帮助到您

在实际Web开发中,插入图片、包含CSS文件等都需要有路径,如果文件路径的添加错误,就会导致引用失效(无法浏览链接文件,或无法显示插入的图片等)。很多初学者感到困惑,下面我就详细的介绍一下相对路径与绝对路径。

HTML相对路径
指由这个文件所在的路径引起的跟其它文件(或文件夹)的路径关系。
例如:
文件1.htm的绝对路径是:d:/www/html/1.htm
文件2.htm的绝对路径是:d:/www/html/2.htm
那么:1.htm相对于2.htm的路径就是:1.htm

相对链接的使用方法:
如果链接到同一目录下,则只需输入要链接文档的名称,例如:

  1. <a href =”1 htm”>网页链接 </a>  
  2. <img src=”bg.jpg” />  

如果链接到下一级目录,则需要先输入目录名,然后加 “ / ”,再输入文件名,例如:

  1. <a href =”html/ next.htm”>  
  2. <img src=”images/bg.jpg” />  

如果连接到上一级目录,则需要先输入“../”,然后再输入目录名、文件名,例如:

  1. <a href = “../ www/index.htm”>  

实例总结
现在有4个html文件分别是aaa.html bbb.html ccc.html index.html
aaa.html的路径为:D:/www/adminwang/html/aaa.html
bbb.html的路径为:D:/www/adminwang/ bbb.html
ccc.html的路径为:D:/www/ ccc.html
index.html的路径为D:/www/ index.html

1.链接同一目录下的文件
例如ccc.html文件链接index.html的代码如下:

  1. <a href="index.html">链接index网页</a>  

 
2.链接上一目录的文件
例如bbb.html链接ccc.html的代码如下:

  1. <a href="../ccc.html">链接ccc网页</a>  

 
3.链接上2层目录的文件
例如aaa.html链接ccc.html的代码如下:

  1. <a href=”../../ccc.html”>链接ccc网页</a>  

 
4.链接下级目录的文件
例如ccc.html链接bbb.html的代码如下:

  1. <a href="adminwang/bbb.html">链接bbb网页</a>  

 
5.链接下2层目录的文件
例如ccc.html链接aaa.html的代码如下:

  1. <a href="adminwang/html/aaa.html">链接aaa网页</a>  

HTML绝对路径
为文件提供的完全路径,包括适用的协议或盘符。也就是你的主页上的文件或目录在硬盘上真正的完整的路径。例如:
http://www.adminwang.com/index.htm
d:/ www /html/images/bg.jpg
绝对路径没有什么好说的,相对路径掌握了,绝对路径就很简单了。

您可能想查找下面的文章:

  • HTML表单提交的几种方式_动力节点Java学院整理
  • HTML表单_动力节点Java学院整理
  • HTML大于号、小于号、空格、引号等常用的转义代码写法一览表
  • HTML中实现鼠标经停时整行(tr)变色
  • html格式化json的实例代码
  • html在消息按钮上增加数量角标的实现代码
  • html页面跳转传递参数问题
  • html、css和js注释规范用法小结
  • Html 实现动态显示颜色块的报表效果(实例代码)
  • html是什么文件 html文件如何打开

相关文章

  • 2017-08-05详解html中background-image属性的设置
  • 2017-08-05input type是什么意思及常用限制input的方法
  • 2017-08-05总结XHTML代码常见的应用问题
  • 2017-08-05如何在textarea文本输入区内实现换行
  • 2017-08-05使用SWFObject完美解决HTML插入Flash的各浏览器兼容性方案
  • 2017-08-05用js互相调用iframe页面内的js函数
  • 2017-08-05HTML validate HTML验证
  • 2017-08-05HTML (css样式规范)必看篇
  • 2017-08-05html 块级标签与内联标签的区别
  • 2017-08-05HTML标记一览表及用法说明

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • 关于textarea文本转为html即回车换行
    • HTML和CSS在Flash中的应用
    • html base标签 target=_parent使用介绍
    • html中如何使用JavaScript
    • Nofollow标签的写法以及nofollow使用介绍
    • 利用HTML实现限制ip的投票网站作弊方案
    • 修改输入框placeholder文字默认颜色-webkit-input-placeholder方法
    • html禁止清除input文本输入缓存的两种方法
    • HTML meta的大作用
    • 网站不允许直接复制页面内容或信息的解除方法

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有