在我们制作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文件,并调用js文件中的带参函数 1 项目结构 2 编写a.js、test.html //a.js function abc(str){ alert(str); } //test.html <html> <head> [removed][removed] [removed]...
在HTML5中,引入外部样式表是通过`<link>`元素来实现的,这使得网页设计者能够将样式代码(CSS)与结构化内容(HTML)分离,提高代码的可维护性和重用性。下面我们将详细探讨这个过程,并通过一个案例进行实际操作。...
首先,在 ASP.NET 中,可以在两个地方设置接受发送编码:一是在 Web.config 文件中加入 `<system.web><globalization requestEncoding="utf-8" responseEncoding="utf-8" /></system.web>`,二是在 ASPX 页面文件中...
在Vue.js应用中,有时我们需要在特定的组件内部引入外部JavaScript文件,而不是全局引入。这样做的好处是可以避免不必要的资源加载,提高应用性能。本篇将详细介绍三种在Vue组件内部引入外部js文件的方法。 1. 操作...
这篇文章详细介绍了如何在Vue.js项目中引入外部CSS和JS文件的方法。 首先,让我们了解如何引入外部CSS样式文件。在Vue项目中,通常在`.vue`单文件组件的`<style>`标签内直接使用@import语句来引入外部的CSS文件。...
这种方式适用于引入外部的CSS文件,例如全局的基础样式重置文件。例如: ```html <!DOCTYPE html> <html> <title>2imis <div id="app"></div> <!-- built files will be auto injected --> </html> ``` ...
这是引入外部文件的关键步骤。我们需要在HTML代码中添加`<link>`和`<script>`标签,分别引用CSS和JS文件。例如: ```html <script src="/p2pd/rv/usr/jquery-1.7.2.min.js" type="text/javascript"></script> ...
在Vue.js应用中集成Three.js库来加载外部的3D模型,如.obj和.mtl文件,是一种常见的增强网页3D视觉效果的方法。Three.js是一个强大的JavaScript库,它为WebGL提供了一个简单易用的接口,使得在浏览器中创建复杂的3D...
作为一个前端小白,鼓捣了几...然后再我的html文件里面去引入这个外部css: XML/HTML Code复制内容到剪贴板 <link rel=stylesheet type=text/css href=css/style.css> 在浏览器一刷新。。哇,kao。竟然没
在传统的HTML中,JavaScript文件通常通过`<script>`标签在页面头部或者body中引入。这种方式会使得浏览器在解析到`<script>`标签时暂停HTML的渲染,等待JavaScript文件加载和执行完毕。动态加载则改变了这一模式,它...
本示例"html引入高德地图demo"就是这样一个实例,它演示了如何在HTML文件中集成高德地图API,为用户提供地理位置相关的交互体验。高德地图API是高德地图提供的一套JavaScript接口,开发者可以利用它在自己的网页上...
同时,在加载外部HTML文件时,需要处理外部HTML文件中的相对路径问题,可以使用绝对路径来解决该问题。 知识点: 1. VUE中的v-html指令用于加载外部HTML文件的内容。 2. 使用axios进行GET请求来获取外部HTML文件的...
jsp 文件中引用外部.css 或.js 文件的路径问题 在 Web 开发中,引用外部的.css 或.js 文件是非常常见的操作。然而,在 jsp 文件中引用外部.css 或.js 文件的路径问题却是很多开发者容易忽视的细节。本文将详细讲解...
1. **全局引入**:你可以在Unigui项目的`main.js`或`entry.js`这样的入口文件中引入外部JS。这通常用于加载库或框架,如jQuery、Lodash等。例如: ```javascript import 'path/to/your/external-js-file.js'; ```...
3. 当同时引入外部CSS文件和在HTML文件中定义时,内联样式(即HTML文件中的)具有更高的优先级。 除了标签和CSS样式的引入,文档还提到了其它的HTML元素和技术,如: - 标签的使用:这是用于创建链接的标签,其中...
通过这种方式,我们可以在外部文件中使用Vue实例的方法,而不是全局的window对象。具体操作步骤如下: 步骤一:在main.js中导出Vue实例。如上面的代码所示。 步骤二:在需要使用Vue实例的文件中引入main.js。然后...
如果要从一个自定义文件中引入,如`my_module.py`,则可以写`from my_module import some_function`,这样就能直接调用`some_function`了。 在JavaScript中,引入文件有多种方式。在浏览器环境中,可以使用`...