☰

index.html 是否包含所有文件？

tag-icon • tag-icon filesystems html
index.html 是否包含所有文件？

我很困惑，浏览器怎么能把不同的文件放在一起运行呢？每个网站的前端文件都分散在不同的文件夹中。我在 Chrome 开发者工具的“源”中看到了这一点。

但后来我发现了一个名为 index.html 的文件，它非常大。然后，我意识到它可能作为单个文件执行，并且可能包含我在结构化文件夹中看到的所有文件。我正在这样做，但它很长，即使对于小型网站也是如此。

那么 index.html 文件是否包含所有这些小文件，或者在某个时候调用它们？它是单独执行的吗？我之前以为这些下属文件可能按顺序运行，但我不明白它是怎么做到的。

此外，一般来说，计算机/IDE 环境/浏览器是否也只执行单个文件，而不是存储在不同文件夹中的多个文件 - 尽管它可以引用系统中链接在主文件中的那些小型辅助文件？

虽然 StackOverflow 上有一个关于此问题的答案，但其措辞似乎过于技术性。它是：

一些网站是由许多实际的 html 文件构建的，而其他更动态的网站通常看起来像是由许多 html 页面组成，但实际上它们只有一个入口页面（如 index.php）来处理所有请求并根据 url 生成输出。

我是 Web 开发新手，因此这将会很有帮助。

编辑：- 这是我的错误，因为我对编程这些事情还不熟悉，所以我不理解你们。我感谢每一个容忍我愚蠢行为的人，但现在我已经了解了这个问题背后的全部想法。谢谢！

答案1

index.html 是否包含结构化文件夹中看到的所有文件？

我找到了一个名为 index.html 的文件，它非常大。然后，我意识到它可能作为单个文件执行，并且可能包含我在结构化文件夹中看到的所有文件。

不，我怀疑只有极少数网站使用单个脚本（例如 index.php）来保存整个网站内容。这样做没有充分的理由。这是一个奇怪的想法 - 虽然可能有一两种非常神秘的情况可能会有用。

单个 index.html 通常会托管单个页面的静态内容。

如果您的整个网站都在一个 index.html 文件中，那么普通的 Web 服务器（Apache、IIS 等）只会将整个文件传输到客户端，客户端会对其进行解释并运行任何嵌入的可执行元素（如 Javascript）。除了最小、最琐碎的网站外，这种提供页面的方式效率极低。

index.html 有什么特别之处？

与其他 html 文件相比，的唯一特殊之处在于index.html，大多数 Web 服务器在收到缺少可解释为文件名的 HTTP 请求时会查找 index.html（通常还有其他类似名称的文件）。例如，http://example.com/tutorial可能会导致 Web 服务器查找在指定为 example.com 网站的文档根目录的子文件夹index.html中命名的文件。tutorial

html 文件中有什么？

任何 html 文件都可以包含内联样式，可以作为 CSS 块或附加到单个元素。

html 文件还可以包含对外部 CSS 文件的引用。这使得一组页面的样式易于保持一致。

我可以使用一些简化的 HTML 来说明这一点。如果您将其剪切并粘贴到名为 example.html 的文件中，然后单击它们以在浏览器中打开它们，它将正常呈现 - 但不符合当前规范（我想让示例保持简短）

文件example1.html

<html>
  <head>
     <title>Example</title>
     <style>
        h1 { color:red; }
     </style>
  </head>
  <body>
    <h1>Hello</h1>
  </body>      
</html>

看起来和example2.html

<html>
  <head>
     <title>Example</title>
  </head>
  <body>
    <h1 style="color: red;">Hello</h1>
  </body>      
</html>

和example3.html

<html>
  <head>
     <title>Example</title>
     <link rel="stylesheet" media="screen,print" 
           href="/example.css">
  </head>
  <body>
    <h1>Hello</h1>
  </body>      
</html>

和example.css

h1 { color: red; }

对于具有一致视觉标识的多页网站来说，最后一种方法可以说是三种方法中最好的。

HTML 文件通常会引用单独的图像文件和其他内容。因此，要正确呈现页面，您需要一组文件，而不仅仅是一个 HTML 文件。

您不需要网络服务器来处理这种静态 HTML。

网络浏览器和网络服务器如何协同工作？

网络浏览器首先会向服务器请求 HTML。网络服务器通常只会发送 HTML 文件的内容，而不会扩充、合并、解析、处理或执行 HTML 文件的任何内容。

然后，网络浏览器将解析 HTML 以查找对外部资源的引用，并从网络服务器单独下载这些资源，以完成网页的渲染。请注意，网络浏览器将缓存 CSS 文件等，这样它就不需要再次向网络服务器请求后续网页引用的相同 CSS 文件。这减少了网络使用量，从而加快了处理速度。

只有当网站是动态的而非静态的时，网络服务器才会执行额外的操作。例如，处理服务器解析的 HTML ( example.shtml) 或 PHP ( example.php)，或者当涉及 Java 或其他后端技术时 - 这在当今非常常见，但除非您对静态 HTML 和 CSS 有深入的了解，否则不应研究这些技术。

入门

我是网络开发新手

建议：

  • 每个网页都以一个静态 HTML 文件开始。
  • 了解样式和内容的分离。语义标记。
  • 将样式移至通用 CSS 文件中
  • 学习关于响应式设计仅使用 HTML5 和 CSS3
  • 使用一两个动态页面（例如 PHP）增强静态网站
  • 也许可以学习一些 Javascript。不要使用 Javascript 来做 HTML5+CSS3 可以做的事情。

然后对各种网络技术进行一些一般性研究

答案2

如果用户未指定任何文件，则 index.html 就是打开的文件。

也就是说，如果用户调用https://superuser.com（与https://superuser.com/specific-page.html), 文件specific-page.html不存在, 但是此目录中存在index.html, 则Web服务器将index.html的内容返回给用户/浏览器。

相关内容