【前端】如何在HTML中调用CSS和JavaScript（完整指南）
前言在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>
运行效果：
https://i-blog.csdnimg.cn/direct/72732c115c1a4b62b1325b7497b72062.png
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!
页:
[1]