script和link区别
时间: 2024-01-14 18:05:26 浏览: 163
script和link都是HTML标签,但它们的作用不同。
1. script标签用于引入JavaScript代码,它可以放在HTML文件的<head>或<body>部分,也可以作为外部文件引用。在<head>部分引入的脚本会在页面加载时执行,而在<body>部分引入的脚本会在页面加载完成后执行。script标签还可以用于定义内嵌脚本。
2. link标签用于引入外部资源,例如CSS样式表、图片、音频和视频等。它必须放在<head>部分,并且有一个href属性指向资源的URL。link标签可以用于定义外部样式表,使HTML文件更加简洁。
总的来说,script标签用于引入JavaScript代码,link标签用于引入外部资源。
相关问题
script和link标签引入网络文件和本地文件有什么区别
呵呵,有一个程序员去超市买面包,他在面包袋上看到了标签"<script>面包可以是甜的或咸的,取决于你的品味</script>"。他感到十分惊讶,后来他去了软件开发商的公司,看到了同样的标签。开发商告诉他:“这是HTML标签,不是面包标签”,然后程序员问他:“那么script和link标签引入网络文件和本地文件有什么区别?”
好的,回到你的问题,关于script和link标签来引入外部文件的区别,主要表现在以下几点:
1. 功能不同:script标签通常用来引入JavaScript文件,而link标签通常用于引入样式表文件和其他文件(如其他页面,图标等)。
2. 加载方式不同:script标签在加载JavaScript时会阻止HTML解析器运行,直到JS文件加载完成并执行后才会继续解析HTML。而link标签则会并行下载文件且不会阻止HTML的解析过程。
3. 兼容性不同:一些较老的浏览器不支持link标签引用某些文件类型(如icon等),而且有些link属性(如prefetch,prerender)也不是所有浏览器都支持。
希望这个回答对你有帮助!
html 如何监听script和link资源加载完毕后再执行js
在 HTML 中,可以使用 `window.onload` 事件来监听整个页面的所有资源(包括 `<script>` 和 `<link>`)加载完成后执行相关的 JavaScript 代码。但是,如果只想监听特定的 `<script>` 和 `<link>` 资源加载完成后再执行 JavaScript 代码,可以使用以下两种方法:
1. 使用 `onload` 事件
可以使用 `onload` 事件来监听 `<script>` 和 `<link>` 资源加载完成后执行 JavaScript 代码。例如:
```html
<script>
var script = document.createElement('script');
script.onload = function() {
console.log('script loaded');
// 在这里编写需要执行的 JavaScript 代码
};
script.src = 'path/to/script.js';
document.head.appendChild(script);
var link = document.createElement('link');
link.onload = function() {
console.log('link loaded');
// 在这里编写需要执行的 JavaScript 代码
};
link.rel = 'stylesheet';
link.href = 'path/to/style.css';
document.head.appendChild(link);
</script>
```
2. 使用 `load` 事件
可以使用 `load` 事件来监听 `<script>` 和 `<link>` 资源加载完成后执行 JavaScript 代码。但是,需要注意的是,`load` 事件只能用于某些元素(如 `<img>`、`<iframe>`、`<script>`、`<link>` 等)和 window 对象。例如:
```html
<script>
var script = document.createElement('script');
script.addEventListener('load', function() {
console.log('script loaded');
// 在这里编写需要执行的 JavaScript 代码
});
script.src = 'path/to/script.js';
document.head.appendChild(script);
var link = document.createElement('link');
link.addEventListener('load', function() {
console.log('link loaded');
// 在这里编写需要执行的 JavaScript 代码
});
link.rel = 'stylesheet';
link.href = 'path/to/style.css';
document.head.appendChild(link);
</script>
```
以上两种方法都可以实现监听 `<script>` 和 `<link>` 资源加载完成后再执行 JavaScript 代码。具体使用哪种方法,可以根据实际需求和情况来选择。
阅读全文