HTML, CSS, JS 基础

1. HTML 基础

1.1 HTML 和标签是什么？

HTML (HyperText Markup Language) 是构建网页的基础，它定义了网页的结构和内容。通过 HTML，你可以创建文本、图片、表格、链接等元素。 HTML 标签是网页的基本构建块，它们定义了网页中每个元素的作用和显示方式。大多数标签通过一对尖括号包裹，像这样： <标签名>内容</标签名> 。这种形式叫做双标签，标签内的内容会被浏览器渲染。比如：

html

<p>这是一个段落。</p>

有些标签是单独存在的，不需要结束标签。这些叫做自闭合标签，例如图片标签：

html

<img src="image.jpg" alt="描述">

每个标签通常由三部分组成：

标签名：定义了元素的类型（例如 <p> 表示段落， <img> 表示图片）。
属性：可以为标签添加额外的信息（例如 src 指定图片路径， href 指定链接地址）。
内容：在双标签中，标签包裹的内容将显示在页面上（例如 <p> 中的文本）。

常见特殊标签及其作用

<head>：包含页面的元数据，不显示在页面上。常用的属性有 meta 、 link 等，控制字符编码、引入 CSS 等。
<body>：包含网页的主要内容，显示在浏览器中。页面中所有的可见元素都应该放在 <body> 中。
<style>：放置 CSS 代码，用于直接在 HTML 文档中定义样式。
<script>：包含 JavaScript 代码，用来增加交互性和动态功能。

常见的属性

href：用于 <a> 标签，定义链接地址。例如， <a href="https://example.com">点击这里</a> 。
src：用于 <img> 、 <script> 等标签，定义资源路径。例如， <img src="image.jpg"> 会加载图片。

1.2 HTML 基本结构

每个 HTML 文件都有固定的结构，如下：

html

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>我的第一个网页</title>
</head>
<body>
  <h1>欢迎来到我的网页</h1>
  <p>这是我的第一个网页。</p>
</body>
</html>

简单说明：

<html>：所有 HTML 代码的外层元素。
<head>：包含页面的元数据，例如字符编码、标题等。
<body>：页面的主体内容，比如文本、图片、链接等都放在这里。
<h1> 到 <h6>：标题标签， <h1> 为最高级标题， <h6> 为最低级。
<p>：段落标签，用于放置文本段落。
<img>：图片标签，必须有 src 属性，指定图片的路径。
<a>：链接标签，用 href 指定链接地址。

示例：创建一个简单的调查问卷表单

html

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <title>调查问卷</title>
</head>
<body>
  <h1>调查问卷</h1>
  <form>
    <label for="name">姓名：</label>
    <input type="text" id="name" name="name"><br><br>

    <label for="age">年龄：</label>
    <input type="number" id="age" name="age"><br><br>

    <input type="submit" value="提交">
  </form>
</body>
</html>

在这一段调查问卷 HTML 代码中，有一些用于输入信息的标签和属性，下面简单讲解一下它们的作用：

<form>：这是一个表单标签，用于收集用户输入的数据。表单通常包含输入字段（如文本框、按钮），并且通过提交按钮将数据发送到服务器处理。
<label>：这个标签用来定义表单元素的标签文字，通常与输入框配合使用。它可以让表单更加清晰，指示用户应该在输入框中填写什么内容。
<input>：这是一个通用的输入标签，用于创建各种类型的表单控件，如文本框、数字输入框、提交按钮等。通过 type 属性，可以指定输入的类型，例如 text 表示文本框， number 表示数字输入框， submit 表示提交按钮。
for（属性）： <label> 标签的属性，用来与表单控件绑定。 for="name" 表示这个标签与 id="name" 的输入框相关联，点击标签时会自动聚焦到对应的输入框上。
id 和 name（属性）： <input> 标签的属性， id 用于唯一标识一个 HTML 元素， name 用于表单提交时标记数据字段的名称。 id 还可以让 JavaScript 和 CSS 方便地操作元素。

TIP: 如何预览 HTML 文件

方法 1：TXT 转 HTML，双击打开

使用文本编辑器（如记事本）编写 HTML 代码。
保存文件时，将文件名的后缀改为 .html ，例如 index.html 。
双击这个 .html 文件，它会自动在浏览器中打开，显示你编写的网页。

