第一章：开发准备
1.1 概述
- 要想进行 WEB 前端的开发，必须要先安装好开发工具，如下所示：
点我查看 具体细节
- ① vscode 是代码编辑器，主要用来编写前端代码（免费）。
- ② 浏览器是用来显示网页效果的。
1.2 安装 vscode
1.2.1 手动版
- ① 下载 安装包，如下所示：
- ② 双击
安装包，如下所示：
- ③ 点击
我同意此协议，并点击下一步，如下所示：
- ④ 点击
下一步，如下所示：
- ⑤ 点击
下一步，如下所示：
- ⑥ 点击
下一步，如下所示：
- ⑦ 点击
安装，如下所示：
- ⑧ 点击
完成，如下所示：
- ⑨ 安装插件，如下所示：
1.2.2 自动版
- 格式：
powershell
winget install --id Microsoft.VisualStudioCode -e --source winget- 示例：
powershell
winget install --id Microsoft.VisualStudioCode -e --source winget
1.3 安装 Chrome
1.3.1 手动版
- ① 下载 安装包，如下所示：
- ② 双击
安装包，如下所示：
- ③ 浏览器使用，如下所示：
1.3.2 自动版
- 格式：
powershell
winget install --id Google.Chrome -e --source winget- 示例：
powershell
winget install --id Google.Chrome -e --source winget
第二章：初识 HTML
2.1 概述
HTML是一种标记语言，是用来构建网页结构和网页内容的标准标记语言。
点我查看 具体细节
- ①
HTML的全称是HyperTextMarkupLanguage，即：超文本标记语言。 - ② 网页的“骨架”：HTML 定义了网页上有哪些元素，如：标题、段落、图片、按钮、链接、表格和表单等。
- ③ 配合其他技术，如下所示：
| 其他技术 | 描述 |
|---|---|
| CSS | 负责网页的 外观样式，如：字体、颜色、布局、响应式排版。 |
| JavaScript | 负责网页的 交互逻辑，如：动态加载、点击事件、数据处理。 |
2.2 HTML 基本语法
2.2.1 概述
- HTML 的基础语法，构建了网页的内容骨架。
- HTML5 引入了语义化、原生多媒体以及强大的 WEB API 。
2.2.2 标签和属性
- 格式：
html
<标签 属性="值" ...> 内容 </标签>
│ │ │ └─ 结束标签
│ │ └────── 内容
│ └─────────────────── 属性
└──────────────────────── 开始标签点我查看 具体细节
- ① HTML 使用标签（Tags）包裹内容，绝大多数标签都是成对出现的，包含开始标签、内容和结束标签。
- ② 标签与属性结构，如下所示：
| 类型 | 描述 |
|---|---|
| 双标签 | <p>段落内容</p> |
| 单标签（自闭合） | <img src="photo.jpg" alt="描述">、<br/>、<hr> |
| 属性（Attributes） | 在开始标签中以 key="value" 形式提供附加信息，如： id、class、src、href。 |
- 示例：
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<title>Document</title>
</head>
<body>
<!-- h1 是双标签 -->
<h1>什么是 HTML</h1>
<!-- hr 是单标签 -->
<hr>
<!--
p 是双标签
title="" 属性用于设置元素的标题
-->
<p title="这是p标签">
p 是 HTML 中的段落标签
</p>
</body>
</html>