如何在html中安全地加载外部资源

我是Web开发人员的初学者。我创建了一个加载外部源的登录网页。如何在html中安全地加载外部资源

这里是我的代码：

<!DOCTYPE html> 
<html> 
    <head> 
    <title> 
     Login 
    </title> 

    <link href="http://fonts.googleapis.com/css?family=Lato:100,300,400,700" media="all" rel="stylesheet" type="text/css" /> 
    <link href="stylesheets/bootstrap.min.css" media="all" rel="stylesheet" type="text/css" /> 
    <link href="stylesheets/font-awesome.css" media="all" rel="stylesheet" type="text/css" /> 
    <link href="stylesheets/se7en-font.css" media="all" rel="stylesheet" type="text/css" /> 
    <link href="stylesheets/style.css" media="all" rel="stylesheet" type="text/css" /> 

    <script src="http://code.jquery.com/jquery-1.10.2.min.js" type="text/javascript"></script> 
    <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js" type="text/javascript"></script> 
    <script src="javascripts/bootstrap.min.js" type="text/javascript"></script> 
    <script src="javascripts/raphael.min.js" type="text/javascript"></script> 
    <script src="javascripts/jquery.mousewheel.js" type="text/javascript"></script> 
    <script src="javascripts/jquery.vmap.min.js" type="text/javascript"></script> 
    <script src="javascripts/jquery.vmap.sampledata.js" type="text/javascript"></script> 
    <script src="javascripts/jquery.vmap.world.js" type="text/javascript"></script> 
    <script src="javascripts/jquery.bootstrap.wizard.js" type="text/javascript"></script> 
    <script src="javascripts/fullcalendar.min.js" type="text/javascript"></script> 
    <script src="javascripts/gcal.js" type="text/javascript"></script> 
    <script src="javascripts/jquery.dataTables.min.js" type="text/javascript"></script> 
    <script src="javascripts/datatable-editable.js" type="text/javascript"></script> 
    <script src="javascripts/jquery.easy-pie-chart.js" type="text/javascript"></script> 
    <script src="javascripts/excanvas.min.js" type="text/javascript"></script> 
    <script src="javascripts/jquery.isotope.min.js" type="text/javascript"></script> 
    <script src="javascripts/masonry.min.js" type="text/javascript"></script> 
    <script src="javascripts/modernizr.custom.js" type="text/javascript"></script> 
    <script src="javascripts/jquery.fancybox.pack.js" type="text/javascript"></script> 
    <script src="javascripts/select2.js" type="text/javascript"></script> 
    <script src="javascripts/styleswitcher.js" type="text/javascript"></script> 
    <script src="javascripts/wysiwyg.js" type="text/javascript"></script> 
    <script src="javascripts/jquery.inputmask.min.js" type="text/javascript"></script> 
    <script src="javascripts/jquery.validate.js" type="text/javascript"></script> 
    <script src="javascripts/bootstrap-fileupload.js" type="text/javascript"></script> 
    <script src="javascripts/bootstrap-datepicker.js" type="text/javascript"></script> 
    <script src="javascripts/bootstrap-timepicker.js" type="text/javascript"></script> 
    <script src="javascripts/bootstrap-colorpicker.js" type="text/javascript"></script> 
    <script src="javascripts/bootstrap-switch.min.js" type="text/javascript"></script> 
    <script src="javascripts/daterange-picker.js" type="text/javascript"></script> 
    <script src="javascripts/date.js" type="text/javascript"></script> 
    <script src="javascripts/morris.min.js" type="text/javascript"></script> 
    <script src="javascripts/skycons.js" type="text/javascript"></script> 
    <script src="javascripts/jquery.sparkline.min.js" type="text/javascript"></script> 
    <script src="javascripts/fitvids.js" type="text/javascript"></script> 
    <script src="javascripts/main.js" type="text/javascript"></script> 
    <script src="javascripts/respond.js" type="text/javascript"></script> 

    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport"> 
    </head> 
    <body class="login3"> 

    <!-- Login Screen --> 
    <div class="login-wrapper"> 
     <div class="login-container"> 

     <!-- <a href="./"><img width="230" height="45" src="images/img_wowlamp_login.png" /></a> --> 
     <img width="230" height="45" src="images/img_wowlamp_login.png" /> 

     <form action="login.html" method="post"> 

      <div class="form-group"> 
      <input class="form-control" placeholder="User Name" type="text" name="user"> 
      </div> 

      <div class="form-group"> 
      <input class="form-control" placeholder="Password" type="text" name="password"> 
      </div> 

      </br> 

      <font size="2" color="#0000ff"><a href="./"><script>getParameterByName('test')</script></a></font> 

      <div class="form-group"> 
       <input class="btn btn-lg btn-primary btn-block" style="margin-top:30px" type="submit" value="Log in"> 
      </div> 

     </form> 

     <!-- <font size="2"><font color="#fffff">No account yet?&nbsp&nbsp</font><a href="./"><font color="#FF3838">Sign up here!</font></a></font> --> 

     </div> <!-- login-wrapper --> 
    </div> <!-- login-container --> 
    <!-- End Login Screen --> 

    </body> 
</html>

正如你所看到的来源是HTTP。如果我这次加载网页。甲盾图标将出现在浏览器的右上角问我是否需要加载不安全的脚本