在不同文件夹中链接html和css文件

我有源代码从链接下载并试图了解它们如何链接彼此。我不熟悉像html，css，js等Web应用程序工具。所以我很难理解。在不同文件夹中链接html和css文件

的文件夹结构是

-public_html 
      |_index.html 
      |_home 
        |_controllers 
           |_HomeCtrl.js 
        |_views 
         |_home.html 
        |_module.js

的index.html具有

<html> 
    <head> 
     <title>TODO supply a title</title> 
     <meta charset="UTF-8"> 
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> 

     <!-- Basic Styles --> 
     <link rel="stylesheet" type="text/css" media="screen" href="styles/css/bootstrap.min.css"> 
     <link rel="stylesheet" type="text/css" media="screen" href="styles/css/font-awesome.min.css"> 
     <link rel="stylesheet" type="text/css" media="screen" href="styles/fonts/line-icons/line-icons.css"> 

     <!-- Bootstrap CSS --> 
     <link rel="stylesheet" type="text/css" media="screen" href="styles/css/jasny-bootstrap.min.css"> 
     <link rel="stylesheet" type="text/css" media="screen" href="styles/css/material-kit.css"> 
     <!-- Main Styles --> 
     <link rel="stylesheet" type="text/css" media="screen" href="styles/css/main.css"> 
     <!-- custom Styles --> 
     <link rel="stylesheet" type="text/css" media="screen" href="styles/css/custom.css"> 
     <!-- Responsive CSS Styles --> 
     <link rel="stylesheet" type="text/css" media="screen" href="styles/css/responsive.css"> 
     <!-- Slicknav js --> 
     <link rel="stylesheet" type="text/css" media="screen" href="styles/css/slicknav.css"> 
     <!-- Bootstrap Select --> 
     <link rel="stylesheet" type="text/css" media="screen" href="styles/css/bootstrap-select.min.css"> 


     <link rel="shortcut icon" href="styles/img/favicon/favicon.ico" type="image/x-icon"> 
     <link rel="apple-touch-icon" href="styles/img/splash/sptouch-icon-iphone.png"> 
     <link rel="apple-touch-icon" sizes="76x76" href="styles/img/splash/touch-icon-ipad.png"> 
     <link rel="apple-touch-icon" sizes="120x120" href="styles/img/splash/touch-icon-iphone-retina.png"> 
     <link rel="apple-touch-icon" sizes="152x152" href="styles/img/splash/touch-icon-ipad-retina.png"> 

     <!-- iOS web-app metas : hides Safari UI Components and Changes Status Bar Appearance --> 
     <meta name="apple-mobile-web-app-capable" content="yes"> 
     <meta name="apple-mobile-web-app-status-bar-style" content="black"> 

     <!-- Startup image for web apps --> 
     <!-- 
     <link rel="apple-touch-startup-image" href="styles/img/splash/ipad-landscape.png" media="screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape)"> 
     <link rel="apple-touch-startup-image" href="styles/img/splash/ipad-portrait.png" media="screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait)"> 
     <link rel="apple-touch-startup-image" href="styles/img/splash/iphone.png" media="screen and (max-device-width: 320px)"> 
     --> 
    </head> 
    <body> 
     <div><?php include('/app/home/views/home.html'); ?></div> 

    </body> 
</html>

HomeCtrl.js具有

'use strict'; 

angular.module('app.home').controller('HomeController', function ($scope) { 


});

home.html做为具有

<!-- Start intro section --> 
<section id="intro" class="section-intro"> 
    <div class="overlay"> 
    <div class="container"> 
     <div class="main-text"> 
     <h1 class="intro-title">Welcome To <span ><strong>Test</strong>Page</span></h1> 
     <p class="sub-title">Search for property, jobs and more</p> 

     <!-- Start Search box --> 
     <div class="row row-centered"> 
      <div class="search-bar col-centered"> 
      <div class="advanced-search"> 
       <div class="row row-centered"> 
        <div class="col-md-6 col-sm-6 col-xs-12 col-centered"> 
        <button class="btn btn-common btn-search btn-block"><strong>Model</strong></button> 
        </div> 
        <div class="col-md-6 col-sm-6 col-xs-12 col-centered"> 
        <button class="btn btn-common btn-search btn-block"><strong>Actress</strong></button> 
        </div> 
       </div> 
       <form class="search-form" method="get"></form> 
      </div> 
      <!-- </form> --> 
      </div> 
     </div> 
     <!-- End Search box --> 
     </div> 
    </div> 
    </div> 
</section> 
<!-- end intro section --> 

