解析html头中的外部资源答案

【问题标题】：Resolving external resources in html head解析html头中的外部资源
【发布时间】：2016-01-06 18:10:26
【问题描述】：

在下面的代码中，index.html 页面没有按照 index.html 头部链接的 css 和 js 在浏览器中设置样式。在结束正文标记之前还有一个脚本标记。我尝试删除“..”并尝试使用路径无济于事。

index.html 兄弟是文件夹：
css、js 和 jquery.mobile-1.4.5

css文件夹的内容：
index.css

js文件夹内容：
index.js
jquery-1.11.3

jquery.mobile-1.4.5 文件夹内容：

head 标签中的链接会正确解析吗？如果没有，请建议。谢谢

$("header .ui-btn-left").on("tap", drawerToggle);
$(".contentDiv nav").on("swipeleft", drawerClose);
$("ul").children("li").on("tap", navItemHandler);
$(document).on("pagebeforeshow", middleButtonGone);

function drawerToggle() {
   var left = $("nav").offset().left;
   var width = $("nav").width();
   if (left == 0) {
      $("nav").css({
         "left" : -width
      });
   } else {
      $("nav").css({
         "left" : 0
      });
   }
}

function drawerClose() {
   var left = $("nav").offset().left;
   var width = $("nav").width();
   if (left == 0) {
      $("nav").css({
         "left" : -width
      });
   }
}

function drawerOpen() {
   var left = $("nav").offset().left;
   var width = $("nav").width();
   if (left != 0) {
      $("nav").css({
         "left" : 0
      });
   } 
}

function middleButtonToggle() {
   if ($("footer ul").hasClass('ui-grid-b')) {
      $("#extra").hide();
      $("footer ul").removeClass('ui-grid-b').addClass('ui-grid-a').find("li").last().removeClass('ui-block-c').addClass("ui-block-b");
   } else {
      $("#extra").show();
      $("footer ul").removeClass('ui-grid-a').addClass('ui-grid-b').find("li").last().removeClass('ui-block-b').addClass("ui-block-c");
   }
}

function middleButtonGone() {
   if ($("footer ul").hasClass('ui-grid-b')) {
      $("#extra").hide();
      $("footer ul").removeClass('ui-grid-b').addClass('ui-grid-a').find("li").last().removeClass('ui-block-c').addClass("ui-block-b");
   }
}

function navItemHandler() {
   var selected_index = $(this).index();
   drawerClose();
}

nav {
   width: 80%;
   position: fixed;
   background-color: white;
   left: 0;
   top: 2em;
   transition:left 0.3s ease;
}

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8">
      <title>RRR</title>
      <link rel="stylesheet" href="../jquery.mobile-1.4.5/jquery.mobile-1.4.5.css"/>
       <script src="../js/jquery-1.11.3.js"></script>
       <script src="../jquery.mobile-1.4.5/jquery.mobile-1.4.5.js"></script>
      <link rel="stylesheet" href="../css/index.css" />
      <meta name="viewport" content="width=device-width"/>
   </head>

   <body>
      <header data-role="header" data-position="fixed">
         <a class="ui-btn-left ui-btn ui-btn-inline ui-corner-all ui-btn-icon-left ui-icon-bars">Menu</a>
         <h1>Activity label</h1>
         <a class="ui-btn-right ui-btn ui-btn-inline ui-corner-all ui-btn-icon-right ui-icon-gear">Info</a>
      </header>

      <div data-role="content" class="contentDiv">
         <form method="post" action="demoform.asp">
            <input type="text" name="fname" id="fname">
         </form>

         <nav>
            <ul data-role="listview" data-inset="true">
               <li>
                  <a href="#"><img src="css/images/image.png" alt="France" class="ui-li-icon ui-corner-none">France</a>
               </li>
               <li>
                  <a href="#"><img src="css/images/image.png" alt="Germany" class="ui-li-icon">Germany</a>
               </li>
               <li>
                  <a href="#"><img src="css/images/image.png" alt="Great Britain" class="ui-li-icon">Great Britain</a>
               </li>
               <li>
                  <a href="#"><img src="css/images/image.png" alt="Finland" class="ui-li-icon">Finland</a>
               </li>
               <li>
                  <a href="#"><img src="css/images/image.png" alt="United States" class="ui-li-icon ui-corner-none">United States</a>
               </li>
            </ul>
         </nav><!-- /side navigation -->
      </div><!-- /content -->

      <footer data-role="footer" data-position="fixed">
         <div data-role="navbar">
            <ul>
               <li>
                  <button type="submit" data-theme="c">
                     NO
                  </button>
               </li>
               <li id="extra">
                  <button type="submit" data-theme="c">
                     EXTRA
                  </button>
               </li>
               <li>
                  <button type="submit" data-theme="c">
                     YES
                  </button>
               </li>
            </ul>
         </div>
      </footer><!-- footer -->
      <script src="../js/index.js"></script>
   </body>
</html>

index.css

【问题讨论】：

标签： javascript html css

【解决方案1】：

你的路径错误

如果 index.html 是资源文件夹的同级，则文件夹的路径不应该是“../some path”，而应该是“some path”。

在head里改成如下：

<link rel="stylesheet" href="jquery.mobile-1.4.5/jquery.mobile-1.4.5.css"/>
<script src="js/jquery-1.11.3.js"></script>
<script src="jquery.mobile-1.4.5/jquery.mobile-1.4.5.js"></script>
<link rel="stylesheet" href="css/index.css" />

在正文末尾改成如下：

<script src="js/index.js"></script>

了解相对的path's 可能会很好，特别是关于父目录。

【讨论】：