首页 > 其他分享 >HTML的a标签href属性指定相对路径与绝对路径的用法讲解

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

时间:2022-11-25 10:04:32浏览次数:48  
标签:HTML htm 路径 html 绝对路径 href 链接 ccc

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

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

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

XML/HTML Code复制内容到剪贴板

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

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

XML/HTML Code复制内容到剪贴板

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

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

XML/HTML Code复制内容到剪贴板

  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的代码如下:

XML/HTML Code复制内容到剪贴板

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

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

XML/HTML Code复制内容到剪贴板

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

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

XML/HTML Code复制内容到剪贴板

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

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

XML/HTML Code复制内容到剪贴板

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

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

XML/HTML Code复制内容到剪贴板

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

 

HTML绝对路径
为文件提供的完全路径,包括适用的协议或盘符。也就是你的主页上的文件或目录在硬盘上真正的完整的路径。例如:
http://www.adminwang.com/index.htmd:/ www /html/images/bg.jpg
以上是绝对路径通常表示,但是很多时候我们在表单提交的时候,action的路径要和servlet的路径保持一致,action由于是在指导服务器进入哪个运行项目,因此可以使用/myWeb/userinfo,前面/表示端口号

<form id="msform" action="/myWeb/userinfo?param=insert" method="post">

可以在server.xml中配置/myWeb,如

<Context docBase="myWeb" path="/myWeb" reloadable="true" source="org.eclipse.jst.jee.server:myWeb"/>

servlet可以这样写,/前默认是端口号+项目名,当然还可以在web.xml中设置默认路径,我们一般直接使用/+servlet名即可

<servlet>
  <servlet-name>userinfo</servlet-name>
  <servlet-class>controller.UserServlet</servlet-class>
  </servlet>
  <servlet-mapping>
   <servlet-name>userinfo</servlet-name>
   <url-pattern>/userinfo</url-pattern>
  </servlet-mapping>

标签:HTML,htm,路径,html,绝对路径,href,链接,ccc
From: https://blog.51cto.com/u_14682436/5885573

相关文章

  • 使用html2canvas和jspdf将页面保存位pdf
    使用html2canvas和jspdf将页面保存位pdf<scriptsrc="https://unpkg.com/jspdf@latest/dist/jspdf.umd.min.js"></script><scriptsrc="https://unpkg.com/html2canvas@......
  • v-html
    v-html用于设置标签的innerHTML<body><scriptsrc="../vue.js"></script><divid="mydiv"><divv-html="message"></div><divv-html="li......
  • 网安学习-HTML
    一、HTML概述及发展史二、互联网原理三、开发工具的使用四、HTML骨架DTD|关于html标签|字符集|视口标签|浏览器私有设置|title标签|keywords关键字 |des......
  • IDEA编辑器下Vue项目中Element标签出现标黄(Unknown html tag el-form)问题解决方案!
      第一步:检查配置中的依赖项是否勾选,如未勾选则勾上  第二步:检查配置中的Excludes项,如果有被排除的项目则删除  第三步:执行npminstall后,在node_modul......
  • PHP htmlspecialchars()的用法
    htmlspecialchars()函数把一些预定义的字符转换为HTML实体。这个函数的效果其实在浏览器中打开页面是看不到的,要查看源代码才能看到。&(和号)成为&”(双引号)成为"’(......
  • angularjs解析html字符串
    参考链接​​https://docs.angularjs.org/api/ngSanitize​​首先下载angular-sanitize.min.js,下载地址:​​https://github.com/angular/bower-angular-sanitize​​添加解......
  • HTML超链接标签
    本文中的内容参考了W3School。1.普通的超链接代码如下:<spanstyle="font-size:18px;"><ahref="http://www.baidu.com/">转到百度</a></span>2.用图片作为超链接源:<ahref="......
  • HTML防止中文乱码
    在编辑html文件的时候,即使设置编码方式为utf-8,还是出现乱码的话,可以加入如下代码来解决<head><metahttp-equiv="Content-Type"content="text/html;charset=......
  • HTML5+css3新增布局元素整理
    HTML5新增的语义化标签<head>:头部标签<nav>:导航标签<article>:内容标签<section>:定义文档某个区域<aside>:侧边栏标签<footer>:尾部标签 注意:这种语义化标准主要是针对搜索引......
  • 情侣纪念日网站html5源码教程
    个人名片:对人间的热爱与歌颂,可抵岁月冗长......