在我們製作html頁面的時候常常需要引入一些外部檔案來使自己的工作更加高效，下面我就分享一下，在製作html是本人用到的一些外部檔案引用：

       1.外部引入JavaScript檔案

<script type="text/javascript" src="../javascript/cart_list.js">
    </script>

 如上，便引入了一個名為cart_list的js檔案，使用的是<script>標籤，型別是"text/javascript"，路徑為src，，使用時把JavaScript檔案放到head標籤內即可。這是標準的載入方式，為防止網頁載入緩慢，也可以把非關鍵的JavaScript放到網頁底部.如下

 <script type="text/javascript" src="else_website_link.js"></script>
    </body>
</html> 

 2.css外部檔案的引入

    <link rel="stylesheet" type="text/css" href="../css/navigation.css" />

 如上，引入名為navigation的css檔案，同樣是放到head標籤內與引入js檔案的不同的是需用link標籤，型別是"text/css"，路徑是href。也可以直接在html標籤元素內嵌入css樣式，如

<div style="font-size:14px; color:#FFFFF0;">

 這種在標記的style屬性中設定CSS樣式的方式本質上沒有體現CSS的優勢，但優先順序比外部檔案高，而引入css外部檔案可以設定更加豐富的樣式，也更方便管理。

3.一些外掛的引入 

<script src="../javascript/jquery-3.1.1.js">
<script type="text/javascript" src="../javascript/jquery-tmpl.min.js">
    </script>
    <script type="text/javascript" src="../javascript/lodash.js">
    </script>
 

 以上分別引入jquery,jquery-tmpl,h和lodash三個外掛，我們可以看到實際上與引入外部js檔案沒有什麼不同，因為實際上這些外掛其實就是別人寫好的js檔案，而要注意的是,使用jquery-tmpl這個模板時，其定義如下：

<script id='templateName'  type='text/x-jquery-tmpl'></script>

 在head標籤的script標籤內，採用${key}的形式，如下：

<script id="templateName" type="text/x-jquery-tmpl">
<tr>     
            <td>${Sort}</td>
            <td>${Name}</td>
            <td>${Price}</td>
            <td>${Unit}</td>
<tr>
</script>

 在body內，找到要顯示的位置,

<table id="goods_table">
            <tr>
                <th class="sort">分類</th>
                <th class="name">名稱</th>
                <th class="price">單價(元)</th>
                <th class="unit">單位</th>
                <th class="count">數量</th>
                <th class="subtotal">小計</th>
            </tr>
</table>

$('#templateName'').tmpl(file_name).appendTo('#goods_table');//templateName為模板id,
file_name為要填入模板的檔案goods_table為模板要載入到的頁面的位置

以上就是本人引用外部檔案的一點心得僅供參考