我的 HTML 文件不会链接到其他 HTML 文件或 CSS
[英]My HTML file won't link to other HTML files or CSS
问题描述
I am using Sublime text to write some HTML and CSS files.
我正在使用 Sublime 文本编写一些 HTML 和 CSS 文件。 I've created my index.html:我已经创建了我的 index.html：
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Meta -->
<meta charset="UTF-8" />
<title>RainyDayBakes</title>
<!-- Styles -->
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1 style="text-align:center">RainyDayBakes</h1>
<nav style="text-align:center">
<a href=”C:\Users\sarah\Documents\Simmons\CS-321\page1.html”> About </a>
<a href=”page2.html”> Menu </a>
<a href=”page3.html”> Gallery </a>
<a href=”page4.html”> Order </a>
<a href=”page5.html”> Contact Us </a>
</nav>
<img src="cake.png" alt="oreo crumble cake" class="center">
<h3>Welcome to RainyDayBakes!</h3>
<p>We are a local bakery specializing in creative cakes, cupcakes and cookies!</p>
<p>In addition to being open daily we also offer custom ordered confections.</p>
<!-- Scripts -->
<script src="scripts/index.js"></script>
</body>
<footer>
</footer>
</html>
my page1.html:我的页面 1.html：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>This is Page One </title>
</head>
<body>
</body>
<footer>
</footer>
</html>
and my style.css:和我的风格。css：
<style>
h1 {
color:red;
}
</style>
When I try to run index.html in Chrome, the link to page1.html says it doesn't exist, and the CSS won't show up.当我尝试在 Chrome 中运行 index.html 时，指向 page1.html 的链接说它不存在，并且 CSS 不会出现。 They're all in the same folder, I've saved all the files, and I'm running on Chrome.它们都在同一个文件夹中，我已经保存了所有文件，并且我正在 Chrome 上运行。 Every other solution I've found refers to making a typo, the directories being different, etc. but as said, they're all in the same folder, and I haven't noticed a typo (but it's entirely possible when you're too close to your code).我发现的所有其他解决方案都是指拼写错误，目录不同等，但如上所述，它们都在同一个文件夹中，我没有注意到拼写错误（但是当你是太接近你的代码）。
6 个解决方案
解决方案1
1 2019-09-18 22:35:42
First off, you're not even using the tag anywhere in your code, so that's why the style isn't showing up.首先，您甚至没有在代码中的任何地方使用标签，所以这就是样式没有出现的原因。 Secondly, if they are in the same folder, just link your about page to page1.html;其次，如果它们在同一个文件夹中，只需将您的关于页面链接到 page1.html； not the full directory listings.不是完整的目录列表。
解决方案2
1 2019-09-18 22:51:21
You are using typographical quotes in your links' href attributes, which won't work.您在链接的 href 属性中使用了印刷引号，这是行不通的。 Change those to regular quotes.将它们更改为常规引号。
解决方案3
0 2019-09-18 22:38:49
Let the link be this way instead href=”page1.html”让链接改为这种方式 href=”page1.html”
解决方案4
0 2019-09-18 22:49:12
You might want to put a link to your CSS file on all your pages, I don't see it on your page1.html You probably already know about this resource but I mention it just in case you don't: W3 Schools is very handy for a quick reference to a lot of HTML/CSS questions.您可能想在所有页面上放置指向 CSS 文件的链接，我在您的页面上看不到它1.html您可能已经知道这个资源，但我提到它以防万一方便快速参考大量 HTML/CSS 问题。
解决方案5
0 2019-09-18 23:03:57
So you have two issues:所以你有两个问题：
- For page1.html, would suggest adding file:// or file:/// to the beginning of the href element, or maybe retyping the line since the other links worked对于 page1.html，建议将 file:// 或 file:/// 添加到 href 元素的开头，或者可能重新键入该行，因为其他链接有效
- For your CSS, remove the tag, it's for when you put the style inside the HTML file(embedded)对于您的 CSS，删除标签，它用于将样式放入 HTML 文件（嵌入）中
解决方案6
0 2021-11-14 18:39:32
This isn't an issue with your code.这不是您的代码的问题。 I was having the same exact problem too and i recently discovered that the problem likely lies in the IDE that you're using.我也遇到了同样的问题，我最近发现问题可能出在您正在使用的 IDE 上。 I was using stackblitz and recived the same output.我正在使用 stackblitz 并收到相同的 output。 But when i switched to an online compiler and litteraly copy & pasted the code with the same file names, the code started working correctly.但是，当我切换到在线编译器并逐字复制并粘贴具有相同文件名的代码时，代码开始正常工作。 Try using an online compiler and see how that works out for you.尝试使用在线编译器，看看效果如何。 It worked for me.它对我有用。
The compiler I used is: https://www.onlinegdb.com/我使用的编译器是： https://www.onlinegdb.com/
make sure to switch the languate to HTML using the language dropdown on the top right corner.确保使用右上角的语言下拉菜单将语言切换为 HTML。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.