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为模板要加载到的页面的位置

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

相关推荐