<div class="wrapper"> 
    <!-- Categories Homepage Section Start --> 
    <section id="categories-homepage"> 
    <div class="container"> 
     <div class="row"> 
     <div class="col-md-12"> 
      <h3 class="section-title">Browse Ads from 8 Categories</h3> 
     </div>   
     <div class="col-md-3 col-sm-6 col-xs-12"> 
      <div class="category-box border-1 wow fadeInUpQuick" data-wow-delay="0.3s"> 
      <div class="icon"> 
       <a href="#"><i class="lnr lnr-store color-1"></i></a> 
      </div> 
      <div class="category-header"> 
       <a href="#"></a> 
      </div> 
      <div class="category-content row-centered"> 
       <div class="category-body"><h3 class="col-centered">Lady</h3></div> 

      </div> 
      </div> 
     </div> 
     <div class="col-md-3 col-sm-6 col-xs-12"> 
      <div class="category-box border-5 wow fadeInUpQuick" data-wow-delay="1.5s"> 
      <div class="icon"> 
       <a href="#"><i class="lnr lnr-briefcase color-5"></i></a> 
      </div> 
      <div class="category-header"> 
       <a href="#"></a> 
      </div> 
      <div class="category-content row-centered"> 
        <div class="category-body"><h3 class="col-centered">Business</h3></div> 
      </div> 
      </div> 
     </div> 
     <div class="col-md-3 col-sm-6 col-xs-12"> 
      <div class="category-box border-6 wow fadeInUpQuick" data-wow-delay="1.8s"> 
      <div class="icon"> 
       <a href="#"><i class="lnr lnr-graduation-hat color-6"></i></a> 
      </div> 
      <div class="category-header"> 
       <a href="#"></a> 
      </div> 
      <div class="category-content row-centered"> 
        <div class="category-body"><h3 class="col-centered">Men</h3></div> 
      </div> 
      </div> 
     </div> 
     <div class="col-md-3 col-sm-6 col-xs-12"> 
      <div class="category-box border-7 wow fadeInUpQuick" data-wow-delay="2.1s"> 
      <div class="icon"> 
       <a href="#"><i class="lnr lnr-apartment color-7"></i></a> 
      </div> 
      <div class="category-header"> 
       <a href="#"></a> 
      </div> 
      <div class="category-content row-centered"> 
        <div class="category-body"><h3 class="col-centered">Kids</h3></div> 
      </div> 
      </div> 
     </div>    
     <div class="col-md-3 col-sm-6 col-xs-12"> 
      <div class="category-box border-8 wow fadeInUpQuick" data-wow-delay="2.3s"> 
      <div class="icon"> 
       <a href="#"><i class="lnr lnr-car color-8"></i></a> 
      </div> 
      <div class="category-header"> 
       <a href="#"></a> 
      </div> 
      <div class="category-content row-centered"> 
        <div class="category-body"><h3 class="col-centered">Travel</h3></div> 
      </div> 
      </div> 
     </div> 
     <div class="col-md-3 col-sm-6 col-xs-12"> 
      <div class="category-box border-2 wow fadeInUpQuick" data-wow-delay="0.6s"> 
      <div class="icon"> 
       <a href="#"><i class="fa fa-laptop fa-5x color-2" aria-hidden="true"></i></a> 
      </div> 
      <div class="category-header"> 
       <a href="#"></a> 
      </div> 
      <div class="category-content row-centered"> 
       <div class="category-body"><h3 class="col-centered">Actors</h3></div> 
      </div> 
      </div> 
     </div> 
      <div class="col-md-3 col-sm-6 col-xs-12"> 
      <div class="category-box border-4 wow fadeInUpQuick" data-wow-delay="1.2s"> 
      <div class="icon"> 
       <a href="#"><i class="lnr lnr-cart color-4"></i></a> 
      </div> 
      <div class="category-header"> 
       <a href="#"></a> 
      </div> 
      <div class="category-content row-centered"> 
        <div class="category-body"><h3 class="col-centered">Shopping</h3></div> 
      </div> 
      </div> 
     </div> 
     <div class="col-md-3 col-sm-6 col-xs-12"> 
      <div class="category-box border-3 wow fadeInUpQuick" data-wow-delay="0.9s"> 
      <div class="icon"> 
       <a href="#"><i class="lnr lnr-cog color-3"></i></a> 
      </div> 
      <div class="category-header "> 
       <a href="#"></a> 
      </div> 
      <div class="category-content row-centered"> 
        <div class="category-body"><h3 class="col-centered">Services</h3></div> 
      </div> 
      </div> 
     </div> 
     </div> 
    </div> 
    </section> 
    <!-- Categories Homepage Section End --> 
