编辑：
参见Roko C. Buljan的回答above，它更有说服力。
在未来，我将专注于回答被问到的实际问题。
我是新来的
问得好。你想做的网站的要求超过了静态.html页面所能提供的。
虽然据我所知，你试图从头开始构建可能会很复杂，但正如大卫提到的那样，框架将是一条路。例如，用编程工具“堆栈”构建的nodejs/vuejs应用程序（网站）呈现一个“视图”（页面），并根据用户采取的操作更改页面的内容。
以下是教程：

• nodejs-服务器
• vuejs-应用的视图和大脑。
• MongoDB-您为堆栈样式应用程序引用的数据库。

这些“堆栈”类型的应用程序（网站）减少了用户等待的所有.html页面的文档传输，真正提高了速度和可用性。

这取决于很多东西...
当然，你可以为每个页面都有一个单独的html文件。特别是如果你不想依赖JavaScript的话。然后通过文件夹结构进行路由，你可以通过对指定地址进行GET请求来单独访问每个页面。
我认为PHP和Wordpress改变了这一点，页面 backbone 被来自数据库的数据填充，然后显示给用户。
现在，你的后端通常通过JSON格式向你的前端提供数据。所以你正在访问的页面是Web应用程序的前端。后端等待请求，然后通过提供正确的数据来处理，如果身份验证是OK的。所有这些通常都是使用PHP或任何其他后端语言并使用DB，SQL或NoSQL完成的。
前端只是一个很小的HTML页面，有很好的JavaScript，它只是替换页面中的任何元素，就像你想要的那样，取决于开发者的决定。
Angular或Vue.js

模板化。
根据您要提供的页面类型：主页、版块、文章等，服务器知道如何响应不同的页面请求。
如果页眉代码和页脚代码在多个页面上重复，则应在这些不同的模板中包含此部分
由于您的问题集中在具有 N 个页面的网站上，例如，一个包含许多产品的网站，产品的设计看起来是相同的，因此您所需要的只是指示服务器如何处理特定的路由：
example.com

head  
welcome  
footer

字符集
example.com/products

head 
allProducts  (pagination etc) 
footer

型
example.com/products/101

head  
product<id>  
footer

型
在这里，服务器检测到一个路由请求在/products/之后有一些ID，您的后端逻辑应该使用文章（产品模板），从数据库（图像、图片、标题、描述、内容、价格等）中获取该产品ID，并使用该数据填充该单个模板，然后将其发送到客户端。
这样，无论您拥有多少产品（页面），您都只需要一个HTML模板。
SPA（Single Page App）也遵循同样的原理，只是用AJAX更新内容（不刷新页面）