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>
```
对应的CSS：
css
```
#main-title {
  color: blue;
}
```
class：class 是用来为多个元素设置相同样式的。多个元素可以有相同的 class，使用.作为选择器前缀。HTML元素通过 class="value" 来设置。
html
```
<div class="form-container">
  <form>...</form>
</div>
```
对应的CSS：
css
```
.form-container {
  background-color: lightgray;
  padding: 20px;
}
```

在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>
```

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;  // 会报错，无法修改常量的值
```

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 的实践，你会进一步熟悉这些技术。

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 元素

添加事件监听

解释

术语总结

前端三剑客