Just like this is my common.html, then other HTML files do not need to be imported. Please find a method. . . . .
<meta name="description" content="Dashboard" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!--Basic Styles-->
<link href="assets/css/bootstrap.min.css" rel="stylesheet" />
<link id="bootstrap-rtl-link" href="" rel="stylesheet" />
<link href="assets/css/font-awesome.min.css" rel="stylesheet" />
<link href="assets/css/weather-icons.min.css" rel="stylesheet" />
<!--Fonts-->
<link href="assets/css/fonts-google.css" type="text/css" rel="stylesheet">
<!--Beyond styles-->
<link id="beyond-link" href="assets/css/beyond.min.css" rel="stylesheet" type="text/css" />
<link href="assets/css/demo.min.css" rel="stylesheet" />
<link href="assets/css/typicons.min.css" rel="stylesheet" />
<link href="assets/css/animate.min.css" rel="stylesheet" />
<link id="skin-link" href="" rel="stylesheet" type="text/css" />
<!--Page Related styles-->
<link href="assets/css/dataTables.bootstrap.css" rel="stylesheet" />
<!--Skin Script: Place this script in head to load scripts for skins and rtl support-->
<script src="assets/js/skins.min.js"></script>
You can only reference a JS file, and then dynamically load the CSS to be loaded.
If there is no solution using only HTML, you can use the template inheritance function in the template template engine. There are many libraries with this function. You can try using jade, which seems to have been renamed pug now.
Template inheritance
Use some framework for single-page applications
What you want is SPA, the same frame, just change the components placed in the frame
Yes, it depends on the scenario. The solutions for different scenarios are also very different
The following is a simple example for reference only
It is recommended to use a packaging tool. I built a scaffolding not long ago and it has this function. You can try it. https://github.com/JakeLaoyu/...