Html中src、href的相对路径与绝对路径

What is a path? Why is this something developers should care about?

A path is simply the location of a file or directory within a file system,¹ though it’s not exactly an address. A path is both the location and how to get there (if this definition seems complicated, hopefully a few examples (coming shortly!) will clear things up). The reason that web developers need to understand paths is because the web is about URLs (such as http://example.com/index.html), and URLs are primarily paths. This is evident in the URL syntax: scheme://domain:port/path?query_string#fragment_id.²

The domain part of the URL maps to the IP address of a remote computer. When accessing that remote computer using a given scheme (HTTP) and port (by default, 80), you are accessing a portion of the remote computer’s file system. The layout of this accessible portion of the file system corresponds to the path part of the URL.

For the remainder of this post, we’ll use the fictional “example.com” as an example. Example.com has the following directory structure on their web host:

/ (The web root)
	css
		styles.css
	files
		example.pdf
		index.html
	img
		footer.png
		header.png
	index.html

When a user navigates to http://example.com/index.html in their browser, they are accessing the above file system and the web server “serves” them index.html. If a user wanted to download the example.pdf, they would navigate to http://example.com/files/example.pdf.

Types of paths

There are two ways to specify a path: absolute or relative. Absolute paths are a bit simpler, so we’ll start with them.

ABSOLUTE PATHS

An absolute path gives the location of a file or directory in reference to a root directory. For example.com (as for all websites!), the root directory is the web root (or /). Let’s look at some examples.

Given example.com, we’d like /index.html to include a link to the styles.css file. Using absolute syntax, we’d add a link element to the head like this: <link rel="stylesheet" href="/css/styles.css">.

If you wanted to add the header.png image to /index.html using an absolute path, it would look like this: <img src="/img/header.png">.

Let’s look at a few more examples of absolute paths. Using /files/index.html, let’s create a link to the example.pdf: <a href="/files/example.pdf">. And we’ll add a link to the styles.css in the head: <link rel="stylesheet" href="/css/styles.css">.

Note that all of the absolute paths start with /. Basically, you can always combine a domain (example.com) with an absolute path to get a fully qualified URL.

Speaking of fully qualified URLs, that’s the alternative way of writing an absolute path:<link rel="stylesheet" href="http://example.com/css/styles.css">. I don’t recommend it, though.

RELATIVE PATHS

A relative path is a path to a given file or directory starting from another file or directory. To make this simple, we’ll look at several examples.

Given example.com, we’d like /index.html to include a link to the styles.css file. Using relative syntax, we’d add a link element to the head like this: <link rel="stylesheet" href="css/styles.css">. This translates to “look in the css directory that is in the same directory as index.html and get the styles.css file from there.” Note: the difference between this relative path and the absolute one is the omission of the leading /.

If you wanted to add the header.png image to /index.html using a relative path, it could look like this: <img src="img/header.png">. It could also look like this: <img src="./img/header.png">. . is a “special character” when used like this. It means “start at the current directory.”

Let’s look at a few more examples of relative paths. Using /files/index.html, let’s create a link to the example.pdf: <a href="example.pdf"> (or <a href="./example.pdf">). So far, so good. Now let’s add the styles.css in the head. Uh oh. So far, we’ve always looked in the current directory or down. How to go up?

.. is the “special character” to go up one directory. So, back to our example. To add styles.css in the head of /files/index.html, you’d use the path ../css/styles.css. To go up two directories, use ../../. Three directories: ../../../. Etc.

Which should I use? Relative or absolute? Or… does it matter?

Given the ability to link to files using a relative or absolute path or a fully qualified URL, does it matter which one we use?

For the end user, not really. I’ve seen some articles that make some strange claims about performance (such as local absolute paths go through DNS, but relative paths don’t!) andSEO benefits, but the only practical difference is a few bytes saved by using relative paths. I created a test page to demonstrate the lack of difference athttp://jeffreybarke.net/tests/paths/.

The primary reason to prefer one to another is for the benefit of the web developer! For instance, relative links make it very easy to move “chunks” of a site from one location on a web server to another without having the links break. As long as the chunks maintain their relative structure, they can be moved to any subdirectory at will.

The primary disadvantage to using relative links shows up when you start creating larger, more dynamic sites. Each subdirectory of the site requires a different relative path to get at common assets (such as style sheets or images). Since large, dynamic sites typically have a shared header file, it makes more sense to use absolute links.

Both relative and absolute paths make it easy to work on a site locally and then move the files to a remote web server. With relative paths, the local site structure doesn’t need to match the remote one; with absolute paths, it does. (You’ll also need to run a web server locally to use absolute paths, but that’s also a necessity to run a dynamic site locally.)

The previous paragraph hints at the reason why I don’t recommend using fully qualified URLs—without manipulating DNS entries (with hosts ,for example), it’s impossible to work locally. The local files will always point to the remote server!

References

1. “Path (computing).” (n.d.). In Wikipedia. Retrieved 15 June 2013, fromhttp://en.wikipedia.org/wiki/Path_(computing)
2. “Uniform resource locator.” (n.d.). In Wikipedia. Retrieved 15 June 2013, fromhttp://en.wikipedia.org/wiki/Uniform_resource_locator

原文网址：http://jeffreybarke.net/2013/06/paths-and-urls-relative-and-absolute/