二、HTML 表单和 CSS 基础

内容概述

这一课在 HTML 基础之上，进一步介绍更高级的 HTML 元素和概念，特别是表单（Form）的使用，这对于实现用户交互至关重要。此外，还将学习初步使用 CSS，最后，需要大家结合这两个知识点，完成一道综合练习题——做一个使用 CSS 美化的表单网页。

教学目标

能够创建包含表单的 HTML 页面，利用不同的表单控件收集用户输入。
了解并使用 HTML5 新表单特性。
初步掌握如何在 HTML 中引入和编写基础 CSS 样式。

具体内容

表单基础（<form>标签）
表单基础控件（文本输入框、复选框、单选按钮、下拉选择等）
HTML5 的 <input> 类型
CSS 基础（内联样式、内部样式表、外部样式表、基础 CSS 用法）
综合练习题

表单基础

HTML 表单用于收集用户的输入信息。
HTML 表单表示文档中的一个区域，此区域包含交互控件，将用户收集到的信息发送到 Web 服务器。
HTML 表单通常包含各种输入字段、复选框、单选按钮、下拉列表等元素。
<form> 元素用于创建表单，当你想要创建一个 HTML 表单时，都必须从这个元素开始，然后把所有内容都放在里面。form 元素包含以下属性：
- action: 属性定义了表单数据提交的目标 URL
- method: 属性定义了提交数据的 HTTP 方法

代码示例：

html

<form action="/my-handling-form-page" method="post"></form>

严格禁止在一个表单内嵌套另一个表单。嵌套会使表单的行为不可预知，而这取决于正在使用的浏览器。

表单基础控件

表单控件是 HTML 表单中用于收集用户输入的元素。不同的表单控件有不同的功能和用途，但它们都有一些相同的属性：

name：定义输入字段的名称，当表单数据提交到服务器时，此名称将用作字段的键。
value：为输入字段定义初始值或用户输入的值（对于某些类型如 checkbox 和 radio，value 定义了提交到服务器的值）。
disabled：一个布尔属性，默认值 false，禁用输入字段。被禁用的字段不会随表单一起提交。
autofocus: 默认值 false，这个布尔属性允许你指定当页面加载时元素应该自动具有输入焦点，除非用户覆盖它，例如通过键入不同的控件。文档中只有一个与表单相关的元素可以指定这个属性。

以下是常用的基础控件：

单行文本框 `<input type="text" />`

<input type="text"> 元素在 HTML 中用于创建一个单行文本输入框，允许用户输入文本数据。它是表单中最常用的输入类型之一，广泛应用于各种需要用户输入的场景中。

常用属性：

name：定义输入字段的名称，这个名称在表单提交时会随同用户输入的数据一起发送到服务器。
value：定义输入字段的初始值。如果表单被提交，并且该字段未被用户修改，那么 value 属性的值将作为该字段的值发送到服务器。
placeholder：提供一个灰色的提示信息，在输入字段为空时显示，用于指导用户应该输入什么内容。当用户开始输入时，提示信息会自动消失。
maxlength：定义输入字段允许的最大字符数。如果输入的字符数超过了这个限制，那么超出的部分将不会被接受。
readonly：一个布尔属性，指定输入字段是否应该被设置为只读。只读字段不能被用户修改，但可以被复制和通过脚本修改。
disabled：一个布尔属性，指定输入字段是否应该被禁用。被禁用的字段既不可读也不可写，用户无法与之交互。
autofocus：一个布尔属性，指定当页面加载时，输入字段应该自动获得焦点。但请注意，一个页面上只能有一个元素具有 autofocus 属性。
required：一个布尔属性，指定在提交表单之前，输入字段的值不能为空。如果为空，则表单无法提交。

代码示例：

html

<form>
  <label for="username">用户名:</label>
  <input
    type="text"
    id="username"
    name="username"
    placeholder="请输入用户名"
    maxlength="20"
    required
  />
  <br />
  <label for="email">电子邮件:</label>
  <input
    type="text"
    id="email"
    name="email"
    placeholder="example@example.com"
    readonly
  />
  <p>注意：电子邮件字段为只读，用户不能修改。</p>
  <br />
  <input type="text" name="description" disabled placeholder="此字段已禁用" />
  <p>此字段已禁用，用户无法与之交互。</p>
  <button type="submit">提交</button>
</form>

在上面的示例中，展示了三个 <input type="text"> 元素：第一个用于输入用户名，设置了 placeholder、maxlength 和 required 属性；第二个用于显示电子邮件地址，但设置为只读，用户无法修改；第三个是一个禁用的输入字段，用户无法与之交互。这些示例展示了 <input type="text"> 元素的一些常见用法和属性。

