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 示例

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

<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> 类似，它也没有特定的语义，常用于对行内的一小部分文本进行样式修改。

<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> 元素来创建多列布局：

<!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><divid="menu"style="background-color: #ffd700;height: 200px;width: 100px;float: left;"><b>菜单</b><br />HTML<br />CSS<br />JavaScript</div><divid="content"style="background-color: #eeeeee;height: 200px;width: 400px;float: left;">内容在这里</div><divid="footer"style="background-color: #ffa500; clear: both; text-align: center">版权 © runoob.com</div></div></body>
</html>

2.2 使用 `<table>` 元素

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

<!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> 标签来创建表单:

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

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

3.1 输入域（`<input>`）

3.1.1 文本域（Text Fields）

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

<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"> 来定义:

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

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

3.1.3 单选按钮（Radio Buttons）

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

<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"> 定义了复选框，可以选取一个或多个选项：

<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 属性会对接收到的用户输入数据进行相关的处理:

<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 属性。

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

3.3 标签（`<label>`）

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

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

<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> 元素定义标题。

<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> 标签定义了列表中的可用选项。

<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表单的例子：

<!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>规定用户在提交表单前必须选择一个下拉列表中的选项。