【前端】三件套基础介绍
前端三件套通常指的是HTML、CSS和JavaScript，这三种技术共同构成了现代Web页面的基础。
1. HTML (HyperText Markup Language)
用途：定义网页的结构和内容。
基本标签：
<html>: 包裹整个文档。
<head>: 定义元数据（如标题、样式表等）。
<body>: 包含页面的实际内容。
<div>, <span>: 容器元素，用于布局和样式划分。
<p>: 段落标签。
<a>: 链接标签。
<img>: 图像标签。
2. CSS (Cascading Style Sheets)
用途：定义网页的样式（颜色、字体大小、布局等）。
基本属性和选择器：
color: 设置文本的颜色。
font-size: 设置文字的大小。
background-color: 设置背景颜色。
display: 控制元素的显示方式（如block, inline, flex等）。
类选择器：.classname
ID选择器：#idname
标签选择器：element
3. JavaScript
用途：为网页添加交互性，实现动态效果和数据处理。
基本功能：
DOM（文档对象模型）操作：获取、修改页面元素。
AJAX请求：与服务器进行异步通信，更新部分页面内容。
事件处理：响应用户行为（如点击、滑动等）。
示例代码
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>示例页面</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>欢迎来到我的网站！</h1>
<p id="demo">这是文本段落。</p>
<button onclick="changeText()">点击我改变文字</button>
</body>
</html>
CSS
body {
font-family: Arial, sans-serif;
}
h1 {
color: blue;
}
#demo {
color: green;
}
JavaScript
function changeText() {
document.getElementById("demo").innerHTML = "文本已改变!";
}
总结
HTML：定义页面结构和内容。
CSS：控制页面的样式和布局。
JavaScript：为网页添加交互性和动态效果。
这三者相互配合，共同构建了现代Web应用的基础。