最佳实践示例

创作时间:

作者:

@小白创作中心

最佳实践示例

引用

CSDN

https://blog.csdn.net/qq_38628970/article/details/146153061

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

一、HTML调用CSS

1. 内联样式（Inline Style）

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

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

2. 内部样式表（Internal Stylesheet）

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

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

3. 外部样式表（External Stylesheet）

推荐方式，通过标签引入

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

二、HTML调用JavaScript

1. 内联脚本（Inline Script）

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

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

2. 内部脚本（Internal Script）

使用 <script> 标签

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

3. 外部脚本（External Script）

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

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

三、最佳实践方案

推荐代码结构

<!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>

运行结果：

<!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>