密码框 `<input type="password" />`

如果想要单行文本框中输入的内容是密码，而不是明文，可以使用 type="password"。

代码示例：
html
<input type="password" />
1

多行文本框 `<textarea>`

<textarea> 元素在 HTML 中用于创建一个多行文本输入框，允许用户输入和编辑多行文本。它是表单中用于收集用户大量输入（如评论、反馈或文章等）的常用元素。

常用属性：

name：定义文本区域的名称，这个名称在表单提交时会随同用户输入的数据一起发送到服务器。
cols：定义文本区域的可见宽度（以字符宽度为单位）。但请注意，这个属性只是建议宽度，实际宽度可能受到 CSS 样式的影响。
rows：定义文本区域的可见行数。同样，这个属性也只是建议高度，实际高度可能受到 CSS 样式的影响。
placeholder：提供一个灰色的提示信息，在文本区域为空时显示，用于指导用户应该输入什么内容。当用户开始输入时，提示信息会自动消失。注意，并非所有浏览器都支持在 <textarea> 元素上使用 placeholder 属性。
maxlength：定义文本区域允许的最大字符数。但请注意，并非所有浏览器都支持在 <textarea> 元素上使用 maxlength 属性，且其行为可能因浏览器而异。对于需要限制字符数的场景，建议使用 JavaScript 来实现。
readonly：一个布尔属性，指定文本区域是否应该被设置为只读。只读文本区域不能被用户修改，但可以被复制和通过脚本修改。
disabled：一个布尔属性，指定文本区域是否应该被禁用。被禁用的文本区域既不可读也不可写，用户无法与之交互。

代码示例：

html

<form>
  <label for="comment">评论:</label>
  <textarea
    id="comment"
    name="comment"
    rows="10"
    cols="30"
    placeholder="请在此处输入您的评论..."
    maxlength="500"
  ></textarea>
  <br />
  <textarea id="readonlyText" name="readonlyText" rows="4" cols="40" readonly>
这是只读的文本区域，用户无法修改。</textarea
  >
  <p>注意：上面的文本区域是只读的。</p>
  <br />
  <textarea id="disabledText" name="disabledText" rows="4" cols="40" disabled>
此文本区域已禁用，用户无法与之交互。</textarea
  >
  <p>此文本区域已禁用。</p>
  <button type="submit">提交</button>
</form>

在上面的示例中，展示了三个 <textarea> 元素：第一个用于输入评论，设置了 rows、cols、placeholder 和 maxlength 属性；第二个设置为只读，用户无法修改其内容；第三个是一个禁用的文本区域，用户无法与之交互。这些示例展示了 <textarea> 元素的一些常见用法和属性。

提交按钮 `<input type="submit" />`

<input> 元素在 HTML 中也用于创建提交按钮，当 type 属性被设置为 "submit" 时，它表示一个用于提交表单的按钮。当用户点击此按钮时，浏览器会将表单中的数据发送给服务器。

常用的属性有：

value：定义按钮上显示的文本。如果未设置，大多数浏览器将默认显示为“提交”或“Submit”。

代码示例：

html

<form action="/submit-form" method="post">
  <input type="text" name="msg" placeholder="请输入要发送的信息" />
  <!-- 表单内容 -->
  <input type="submit" value="发送" />
</form>

在这个例子中，<input type="submit" value="提交表单" /> 创建了一个提交按钮，其上的文本为“发送”。当用户点击此按钮时，表单的内容将通过 POST 方法发送到 "/submit-form" URL。

重置按钮 `<input type="reset" />`

<input> 元素在 HTML 中也可以被用来创建重置按钮，当 type 属性被设置为 "reset" 时，它表示一个用于重置表单中所有字段到其初始值的按钮。这对于给用户提供一个快速清除表单中所有输入的方式非常有用。

常用的属性有：

value：定义按钮上显示的文本。如果未设置，大多数浏览器将默认显示为“重置”或“Reset”。

代码示例：

html

<form action="/submit-form" method="post">
  <!-- 表单内容 -->
  <input type="text" name="username" value="初始值" />
  <input type="password" name="password" />
  <!-- 其他表单元素 -->
  <input type="reset" value="重置表单" />
  <input type="submit" value="提交表单" />
</form>

在这个例子中，<input type="reset" value="重置表单" /> 创建了一个重置按钮，其上的文本为“重置表单”。当用户点击此按钮时，表单中的所有字段都将被重置为其初始值。同时，表单中的其他字段也将被重置到它们各自的初始状态。

