前言
在Web开辟中，HTML、CSS和JavaScript被称为"前端三剑客"。本文将详细先容如何在HTML中有效调用CSS和JavaScript，并提供可直接利用的代码示例。
一、HTML调用CSS
1. 内联样式（Inline Style）
直接在HTML标签中利用style属性
- <p style="color: red; font-size: 16px;">这是内联样式文本</p>
- <head>
- <style>
- .my-class {
- border: 1px solid #ccc;
- padding: 20px;
- }
- </style>
- </head>
- <body>
- <div class="my-class">内部样式示例</div>
- </body>
保举方式，通过标签引入
- <head>
- <link rel="stylesheet" href="styles/main.css">
- </head>
1. 内联脚本（Inline Script）
直接在HTML标签中利用事件属性
- <button onclick="alert('按钮被点击!')">点击我</button>
- <body>
- <script>
- function showMessage() {
- console.log('页面加载完成!');
- }
- window.onload = showMessage;
- </script>
- </body>
最佳实践，通过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>
webstorm中实际应用例子示意：
- <!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>
- （1）CSS建议放在<head>中
- （2）JavaScript通常放在</body>前
- （3）使用defer属性延迟脚本执行
通过公道组织代码结构：
- 优先利用外部文件
- 保持结构（HTML）、体现（CSS）和行为（JavaScript）分离
- 遵循标准的文件目次规范
- 注意资源的加载顺序和性能优化
这种开辟模式将显着提升代码的可维护性和网站性能。盼望本文能资助您更好地组织前端代码，Happy coding! |
