【前端】如何在HTML中调用CSS和JavaScript（完整指南）

文章目录

前言
一、HTML调用CSS
- [1. 内联样式（Inline Style）](#1. 内联样式（Inline Style）)
- [2. 内部样式表（Internal Stylesheet）](#2. 内部样式表（Internal Stylesheet）)
- [3. 外部样式表（External Stylesheet）](#3. 外部样式表（External Stylesheet）)
二、HTML调用JavaScript
- [1. 内联脚本（Inline Script）](#1. 内联脚本（Inline Script）)
- [2. 内部脚本（Internal Script）](#2. 内部脚本（Internal Script）)
- [3. 外部脚本（External Script）](#3. 外部脚本（External Script）)
三、最佳实践方案
四、关键注意事项
总结

前言

在Web开发中，HTML、CSS和JavaScript被称为"前端三剑客"。本文将详细介绍如何在HTML中有效调用CSS和JavaScript，并提供可直接使用的代码示例。

一、HTML调用CSS

1. 内联样式（Inline Style）

直接在HTML标签中使用style属性

csharp 复制代码

<p style="color: red; font-size: 16px;">这是内联样式文本</p>

2. 内部样式表（Internal Stylesheet）

csharp 复制代码

在 <head> 中使用 <style> 标签

csharp 复制代码

<head>
  <style>
    .my-class {
      border: 1px solid #ccc;
      padding: 20px;
    }
  </style>
</head>
<body>
  <div class="my-class">内部样式示例</div>
</body>

3. 外部样式表（External Stylesheet）

推荐方式，通过标签引入

csharp 复制代码

<head>
  <link rel="stylesheet" href="styles/main.css">
</head>

二、HTML调用JavaScript

1. 内联脚本（Inline Script）

直接在HTML标签中使用事件属性

csharp 复制代码

<button onclick="alert('按钮被点击!')">点击我</button>

2. 内部脚本（Internal Script）

csharp 复制代码

使用<script>标签

csharp 复制代码

<body>
  <script>
    function showMessage() {
      console.log('页面加载完成!');
    }
    window.onload = showMessage;
  </script>
</body>

3. 外部脚本（External Script）

最佳实践，通过src属性引入

csharp 复制代码

<body>
  <script src="scripts/app.js" defer></script>
</body>

三、最佳实践方案

推荐代码结构

csharp 复制代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>最佳实践示例</title>
  
  <!-- 外部CSS -->
  <link rel="stylesheet" href="css/main.css">
  
  <!-- 内部CSS -->
  <style>
    header {
      background-color: #f8f9fa;
      padding: 20px;
    }
  </style>
</head>
<body>
  <div style="margin: 10px;"> <!-- 内联CSS -->
    <button id="myBtn">测试按钮</button>
  </div>

  <!-- 外部JS -->
  <script src="js/main.js" defer></script>
  
  <!-- 内部JS -->
  <script>
    document.getElementById('myBtn').addEventListener('click', function() {
      this.textContent = "按钮被点击!";
    });
  </script>
</body>
</html>

运行结果：

webstorm中实际应用例子示意：

csharp 复制代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>现代风格导航栏</title>
    <link rel="stylesheet" href="myCss.css"> //调用css文件myCss
</head>

<body>
<nav class="glass-nav">
    <ul class="nav-list">
        <li><a href="#home" class="active"><i class="fas fa-home"></i> 主页</a></li>
        <li><a href="#news"><i class="fas fa-newspaper"></i> 新闻</a></li>
        <li class="dropdown-wrapper">
            <div class="dropdown">
                <a href="#" class="dropdown-btn"><i class="fas fa-bars"></i> 服务 <i class="dropdown-arrow"></i></a>
                <div class="dropdown-content">
                    <a href="#"><i class="fas fa-cloud"></i> 云服务</a>
                    <a href="#"><i class="fas fa-code"></i> 开发工具</a>
                    <a href="#"><i class="fas fa-chart-line"></i> 数据分析</a>
                </div>
            </div>
        </li>
        <li><a href="#about"><i class="fas fa-info-circle"></i> 关于</a></li>
    </ul>
</nav>
<main class="content-wrapper">
    <h1 class="neon-text">现代网页导航解决方案</h1>
    <p class="desc-text">体验流畅的交互设计与视觉美学</p>
</main>
<!-- Font Awesome -->
<script src="myJsp.js"></script> //调用javascript文件myCss
</body>
</html>

四、关键注意事项

csharp 复制代码

（1）CSS建议放在<head>中

（2）JavaScript通常放在</body>前

（3）使用defer属性延迟脚本执行

总结

通过合理组织代码结构：

优先使用外部文件
保持结构（HTML）、表现（CSS）和行为（JavaScript）分离
遵循标准的文件目录规范
注意资源的加载顺序和性能优化

这种开发模式将显著提升代码的可维护性和网站性能。希望本文能帮助您更好地组织前端代码，Happy coding! 🚀