复选框 `<input type="checkbox" />`

复选框允许用户在一组选项中选择多个。每个复选框都是独立的，用户可以同时选中多个复选框。

常用属性：

name：定义复选框的名称，通常用于将一组相关的复选框组织在一起，以便在提交表单时能够识别哪些复选框被选中。
value：定义复选框被选中时发送到服务器的值。
checked：一个布尔属性，指定复选框在页面加载时是否应该被选中。

代码示例：

html

<form action="/submit-form" method="post">
  <label
    ><input type="checkbox" name="interest" value="reading" checked />
    阅读</label
  ><br />
  <label
    ><input type="checkbox" name="interest" value="swimming" /> 游泳</label
  ><br />
  <label><input type="checkbox" name="interest" value="coding" /> 编程</label>
  <input type="submit" value="提交表单" />
</form>

单选框 `<input type="radio" />`

单选框允许用户在一组选项中选择一个。与复选框不同，单选框是互斥的，同一组中的单选框只能有一个被选中。

常用属性：

name：定义单选框的名称，同一组单选框应具有相同的名称，以便在提交表单时能够识别用户选择了哪个选项。
value：定义单选框被选中时发送到服务器的值。
checked：一个布尔属性，指定单选框在页面加载时是否应该被选中。

代码示例：

html

<form>
  <label><input type="radio" name="gender" value="male" checked /> 男</label
  ><br />
  <label><input type="radio" name="gender" value="female" /> 女</label><br />
  <label><input type="radio" name="gender" value="other" /> 其他</label>
  <input type="submit" value="提交表单" />
</form>

在以上两个示例中，<label> 元素用于提高可访问性，它通过点击标签文本也能选中对应的复选框或单选框。同时，checked 属性用于设置页面加载时哪些选项应该被预先选中。

`<label>` 元素

<label> 元素在 HTML 中用于定义表单控件的标签（label）。它不仅是为了提高表单的可访问性，还能通过点击标签来激活与之关联的表单控件，比如输入框、复选框、单选按钮等。这对于改善用户体验非常有帮助，特别是当表单控件被放置在标签文本内部或由于样式设计而难以直接点击时。

常用属性有：

for：定义 label 元素与哪个表单元素关联。其值应与关联表单元素的 id 属性值相同。

代码示例：

html

<form>
  <!-- 关联复选框的 Label -->
  <label for="subscribe">订阅我们的邮件列表:</label>
  <input type="checkbox" id="subscribe" name="subscribe" value="yes" />

  <!-- 直接包含单选按钮的 Label -->
  性别:
  <label>
    <input type="radio" name="gender" value="male" checked /> 男
  </label>
  <label> <input type="radio" name="gender" value="female" /> 女 </label>
</form>

在上面的示例中，第一个 <label> 元素通过 for 属性与 id 为 "subscribe" 的复选框相关联。第二个 <label> 元素则直接包含了两个单选按钮，因此这些单选按钮默认与这个 <label> 元素关联。无论哪种方式，点击标签文本都会激活（或选中）与之关联的表单控件。

`<select>` 元素

<select> 元素在 HTML 中用于创建下拉选择菜单，允许用户从一组预定义选项中选择一个或多个值。它是表单控件的一种，常用于收集用户输入的数据。

常用属性：

name：定义下拉选择菜单的名称，这个名称在表单提交时会随同用户选择的选项值一起发送到服务器。
multiple：一个布尔属性，指定用户是否可以选择多个选项。如果设置了此属性，下拉列表将变成多选模式，用户可以按住 Ctrl（Windows）或 Command（Mac）键来选择多个选项。
size：定义下拉列表中可见选项的数量。如果设置了此属性，并且值大于 1，下拉列表将显示为列表框的形式，用户可以在不打开下拉列表的情况下看到多个选项。
disabled：一个布尔属性，指定下拉选择菜单是否应该被禁用。被禁用的下拉列表将不可交互，用户不能选择其中的任何选项。
required：一个布尔属性，指定在提交表单前，用户必须选择一个选项。注意，这个属性不适用于设置了 multiple 属性的 <select> 元素。

代码示例：

html

<form>
  <label for="country">选择国家:</label>
  <select name="country" id="country">
    <option value="china">中国</option>
    <option value="usa">美国</option>
    <option value="uk">英国</option>
    <option value="canada">加拿大</option>
  </select>

  <label for="hobbies">选择爱好（可多选）:</label>
  <select name="hobbies" id="hobbies" multiple>
    <option value="reading">阅读</option>
    <option value="swimming">游泳</option>
    <option value="coding">编程</option>
    <option value="music">音乐</option>
  </select>
  <input type="submit" value="提交表单" />
