`
张闯闯1994
  • 浏览: 19740 次
  • 性别: Icon_minigender_1
  • 来自: 石家庄
社区版块
存档分类
最新评论

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

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

 

分享到:
评论

相关推荐

    在html中引入外部js文件,并调用带参函数的方法

    在html中引入外部js文件,并调用js文件中的带参函数 1 项目结构 2 编写a.js、test.html //a.js function abc(str){ alert&#40;str&#41;; } //test.html &lt;html&gt; &lt;head&gt; [removed][removed] [removed]...

    在html中引入外部样式表

    在HTML5中,引入外部样式表是通过`&lt;link&gt;`元素来实现的,这使得网页设计者能够将样式代码(CSS)与结构化内容(HTML)分离,提高代码的可维护性和重用性。下面我们将详细探讨这个过程,并通过一个案例进行实际操作。...

    net中引入外部js文件容易产生中文乱码

    首先,在 ASP.NET 中,可以在两个地方设置接受发送编码:一是在 Web.config 文件中加入 `&lt;system.web&gt;&lt;globalization requestEncoding="utf-8" responseEncoding="utf-8" /&gt;&lt;/system.web&gt;`,二是在 ASPX 页面文件中...

    vue组件内部引入外部js文件的方法

    在Vue.js应用中,有时我们需要在特定的组件内部引入外部JavaScript文件,而不是全局引入。这样做的好处是可以避免不必要的资源加载,提高应用性能。本篇将详细介绍三种在Vue组件内部引入外部js文件的方法。 1. 操作...

    vue.js引入外部CSS样式和外部JS文件的方法

    这篇文章详细介绍了如何在Vue.js项目中引入外部CSS和JS文件的方法。 首先,让我们了解如何引入外部CSS样式文件。在Vue项目中,通常在`.vue`单文件组件的`&lt;style&gt;`标签内直接使用@import语句来引入外部的CSS文件。...

    Vue中引入样式文件的方法

    这种方式适用于引入外部的CSS文件,例如全局的基础样式重置文件。例如: ```html &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;title&gt;2imis &lt;div id="app"&gt;&lt;/div&gt; &lt;!-- built files will be auto injected --&gt; &lt;/html&gt; ``` ...

    cognos引入外部JS+CSS 引入jquery 自定义dialogue

    这是引入外部文件的关键步骤。我们需要在HTML代码中添加`&lt;link&gt;`和`&lt;script&gt;`标签,分别引用CSS和JS文件。例如: ```html &lt;script src="/p2pd/rv/usr/jquery-1.7.2.min.js" type="text/javascript"&gt;&lt;/script&gt; ...

    vue使用three.js引入外部obj,mtl模型.zip

    在Vue.js应用中集成Three.js库来加载外部的3D模型,如.obj和.mtl文件,是一种常见的增强网页3D视觉效果的方法。Three.js是一个强大的JavaScript库,它为WebGL提供了一个简单易用的接口,使得在浏览器中创建复杂的3D...

    HTML外部引用CSS文件不生效原因分析及解决办法

    作为一个前端小白,鼓捣了几...然后再我的html文件里面去引入这个外部css: XML/HTML Code复制内容到剪贴板 &lt;link rel=stylesheet type=text/css href=css/style.css&gt;  在浏览器一刷新。。哇,kao。竟然没

    动态加载外部JS文件

    在传统的HTML中,JavaScript文件通常通过`&lt;script&gt;`标签在页面头部或者body中引入。这种方式会使得浏览器在解析到`&lt;script&gt;`标签时暂停HTML的渲染,等待JavaScript文件加载和执行完毕。动态加载则改变了这一模式,它...

    html引入高德地图demo

    本示例"html引入高德地图demo"就是这样一个实例,它演示了如何在HTML文件中集成高德地图API,为用户提供地理位置相关的交互体验。高德地图API是高德地图提供的一套JavaScript接口,开发者可以利用它在自己的网页上...

    VUE页面中加载外部HTML的示例代码

    同时,在加载外部HTML文件时,需要处理外部HTML文件中的相对路径问题,可以使用绝对路径来解决该问题。 知识点: 1. VUE中的v-html指令用于加载外部HTML文件的内容。 2. 使用axios进行GET请求来获取外部HTML文件的...

    jsp文件中引用外部.css或.js文件的路径问题.pdf

    jsp 文件中引用外部.css 或.js 文件的路径问题 在 Web 开发中,引用外部的.css 或.js 文件是非常常见的操作。然而,在 jsp 文件中引用外部.css 或.js 文件的路径问题却是很多开发者容易忽视的细节。本文将详细讲解...

    meta演示 _引入 css 样式文件

    3. 当同时引入外部CSS文件和在HTML文件中定义时,内联样式(即HTML文件中的)具有更高的优先级。 除了标签和CSS样式的引入,文档还提到了其它的HTML元素和技术,如: - 标签的使用:这是用于创建链接的标签,其中...

    vue项目中在外部js文件中直接调用vue实例的方法比如说this

    通过这种方式,我们可以在外部文件中使用Vue实例的方法,而不是全局的window对象。具体操作步骤如下: 步骤一:在main.js中导出Vue实例。如上面的代码所示。 步骤二:在需要使用Vue实例的文件中引入main.js。然后...

    unigui_调用外部js与css

    1. **全局引入**:你可以在Unigui项目的`main.js`或`entry.js`这样的入口文件中引入外部JS。这通常用于加载库或框架,如jQuery、Lodash等。例如: ```javascript import 'path/to/your/external-js-file.js'; ```...

    引入文件

    如果要从一个自定义文件中引入,如`my_module.py`,则可以写`from my_module import some_function`,这样就能直接调用`some_function`了。 在JavaScript中,引入文件有多种方式。在浏览器环境中,可以使用`...

Global site tag (gtag.js) - Google Analytics