Question

我想为多个html页面添加一个公共页眉和页脚，并考虑使用HTML5导入。

但标题没有来......有什么我想念的吗？

我在index.html中使用过。

我的index.html代码：

<html lang="en">
 <head>
  <!-- Basic Page Needs
================================================== -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
 <title>Life</title>

<!-- Mobile Specific Metas
================================================== -->
<meta name="viewport" content="width=device-width, initial-scale=1">

<!-- Favicon -->
<link rel="shortcut icon" type="image/png" href="img/favicon.jpg"/>

<!-- CSS
================================================== -->       
<!-- Bootstrap css file-->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Font awesome css file-->
<link href="css/font-awesome.min.css" rel="stylesheet">
<!-- Superslide css file-->
<link rel="stylesheet" href="css/superslides.css">
<!-- Slick slider css file -->
<link href="css/slick.css" rel="stylesheet"> 
<!-- smooth animate css file -->
<link rel="stylesheet" href="css/animate.css">  
<!-- Elastic grid css file -->
<link rel="stylesheet" href="css/elastic_grid.css"> 
<!-- Circle counter cdn css file -->
<link rel='stylesheet prefetch' href='css/jquery.circliful.css'>    
<!-- Default Theme css file -->
<link id="orginal" href="css/themes/eucalyptus-theme.css" rel="stylesheet">
<!-- Main structure css file -->
<link href="style.css" rel="stylesheet">

<!-- Google fonts -->
<link href='css/opensans.css' rel='stylesheet' type='text/css'>
<link href='css/varela.css' rel='stylesheet' type='text/css'>
<link href='css/montserrat.css' rel='stylesheet' type='text/css'>
</head>
<body> 
 <!-- BEGAIN PRELOADER -->
<div id="preloader">
  <div id="status">&nbsp;</div>
</div>
<!-- END PRELOADER --> 
<!--=========== BEGIN HEADER SECTION ================-->
<header id="header">
<link rel="import" href="header.html">     
</header>
<!--=========== End HEADER SECTION ================--> 
<!--=========== BEGIN ABOUT SECTION ================-->
<br>
<br>
<br>
<br>
            <br>
            <br>
<section id="about">
  <div class="container">
    <div class="row">
      <div class="col-lg-12 col-md-12">
        <div class="about_area">
          <!-- START ABOUT HEADING -->
           <div class="heading">

            <h2>Introduction</h2>
            <br>
            <br>
            <p>Intro content here </p>
          </div>

                </div>
              </div>
            </div>
          </div>


</section>
<!--=========== END ABOUT SECTION ================-->


 <!-- Javascript Files
 ================================================== -->

 <!-- initialize jQuery Library -->
<script src="js/jquery.min.js"></script>
<!-- Google map -->
<script src="js/map_js.js"></script>
<script src="js/jquery.ui.map.js"></script>
 <!-- For smooth animatin  -->
<script src="js/wow.min.js"></script> 
<!-- Bootstrap js -->
<script src="js/bootstrap.min.js"></script>
<!-- superslides slider -->
<script src="js/jquery.superslides.min.js" type="text/javascript"></script>
<!-- slick slider -->
<script src="js/slick.min.js"></script>    
<!-- for circle counter -->
<script src='js/jquery.circliful.min.js'></script>
<!-- for portfolio filter gallery -->
<script src="js/modernizr.custom.js"></script>
<script src="js/classie.js"></script>
<script src="js/elastic_grid.min.js"></script>
<script src="js/portfolio_slider.js"></script>

<!-- Custom js-->
<script src="js/custom.js"></script>
</body>
</html>

截至目前我只考虑了标题。

header.html代码：

    <!-- BEGIN MENU -->
  <div class="menu_area">
    <nav class="navbar navbar-default navbar-fixed-top past-main" role="navigation"> 
      <div class="container">
      <div class="navbar-header">
        <!-- FOR MOBILE VIEW COLLAPSED BUTTON -->
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>



        <!-- TEXT BASED LOGO -->
        <a class="navbar-brand" href="index.html">eXpOS<span>NITC</span></a>


      </div>
      <div id="navbar" class="navbar-collapse collapse">
        <ul id="top-menu" class="nav navbar-nav navbar-right main_nav">
          <li><a href="index.html">Home</a></li>
          <li><a href="Roadmap.html">Roadmap</a></li>
          <li><a href="Documentation.html">Documentation</a></li> 
           <li><a href="#pricing">Downloads</a></li> <!--Change here--> 
           <li><a href="faq.html">FAQ</a></li>
          <li><a href="About_us.html">About Us</a></li>                                     
        </ul>           
      </div>
      </div>     
    </nav>  
  </div>
  <!-- END MENU -->

有没有其他方法可以使用常见的html文件作为标题并调用它？

Answer 1

您在问题中的意思是Apache mod_include。它可以在你的html中包含其他文件。

你会把

 <!--#include file="header.html" -->

启用模块后，

进入您的文件。

对于其他解决方案（显然，<object>标记也有效），请参阅the link by @jezzabeans。

如果你的意思是HTML imports，那么@mplungjan会给link to browser support。似乎Chrome和Opera支持它，但没有其他浏览器支持。（Firefox有一个解决方法，as referenced above）

如何在HTML中使用导入

1 个答案: