6

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

 1 year ago
source link: https://blog.51cto.com/u_14682436/5885573
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

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

精选 原创

在实际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>


About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK