欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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

程序员文章站 2024-03-21 16:11:22
...

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

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

 

相关标签: html