📅 最后修改于: 2023-12-03 15:07:18.178000 🧑 作者: Mango
在网页开发中，常常需要加载静态文件，如样式表（CSS）、图片和 JavaScript 文件。本文将介绍如何在 HTML 中加载静态 CSS、Django 和图像。
内联样式是一种将样式直接放置到 HTML 标签内的方法，适用于单个元素的样式设置。它的优点是代码简洁，在需要对样式进行频繁修改时比较方便。
<!DOCTYPE html>
<html>
<head>
<title>内联样式</title>
</head>
<body>
<h1 style="color: red">Hello, World!</h1>
</body>
</html>
内部样式表允许在 HTML 文件中定义一组样式，然后在需要的元素中使用它们。它的优点是样式与内容分离，易于维护和修改。
<!DOCTYPE html>
<html>
<head>
<title>内部样式表</title>
<style>
h1 {
color: red;
}
</style>
</head>
<body>
<h1>Hello, World!</h1>
</body>
</html>
外部样式表是将样式定义在外部 .css 文件中，然后在 HTML 中以 link 标签引入。它的优点是可以在多个页面中共享样式，减少冗余代码。
<!DOCTYPE html>
<html>
<head>
<title>外部样式表</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<h1>Hello, World!</h1>
</body>
</html>
Django 是 Python 语言下的 Web 框架，可以通过 Django 提供的静态文件管理器加载静态文件。
{% load static %}
<!DOCTYPE html>
<html>
<head>
<title>加载静态 Django</title>
<link rel="stylesheet" type="text/css" href="{% static 'style.css' %}" />
</head>
<body>
<h1>Hello, World!</h1>
</body>
</html>
其中 {% load static %} 用于加载 Django 的静态文件管理器，{% static 'style.css' %} 用于指定静态文件的路径。
在 settings.py 中需要进行以下配置：
STATIC_URL = '/static/'
STATICFILES_DIRS = [
os.path.join(BASE_DIR, "static"),
]
其中 STATIC_URL 指定了静态文件的 URL 前缀，STATICFILES_DIRS 指定了静态文件所在的目录。
静态图像的加载方式与静态 CSS 类似，可以使用内联样式、内部样式表或外部样式表加载。
<!DOCTYPE html>
<html>
<head>
<title>加载静态图像</title>
<style>
img {
width: 100%;
height: auto;
}
</style>
</head>
<body>
<img src="image.jpg" alt="Image" />
</body>
</html>
其中 src 属性指定了图像的路径，alt 属性用于在图像无法加载时显示的替代文本。
本文介绍了在 HTML 中加载静态 CSS、Django 和图像的方法，包括内联样式、内部样式表、外部样式表和 Django 自带的静态文件管理器。在开发过程中，应根据具体情况选择合适的加载方式，以便代码的可维护性和可扩展性。