HTML中嵌入CSS和JavaScript的方法

夔栀

于 2024-07-13 02:23:52 发布

阅读量197

点赞数 4

文章标签： html css javascript 前端 python

本文链接：https://blog.csdn.net/qq_53844788/article/details/140391929

版权

在HTML中嵌入CSS和JavaScript的方法主要有两种：内部嵌入和外部引用。内部嵌入是将CSS和JavaScript代码直接写在HTML文件中，而外部引用是通过链接外部的CSS和JavaScript文件来实现的。

1. 嵌入CSS

内部嵌入CSS

将CSS代码直接写在HTML文件的 <head> 部分，使用 <style> 标签。

<!DOCTYPE html>
<html>
<head>
    <title>My Site</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f4f4f4;
        }
        h1 {
            color: #333;
        }
    </style>
</head>
<body>
    <h1>Welcome to My Site</h1>
    <p>This is a paragraph.</p>
</body>
</html>

外部引用CSS

将CSS代码放在一个独立的文件中（如 styles.css），然后在HTML文件的 <head> 部分使用 <link> 标签引用它。

styles.css：

body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
}
h1 {
    color: #333;
}

index.html：

<!DOCTYPE html>
<html>
<head>
    <title>My Site</title>
    <link rel="stylesheet" type="text/css" href="{% static 'css/styles.css' %}">
</head>
<body>
    <h1>Welcome to My Site</h1>
    <p>This is a paragraph.</p>
</body>
</html>

2. 嵌入JavaScript

内部嵌入JavaScript

将JavaScript代码直接写在HTML文件中，可以放在 <head> 部分（通常用于页面加载前需要执行的脚本）或 <body> 的末尾（通常用于页面加载后执行的脚本），使用 <script> 标签。

<!DOCTYPE html>
<html>
<head>
    <title>My Site</title>
    <script>
        function showMessage() {
            alert('Hello, World!');
        }
    </script>
</head>
<body>
    <h1>Welcome to My Site</h1>
    <p>This is a paragraph.</p>
    <button onclick="showMessage()">Click Me</button>
</body>
</html>

外部引用JavaScript

将JavaScript代码放在一个独立的文件中（如 script.js），然后在HTML文件的 <head> 部分或 <body> 的末尾使用 <script> 标签引用它。

script.js：

function showMessage() {
    alert('Hello, World!');
}

index.html：

<!DOCTYPE html>
<html>
<head>
    <title>My Site</title>
    <link rel="stylesheet" type="text/css" href="{% static 'css/styles.css' %}">
    <script src="{% static 'js/script.js' %}"></script>
</head>
<body>
    <h1>Welcome to My Site</h1>
    <p>This is a paragraph.</p>
    <button onclick="showMessage()">Click Me</button>
</body>
</html>

通过这种方式，可以方便地管理和引用CSS和JavaScript文件，提高代码的组织性和可维护性。

夔栀

关注

4
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML中嵌入CSS和JavaScript的方法

在HTML中嵌入CSS和JavaScript的方法主要有两种：内部嵌入和外部引用。内部嵌入是将CSS和JavaScript代码直接写在HTML文件中，而外部引用是通过链接外部的CSS和JavaScript文件来实现的。
复制链接

扫一扫