前端基础概述
前端开发是构建用户界面和用户体验的核心部分，主要包括三个关键技术：HTML、CSS 和 JavaScript。这些技术共同构成了网页的基本架构、样式和交互功能。
HTML (超文本标记语言)
HTML 是用于定义网页内容结构的标记语言。通过使用各种标签，HTML 定义了网页的标题、段落、链接、图像等内容。
示例：
<!DOCTYPE html>
<html>
<head>
<title>HTML 示例</title>
</head>
<body>
<h1>欢迎来到前端基础</h1>
<p>这是一个简单的 HTML 示例。</p>
<a href="https://www.untib.com">访问示例链接</a>
</body>
</html>
CSS (层叠样式表)
CSS 用于控制网页的样式，包括布局、颜色、字体和其他视觉效果。通过分离内容 (HTML) 和样式 (CSS)，可以更高效地管理网页设计。
示例：
<!DOCTYPE html>
<html>
<head>
<title>CSS 示例</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
color: #333;
}
h1 {
color: #0066cc;
}
p {
line-height: 1.6;
}
</style>
</head>
<body>
<h1>CSS 样式示例</h1>
<p>这是一个简单的页面样式示例。</p>
</body>
</html>
JavaScript (脚本语言)
JavaScript 是一种轻量级的编程语言，用于为网页添加动态交互功能，例如表单验证、动态内容更新和动画效果。
示例：
<!DOCTYPE html>
<html>
<head>
<title>JavaScript 示例</title>
<script>
function showMessage() {
alert('欢迎学习 JavaScript!');
}
</script>
</head>
<body>
<h1>JavaScript 示例</h1>
<button onclick="showMessage()">点击我</button>
</body>
</html>
综合实例
将 HTML、CSS 和 JavaScript 结合在一起，可以创建一个完整的网页示例。
示例：
<!DOCTYPE html>
<html>
<head>
<title>前端综合实例</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #e8f4f8;
text-align: center;
padding: 20px;
}
h1 {
color: #0073e6;
}
button {
background-color: #0073e6;
color: white;
border: none;
padding: 10px 20px;
cursor: pointer;
border-radius: 5px;
}
button:hover {
background-color: #005bb5;
}
</style>
<script>
function changeMessage() {
document.getElementById('message').innerText = '你点击了按钮!';
}
</script>
</head>
<body>
<h1>前端综合示例</h1>
<p id="message">这是一个动态网页示例。</p>
<button onclick="changeMessage()">点击更改文字</button>
</body>
</html>
通过熟练掌握 HTML、CSS 和 JavaScript，你可以创建从简单到复杂的网页和应用，提供丰富的用户体验。