html中引入外部文件 博客分类： html基础 html

       在我们制作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>

 在js文件中调用，

$('#templateName'').tmpl(file_name).appendTo('#goods_table');//templateName为模板id,
file_name为要填入模板的文件goods_table为模板要加载到的页面的位置

以上就是本人引用外部文件的一点心得仅供参考