</div> 

<!-- Counter Section Start --> 
<section id="counter"> 
    <div class="container"> 
    <div class="row"> 
     <div class="col-md-3 col-sm-6 col-xs-12"> 
     <div class="counting wow fadeInDownQuick" data-wow-delay=".5s"> 
      <div class="icon"> 
      <span> 
       <i class="lnr lnr-tag"></i> 
      </span> 
      </div> 
      <div class="desc"> 
      <h3 class="counter">12090</h3> 
      <p>Regular Ads</p> 
      </div> 
     </div> 
     </div> 
     <div class="col-md-3 col-sm-6 col-xs-12"> 
     <div class="counting wow fadeInDownQuick" data-wow-delay="1s"> 
      <div class="icon"> 
      <span> 
       <i class="lnr lnr-map"></i> 
      </span> 
      </div> 
      <div class="desc"> 
      <h3 class="counter">350</h3> 
      <p>Locations</p> 
      </div> 
     </div> 
     </div> 
     <div class="col-md-3 col-sm-6 col-xs-12"> 
     <div class="counting wow fadeInDownQuick" data-wow-delay="1.5s"> 
      <div class="icon"> 
      <span> 
       <i class="lnr lnr-users"></i> 
      </span> 
      </div> 
      <div class="desc"> 
      <h3 class="counter">23453</h3> 
      <p>Reguler Members</p> 
      </div> 
     </div> 
     </div> 
     <div class="col-md-3 col-sm-6 col-xs-12"> 
     <div class="counting wow fadeInDownQuick" data-wow-delay="2s"> 
      <div class="icon"> 
      <span> 
       <i class="lnr lnr-license"></i> 
      </span> 
      </div> 
      <div class="desc"> 
      <h3 class="counter">150</h3> 
      <p>Premium Ads</p> 
      </div> 
     </div> 
     </div> 
    </div> 
    </div> 
</section> 
<!-- Counter Section End -->

个

module.js有

"use strict"; 


angular.module('app.home', ['ui.router']) 
.config(function ($stateProvider) { 

    $stateProvider 
     .state('app.home', { 
      url: '/home', 
      data: { 
       title: 'Blank' 
      }, 
      views: { 
       "[email protected]": { 
        templateUrl: 'app/home/views/home.html', 
        controller: 'HomeController' 
       } 
      } 
     }) 
});

如果我复制和包括home.html的所有内容复制到身体里面的index.html，我可以看到主页。但我只想包括文件名使用<div><?php include(); ?></div> 我试图包括为<div><?php include(/home/views/home.html); ?></div> 但没有出来。

有人可以解释我

（1）什么是分裂的文件夹控制器，和家庭内意见的优势在哪里？

（2）这些js文件的目的是什么，HomeCtrl.js和module.js？

（3）如何从index.html调用home.html？

感谢

EDIT1：我还有一个文件app.js，它有

'use strict'; 

/** 
* @ngdoc overview 
* @name app [smartadminApp] 
* @description 
* # app [smartadminApp] 
* 
* Main module of the application. 
*/ 

var app = angular.module('app', [ 
    'ngSanitize', 
    'ngAnimate', 

    'restangular', 
    'ui.router', 
    'ui.bootstrap', 

    // Smartadmin Angular Common Module 
    'SmartAdmin', 

    // App 
    'app.auth', 
    'app.layout', 
    'app.consumers', 
    //'app.chat', 
    //'app.dashboard', 
    //'app.calendar', 
    //'app.inbox', 
    //'app.graphs', 
    //'app.tables', 
    //'app.forms', 
    //'app.ui', 
    //'app.widgets', 
    //'app.maps', 
    //'app.appViews', 
    //'app.misc', 
    //'app.smartAdmin', 
    //'app.eCommerce' 
    'app.home' 
]) 
    .config(function ($provide, $httpProvider, RestangularProvider) { 


     // Intercept http calls. 
     $provide.factory('ErrorHttpInterceptor', function ($q) { 
      var errorCounter = 0; 
      function notifyError(rejection) { 
       console.log(rejection); 
       $.bigBox({ 
        title: rejection.status + ' ' + rejection.statusText, 
        content: rejection.data, 
        color: "#C46A69", 
        icon: "fa fa-warning shake animated", 
        number: ++errorCounter, 
        timeout: 6000 
       }); 
      } 

      return { 
       // On request failure 
       requestError: function (rejection) { 
        // show notification 
        notifyError(rejection); 

        // Return the promise rejection. 
        return $q.reject(rejection); 
       }, 

       // On response failure 
       responseError: function (rejection) { 
        // show notification 
        notifyError(rejection); 
        // Return the promise rejection. 
        return $q.reject(rejection); 
       } 
      }; 
     }); 

     // Add the interceptor to the $httpProvider. 
     $httpProvider.interceptors.push('ErrorHttpInterceptor'); 

     RestangularProvider.setBaseUrl(location.pathname.replace(/[^\/]+?$/, '')); 

    }) 
    .constant('APP_CONFIG', window.appConfig) 

    .run(function ($rootScope 
     , $state, $stateParams) { 
     $rootScope.$state = $state; 
     $rootScope.$stateParams = $stateParams; 

     // editableOptions.theme = 'bs3'; 

    }); 
