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基础 html
-
html中引入外部文件 博客分类: html基础 html
-
码云提交代码过程 博客分类: html基础 html
-
html中引入外部文件 博客分类: html基础 html
-
快速處理HTML/XML文件 博客分类: ruby programming html_parser XMLHTMLjQueryrubygemsjruby
-
IE8 中"HTML Parsing Error:Unable to modify the parent container element before th 博客分类: Web前端_Javascript
-
图片在表格中位置的确定 博客分类: 2006年以前项目总结 HTML
-
SMIL 2.0 基础教程[转] 博客分类: 每日问题总结html smil
-
HTML&CSS基础学习笔记1.29-灵活地使用样式 博客分类: HTML css添加样式外链
-
HTML&CSS基础学习笔记1.31-像素和相对长度 博客分类: HTML