HTML基础概览
HTML（HyperText Markup Language，超文本标记语言）是构建网页的基础，它使用一系列标签来描述网页的结构和内容。作为一个前端开发者，掌握HTML是入门的第一步。
HTML标签
HTML标签分为块级标签和内联标签。块级标签通常表示一个较大的内容块，如<div>、<h1>到<h6>等；内联标签则用于文本内容，如<span>、<a>等。
HTML文档结构
一个基本的HTML文档通常包含以下结构：
<!DOCTYPE html>
<html>
<head>
<title>页面标题</title>
</head>
<body>
<!-- 页面内容 -->
</body>
</html>
在这个结构中，<!DOCTYPE html>声明文档类型，<html>是根元素，<head>包含元数据，如页面标题，而<body>则包含可见的页面内容。
CSS基础概览
CSS（Cascading Style Sheets，层叠样式表）用于设置网页的样式，如颜色、字体、布局等。
CSS选择器
CSS选择器用于选择HTML元素，以便应用样式。常见的选择器包括：
- 标签选择器：如
p选择所有<p>标签。 - 类选择器：如
.class选择所有具有指定类的元素。 - ID选择器：如
#id选择具有指定ID的元素。
CSS样式应用
CSS样式可以通过以下方式应用：
<!-- 内联样式 -->
<p style="color: red;">这是一个红色的段落。</p>
<!-- 内部样式 -->
<style>
p {
color: blue;
}
</style>
<!-- 外部样式 -->
<link rel="stylesheet" href="styles.css">
JavaScript基础概览
JavaScript是一种客户端脚本语言，用于增加网页的交互性。
JavaScript变量和类型
JavaScript变量用于存储数据，数据类型包括：
- 基本类型：如字符串、数字、布尔值等。
- 对象类型：如数组、对象等。
JavaScript函数
JavaScript函数是一段可重复使用的代码块，用于执行特定任务。
function sayHello() {
alert('Hello, world!');
}
sayHello(); // 调用函数
实战案例：创建一个简单的网页
以下是一个简单的网页示例，展示如何结合HTML、CSS和JavaScript创建一个互动效果。
<!DOCTYPE html>
<html>
<head>
<title>我的第一个网页</title>
<style>
body {
font-family: Arial, sans-serif;
}
#myButton {
background-color: #4CAF50;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
</style>
<script>
function changeColor() {
document.getElementById('myText').style.color = "red";
}
</script>
</head>
<body>
<h2>欢迎来到我的网页！</h2>
<p id="myText">这是一个段落。</p>
<button id="myButton" onclick="changeColor()">点击我</button>
</body>
</html>
在这个例子中，我们创建了一个简单的网页，包含一个标题、一个段落和一个按钮。当点击按钮时，段落的颜色会变为红色。
总结
通过学习HTML、CSS和JavaScript，你可以创建出功能丰富、样式美观的网页。从零开始，逐步掌握这些技能，你将能够应对各种前端开发挑战。