var httpApiConfig = { 
    headers: { 
     'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8;', 
     headers: { 'Content-Type': 'application/json' }, 
    } 
}; 
app.constant('httpApiConfig', httpApiConfig)

来源

2016-10-11 batuman

这是webapp基于angularjs 1.x.我建议阅读它的文档以找到答案：（https://angularjs.org/）。至于代码中的所有文件夹 - 如果项目代码库超过特定大小，则在源代码中使用结构是一种很好的做法。您的项目结构如何构成*几乎取决于您。（几乎是因为用于生成缩小应用程序或css的一些工具（如果使用的话）可能期望某些文件夹结构）。 –

https://www.tutorialspoint.com/mvc_framework/mvc_framework_introduction.htm –

如果您在连接'home.html'时遇到问题，您可以尝试'<？php echo getcwd（）; ？>来获取当前的工作目录。 –

1 - 什么是分裂的文件夹作为控制器的优势，并享有里面的家？

层次的目标是让（你几乎可以想得到你想要的）：

模块/
- 控制器/
- 查看/

这是一种常见模式，请尝试搜索MVC'Module/View/Contro ller'

2 - 这些js文件的目的是什么，HomeCtrl.js和module.js？

你必须学会AngularJS

这里module.js是模块Home 它还包含路由此模块的配置文件。

而且HomeCtrl.js是控制它在这里你必须把你的data和你UI

3之间的逻辑 - 如何从命名为index.html home.html的？

首先你必须加载所有的JS文件的<script>标签那么你的身体看起来像这样的事情

<body ng-app="app"> 
    <div ui-view="content"></div> 

    <!-- put below all of you js files --> 
    <!-- angular.js/main.js /app.js/controllerFiles.js etc ... --> 
</body>

来源

2016-10-11 08:58:49

谢谢。在这种情况下，我应该如何从index.html调用home.html？ – batuman

你不能用php加载它，你必须加载角度。你有'app.js'或类似的东西吗？ –

是的，我有app.js和main.js。 – batuman

看来你是使用angularJS，根据函数名。

模型/视图/控制器是允许程序员/设计师专注于他们最有什么样的方法，他们并不需要知道在系统做修改和发展的一切。

简要（并不总是正确的，因为长期MVC已经有很多的解释）

型号/控制器：后端（服务器端）的东西。视图：设计用户将实际看到的界面。它显示由控制器提供的变体和信息，或将用户输入传递给控制器来执行某些操作。

在这种情况下，

网页设计师只需要做的UI和CSS的部分，当他们需要的东西，从数据库中，他们只是他们的HTML/CSS/JS中添加一个标签。相比之下，代码/后端开发人员不必关心如何构建漂亮的用户界面，但只需将注意力集中在输出必要的字符串到前端。

阅读与“模型 - 视图 - 控制器”相关的文章应该有助于您更好地理解他们如何以及为什么这么做。

来源

2016-10-11 09:08:44 HZS

好的，我会回答你的，但会提供部分答案作为链接，因为它听起来像你真正需要的是阅读一些关于主题。

首先，将index.html更改为index.php，并根据需要更改标签;服务器不能识别你把它放到一个html文件中（除非你修改了htaccess文件，而只是把它变成一个php文件）。

将代码分解成不同文件夹/类的好处在于，对于了解MVC体系结构（可以在fx wikipedia上找到它的介绍）的人来说，它变得更加清晰，其中放置了什么功能。在我看来，你正在帮自己学习it的基础知识。虽然它最初是为Java开发的，并且它在网络开发中的使用有些争议。 MVC架构/模式还可以帮助促进低耦合和高内聚。

.js文件的功能......好吧，它最初看起来像是在使用Angular。JS（一个框架），但我无法找到我期望的包含。但是如果你想学习一些关于使用Angular的知识，你可以这样做here。

来源

2016-10-11 09:11:45 RasmusLD

谢谢，我想学习和感谢提供的链接。 – batuman

在不同文件夹中链接html和css文件

回答

相关问题