</form>

在上面的示例中，第一个 <select> 元素是一个标准的下拉选择菜单，用户只能从给定的选项中选择一个。第二个 <select> 元素通过设置 multiple 属性变为了多选模式，用户可以选择多个爱好。注意，每个 <option> 元素定义了一个选项，其 value 属性指定了当该选项被选中时发送到服务器的值。

`<button>` 元素

<button> 元素在 HTML 中用于创建一个可点击的按钮。它是表单和网页中常用的用户交互元素之一，可以执行各种操作，如提交表单、打开新页面、执行 JavaScript 代码等。

常用属性：

type：定义按钮的类型。常见的值有 "submit"（提交表单，默认类型）、"reset"（重置表单）、"button"（普通按钮，不直接提交或重置表单）。
name：定义按钮的名称。对于类型为 "submit" 的按钮，其名称和值（如果有的话）会在表单提交时随同其他表单数据一起发送到服务器。
value：定义按钮的值。对于类型为 "submit" 的按钮，这个值会在表单提交时发送给服务器。对于类型为 "button" 或未指定类型的按钮，这个值通常用于 JavaScript 交互中。
onclick：一个事件属性，指定当按钮被点击时应该执行的 JavaScript 代码。
disabled：一个布尔属性，指定按钮是否应该被禁用。被禁用的按钮将不可交互，用户无法点击它。

代码示例：

html

<form action="/submit-form" method="post">
  <!-- 提交按钮 -->
  <button type="submit">提交表单</button>

  <!-- 重置按钮 -->
  <button type="reset">重置表单</button>

  <!-- 普通按钮，通过 JavaScript 执行操作 -->
  <button type="button" onclick="alert('Hello, World!')">点击我</button>

  <!-- 禁用的按钮 -->
  <button type="button" disabled>禁用按钮</button>
</form>

在上面的示例中，展示了四种不同类型的 <button> 元素：一个用于提交表单的按钮，一个用于重置表单的按钮，一个执行 JavaScript 弹出警告框的普通按钮，以及一个被禁用的按钮。type 属性决定了按钮的默认行为，而 onclick 属性则允许我们为按钮添加自定义的 JavaScript 交互。disabled 属性用于防止用户与按钮交互。name 和 value 属性在表单提交时可能会用到，具体取决于按钮的类型和上下文。

`<fieldset>` 元素

<fieldset> 元素在 HTML 中用于对表单中的相关元素进行分组。它通常与 <legend> 元素一起使用，<legend> 元素为 <fieldset> 定义了一个标题或说明。使用 <fieldset> 可以提高表单的可读性和可访问性，同时也便于通过 CSS 对表单的特定部分进行样式设计。

常用属性：

disabled：一个布尔属性，指定整个 <fieldset> 内的表单控件是否应该被禁用。当设置此属性时，<fieldset> 内的所有表单控件（如 <input>、<button>、<select> 等）都将变得不可交互。

代码示例：

html

<form>
  <fieldset>
    <legend>用户信息</legend>
    <label for="username">用户名:</label>
    <input type="text" id="username" name="username" /><br />
    <label for="email">电子邮件:</label>
    <input type="email" id="email" name="email" /><br />
    <!-- 其他用户信息输入控件 -->
  </fieldset>

  <fieldset disabled>
    <legend>额外信息（禁用）</legend>
    <label for="address">地址:</label>
    <input type="text" id="address" name="address" /><br />
    <!-- 其他被禁用的输入控件 -->
  </fieldset>

  <button type="submit">提交</button>
</form>

在上面的示例中，<fieldset> 元素被用来将用户信息相关的表单控件分组，并通过 <legend> 元素提供了该组的标题。第二个 <fieldset> 元素通过 disabled 属性被禁用，这意味着其内的所有表单控件都将变得不可交互。这种方式可以有效地控制表单中不同部分的可用性和可见性。

HTML5 的 `<input>` 类型

HTML5 为 <input> 元素的 type 属性增加了一些新的值，用于创建不同类型的输入字段。

