html src文件引入

1.相对路径

 (1).如果源文件跟所引用的js文件在同一目录中,直接写上js的文件名就可以了 例如:<script text="javascript" src="javascript.js"></script>

 (2).如果源文件所引用的js文件是在当前目录下的子目录中。直接写上js文件所在的文件夹的名字跟js文件名 例如:<script text="javascript" src="js/javascript.js"></script>

 (3).如果源文件所引用的js文件是在上一级的目录中。使用../返回到上一级目录在写上js文件名 例如:<script text="javascript" src="../javascript.js"></script>

 (4).如果想引用上两级目录,可以..\..\

  • .:代表目前所在的目录,相对路径。 如:<a href="./abc">文本</a><img src="./abc" />
  • ..:代表上一层目录,相对路径。 如:<a href="../abc">文本</a><img src="../abc" />
  • ../../:代表的是上一层目录的上一层目录,相对路径。 如:<img src="../../abc" />
  • /:代表根目录,绝对路径。 如:<a href="/abc">文本</a><img src="/abc" />
  • D:/abc/:代表根目录,绝对路径。

2.绝对路径

引入磁盘文件要加file://

(1).<link href="file://E:\soft\bootstrap-3.3.6-dist\css\bootstrap.min.css" rel="stylesheet">
(2).<script src="file://E:\soft\bootstrap-3.3.6-dist\jquery.min.js"></script>


3.link引入的是css文件  src引入的是js文件

src是source的缩写,指向外部资源的位置,指向的内容将会嵌入到文档中当前标签所在位置;在请求src资源时会将其指向的资源下载并应用到文档内,例如js脚本,img图片和frame等元素。

<script src ="js.js"></script>

当浏览器解析到该元素时,会暂停其他资源的下载和处理,直到将该资源加载、编译、执行完毕,图片和框架等元素也如此,类似于将所指向资源嵌入当前标签内。这也是为什么将js脚本放在底部而不是头部。

href是Hypertext Reference的缩写,指向网络资源所在位置,建立和当前元素(锚点)或当前文档(链接)之间的链接,如果我们在文档中添加

<link href="common.css" rel="stylesheet"/>

那么浏览器会识别该文档为css文件,就会并行下载资源并且不会停止对当前文档的处理。这也是为什么建议使用link方式来加载css,而不是使用@import方式。


### HTML 文件引入顺序的规则与最佳实践 在开发网页时,合理安排文件引入顺序对于页面性能、功能实现以及维护性至关重要。以下是关于 HTML文件引入顺序的一些规则和最佳实践: #### 1. **CSS 的引入** 通常情况下,外部样式表应放置在 `<head>` 部分中[^1]。这样可以确保浏览器在渲染页面之前先加载 CSS,从而减少闪烁效果并提升用户体验。 ```html <head> <link rel="stylesheet" href="styles.css"> </head> ``` 如果存在多个 CSS 文件,则优先级较低的基础样式应该放在前面,而覆盖或特定样式的文件应在后面引入,以便后者能够正确重写前者。 --- #### 2. **JavaScript 的引入** 为了防止阻塞 DOM 渲染,建议将 JavaScript 文件放在 `</body>` 标签前或者使用异步加载方式[^2]。这是因为脚本默认会阻止后续资源的下载直到它执行完毕。 同步加载示例: ```html <body> <!-- 页面内容 --> <script src="app.js"></script> </body> ``` 当需要立即运行某些初始化逻辑时,也可以考虑通过模块化工具(如 Webpack)打包后的入口点来管理依赖关系,并利用现代特性如 `defer` 和 `async` 属性优化加载行为[^2]。 - 使用 `defer`: 延迟到整个文档解析完成后才被执行。 - 使用 `async`: 并行下载且一旦可用就立刻执行。 例如: ```html <script src="main.js" defer></script> <script src="analytics.js" async></script> ``` --- #### 3. **字体与图标库** Web 字体应当尽早定义好路径以加快其应用速度;同时为了避免 FOIT (Flash Of Invisible Text),可以通过预加载技术指定重要资源的位置[^1]。 ```html <link rel="preload" as="font" href="/fonts/my-font.woff2" type="font/woff2" crossorigin> ``` --- #### 4. **图片及其他媒体资源** 大尺寸图像或其他耗时较长的内容最好延迟加载,即采用懒加载策略只在进入视口范围后再请求数据。 ```javascript document.querySelectorAll('img').forEach((img) => { img.setAttribute('loading', 'lazy'); }); ``` 以上做法不仅有助于节省带宽还能改善首屏时间表现。 --- #### 5. **第三方插件和服务** 集成来自 CDN 的服务比如 jQuery 应尽量靠近底部但又早于自定义 JS 执行位置以防冲突发生。 ```html <!-- Third-party libraries first --> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <!-- Custom scripts last --> <script src="custom-scripts.js"></script> ``` --- ### 总结 遵循上述原则可以帮助开发者创建更加高效稳定的网站结构。需要注意的是实际项目可能还会涉及更多复杂场景因此灵活调整才是王道!
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值