从零开始学Web：HTML, CSS, JS保姆级教程
你好，未来的Web开发者！
欢迎来到Web开发的世界。你是否曾惊叹于那些功能强大、界面炫酷的网站，并梦想着有一天也能亲手创造一个？好消息是，这并非遥不可及的梦想。Web开发的核心技术是HTML、CSS和JavaScript，它们是构建所有网站和网页应用的基石。
这篇教程将像一位贴心的“保姆”，一步步带你走进Web开发的大门，让你从零开始，掌握这三门核心技术。
第一部分：HTML – 网页的骨架
想象一下，建造一座房子首先需要什么？是钢筋和混凝土搭建的结构框架。在网页世界里，HTML（HyperText Markup Language，超文本标记语言）扮演的就是这个角色。它负责定义网页的内容和结构。
1. HTML是什么？
HTML不是一种编程语言，而是一种标记语言。它使用各种标签（Tag）来“标记”内容，告诉浏览器这些内容是什么，应该如何显示。例如，你可以用标签告诉浏览器：“这是一段标题”、“这是一个段落”或“这是一张图片”。
2. 你的第一个HTML页面
让我们来创建第一个网页。打开你的文本编辑器（如VS Code, Sublime Text，甚至记事本），创建一个名为 index.html 的文件，然后输入以下代码：
“`html
你好，世界！
这是我的第一个网页，我正在学习HTML。
“`
保存文件，然后用你的浏览器（如Chrome, Firefox）打开它。恭喜你，你已经成功创建了你的第一个网页！
3. 核心HTML标签解析
<!DOCTYPE html>: 声明文档类型，告诉浏览器这是一个HTML5文档。<html>: 所有HTML内容的根元素。<head>: 包含网页的“元数据”，如标题、引用的文件等，这部分内容不会直接显示在页面上。<title>: 定义了浏览器标签页上显示的标题。
<body>: 包含了网页所有可见的内容，如文本、图片、链接等。<h1>到<h6>: 标题标签，<h1>是最重要的标题，<h6>是最次要的。<p>: 段落标签，用于定义一段文本。<img>: 图片标签。src属性指定图片的地址，alt属性在图片无法显示时提供替代文本。<a>: 链接标签。href属性指定了链接的目标地址。
HTML的世界远不止这些，还有列表（<ul>, <ol>, <li>）、表格（<table>）、表单（<form>）等等，但以上是你入门必须掌握的核心。
第二部分：CSS – 网页的“美颜师”
有了HTML的骨架，我们的网页看起来还很简陋。现在，轮到CSS（Cascading Style Sheets，层叠样式表）出场了。CSS专门负责网页的样式和布局，决定了网页的外观。
1. CSS是什么？
如果说HTML是骨架，那么CSS就是皮肤、衣服和妆容。它能控制文本的颜色、字体、大小，元素的位置、边距、背景等等。CSS让网页从单调的黑白文本变得五彩斑斓。
2. 如何为网页添加CSS？
有三种方式，但我们推荐外部样式表，因为它可以让内容（HTML）和样式（CSS）分离，更易于维护。
- 创建CSS文件：创建一个名为
style.css的文件。 -
编写CSS规则：在
style.css中写入以下代码：“`css
body {
font-family: Arial, sans-serif;
line-height: 1.6;
}h1 {
color: #333;
}p {
color: #666;
}a {
color: #1a73e8;
text-decoration: none; / 去掉下划线 /
}a:hover {
text-decoration: underline; / 鼠标悬停时显示下划线 /
}
“` -
在HTML中链接CSS：在
index.html的<head>部分添加一行代码来引入style.css。html
<head>
<title>我的第一个网页</title>
<link rel="stylesheet" href="style.css">
</head>
现在，刷新你的 index.html 页面，看看发生了什么？页面的字体、颜色和链接样式都变了！
3. CSS核心概念
- 选择器（Selector）: 它“选择”你想要添加样式的HTML元素。例如，
h1选择器会选中所有的<h1>标签。 - 属性（Property）: 你想要改变的样式名称，如
color(颜色)、font-size(字体大小)。 - 值（Value）: 你为属性设定的具体值，如
blue、16px。
CSS盒模型（Box Model） 是布局的基石，它规定了每个HTML元素都是一个矩形的盒子，这个盒子由四部分组成：内容（Content）、内边距（Padding）、边框（Border）和外边距（Margin）。理解盒模型是掌握CSS布局的关键。
第三部分：JavaScript – 赋予网页“生命”
现在我们的网页既有结构又有样式，但它还是一个静态的页面。如果我们想让它响应用户的操作（比如点击、滚动），就需要JavaScript（简称JS）。JS是一种编程语言，它能让网页变得动态和交互。
1. JavaScript能做什么？
- 响应用户的点击、鼠标移动等操作。
- 修改HTML内容和CSS样式。
- 验证表单数据。
- 与服务器进行数据交互（这就是AJAX技术，现代网页的核心）。
- 创建动画、游戏等等。
2. 如何为网页添加JavaScript？
和CSS类似，最佳实践是使用外部脚本。
- 创建JS文件：创建一个名为
script.js的文件。 -
编写JS代码：在
script.js中写入以下代码：“`javascript
// 当整个页面加载完毕后执行
document.addEventListener(‘DOMContentLoaded’, function() {// 找到h1元素 const heading = document.querySelector('h1'); // 当h1被点击时 heading.addEventListener('click', function() { alert('你点击了标题！'); }); // 添加一个新按钮 const button = document.createElement('button'); button.textContent = '点我改变段落颜色'; document.body.appendChild(button); button.addEventListener('click', function() { const paragraph = document.querySelector('p'); paragraph.style.color = 'red'; });});
“` -
在HTML中链接JS：在
index.html的<body>标签结束前，添加<script>标签。“`html
<script src="script.js"></script>