注意：虽然这个方法简单，但每次修改文件后需要重新双击打开浏览器刷新页面。

方法 2：使用 VSCode 的 Live Server 插件（推荐）

打开 VSCode（Visual Studio Code）编辑器。
在左侧扩展面板中搜索 Live Server 插件并安装。
安装完毕后，右键点击你的 .html 文件，选择 "Open with Live Server"。
浏览器将自动打开并展示你的网页。每次修改保存时，浏览器会自动刷新页面，非常方便。

推荐原因：方法 2 使用 Live Server 插件可以实时预览你的网页，节省手动刷新和打开浏览器的时间，适合频繁修改和调试时使用。

2. CSS 基础

2.1 CSS 简介

CSS (Cascading Style Sheets) 用于控制 HTML 元素的样式，例如颜色、字体、布局等。通过 CSS，你可以让网页看起来更美观。

2.2 CSS 基本语法

CSS 规则的基本结构如下：

css

selector {
  property: value;
}

selector：选择要应用样式的 HTML 元素。
property：要设置的样式属性，比如颜色、字体大小等。
value：属性的具体值。

2.3 常用 CSS 属性

color：设置文本颜色。
font-size：设置字体大小。
background-color：设置背景颜色。
margin/padding：控制外边距和内边距。

示例：给调查问卷添加样式

注意看 <style> 标签之间包裹的内容的格式与含义：

html

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <title>调查问卷</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      background-color: #f0f0f0;
    }
    h1 {
      color: #333;
    }
    form {
      background-color: #fff;
      padding: 20px;
      border-radius: 8px;
      width: 300px;
      margin: 0 auto;
    }
    label, input {
      display: block;
      margin-bottom: 10px;
    }
  </style>
</head>
<body>
  <h1>调查问卷</h1>
  <form>
    <label for="name">姓名：</label>
    <input type="text" id="name" name="name">

    <label for="age">年龄：</label>
    <input type="number" id="age" name="age">

    <input type="submit" value="提交">
  </form>
</body>
</html>

在这里的代码部分，使用了 CSS 选择器来定位页面中的不同元素并为其设置样式。我们来逐步解析这些选择器是如何选中元素的，以及样式的编写格式。

1. 代码中的 CSS 选择器如何选中元素？

body 选择器：直接选择 <body> 标签，表示作用于整个页面的主体内容。我们给整个页面设置了背景颜色 #f0f0f0 和字体 Arial 。
h1 选择器：直接选择 <h1> 标签，表示作用于页面中的一级标题。为标题文字设置了颜色为 #333 ，即深灰色。
form 选择器：选择 <form> 标签，表示作用于整个表单区域。我们为表单设置了白色背景、内边距（ padding ），边框圆角（ border-radius ），并让表单在页面中居中显示（通过设置宽度和 margin ）。
label, input 选择器：这是一个组合选择器，表示选择所有的 <label> 和 <input> 标签，作用在所有的表单标签文字和输入框上。通过 display: block ，我们让它们独占一行，并添加了 margin-bottom ，使它们之间有一定的间距。

