如何正确构建我的 HTML 文件？

Posted 2023-02-23

【中文标题】如何正确构建我的 HTML 文件？

【英文标题】：How to structure my HTML files properly?

【发布时间】：2015-09-07 08:09:52

【问题描述】：

对于一个包含几个页面和子页面的基本静态网站，我对 html 页面目录结构的最佳实践有点困惑。

假设我有一个这样的简单网站： 索引（主页）页面、关于、联系和新闻页面。新闻页面上有两个链接，指向新闻页面的两个子页面fizz.html和buzz.html

最好将所有 HTML 页面放在同一个根目录文件夹中，如下所示？

例如。 1

/foobar.com
  /css
  /js
  index.html
  about.html
  contact.html
  news.html
  fizz.html
  buzz.html

或者最好将所有子页面都放在这样的单独目录文件夹中？

例如。 2

/foobar.com
  /css
  /js
  index.html
  about.html
  contact.html
  news.html
  /news
     fizz.html
     buzz.html

或者最好将任何带有子页面的页面都放在它自己的文件夹中？

例如。 3

/foobar.com
  /css
  /js
  index.html
  about.html
  contact.html
  /news
     news.html (maybe named index.html?)
     fizz.html
     buzz.html

如果Ex中的方法。 3 是最好的组织方式，您希望将 news.html 保持原样，还是将其名称更改为 index.html？在后者的情况下，有多个名为 index 的 html 文件是不是很糟糕？是否也有任何由此引起的 SEO 问题？

我目前的测试网站是按照 Ex 构建的。 2，这会导致一个问题，例如：如果用户在www.foobar.com/news/fizz.html，并且他们想回到新闻页面，如果他们碰巧从其中删除了“fizz.html”网址，没用。

所以我猜是 Ex。 3 构建网站的正确方法是什么？我在这里有点困惑。

【参考方案1】：

当我谈到结构时，没有最佳实践，它对你来说是有意义的/最容易管理的。 “生根”一切可能是目前最简单的方法。

也就是说，您要完成的工作通常称为“路由”，即将资源解析为“漂亮”的 URL。默认情况下，大多数服务器端框架都可以实现这一点，但是当您编写静态的东西时，实现类似功能的唯一方法是：

调整您的 .htaccess 文件 依赖于 javascript 框架

Angular 将路由作为插件，但是如果你想要更轻量级的东西，你可以考虑 reactJS（如演示）：

https://enome.github.io/javascript/2014/05/09/lets-create-our-own-router-component-with-react-js.html

或以下任何一种（秘银是另一个不错的选择）：

http://microjs.com/#routing

【讨论】：

谢谢！我也一直想弄乱 .htaccess 。最后我会试试 Angular 或 reactJS。

【参考方案2】：

您应该在分层目录中管理您的内容，以便您可以跟踪您的内容。大多数开发人员都像这样管理那里的内容。

/foobar.com
 /css
 /js
 /images
 /html
      /news
           /news_content
                fizz.html
                buzz.html
           news.html
       about.html
       contact.html
 index.html

【参考方案3】：

为了您的网站的简单性，我会说 Ex。 1 会为你工作。如果您开始添加更多复杂性和更多页面，则可以使用 Ex. 3会更好。

为了回答您问题的后半部分，我将在 Ex 中的 news 目录下将 news.html 转换为 index.html。 3、只是为了让事情更有条理。如果您导航到没有索引文件的新闻目录，您很可能会收到一条禁止消息或授予对该文件夹的访问权限。