2025-09-04 HTML3——区块布局与表单

文章目录

[1 块元素与行内元素](#1 块元素与行内元素)
- [1.1 块元素 (Block-level Element)](#1.1 块元素 (Block-level Element))
- [1.2 行内元素 (Inline Element)](#1.2 行内元素 (Inline Element))
[2 HTML 布局](#2 HTML 布局)
- [2.1 使用 `<div>` 元素](#2.1 使用 <div> 元素)
- [2.2 使用 `<table>` 元素](#2.2 使用 <table> 元素)
[3 表单 (`<form>`)](#3 表单 (<form>))
- [3.1 输入域（`<input>`）](#3.1 输入域（<input>）)
- - [3.1.1 文本域（Text Fields）](#3.1.1 文本域（Text Fields）)
  - [3.1.2 密码（password）](#3.1.2 密码（password）)
  - [3.1.3 单选按钮（Radio Buttons）](#3.1.3 单选按钮（Radio Buttons）)
  - [3.1.4 复选框（Checkboxes）](#3.1.4 复选框（Checkboxes）)
  - [3.1.5 提交按钮（Submit）](#3.1.5 提交按钮（Submit）)
- [3.2 文本域（`<textarea>`）](#3.2 文本域（<textarea>）)
- [3.3 标签（`<label>`）](#3.3 标签（<label>）)
- [3.4 分组输入域（`<fieldset>`）](#3.4 分组输入域（<fieldset>）)
- [3.5 下拉列表（`<select>`）](#3.5 下拉列表（<select>）)
- [3.6 示例](#3.6 示例)

1 块元素与行内元素

大多数 HTML 元素被定义为块元素 或行内元素（内联元素）。

1.1 块元素 (Block-level Element)

块元素在浏览器显示时，通常会以新行来开始（和结束）。

特性：
1. 独占一行：无论其内容多少，块元素总是会从新的一行开始，并占据其父容器的全部可用宽度。
2. 可以设置宽高 ：你可以为块元素设置 width（宽度）和 height（高度）。
3. 可以包含其他元素：块元素通常作为其他元素的容器，可以包含行内元素和其它的块元素。
常见示例 ：
- 标题：<h1>, <h2>, <h3>, <h4>, <h5>, <h6>
- 段落：<p>
- 列表：<ul>, <ol>, <li>
- 表格：<table>
- 分隔块 ：<div>

<div> 元素是最常用的块元素，它没有任何特定的语义，常用于组织和布局网页内容。

html 复制代码

<p>这是一些文本。</p>

<div style="color:#0000FF">
    <h3>这是一个在 div 元素中的标题。</h3>
    <p>这是一个在 div 元素中的文本。</p>
</div>

<p>这是一些文本。</p>

1.2 行内元素 (Inline Element)

内联元素在显示时通常不会以新行开始。

特性：
1. 不独占一行：多个行内元素可以并排显示在同一行上。
2. 宽高无效 ：width 和 height 属性对行内元素不起作用。其宽度和高度由其内容决定。
3. 不能包含块元素：行内元素通常只能包含文本或其它的行内元素。
常见示例 ：
- 超链接 ：<a>
- 图像：<img>
- 文本格式化 ：<b>, <i>, <strong>, <em>
- 跨度：<span>（<span> 是最常用的行内元素 ，与 <div> 类似，它也没有特定的语义，常用于对行内的一小部分文本进行样式修改。）

<span> 元素是最常用的行内元素，与 <div> 类似，它也没有特定的语义，常用于对行内的一小部分文本进行样式修改。

html 复制代码

<p>我的母亲有 <span style="color:blue;font-weight:bold">蓝色</span> 的眼睛，我的父亲有 <span style="color:darkolivegreen;font-weight:bold">碧绿色</span> 的眼睛。</p>

2 HTML 布局

大多数网站会把内容安排到多个列中（就像杂志或报纸那样）。

可以使用 <div> 或者 <table> 元素来创建多列。

2.1 使用 `<div>` 元素

<div> 元素是用于分组 HTML 元素的块级元素。

下面的例子使用五个 <div> 元素来创建多列布局：

html 复制代码

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>菜鸟教程(runoob.com)</title>
  </head>
  <body>
    <div id="container" style="width: 500px">
      <div id="header" style="background-color: #ffa500">
        <h1 style="margin-bottom: 0">主要的网页标题</h1>
      </div>

      <div
        id="menu"
        style="
          background-color: #ffd700;
          height: 200px;
          width: 100px;
          float: left;
        "
      >
        <b>菜单</b><br />
        HTML<br />
        CSS<br />
        JavaScript
      </div>

      <div
        id="content"
        style="
          background-color: #eeeeee;
          height: 200px;
          width: 400px;
          float: left;
        "
      >
        内容在这里
      </div>

      <div
        id="footer"
        style="background-color: #ffa500; clear: both; text-align: center"
      >
        版权 © runoob.com
      </div>
    </div>
  </body>
</html>

2.2 使用 `<table>` 元素

使用 HTML <table> 标签是创建布局的一种简单的方式。

html 复制代码

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>菜鸟教程(runoob.com)</title>
  </head>
  <body>
    <table width="500" border="0">
      <tr>
        <td colspan="2" style="background-color: #ffa500">
          <h1>主要的网页标题</h1>
        </td>
      </tr>

      <tr>
        <td style="background-color: #ffd700; width: 100px">
          <b>菜单</b><br />
          HTML<br />
          CSS<br />
          JavaScript
        </td>
        <td style="background-color: #eeeeee; height: 200px; width: 400px">
          内容在这里
        </td>
      </tr>

      <tr>
        <td colspan="2" style="background-color: #ffa500; text-align: center">
          版权 © runoob.com
        </td>
      </tr>
    </table>
  </body>
</html>

3 表单 (`<form>`)

HTML 表单表示文档中的一个区域，此区域包含交互控件，将用户收集到的信息发送到 Web 服务器。

HTML 表单通常包含各种输入字段、复选框、单选按钮、下拉列表等元素。

我们可以使用 <form> 标签来创建表单:

html 复制代码

<form>. input 元素 .</form>

多数情况下被用到的表单标签是输入标签 <input> ，输入类型由 type 属性定义。

3.1 输入域（`<input>`）

3.1.1 文本域（Text Fields）

文本域通过 <input type="text"> 标签来设定，当用户要在表单中键入字母、数字等内容时，就会用到文本域。

html 复制代码

<form>
    First name: <input type="text" name="firstname"><br>
    Last name: <input type="text" name="lastname">
</form>

表单本身并不可见。同时，在大多数浏览器中，文本域的默认宽度是 20 个字符。

3.1.2 密码（password）

密码字段通过标签 <input type="password"> 来定义:

html 复制代码

<form>
    Password: <input type="password" name="pwd">
</form>

密码字段字符不会明文显示，而是以星号 ***** 或圆点 . 替代。

3.1.3 单选按钮（Radio Buttons）

<input type="radio"> 标签定义了表单的单选框选项:

html 复制代码

<form action="">
    <input type="radio" name="sex" value="male">男<br>
    <input type="radio" name="sex" value="female">女
</form>

3.1.4 复选框（Checkboxes）

<input type="checkbox"> 定义了复选框，可以选取一个或多个选项：

html 复制代码

<form>
    <input type="checkbox" name="vehicle[]" value="Bike">我喜欢自行车<br>
    <input type="checkbox" name="vehicle[]" value="Car">我喜欢小汽车
</form>

3.1.5 提交按钮（Submit）

<input type="submit"> 定义了提交按钮。当用户单击确认按钮时，表单的内容会被传送到服务器。表单的动作属性 action 定义了服务端的文件名。action 属性会对接收到的用户输入数据进行相关的处理:

html 复制代码

<form name="input" action="html_form_action.php" method="get">
    Username: <input type="text" name="user">
    <input type="submit" value="Submit">
</form>

假如您在上面的文本框内键入几个字母，然后点击确认按钮，那么输入数据会传送到 html_form_action.php 文件，该页面将显示出输入的结果。

以上实例中有一个 method 属性，它用于定义表单数据的提交方式，可以是以下值：

post：指的是 HTTP POST 方法，表单数据会包含在表单体内然后发送给服务器，用于提交敏感数据，如用户名与密码等。
get ：默认值，指的是 HTTP GET 方法，表单数据会附加在 action 属性的 URL 中，并以 ? 作为分隔符，一般用于不敏感信息，如分页等。例如：https://www.runoob.com/?page=1，这里的 page=1 就是 get 方法提交的数据。

3.2 文本域（`<textarea>`）

<textarea> 标签定义一个多行的文本输入控件。

文本区域中可容纳无限数量的文本，其中的文本的默认字体是等宽字体（通常是 Courier）。

可以通过 cols 和 rows 属性来规定 textarea 的尺寸大小，不过更好的办法是使用 CSS 的 height 和 width 属性。

html 复制代码

<textarea rows="10" cols="30">
    我是一个文本框。
</textarea>

3.3 标签（`<label>`）

<label> 标签为 input 元素定义标注（标记）。label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。

<label> 标签的 for 属性可把 label 绑定到另外一个元素，应当与相关元素的 id 属性相同。

html 复制代码

<form action="demo_form.php">
    <label for="male">Male</label>
    <input type="radio" name="sex" id="male" value="male"><br>
    <label for="female">Female</label>
    <input type="radio" name="sex" id="female" value="female"><br><br>
    <input type="submit" value="提交">
</form>

3.4 分组输入域（`<fieldset>`）

<fieldset> 标签可以将表单内的相关元素分组，会在相关表单元素周围绘制边框。

<legend> 元素为 <fieldset> 元素定义标题。

html 复制代码

<form>
    <fieldset>
        <legend>Personalia:</legend>
        Name: <input type="text"><br>
        Email: <input type="text"><br>
        Date of birth: <input type="text">
    </fieldset>
</form>

3.5 下拉列表（`<select>`）

<select> 元素用来创建下拉列表。

<select> 元素中的 <option> 标签定义了列表中的可用选项。

html 复制代码

<select>
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="opel">Opel</option>
    <option value="audi">Audi</option>
</select>

3.6 示例

以下是一个简单的HTML表单的例子：

html 复制代码

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>菜鸟教程(runoob.com)</title>
  </head>
  <body>
    <form action="/" method="post">
      <!-- 文本输入框 -->
      <label for="name">用户名:</label>
      <input type="text" id="name" name="name" required />

      <br />

      <!-- 密码输入框 -->
      <label for="password">密码:</label>
      <input type="password" id="password" name="password" required />

      <br />

      <!-- 单选按钮 -->
      <label>性别:</label>
      <input type="radio" id="male" name="gender" value="male" checked />
      <label for="male">男</label>
      <input type="radio" id="female" name="gender" value="female" />
      <label for="female">女</label>

      <br />

      <!-- 复选框 -->
      <input type="checkbox" id="subscribe" name="subscribe" checked />
      <label for="subscribe">订阅推送信息</label>

      <br />

      <!-- 下拉列表 -->
      <label for="country">国家:</label>
      <select id="country" name="country">
        <option value="cn">CN</option>
        <option value="usa">USA</option>
        <option value="uk">UK</option>
      </select>

      <br />

      <!-- 提交按钮 -->
      <input type="submit" value="提交" />
    </form>
  </body>
</html>

<form> 元素用于创建表单，action 属性定义了表单数据提交的目标 URL，method 属性定义了提交数据的 HTTP 方法（这里使用的是 "post"）。
<label> 元素用于为表单元素添加标签，提高可访问性。
<input> 元素是最常用的表单元素之一，它可以创建文本输入框、密码框、单选按钮、复选框等。type 属性定义了输入框的类型，id 属性用于关联 <label> 元素，name 属性用于标识表单字段。
<select> 元素用于创建下拉列表，而 <option> 元素用于定义下拉列表中的选项。<requried>规定用户在提交表单前必须选择一个下拉列表中的选项。

2025-09-04 HTML3——区块布局与表单

文章目录

1 块元素与行内元素

1.1 块元素 (Block-level Element)

1.2 行内元素 (Inline Element)

2 HTML 布局

2.1 使用 <div> 元素

2.2 使用 <table> 元素

3 表单 (<form>)

3.1 输入域（<input>）

3.1.1 文本域（Text Fields）

3.1.2 密码（password）

3.1.3 单选按钮（Radio Buttons）

3.1.4 复选框（Checkboxes）

3.1.5 提交按钮（Submit）

3.2 文本域（<textarea>）

3.3 标签（<label>）

3.4 分组输入域（<fieldset>）

3.5 下拉列表（<select>）

3.6 示例

2.1 使用 `<div>` 元素

2.2 使用 `<table>` 元素

3 表单 (`<form>`)

3.1 输入域（`<input>`）

3.2 文本域（`<textarea>`）

3.3 标签（`<label>`）

3.4 分组输入域（`<fieldset>`）

3.5 下拉列表（`<select>`）