email：创建一个电子邮件地址的输入字段，会根据电子邮件地址的格式自动验证输入。
number：创建一个数值输入字段，用户可以输入数字。此类型会提供一个上下箭头来允许用户增加或减少数值。
date：允许用户选择一个日期。根据浏览器的不同，显示的格式和选择器样式可能会有所不同。
time：允许用户选择一个时间（小时和分钟，可选秒和时区）。
datetime-local：允许用户选择日期和时间（无时区）。这类似于 date 和 time 输入类型的组合，但不包括时区信息。
month：允许用户选择一个月份和年份。通常呈现为一个日期选择器，但用户只能选择月份和年份。
week：允许用户选择一个周和年份。这通常呈现为一个日期选择器，但用户只能选择周和年份。
file：允许用户选择一个或多个文件以提交到服务器。
color：允许用户选择颜色。
range：创建一个滑动条，用户可以从中选择一个预定义范围内的数值。
search：用于搜索字段。这个类型的输入字段在外观上可能与其他文本字段相似，但浏览器可能会为它们提供特定的样式（如清除按钮），另外，在动态键盘设备上，键盘的回车键会显示“search”，或显示为放大镜图标。
tel：创建一个电话号码的输入字段，但不会进行特定的格式验证（这取决于浏览器）。当使用带有动态键盘的移动设备访问带有 type="tel" 的表单时，大多数设备会显示数字键盘。这意味着只要数字键盘有用，这种类型就很有用，而且不只是用于电话号码。
url：创建一个 URL 的输入字段，会根据 URL 的格式自动验证输入。

CSS 基础

CSS 简介

定义：CSS 是一种用来控制网页外观和排版的技术。
发展历程：经历了 CSS1.0、CSS2.0、CSS2.1、CSS3.0 等版本，CSS3.0 是目前的最新版本。
功能：能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。

CSS 基本语法

CSS 语法规则由两个主要的部分构成：选择器，以及一条或多条声明；CSS 声明总是以分号 ; 结束，声明总以大括号 {} 括起来：

为了让 CSS 可读性更强，你可以每行只描述一个属性。如：

css

h1 {
  color: blue; /* 字体颜色蓝色 */
  font-size: 12px; /* 字体大小12像素 */
}

上面以 /* 开始, 以 */ 结束的文本，是 CSS 注释，浏览器会忽略它。

CSS 有两个重要的特性：

层叠性：CSS 的层叠性允许对同一个元素进行多次样式设置，最终效果取决于样式的优先级。
继承性：某些 CSS 属性可以从父元素继承到子元素，例如字体大小属性 font-size 。

CSS 引入

说明：这是使用 CSS 的第一步，介绍如何将 CSS 样式应用到 HTML 文档中。包括内联样式、内部样式表（<style>标签内）、外部样式表（通过<link>标签引入）三种方式。
重要性：理解 CSS 的引入方式对于实际开发中控制样式表的组织和管理至关重要。

CSS 的引入方式主要有三种：内联样式、内部样式表、外部样式表。每种方式都有其适用场景和优缺点。

1. 内联样式

定义：直接在 HTML 元素的style属性中编写 CSS 样式。

示例：

html

<p style="color: red; font-size: 20px;">这是一个红色的段落。</p>

优点：

快速应用样式到单个元素，无需额外的 CSS 文件或<style>标签。

缺点：

只能影响单个元素，不利于样式的复用和维护。
增加了 HTML 文档的复杂性和体积。
违反了内容与样式分离的原则。

2. 内部样式表

定义：在 HTML 文档的<head>部分，使用<style>标签定义 CSS 样式。这些样式将应用于当前页面的所有 HTML 元素。

示例：

html

<!DOCTYPE html>
<html>
  <head>
    <title>页面标题</title>
    <style>
      body {
        background-color: lightblue;
      }
      p {
        color: navy;
      }
    </style>
  </head>
  <body>
    <p>这是一个海军蓝色的段落，页面背景是浅蓝色。</p>
  </body>
</html>

优点：

样式定义与 HTML 文档紧密结合，方便查看和编辑。
适用于单个页面的样式定义，避免了外部文件的加载时间。

缺点：

如果多个页面使用相同的样式，则需要重复编写相同的 CSS 代码，不利于样式的复用和维护。
随着页面增多，CSS 代码可能会变得冗长和难以管理。

3. 外部样式表

定义：将 CSS 样式编写在一个或多个外部的.css文件中，然后在 HTML 文档中通过<link>标签引入这些 CSS 文件。

示例：

styles.css（CSS 文件）

css

body {
  background-color: lightblue;
}

p {
  color: navy;
}

HTML 文档

html

<!DOCTYPE html>
<html>
  <head>
    <title>页面标题</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <p>这是一个海军蓝色的段落，页面背景是浅蓝色。</p>
  </body>
