在html中创建子页面

Cal*_*ico 8 html css file-structure web

假设我有一个网站http://www.example.com

我想为此页面创建更多子页面,即

www.example.com/faq

www.example.com/contact

等等。

我对网页设计很陌生,我目前的知识扩展到使用 HTML、CSS 和一点 JS 制作基本网站。

Gus*_*Wal 10

您需要为此实例创建名为 faq.html 和 contact.html 的新 HTML 文件。然后您可以使用<a>标签链接到这些页面。

编辑
五年后,这个答案已经开始获得赞成票,但不像这里更长的答案那么完整。以下是更多详细信息:

当您创建额外的 HTML 文件并访问它们时,您会看到 URL 还包含.html-part。这是大多数人不想要的。如果您使用的是网络服务器(本地或第三方主机),则有多种方法可以摆脱扩展——其中一种不需要服务器端脚本,并已在下面的 Stephen 评论中记录

你要做的,就是你添加的文件夹与此时,相应的名称(faqcontact,等)。设置好文件夹后,您所要做的就是将索引文件放入其中 ( index.html)。这些索引文件应包含其各自父文件夹的内容。

本质上,这是重复创建网站根位置的过程,但针对子文件夹。你看,通常你从一个名为 的根文件夹开始public_html,其中有一个索引文件。网络服务器自动提供索引文件

public_html/index.html     -> example.com/index.html
                           -> example.com/

public_html/faq/index.html -> example.com/faq/index.html
                           -> example.com/faq/  ?  
Run Code Online (Sandbox Code Playgroud)

如您所见,完成后,您可以访问

www.example.com/faq
Run Code Online (Sandbox Code Playgroud)

代替

www.example.com/faq/index.html
Run Code Online (Sandbox Code Playgroud)

就像您可以访问一样

www.example.com
Run Code Online (Sandbox Code Playgroud)

代替

www.example.com/index.html
Run Code Online (Sandbox Code Playgroud)

如果您想要更细粒度的控制,最好使用服务器端脚本。无论您使用什么服务器语言,您都可以完全控制人们导航的位置以及他们看到的内容,无论请求是什么样的。

如果您使用的是 Apache 服务器,您可以查看.htaccess文件是什么,尽管编写和调试它们是一项艰巨的 IMO。

  • 要获取问题中使用的 URL,您不能简单地创建 faq.html 和 contact.html 文件。如果你希望 URL 是 `www.example.com/faq.html` 你可以,但如果你真的想要 URL `www.example.com/faq`(没有 .html 扩展名)你必须做其他事情. 一种可能的“其他”是 Michael Aaron Safyan 在他的回答中描述的 `/faq/index.html` 路径。另一种可能性是使用 Apache Web 服务器 `mod_rewrite` 模块。有很多可能性。 (3认同)

Mic*_*yan 6

这完全取决于您的 Web 服务器。您的网络服务器负责将 URL 路径路由到要显示的实际内容。但是,如果您只有静态 HTML 文件(专业网站倾向于使用某种模板语言的 HTML 模板,这些模板会使用某些服务器端编程语言和模板引擎来填充来自数据库和其他来源的数据),大多数 Web 服务器都会,使用默认配置,将子路径路由到与路径同名的目录中的“index.html”文件。但是,这确实因 Web 服务器和 Web 服务器以及配置而异。

换句话说,对于一个简单的网站,这通常就足够了:

website_folder/
   index.html <- this is the homepage
   faq/
     index.html <- this is served from "/faq" and from "/faq/index.html"
   contact/
     index.html <- this is served from "/contact" and "/contact/index.html"
Run Code Online (Sandbox Code Playgroud)

但是,对于专业网站,您会发现这样的情况更为常见:

website_folder/
  templates/
    homepage.tpl <- an HTML template in some templating system.
    faq.tpl         Examples of templating engines include Jinja2,
    contact.tpl     Django, CTemplate, though there are many, many others
  static/
  config/
  lib/
  src/
  ...
Run Code Online (Sandbox Code Playgroud)

网络服务器程序(在这种情况下,我假设它在“src”下,但代码的确切组织因公司而异或从一个项目到另一个项目)为这些不同的路径注册处理程序,并且处理程序被编程填写相应的模板。