在一个HTML中引用，是指在HTML文件中使用其他HTML文件、CSS文件、JavaScript文件或者图片等资源，引用的方法有以下几种：
1、使用<link>标签引入外部CSS文件
2、使用<script>标签引入外部JavaScript文件
3、使用<img>标签引入外部图片
4、使用<iframe>标签引入外部HTML文件
5、使用<object>标签引入外部Flash文件或PDF文件
6、使用<embed>标签引入外部Flash文件或PDF文件
7、使用<source>标签引入外部视频文件
8、使用<a>标签链接到其他HTML文件
下面详细介绍这些方法的用法和注意事项。
1. 使用<link>标签引入外部CSS文件
在HTML文件的<head>部分，使用<link>标签引入外部CSS文件。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>示例页面</title> <!-引入外部CSS文件 --> <link rel="stylesheet" href="styles.css"> </head> <body> <h1>欢迎来到我的网站</h1> <p>这是一个示例页面。</p> </body> </html>
href属性指定了外部CSS文件的路径，注意，路径可以是相对路径，也可以是绝对路径，如果路径是相对路径，需要相对于当前HTML文件的路径，如果路径是绝对路径，需要从根目录开始指定。
2. 使用<script>标签引入外部JavaScript文件
在HTML文件的<head>部分或<body>部分的底部，使用<script>标签引入外部JavaScript文件。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>示例页面</title> <!-引入外部JavaScript文件 --> <script src="scripts.js"></script> </head> <body> <h1>欢迎来到我的网站</h1> <p>这是一个示例页面。</p> </body> </html>
src属性指定了外部JavaScript文件的路径，同样，路径可以是相对路径，也可以是绝对路径，如果路径是相对路径，需要相对于当前HTML文件的路径，如果路径是绝对路径，需要从根目录开始指定，需要注意的是，尽量将JavaScript代码放在文档加载完成后再执行，以避免影响页面性能，可以使用DOMContentLoaded事件或者将JavaScript代码放在<body>标签的底部来实现这一点。
3. 使用<img>标签引入外部图片
在HTML文件的<body>部分或者其他合适的位置，使用<img>标签引入外部图片。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>示例页面</title> </head> <body> <h1>欢迎来到我的网站</h1> <p>这是一个示例页面。</p> <!-引入外部图片 --> <img src="example.jpg" alt="示例图片"> </body> </html>
src属性指定了外部图片的路径，同样，路径可以是相对路径，也可以是绝对路径，如果路径是相对路径，需要相对于当前HTML文件的路径，如果路径是绝对路径，需要从根目录开始指定，需要注意的是，为了提高页面加载速度，可以将图片压缩后再引入，还可以为图片添加一个描述性的alt属性，当图片无法显示时，会显示这个描述性文本。
原创文章，作者：K-seo，如若转载，请注明出处：https://www.kdun.cn/ask/219141.html
微信扫一扫 