</html>

优点：

实现了内容与样式的完全分离，有利于页面的维护和更新。
提高了样式的复用性，多个页面可以共享同一个 CSS 文件。
减少了 HTML 文档的体积，提高了加载速度。

缺点：

需要额外的 HTTP 请求来加载 CSS 文件，可能会稍微增加页面加载时间（但这通常不是问题，因为浏览器会缓存 CSS 文件）。
需要管理好 CSS 文件的路径和命名，以避免引入错误或找不到文件的问题。

综上所述，根据项目的具体需求和规模，开发者可以选择最适合的 CSS 引入方式来编写和维护样式。在实际开发中，外部样式表因其高效性和可维护性而被广泛采用。

CSS 选择器

说明：选择器是 CSS 的基础，也是核心，用于指定哪些 HTML 元素应该被应用样式。包括元素选择器、类选择器、ID 选择器、属性选择器、后代选择器、子选择器、相邻兄弟选择器等。
重要性：掌握选择器是编写高效、可维护 CSS 代码的基础。

1. 基本分类

CSS 选择器主要可以分为以下几大类：

基本选择器：
- 元素选择器：根据 HTML 元素的名称选择元素，如p选择所有<p>元素。
- 类选择器：选择具有特定 class 属性的 HTML 元素，以点号(.)开头，后跟类名，如.example选择所有 class 为"example"的元素。
- ID 选择器：选择具有特定 ID 属性的 HTML 元素，以井号(#)开头，后跟 ID 名称，如#header选择 ID 为"header"的元素。ID 在页面中是唯一的。
- 通配符选择器：选择页面上的所有 HTML 元素，使用星号(*)。
组合选择器：
- 后代选择器（空格分隔）：选择某个元素内部的后代元素，如div p选择所有位于<div>元素内部的<p>元素。
- 子选择器（>）：选择某个元素的直接子元素，如ul > li选择所有<ul>元素下的直接子元素<li>。
- 相邻选择器（+）：选择紧接在另一个元素后的元素，且两者具有相同的父元素，如h1 + p选择所有紧跟在<h1>元素后的<p>元素。
- 通用兄弟选择器（~）：选择某个元素之后的所有同级兄弟元素，如h1 ~ p选择所有在<h1>元素之后的同级<p>元素。
- 分组选择器（,）：将多个选择器组合在一起，对它们应用相同的样式，如h1, h2, h3 { color: red; }。
属性选择器：
- 根据元素的属性及属性值来选择元素。例如：
  - [attribute]：选择具有指定属性的元素。
  - [attribute="value"]：选择属性值完全等于指定值的元素。
  - [attribute~="value"]：选择属性值包含指定单词的元素。
  - [attribute^="value"]：选择属性值以指定值开头的元素。
  - [attribute$="value"]：选择属性值以指定值结尾的元素。
  - [attribute*="value"]：选择属性值包含指定值的元素。
伪类选择器：
- 用于选择处于特定状态的元素，如:hover（鼠标悬停时）、:active（鼠标按下时）、:focus（元素获得焦点时）等。
伪元素选择器：
- 用于选择元素的特定部分，如::before和::after用于在元素内容之前或之后插入新内容，::first-letter和::first-line用于选择文本的首字母或首行。伪元素选择器在 CSS3 中通常使用两个冒号（::）来表示，以区分伪类。

2. 使用场景

基本选择器适用于简单的样式应用，如对所有段落应用相同的字体大小或颜色。
组合选择器在需要基于元素之间的关系来选择元素时非常有用，如只对特定父元素下的子元素应用样式。
属性选择器在需要根据元素的特定属性或属性值来选择元素时非常灵活。
伪类选择器在需要为处于特定状态的元素应用样式时非常有用，如改变鼠标悬停时的背景色或链接的不同状态样式。
伪元素选择器允许开发者对元素的特定部分进行样式化，如添加装饰性元素或改变文本的首字母样式。

3. 注意事项

选择器的优先级（也称为特异性）会影响样式的应用。通常，ID 选择器的优先级高于类选择器，类选择器的优先级高于元素选择器。
过度使用复杂的选择器可能会影响页面的渲染性能，因为浏览器需要更多的时间来解析和匹配选择器。
在编写 CSS 时，尽量保持选择器的简洁和高效，避免不必要的嵌套和重复。

综上所述，CSS 选择器是 CSS 中非常强大的工具，它们允许开发者以灵活的方式选择 HTML 元素并应用样式。通过合理使用不同类型的选择器，可以创建出既美观又高效的网页布局和样式。

CSS 常用基础样式

说明：介绍 CSS 中用于控制元素外观的基础样式属性，如字体、颜色、边距、内边距、边框、背景等。
重要性：这些是设计网页时最常用的样式属性，掌握它们能够让你对网页的外观进行基本的控制。

在 CSS 中，样式和属性的使用非常广泛，它们用于控制网页的布局、颜色、字体等各个方面。以下是一些常见的 CSS 样式和属性，以及它们的详细解释和示例：

1. 字体样式

font-family：指定文本的字体系列。例如，font-family: Arial, sans-serif; 表示首选 Arial 字体，如果不可用则使用任何无衬线字体。
font-size：设置字体大小。支持多种单位，如 px（像素）、em（相对于父元素的字体大小）、%（相对于父元素的字体大小的百分比）等。例如，font-size: 16px;。
font-weight：控制字体的粗细。常用值有normal、bold、bolder、lighter以及从 100 到 900 的数字值。例如，font-weight: bold;。
font-style：设置字体的样式。常用值有normal（正常）、italic（斜体）和oblique（倾斜）。例如，font-style: italic;。
color: 设置字体的颜色，值可以写十六进制色值（如#FF0000）、RGB 色值（如rgb(255,0,0)）、RGBA 色值（增加透明度，如rgba(255,0,0,0.5)）、颜色名（如red）等

2. 文本样式

text-decoration：添加文本装饰，如下划线、删除线、上划线等。例如，text-decoration: underline; 为文本添加下划线。
text-transform：控制文本的大小写转换。常用值有none、capitalize（每个单词首字母大写）、uppercase（全部大写）、lowercase（全部小写）。例如，text-transform: uppercase;。
text-align：设置文本的水平对齐方式。常用值有left（左对齐）、right（右对齐）、center（居中对齐）、justify（两端对齐）。例如，text-align: center;。
text-indent：设置文本的首行缩进。例如，text-indent: 2em; 表示首行缩进两个 em 单位（通常是一个 em 等于当前字体大小）。

2. 背景样式

background-color：设置元素的背景颜色。例如，background-color: blue;。
background-image：设置元素的背景图像。例如，background-image: url('background.jpg');。
background-repeat：设置背景图像是否以及如何重复。常用值有repeat（水平和垂直方向重复）、repeat-x（仅在水平方向重复）、repeat-y（仅在垂直方向重复）、no-repeat（不重复）。
background-position：设置背景图像的起始位置。可以使用关键字（如left top）、百分比或长度值来指定。
background-size：设置背景图像的大小。例如，background-size: cover; 会使背景图像覆盖整个元素区域，同时保持图像的宽高比。

3. 边框样式

border：是border-width、border-style和border-color的简写属性，用于设置元素的边框。例如，border: 1px solid black;。
border-width：设置边框的宽度。例如，border-width: 2px;。
border-style：设置边框的样式。常用值有none（无边框）、solid（实线）、dashed（虚线）、dotted（点线）等。
border-color：设置边框的颜色。
border-radius：为边框添加圆角效果。可以指定一个或多个值来控制圆角的形状。例如，border-radius: 10px; 或 border-radius: 50%;（创建圆形边框）。

4. 布局样式

所有 HTML 元素可以看作盒子，在 CSS 中，"box model"这一术语是用来设计和布局时使用。

CSS 盒模型本质上是一个盒子，封装周围的 HTML 元素，它包括：边距，边框，填充，和实际内容。

下面的图片说明了盒子模型(Box Model)：

CSS box-model

不同部分的说明：

Margin(外边距) - 清除边框外的区域，外边距是透明的。
Border(边框) - 围绕在内边距和内容外的边框。
Padding(内边距) - 清除内容周围的区域，内边距是透明的。
Content(内容) - 盒子的内容，显示文本和图像等。

为了正确设置元素在所有浏览器中的宽度和高度，你需要知道的盒模型是如何工作的。

当您指定一个 CSS 元素的宽度和高度属性时，你只是设置内容区域的宽度和高度。要知道，完整大小的元素，你还必须添加内边距，边框和外边距。

下面的例子中的元素的总宽度为 450px：

html

div { width: 300px; border: 25px solid green; padding: 25px; margin: 25px; }

让我们自己算算： 300px (宽) + 50px (左 + 右填充) + 50px (左 + 右边框) + 50px (左 + 右边距) = 450px

内容区域(content)

默认情况下，可通过 width、min-width、max-width、height、min-height 和 max-height 直接控制

内边距区域(padding)

可以由 padding-top、padding-right、padding-bottom、padding-left，和简写属性 padding 控制。

边框区域(border)

边框的粗细由 border-width 和简写的 border 属性控制

外边距区域(margin)

外边距区域的大小由 margin-top、margin-right、margin-bottom、margin-left，和简写属性 margin 控制。

外边距折叠

假设有两个相邻的<div>元素，第一个设置了下边距，第二个设置了上边距，此时这两个区块的上下外边距会合并（折叠）为单个边距，其大小为两个边距中的最大值（或如果它们相等，则仅为其中一个），这种行为称为外边距折叠。

box-sizing

content-box

默认值，标准盒子模型。width 与 height 只包括内容的宽和高，不包括边框（border），内边距（padding），外边距（margin）。注意：内边距、边框和外边距都在这个盒子的外部。比如说，.box {width: 350px; border: 10px solid black;} 在浏览器中的渲染的实际宽度将是 370px。

尺寸计算公式：

width = 内容的宽度
height = 内容的高度

宽度和高度的计算值都不包含内容的边框（border）和内边距（padding）。

border-box

width 和 height 属性包括内容，内边距和边框，但不包括外边距。注意，内边距和边框将在盒子内 , 例如， .box {width: 350px; border: 10px solid black;} 导致在浏览器中呈现的宽度为 350px 的盒子。

尺寸计算公式：

width = border + padding + 内容的宽度
height = border + padding + 内容的高度

CSS 浏览器兼容性

说明：由于不同浏览器对 CSS 的支持程度可能有所不同，因此了解浏览器兼容性对于确保网页在不同浏览器中都能正确显示至关重要。
重要性：掌握浏览器兼容性技巧可以避免因浏览器差异导致的样式问题，提高用户体验。

不展开讲，细枝末节太多，如感兴趣可以课后上网自行学习，学习上强烈建议使用 Chrome 浏览器。

综合练习题

目标：检验学生对 HTML 表单控件和 CSS 基础的理解和运用。

要求：运用本讲知识点，实现以下效果：（表单提交 URL 可以随便写个，样式大差不差即可，提交按钮背景色色值为#4caf50）

初始状态：

2.表单练习_1.png

输入框聚焦状态：

表单校验状态：

二、HTML 表单和 CSS 基础 ​

内容概述 ​

教学目标 ​

具体内容 ​

表单基础 ​

表单基础控件 ​

单行文本框 <input type="text" /> ​

密码框 <input type="password" /> ​

多行文本框 <textarea> ​

提交按钮 <input type="submit" /> ​

重置按钮 <input type="reset" /> ​

复选框 <input type="checkbox" /> ​

单选框 <input type="radio" /> ​

<label> 元素 ​

<select> 元素 ​

<button> 元素 ​

<fieldset> 元素 ​

HTML5 的 <input> 类型 ​

CSS 基础 ​

CSS 简介 ​

CSS 基本语法 ​

CSS 引入 ​

1. 内联样式 ​

2. 内部样式表 ​

3. 外部样式表 ​

CSS 选择器 ​

1. 基本分类 ​

2. 使用场景 ​

3. 注意事项 ​

CSS 常用基础样式 ​

1. 字体样式 ​

2. 文本样式 ​

2. 背景样式 ​

3. 边框样式 ​

4. 布局样式 ​

内容区域(content) ​

内边距区域(padding) ​

边框区域(border) ​

外边距区域(margin) ​

box-sizing ​

CSS 浏览器兼容性 ​

综合练习题 ​

二、HTML 表单和 CSS 基础

内容概述

教学目标

具体内容

表单基础

表单基础控件

单行文本框 `<input type="text" />`

密码框 `<input type="password" />`

多行文本框 `<textarea>`

提交按钮 `<input type="submit" />`

重置按钮 `<input type="reset" />`

复选框 `<input type="checkbox" />`

单选框 `<input type="radio" />`

`<label>` 元素

`<select>` 元素

`<button>` 元素

`<fieldset>` 元素

HTML5 的 `<input>` 类型

CSS 基础

CSS 简介

CSS 基本语法

CSS 引入

1. 内联样式

2. 内部样式表

3. 外部样式表

CSS 选择器

1. 基本分类

2. 使用场景

3. 注意事项

CSS 常用基础样式

1. 字体样式

2. 文本样式

2. 背景样式

3. 边框样式

4. 布局样式

内容区域(content)

内边距区域(padding)

边框区域(border)

外边距区域(margin)

box-sizing

CSS 浏览器兼容性

综合练习题