前端 HTML + CSS + JS 基础总结
前端开发是现代网页开发中至关重要的一部分，主要包括 HTML、CSS 和 JavaScript。这三者协同工作，以创建交互性强、用户友好的网页。以下是对 HTML、CSS 和 JS 的基础总结，以及一些简单的代码示例。
HTML（超文本标记语言）
HTML 是构建网页的基础语言。它使用标签（tag）来定义网页的结构和内容。常见的 HTML 标签包括：
<html>：定义整个 HTML 文档<head>：包含文档的信息，如标题、字符集等<body>：网页中显示的内容<h1>至<h6>：定义标题<p>：定义段落<a>：定义链接<img>：插入图片<div>：定义文档中的分区或节
示例代码：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>前端基础总结</title>
</head>
<body>
<h1>欢迎来到前端开发的世界</h1>
<p>这是一个简单的 HTML 示例。</p>
<a href="https://www.example.com">点击这里访问示例网站</a>
<img src="example.jpg" alt="示例图片" />
<div>
<h2>这是一个子标题</h2>
<p>更多内容将在这里展示。</p>
</div>
</body>
</html>
CSS（层叠样式表）
CSS 用于控制 HTML 元素的外观和布局。通过 CSS，开发者可以为网页添加颜色、字体、间距等样式。CSS 规则通常由选择器（selector）和声明（declaration）组成。
常用的 CSS 属性：
color：文本颜色background-color：背景颜色font-size：字体大小margin：外边距padding：内边距border：边框
示例代码：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS 示例</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
}
h1 {
color: #333;
text-align: center;
}
p {
color: #666;
margin: 20px;
}
.container {
padding: 20px;
background-color: white;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
</style>
</head>
<body>
<div class="container">
<h1>欢迎来到 CSS 示例</h1>
<p>这段文本使用了简单的 CSS 样式。</p>
</div>
</body>
</html>
JavaScript（脚本语言）
JavaScript 是一种编程语言，通常用于添加网页的动态功能。它可以通过事件（如点击、悬停）响应用户的操作，从而增强交互性。
常用的 JavaScript 功能：
- 操作 DOM（文档对象模型）
- 响应用户事件
- 与服务器进行异步通信
示例代码：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript 示例</title>
<style>
button {
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
}
</style>
<script>
function showMessage() {
alert("你好，欢迎来到 JavaScript 示例！");
}
</script>
</head>
<body>
<h1>欢迎来到 JavaScript 示例</h1>
<button onclick="showMessage()">点击我</button>
</body>
</html>
总结
HTML、CSS 和 JavaScript 是前端开发的三大支柱，分别负责网页的结构、样式和交互。掌握这三种技术，可以帮助开发者创建出更加生动有趣的网页。在实际开发中，合理地使用这三者可以提升用户体验，使网站更具吸引力和功能性。随着技术的发展，不断学习和更新前端开发技能是非常重要的。