例如， h1 { color: #333; } 的意思是选择 <h1> 元素，将其文字颜色设为深灰色 #333 。

2. 如何给标签设置 `class` 和 `id`

id： id 是用来唯一标识一个 HTML 元素的。如果你想针对页面中特定的某个元素应用样式，可以为其设置一个唯一的 id 。使用 # 作为选择器前缀。HTML 元素通过 id="value" 来设置。
html
```
<h1 id="main-title">调查问卷</h1>
```
1
对应的 CSS：
css
```
#main-title {
  color: blue;
}
```
1
2
3
class： class 是用来为多个元素设置相同样式的。多个元素可以有相同的 class ，使用 . 作为选择器前缀。HTML 元素通过 class="value" 来设置。
html
```
<div class="form-container">
  <form>...</form>
</div>
```
1
2
3
对应的 CSS：
css
```
.form-container {
  background-color: lightgray;
  padding: 20px;
}
```
1
2
3
4

在 HTML 中通过 class 或 id 属性来标识元素，然后在 CSS 中使用相应的选择器（ .class 或 #id ）来应用样式，确保页面的布局和设计更加灵活可控。

3. JavaScript 基础

3.1 JavaScript 简介

JavaScript 是网页开发中的一门编程语言，用于让网页变得更加动态和交互式。你可以通过 JavaScript 处理用户输入、点击事件等，让网页不只是一个静态的页面。

3.2 JavaScript 语法基础

JavaScript 代码可以放在 html 文件里的 <script> 标签中，也可以通过 src 属性引入一个 JavaScript 文件。现在我们先用第一中方法。

在 HTML 文件中直接写入 JavaScript：

html

<script>
  console.log('你好，JavaScript！');
</script>

通过 src 属性引入外部文件：
html
```
<script src="app.js"></script>
```
1

3.3 JavaScript 的基本写法

我们之前已经学过一点 python 语法，在课堂上老师也教过一些 C++ 语法，实际上编程语言的基础写法部分有很多都是相通的。在阅读的时候应该注意类比学习而不是从头理解。

变量用于存储数据。在 JavaScript 中，使用 let 或 const 来声明变量。

let：声明可以更改的变量。

let name = "Alice";
let age = 25;
name = "Bob";  // 可以修改变量值

const：声明不能更改的常量，值一旦设置就不能被修改。
js
```
const pi = 3.14;
// pi = 3.15;  // 会报错，无法修改常量的值
```
1
2

3.4 数据类型

JavaScript 支持多种数据类型，常见的有：

字符串（String）：用引号括起来的一串文本，例如 "Hello" 。
数字（Number）：包括整数和小数，例如 42 或 3.14 。
布尔值（Boolean）：表示 true （真）或 false （假）。

示例：

let name = "Alice";  // 字符串
let age = 25;        // 数字
let isStudent = true;  // 布尔值

3.5 条件语句

条件语句用来控制程序根据不同的条件执行不同的代码。最常用的条件语句是 if...else 。

示例：

let age = 18;

if (age >= 18) {
  console.log("你是成年人");
} else {
  console.log("你是未成年人");
}

if 语句：检查条件是否为 true ，如果为真，则执行 if 语句块中的代码。
else 语句：当 if 条件为 false 时，执行 else 语句块中的代码。

3.6 函数

函数是一组可以被反复调用的代码块，用来执行特定的任务。函数可以接收参数并返回结果。

函数定义的基本结构：

function 函数名(参数) {
  // 执行的代码
}

示例：

function greet(name) {
  return "你好, " + name + "!";
}

console.log(greet("Alice"));  // 输出：你好, Alice!

在这个例子中，我们定义了一个 greet 函数，它接受一个 name 参数，并返回一个带有问候语的字符串。

3.7 操作 HTML 元素（DOM）

JavaScript 可以用来操作 HTML 元素，例如修改网页内容或响应用户的操作。我们可以通过 DOM（Document Object Model）来访问和修改 HTML。

选择 HTML 元素

我们使用 document.getElementById 或 document.querySelector 来选择页面中的元素。

let title = document.getElementById("main-title");  // 根据id选择元素
let button = document.querySelector("button");  // 选择第一个<button>标签

修改 HTML 元素

我们可以通过 JavaScript 修改 HTML 元素的内容或样式。例如，修改一个标题的文本内容：

let title = document.getElementById("main-title");
title.innerText = "新的标题";  // 修改标题内容

添加事件监听

JavaScript 还可以为页面元素添加事件监听，比如当用户点击按钮时执行某个动作。使用 addEventListener 方法可以监听用户的交互操作。

示例：点击按钮时弹出提示框

html

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <title>按钮事件</title>
</head>
<body>
  <h1 id="main-title">欢迎！</h1>
  <button id="myButton">点击我</button>

  <script>
    const button = document.getElementById("myButton");  // 选择按钮
    button.addEventListener("click", function() {        // 添加点击事件监听
      alert("按钮被点击了！");
    });
  </script>
</body>
</html>

解释

getElementById("myButton")：我们通过按钮的 id 来选择页面中的 <button> 元素。
addEventListener("click", function() {...})：为按钮添加一个 “点击” 事件，当用户点击按钮时，执行函数中的代码。
alert()：浏览器自带的函数，用来弹出一个提示框。

术语总结

变量：用于存储数据， let 和 const 是声明变量的方式。
条件语句：通过 if...else 控制代码的执行逻辑。
函数：一组可复用的代码块，用于执行特定任务。
DOM 操作：使用 JavaScript 修改页面元素的内容或样式，或者响应用户的交互（如点击事件）。

前端三剑客

HTML：构建网页的骨架，定义了内容的结构。
CSS：用于美化网页，控制内容的样式和布局。
JavaScript：让网页具有交互性，响应用户的操作。

通过这三种技术的结合，你可以创建出既美观又具有交互性的网页。接下来，通过 Lab 和 Homework 的实践，你会进一步熟悉这些技术。

4.2.1 导读模块

4.2.2 前端三件套基础

4.2.3 现代前端技术栈

4.3.1 引入

4.3.2 week-1 前端三件套

4.3.3 week-2 Git初步

4.3.4 week-3 DOM操作 Node基础

4.3.5 week-4 Vue入门 Express路由

4.3.6 week-5 Vue路由 POST请求处理

HTML, CSS, JS 基础

1. HTML 基础

1.1 HTML 和标签是什么？

常见特殊标签及其作用

常见的属性

1.2 HTML 基本结构

示例：创建一个简单的调查问卷表单

方法 1：TXT 转 HTML，双击打开

方法 2：使用 VSCode 的 Live Server 插件（推荐）

2. CSS 基础

2.1 CSS 简介

2.2 CSS 基本语法

2.3 常用 CSS 属性

示例：给调查问卷添加样式

1. 代码中的 CSS 选择器如何选中元素？

2. 如何给标签设置 `class` 和 `id`

3. JavaScript 基础

3.1 JavaScript 简介

3.2 JavaScript 语法基础

3.3 JavaScript 的基本写法

3.4 数据类型

3.5 条件语句

3.6 函数

3.7 操作 HTML 元素（DOM）

选择 HTML 元素

修改 HTML 元素

添加事件监听

解释

术语总结

前端三剑客

HTML, CSS, JS 基础 ​

1. HTML 基础 ​

1.1 HTML 和标签是什么？ ​

常见特殊标签及其作用 ​

常见的属性 ​

1.2 HTML 基本结构 ​

示例：创建一个简单的调查问卷表单 ​

方法 1：TXT 转 HTML，双击打开 ​

方法 2：使用 VSCode 的 Live Server 插件（推荐） ​

2. CSS 基础 ​

2.1 CSS 简介 ​

2.2 CSS 基本语法 ​

2.3 常用 CSS 属性 ​

示例：给调查问卷添加样式 ​

1. 代码中的 CSS 选择器如何选中元素？ ​

2. 如何给标签设置 class 和 id ​

3. JavaScript 基础 ​

3.1 JavaScript 简介 ​

3.2 JavaScript 语法基础 ​

3.3 JavaScript 的基本写法 ​

3.4 数据类型 ​

3.5 条件语句 ​

3.6 函数 ​

3.7 操作 HTML 元素（DOM） ​

选择 HTML 元素 ​

修改 HTML 元素 ​

添加事件监听 ​

解释 ​

术语总结 ​

前端三剑客 ​

HTML, CSS, JS 基础

1. HTML 基础

1.1 HTML 和标签是什么？

常见特殊标签及其作用

常见的属性

1.2 HTML 基本结构

示例：创建一个简单的调查问卷表单

方法 1：TXT 转 HTML，双击打开

方法 2：使用 VSCode 的 Live Server 插件（推荐）

2. CSS 基础

2.1 CSS 简介

2.2 CSS 基本语法

2.3 常用 CSS 属性

示例：给调查问卷添加样式

1. 代码中的 CSS 选择器如何选中元素？

2. 如何给标签设置 `class` 和 `id`

3. JavaScript 基础

3.1 JavaScript 简介

3.2 JavaScript 语法基础

3.3 JavaScript 的基本写法

3.4 数据类型

3.5 条件语句

3.6 函数

3.7 操作 HTML 元素（DOM）

选择 HTML 元素

修改 HTML 元素

添加事件监听

解释

术语总结

前端三剑客