Question

我使用HTML5，CSS3和jQuery创建了小网页。

这是我的index.html代码：

<!DOCTYPE HTML>
<html>
   <?php include("header.html");?>
  <body id="demo-one">
   <div id="fb-root"></div>
<script type="text/javascript">
(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.0";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
      <div id = "wrap">
      <!-- Header --> 
      <header>
      <div id="address">255 Nandanam,  linefocus CT 06810 | + 044 - 4386 1111 | <a href="mailto:info@linefocus.com" class="white">info@linefocus.com</a></div>
        <div id="logo"><img class="header-image" src="img/Untitled-1.png" alt="Church Of Our Lady Of Health - Pattabiram Military Siding" />
        <h5 class="caption">Church Of Our Lady Of Health - Pattabiram Military Siding</h5>
          </div>
                  <!-- Search box --> 
        <form>
          <input type="search" placeholder="Search">
        </form>
          <!-- End Search box --> 
                          <!-- Navigation --> 
        <nav id="menu-wrap">
        </nav>

        <!-- End Navigation -->

      </header>

        <!-- End Header --> 
             <!--main-->
<main class="clearfix"> 
<aside class="sidebar">
<div class="inside">
<section id="content">
</section>
        </div>
            <!-- Youtube palyer-1 -->

    <div class="inside">
    <section class="content">

    </section>
    </div>
                <!-- Youtube palyer-2 -->

    <div class="inside">
    <section class="content">

    </section>
    </div>
            <!-- Facebook Page -->

        <div class="inside">
    <section class="content">
   </section>
    </div>
        <!-- News Feed -->
        <div class="inside">
    <section class="content">

   </section>
   </div>
    </aside>
<!--main content-->

<!--end main--> 
 <!-- #footer -->
 <?php include("footer.html");?>    
<!-- / #footer -->
   </div>
    <script type="text/javascript" src='http://codepen.io/assets/libs/fullpage/jquery.js'></script>
    <script type="text/javascript" src="js/index.js"></script>
    <script type="text/javascript" src="engine1/wowslider.js"></script>
    <script type="text/javascript" src="engine1/script.js"></script>
<!--js--sticky-footer--> 
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script type="text/javascript" src="js/menu.js"></script>
  <script src="js/index-scroll.js"></script>
    </body>
  </html>

这是header.html：

<!DOCTYPE HTML>
<html>
<head>
    <title>Responsive Design Website</title>
    <link rel = "stylesheet" type = "text/css" href = "css/style.css"  media="screen"/>
    <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
    <link rel="stylesheet" href="http://cdn.jsdelivr.net/animatecss/2.1.0/animate.min.css">
    <link href="http://www.jqueryscript.net/css/jquerysctipttop.css" rel="stylesheet" type="text/css">
    <link href="http://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet" />           
    <link rel="stylesheet" type="text/css" href="engine1/style.css" />
    <link href="video-js.css" rel="stylesheet" type="text/css">
    <link rel="shortcut icon" href="img/favicon.ico">
    <script src="video.js"></script>
    <script type="text/javascript" src="engine1/jquery.js"></script>
    <script>
    videojs.options.flash.swf = "video-js.swf";
    </script>
  </head>
  </html>

footer.html：

<!DOCTYPE HTML>
<html>
        <!-- #footer > #links-home -->
        <footer>

        <address itemscope="" itemtype="http://schema.org/LocalBusiness">
        <span class="copyright">Copyright © 2014</span>&nbsp;
        <span class="name" itemprop="legalName"> Church Of Our Lady Of Health.</span>
    </address>
    </footer>
</html>

但我的网页不包含任何样式或任何内容。页面看起来像http://imgur.com/eq8Ubp3

我认为我的代码不正确，我可能知道，我的index.html中的header.html和footer.html需要应用哪些方法或确切内容？

任何人都可以帮我解决这个问题吗？

提前致谢。

Answer 1

为什么你这样做

<!DOCTYPE HTML>
<html>

在你所有的部分观点中？

制作这样的东西

这是header.html：

<head>
    <title>Responsive Design Website</title>
    <link rel = "stylesheet" type = "text/css" href = "css/style.css"  media="screen"/>
    <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
    <link rel="stylesheet" href="http://cdn.jsdelivr.net/animatecss/2.1.0/animate.min.css">
    <link href="http://www.jqueryscript.net/css/jquerysctipttop.css" rel="stylesheet" type="text/css">
    <link href="http://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet" />           
    <link rel="stylesheet" type="text/css" href="engine1/style.css" />
    <link href="video-js.css" rel="stylesheet" type="text/css">
    <link rel="shortcut icon" href="img/favicon.ico">
    <script src="video.js"></script>
    <script type="text/javascript" src="engine1/jquery.js"></script>
    <script>
    videojs.options.flash.swf = "video-js.swf";
    </script>
  </head>

这是footer.html

  <!-- #footer > #links-home -->
        <footer>

        <address itemscope="" itemtype="http://schema.org/LocalBusiness">
        <span class="copyright">Copyright © 2014</span>&nbsp;
        <span class="name" itemprop="legalName"> Church Of Our Lady Of Health.</span>
    </address>
    </footer>

HTML5中的页眉，页脚和index.html中的问题

1 个答案: