📅 最后修改于: 2023-12-03 15:39:31.361000 🧑 作者: Mango
在Web开发中，我们经常需要引入一些外部资源，如CSS文件、JavaScript文件或图像，以便完善我们的网页设计，让网页更加美观和功能更加强大。在HTML中，我们可以使用不同的方式来引入这些资源。
要在HTML中引入CSS文件，我们可以使用以下代码：
<link rel="stylesheet" type="text/css" href="style.css">
其中，link元素用于引入外部资源，rel属性指定资源的关系类型（样式表为stylesheet），type属性指定资源的MIME类型，href属性指定资源的URL。
我们还可以在同一HTML文件中加入CSS代码，以下是一个示例：
<head>
<style type="text/css">
body {
background-color: #f2f2f2;
font-family: Arial, sans-serif;
}
h1 {
color: #e60000;
}
</style>
</head>
在head元素中，我们可以使用style元素来定义CSS代码。在示例中，我们定义了两个样式规则，分别将页面背景设置为灰色，将h1元素文本颜色设置为红色。
要在HTML中引入JavaScript文件，我们可以使用以下代码：
<script src="script.js"></script>
其中，script元素用于引入JavaScript文件，src属性指定文件的URL。我们也可以在同一HTML文件中加入JavaScript代码，以下是一个示例：
<body>
<p>Click the button to change the text:</p>
<button onclick="myFunction()">Click me</button>
<p id="text">Hello, world!</p>
<script>
function myFunction() {
document.getElementById("text").innerHTML = "Hello, JavaScript!";
}
</script>
</body>
在body元素中，我们可以使用script元素来定义JavaScript代码。在示例中，我们定义了一个函数myFunction，当按钮被点击时，该函数将p元素的文本内容修改为Hello, JavaScript!。
要在HTML中引入图像，我们可以使用以下代码：
<img src="image.jpg" alt="My image">
其中，img元素用于引入图像，src属性指定图像文件的URL，alt属性指定图像的文本说明。如果图像文件不在当前目录下，我们需要指定其完整的URL。
以上就是HTML中引导导入外部资源的几种方式。我们可以根据实际需求选择不同的方式，并在移动端或不同分辨率下进行适配。