HTML - 了解 href 以及链接和基本标签
我经常对 href 属性、链接标签和基本标签感到困惑。我不确定如何正确链接 CSS 文件，以便将文件移动到子文件夹中并且仍然可以工作（稍后的示例），因此我继续了解 href 在指定位置时如何工作。
据您所知，我正在使用本地主机，因此我有主 htdocs 文件夹，其中有多个文件夹，每个文件夹都用于我正在处理的项目。它最终看起来像这样：
localhost/index.php (which redirects to localhost/home/index.php)
localhost/home/
localhost/zune/
localhost/school/
localhost/aeac/
一般来说，文件夹的布局将是这样的：
localhost/aeac/images/
localhost/aeac/stylesheets/
localhost/aeac/scripts/
继续，假设我有文件 localhost/aeac/test/index.html 并在其中，我有4个链接用于测试。我发现
<a href="/"> will link to "localhost/"
<a href="./"> will link to "localhost/aeac/test/" (the directory the file is in.)
<a href="../"> will link to "localhost/aeac/" (the directory above the file.)
<a href="about.html">will link to "localhost/aeac/test/about.html" (the directory the file is in.)
现在我了解了 href，我需要了解如何正确链接 CSS。
想象一下网站的目录如下所示：
localhost/aeac/
localhost/aeac/images/
localhost/aeac/stylesheets/
localhost/aeac/scripts/
在 /aeac/ 文件夹中我有 index.html。该文件有一个链接标记，如下所示：
<link rel="stylesheet" href="stylesheets/main.css" />
因此，效果很好，main 基本上是站点的结构/主题，并包含在每个文件中。当我必须创建子文件夹时会出现问题。现在我们有一个localhost/aeac/users/*username*/index.html。该网站仍然使用 main.css，但该链接不再有效，因为其中没有 stylesheets 文件夹。
这就是我陷入困境的地方，我想我应该使用基本标签来解决我的问题，但我仍然对如何编写感到困惑。另外，我知道我可以更改用户文件夹中所有文件的链接标签，但我想知道如何这样做（如果可能的话）。
I often get confused with the href attribute, the link tag, and the base tag. I'm unsure how to properly link the CSS file so a file can be moved into a subfolder and still work (example later on) so I went ahead and found out how the href works when specifying a location.
For your knowledge, I'm working with my localhost, so I have the main htdocs folder and inside that, I have multiple folders, each for a project I'm working on. It ends up looking like this:
localhost/index.php (which redirects to localhost/home/index.php)
localhost/home/
localhost/zune/
localhost/school/
localhost/aeac/
And generally the layout of a folder will be something along these lines:
localhost/aeac/images/
localhost/aeac/stylesheets/
localhost/aeac/scripts/
Going on, let's say I have the file localhost/aeac/test/index.html and in it, I have 4 links for testing. I've found out that
<a href="/"> will link to "localhost/"
<a href="./"> will link to "localhost/aeac/test/" (the directory the file is in.)
<a href="../"> will link to "localhost/aeac/" (the directory above the file.)
<a href="about.html">will link to "localhost/aeac/test/about.html" (the directory the file is in.)
Now that I understand href's, I need to understand how to link CSS properly.
Imagine the site's directory looks like this:
localhost/aeac/
localhost/aeac/images/
localhost/aeac/stylesheets/
localhost/aeac/scripts/
and right in the /aeac/ folder I have index.html. The file has a link tag that looks like this:
<link rel="stylesheet" href="stylesheets/main.css" />
So that works out well, main is basically the site's structure/theme and gets included in every file. The problem occurs when I have to make a subfolder. Now we have a localhost/aeac/users/*username*/index.html. The site still uses the main.css, but the link doesn't work anymore because there is no stylesheets folder inside there.
That's where I'm stuck, I imagine that I should be using the base tag to solve my problem but I'm still confused on how that would written. Also, I know I could just change the link tag for all the files in the users folder, but I'd like to know how to do it this way (if that's even possible.)
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（4）
根据您对 href 的了解，只需将有关导航的知识与您的最终方法结合起来：
所以如果您有这个：
本地主机/aeac/
本地主机/aeac/images/
本地主机/aeac/样式表/
本地主机/aeac/脚本/
localhost/aeac/users/
并且您位于 localhost/aeac/users/index.html
您只需向上一个目录（../ 进入 aeac），然后导航：
../stylesheets/style.css
希望这会有所帮助
with what you found out about href, just combine that knowledge about navigation with your final approach:
So if you have this:
localhost/aeac/
localhost/aeac/images/
localhost/aeac/stylesheets/
localhost/aeac/scripts/
localhost/aeac/users/
and you are in localhost/aeac/users/index.html
you just go one directory up (../ to get into aeac) and then navigate on:
../stylesheets/style.css
Hope this helps
我相信你想要这个：
它以
/开头，所以它总是从根部向上遍历，无论你的页面位于哪里（即在/aeac/index.html> 或位于/aeac/users/foo/index.html）。现在，如果您可以控制index.html每个副本中的标记（您可能会这样做），您还可以使用..向上导航到../../stylesheets/main.css，但从根目录导航可能更简单。I believe you want this:
This begins with
/, so it will always traverse up from the root, not matter where your page is located (i.e. at/aeac/index.htmlor at/aeac/users/foo/index.html). Now, if you have control over the tag in each copy ofindex.html(which you probably do), you could also navigate upwards with.., to../../stylesheets/main.css, but navigating from the root is probably simpler.您可以使用 / 作为基础
获得样式表的绝对路径You can have an absolute path to the stylesheet using / as the base
<link rel="stylesheet" href="/aeac/stylesheets/main.css" />您可以使用：
/stylesheet/main.css
或 ../../stylesheet/main.css
无论“user”文件夹的名称是什么，../.. 始终会返回 2 个文件夹：
/aeac/users/user1/index。 html
/aeac/users/user2/index.html
../../stylesheet 将始终到达 /aeac/stylesheet
You can use:
/stylesheet/main.css
or ../../stylesheet/main.css
No matter what the "user" folder is named, ../.. will always go 2 folders back:
/aeac/users/user1/index.html
/aeac/users/user2/index.html
../../stylesheet will always get to /aeac/stylesheet