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

打印 上一主题 下一主题

主题 931|帖子 931|积分 2793


前言

在Web开辟中,HTML、CSS和JavaScript被称为"前端三剑客"。本文将详细先容如何在HTML中有效调用CSS和JavaScript,并提供可直接利用的代码示例。
一、HTML调用CSS

1. 内联样式(Inline Style)

直接在HTML标签中利用style属性
  1. <p style="color: red; font-size: 16px;">这是内联样式文本</p>
复制代码
2. 内部样式表(Internal Stylesheet)

  1. 在 <head> 中使用 <style> 标签
复制代码
  1. <head>
  2.   <style>
  3.     .my-class {
  4.       border: 1px solid #ccc;
  5.       padding: 20px;
  6.     }
  7.   </style>
  8. </head>
  9. <body>
  10.   <div class="my-class">内部样式示例</div>
  11. </body>
复制代码
3. 外部样式表(External Stylesheet)

保举方式,通过标签引入
  1. <head>
  2.   <link rel="stylesheet" href="styles/main.css">
  3. </head>
复制代码
二、HTML调用JavaScript

1. 内联脚本(Inline Script)

直接在HTML标签中利用事件属性
  1. <button onclick="alert('按钮被点击!')">点击我</button>
复制代码
2. 内部脚本(Internal Script)

  1. 使用<script>标签
复制代码
  1. <body>
  2.   <script>
  3.     function showMessage() {
  4.       console.log('页面加载完成!');
  5.     }
  6.     window.onload = showMessage;
  7.   </script>
  8. </body>
复制代码
3. 外部脚本(External Script)

最佳实践,通过src属性引入
  1. <body>
  2.   <script src="scripts/app.js" defer></script>
  3. </body>
复制代码
三、最佳实践方案

保举代码结构
  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <title>最佳实践示例</title>
  6.   
  7.   <!-- 外部CSS -->
  8.   <link rel="stylesheet" href="css/main.css">
  9.   
  10.   <!-- 内部CSS -->
  11.   <style>
  12.     header {
  13.       background-color: #f8f9fa;
  14.       padding: 20px;
  15.     }
  16.   </style>
  17. </head>
  18. <body>
  19.   <div style="margin: 10px;"> <!-- 内联CSS -->
  20.     <button id="myBtn">测试按钮</button>
  21.   </div>
  22.   <!-- 外部JS -->
  23.   <script src="js/main.js" defer></script>
  24.   
  25.   <!-- 内部JS -->
  26.   <script>
  27.     document.getElementById('myBtn').addEventListener('click', function() {
  28.       this.textContent = "按钮被点击!";
  29.     });
  30.   </script>
  31. </body>
  32. </html>
复制代码
运行效果:

webstorm中实际应用例子示意:
  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>现代风格导航栏</title>
  7.     <link rel="stylesheet" href="myCss.css"> //调用css文件myCss
  8. </head>
  9. <body>
  10. <nav class="glass-nav">
  11.     <ul class="nav-list">
  12.         <li><a href="#home" class="active"><i class="fas fa-home"></i> 主页</a></li>
  13.         <li><a href="#news"><i class="fas fa-newspaper"></i> 新闻</a></li>
  14.         <li class="dropdown-wrapper">
  15.             <div class="dropdown">
  16.                 <a href="#" class="dropdown-btn"><i class="fas fa-bars"></i> 服务 <i class="dropdown-arrow"></i></a>
  17.                 <div class="dropdown-content">
  18.                     <a href="#"><i class="fas fa-cloud"></i> 云服务</a>
  19.                     <a href="#"><i class="fas fa-code"></i> 开发工具</a>
  20.                     <a href="#"><i class="fas fa-chart-line"></i> 数据分析</a>
  21.                 </div>
  22.             </div>
  23.         </li>
  24.         <li><a href="#about"><i class="fas fa-info-circle"></i> 关于</a></li>
  25.     </ul>
  26. </nav>
  27. <main class="content-wrapper">
  28.     <h1 class="neon-text">现代网页导航解决方案</h1>
  29.     <p class="desc-text">体验流畅的交互设计与视觉美学</p>
  30. </main>
  31. <!-- Font Awesome -->
  32. <script src="myJsp.js"></script> //调用javascript文件myCss
  33. </body>
  34. </html>
复制代码
四、关键注意事项

  1. (1)CSS建议放在<head>中
  2. (2)JavaScript通常放在</body>前
  3. (3)使用defer属性延迟脚本执行
复制代码
总结

通过公道组织代码结构:


  • 优先利用外部文件
  • 保持结构(HTML)、体现(CSS)和行为(JavaScript)分离
  • 遵循标准的文件目次规范
  • 注意资源的加载顺序和性能优化
这种开辟模式将显着提升代码的可维护性和网站性能。盼望本文能资助您更好地组织前端代码,Happy coding!

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有账号?立即注册

x
回复

使用道具 举报

0 个回复

倒序浏览

快速回复

您需要登录后才可以回帖 登录 or 立即注册

本版积分规则

徐锦洪

金牌会员
这个人很懒什么都没写!
快速回复 返回顶部 返回列表