前端学习：初始前端三件套（HTML、CSS、JS）第一次笔记记录
在学习前端开发的过程中，掌握HTML、CSS和JavaScript（通常称为前端三件套）是非常重要的基础。这三者各司其职，共同构成了现代网页的基础。下面，我将对这三者进行简单介绍，并通过代码示例来帮助理解。
一、HTML（超文本标记语言）
HTML（HyperText Markup Language）是构建网页的基本语言，它主要用于定义网页的结构和内容。HTML使用标签来标记文本，例如<h1>表示标题，<p>表示段落。
HTML示例：
<!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>
</body>
</html>
在上述示例中，我们构建了一个基本的HTML文档结构，其中包含了标题、段落以及超链接。
二、CSS（层叠样式表）
CSS（Cascading Style Sheets）用于控制网页的布局和外观，包括颜色、字体、间距等。它可以让我们使网页看起来更美观。
CSS示例：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>我的第一个网页</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #F0F0F0;
color: #333;
}
h1 {
color: #2E86C1;
}
p {
font-size: 16px;
}
</style>
</head>
<body>
<h1>欢迎来到我的网页</h1>
<p>这是一个用HTML和CSS写的简单页面示例。</p>
</body>
</html>
在此示例中，我们使用了内联样式来设置网页的背景色、字体和标题颜色。CSS通过选择器选取HTML元素并为其应用样式。
三、JavaScript（脚本语言）
JavaScript是一种编程语言，广泛用于为网页添加交互性。通过JavaScript，我们可以动态修改网页内容、响应用户操作等。
JavaScript示例：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>我的第一个网页</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #F0F0F0;
color: #333;
}
</style>
</head>
<body>
<h1>欢迎来到我的网页</h1>
<button id="myButton">点击我</button>
<p id="message"></p>
<script>
document.getElementById("myButton").onclick = function() {
document.getElementById("message").textContent = "你刚刚点击了按钮！";
}
</script>
</body>
</html>
在上面的示例中，我们创建了一个按钮，并为其添加了点击事件。当用户点击按钮时，会在页面上显示一条消息。这个简单的示例展示了如何使用JavaScript与HTML和CSS进行交互。
结论
通过以上的示例，我们可以看到HTML、CSS和JavaScript的相互配合是如何构建一个基本的网页的。在学习前端的过程中，理解这三者的作用和如何结合使用是非常重要的。随着学习的深入，我们可以继续探索更高级的前端技术，如响应式设计、框架（如React、Vue等）以及与后端的交互等。希望这篇笔记能够帮助到同学们在前端学习的旅程中更进一步。
