教程概览
-
第一部分：HTML - 网页的骨架
（图片来源网络，侵删）- 什么是 HTML？
- 第一个 HTML 页面
- 常用 HTML 标签详解
- HTML 表单
-
第二部分：CSS - 网页的衣裳
- 什么是 CSS？
- 如何在 HTML 中使用 CSS
- 常用 CSS 属性
-
第三部分：JavaScript - 网页的灵魂
- 什么是 JavaScript？
- 如何在 HTML 中使用 JavaScript
- 基础语法：变量、数据类型、操作符
- 与 HTML 互动：DOM 操作
- 事件处理
-
第四部分：实战项目 - 简单的待办事项列表
- 整合 HTML, CSS, JavaScript
- 完成功能
-
第五部分：进阶学习路径
（图片来源网络，侵删）推荐资源和下一步方向
第一部分：HTML - 网页的骨架
什么是 HTML？
HTML (HyperText Markup Language) 是超文本标记语言，它不是一种编程语言，而是一种标记语言,用来描述网页的结构和内容。
你可以把它想象成盖房子的设计图纸，图纸告诉你哪里是墙（<div>），哪里是门（<a>），哪里是窗户（<img>）,但图纸本身不会动。
第一个 HTML 页面
创建一个新文件，命名为 index.html，然后用文本编辑器（如 VS Code, Sublime Text, 甚至记事本）打开,输入以下内容：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">我的第一个网页</title>
</head>
<body>
<h1>欢迎来到我的网站！</h1>
<p>这是一个段落，这是一个 <strong>粗体</strong> 文本和一个 <em>斜体</em> 文本。</p>
<a href="https://www.google.com">这是一个指向谷歌的链接</a>
</body>
</html>
如何运行？
直接用浏览器打开这个 index.html 文件,你就能看到效果了。
代码解析：
<!DOCTYPE html>: 声明文档类型，告诉浏览器这是一个 HTML5 文件。<html>: 根元素,所有其他元素都包含在其中。<head>: 包含页面的元数据（metadata），不会直接显示在页面上，但提供页面的信息。<meta charset="UTF-8">: 设置字符编码为 UTF-8,可以正确显示中文等。<title>: 设置浏览器标签页上显示的标题。
<body>: 包含页面的，也就是用户在浏览器中看到的所有东西。<h1>: 一级标题,字体最大。<p>: 段落标签。<strong>: 加粗文本,有语义上的强调。<em>: 斜体文本,有语义上的强调。<a>: 锚标签，用于创建超链接。href属性指定链接的目标地址。
常用 HTML 标签
| 名称 | 描述 | 示例 | |
|---|---|---|---|
div |
分区 | 一个块级容器，用于布局和组合其他元素。 | <div>这是一个容器</div> |
span |
内联元素 | 一个内联容器，用于对文本的一部分进行样式化或操作。 | <p>这是一段<span style="color:red;">红色</span>的文字。</p> |
ul |
无序列表 | 创建一个项目符号列表。 | <ul><li>苹果</li><li>香蕉</li></ul> |
ol |
有序列表 | 创建一个带数字的列表。 | <ol><li>第一步</li><li>第二步</li></ol> |
li |
列表项 | 用于 ul 或 ol 中。 |
<li>列表项</li> |
img |
图像 | 在页面上显示图片。src 是图片路径，alt 是替代文本。 |
<img src="path/to/image.jpg" alt="一张美丽的风景"> |
table |
表格 | 创建表格。 | <table>...</table> |
tr |
表格行 | 表格中的行。 | <tr>...</tr> |
td |
表格数据 | 表格中的单元格。 | <td>单元格内容</td> |
th |
表头 | 表格中的标题单元格，通常加粗。 | <th>姓名</th> |
HTML 表单
表单用于收集用户输入。
<form action="/submit-data" method="post">
<label for="username">用户名:</label>
<input type="text" id="username" name="username" required>
<label for="password">密码:</label>
<input type="password" id="password" name="password">
<label for="gender">性别:</label>
<input type="radio" id="male" name="gender" value="male">
<label for="male">男</label>
<input type="radio" id="female" name="gender" value="female">
<label for="female">女</label>
<label for="hobbies">爱好:</label>
<input type="checkbox" id="reading" name="hobbies" value="reading">
<label for="reading">阅读</label>
<input type="checkbox" id="sports" name="hobbies" value="sports">
<label for="sports">运动</label>
<button type="submit">提交</button>
</form>
关键点：
<form>: 表单容器。action指定提交数据到的地址，method指定提交方法（get或post）。<label>: 为表单元素提供标签，for属性关联到对应input的id,点击标签可以聚焦到输入框。<input>: 最常用的输入控件。type: 输入类型，如text(文本),password(密码),radio(单选),checkbox(复选),submit(提交按钮) 等。name: 提交数据时的键名。id: 元素的唯一标识符，常被 CSS 和 JavaScript 使用。required: 表示该字段为必填项。
第二部分：CSS - 网页的衣裳
什么是 CSS？
CSS (Cascading Style Sheets) 是层叠样式表，它用来描述 HTML 元素如何被渲染和显示，比如颜色、字体、间距、布局等。
你可以把它想象成给设计图纸上的房子进行装修，你决定墙刷成什么颜色（background-color），家具怎么摆放（position, float），窗帘是什么样式（border, box-shadow）。
如何在 HTML 中使用 CSS
有三种方式，推荐使用外部样式表。
内联样式 (不推荐，难以维护)
直接在 HTML 标签的 style 属性中写 CSS。
<p style="color: blue; font-size: 20px;">这是一个蓝色的段落。</p>
内部样式表 (适用于单页面)
在 HTML 文件的 外部样式表 (最佳实践)
创建一个单独的 CSS 规则由选择器和声明块组成。
`选择器 { 属性1: 值1; 属性2<head> 标签内使用 <style>
<head>
<style>
p {
color: green;
font-family: Arial, sans-serif;
}
</style>
</head>
.css 文件（styles.css），然后在 HTML 中引入它。
styles.css 文件内容:body {
background-color: #f0f0f0;
font-size: 16px;
}
h1 {
color: #333;
text-align: center;
}
index.html 文件内容:<head>
<link rel="stylesheet" href="styles.css">
</head>
常用 CSS 属性
