您当前的位置：首页 > 计算机 > 编程开发 > Html+Div+Css（前端）

HTML 列表与表单基础教程

时间：02-09来源：作者：点击数：18

前言

HTML（HyperText Markup Language）是构建网页的基础语言。本文将详细介绍HTML中的列表和表单元素，帮助初学者快速掌握这些基本概念和用法。通过本文的学习，读者将能够创建有序列表、无序列表、自定义列表，并了解如何使用表单来收集用户信息。

1. HTML 列表

HTML 列表用于组织和展示一系列信息。常见的列表类型包括有序列表、无序列表和自定义列表。

1.1 有序列表（`<ol>`）

有序列表使用 <ol> 标签定义，列表项使用 <li> 标签定义。可以通过 type 和 start 属性来控制列表项的编号类型和起始编号。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>有序列表示例</title>
</head>
<body>
    <!-- 有序列表 -->
    <ol type="a" start="5">
        <li>测试文字</li>
        <li>测试文字</li>
        <li>测试文字</li>
        <li>测试文字</li>
        <li>测试文字</li>
        <li>测试文字</li>
        <li>测试文字</li>
        <li>测试文字</li>
        <li>测试文字</li>
        <li>测试文字</li>
    </ol>
</body>
</html>

代码解析：

<ol type="a" start="5">：定义一个有序列表，type="a" 表示使用小写字母作为编号，start="5" 表示从第5个字母开始编号。
<li>测试文字</li>：每个 <li> 标签定义一个列表项。

1.2 无序列表（`<ul>`）

无序列表使用 <ul> 标签定义，列表项同样使用 <li> 标签定义。可以通过 type 属性来控制列表项的符号类型。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>无序列表示例</title>
</head>
<body>
    <!-- 无序列表 -->
    <ul type="circle">
        <li>测试文字</li>
        <li>测试文字</li>
        <li>测试文字</li>
        <li>测试文字</li>
        <li>测试文字</li>
    </ul>
</body>
</html>

代码解析：

<ul type="circle">：定义一个无序列表，type="circle" 表示使用空心圆作为列表项符号。
<li>测试文字</li>：每个 <li> 标签定义一个列表项。

1.3 自定义列表（`<dl>`）

自定义列表使用 <dl> 标签定义，通常用于描述术语和定义。术语使用 <dt> 标签定义，定义使用 <dd> 标签定义。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>自定义列表示例</title>
</head>
<body>
    <!-- 自定义列表 -->
    <dl>
        <dt>question:你是男是女</dt>
        <dd>answer:不男不女</dd>
    </dl>
</body>
</html>

代码解析：

<dl>：定义一个自定义列表。
<dt>question:你是男是女</dt>：定义一个术语。
<dd>answer:不男不女</dd>：定义一个描述。

2. HTML 表单

HTML 表单用于收集用户输入的信息。表单使用 <form> 标签定义，表单控件通过 <input> 标签的不同 type 属性来实现。

2.1 表单基本结构

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单示例</title>
</head>
<body>
    <!-- 表单:收集用户信息 -->
    <form action="地址" target="">
        请输入账号<input type="number" placeholder="请输入账号"><br>
        请输入密码<input type="password"><br>
        <input type="submit" value="请提交">
        <input type="reset">
        <input type="button" value="普通按钮">
    </form>
</body>
</html>

代码解析：

<form action="地址" target="">：定义一个表单，action 属性指定表单提交的地址，target 属性指定表单提交的目标窗口。
<input type="number" placeholder="请输入账号">：定义一个数字输入框，placeholder 属性设置输入框的提示文字。
<input type="password">：定义一个密码输入框。
<input type="submit" value="请提交">：定义一个提交按钮，value 属性设置按钮的显示文字。
<input type="reset">：定义一个重置按钮。
<input type="button" value="普通按钮">：定义一个普通按钮。

2.2 表单控件

表单控件通过 <input> 标签的 type 属性来实现不同的功能。

普通文本框：<input type="text">
密码框：<input type="password">
提交按钮：<input type="submit">
重置按钮：<input type="reset">
普通按钮：<input type="button">

3. 其他常用标签

除了列表和表单，HTML 还提供了许多其他常用的标签，用于丰富页面内容和布局。

3.1 标题标签（`<h1>` 至 `<h6>`）

标题标签用于定义页面的标题，共有六级标题，从 <h1> 到 <h6>，其中 <h1> 最大，<h6> 最小。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>标题标签示例</title>
</head>
<body>
    <h1 align="center" title="提示文字">瓜子二手车最新资讯</h1>
</body>
</html>

代码解析：

<h1 align="center" title="提示文字">瓜子二手车最新资讯</h1>：定义一个一级标题，align="center" 属性使标题居中对齐，title="提示文字" 属性设置鼠标悬停时的提示文字。

3.2 段落标签（`<p>`）

段落标签用于定义段落，可以包含文本和其他内联元素。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>段落标签示例</title>
</head>
<body>
    <p align="center"><strong>新闻来源</strong><u>发布时间:00:11:00</u><em>作者毛毛豆豆雨</em>
        <i><font color="orange" size="">参与评论400人</font></i></p>
</body>
</html>

代码解析：

<p align="center">：定义一个居中的段落。
<strong>新闻来源</strong>：定义加粗的文本。
<u>发布时间:00:11:00</u>：定义带下划线的文本。
<em>作者毛毛豆豆雨</em>：定义倾斜的文本。
<i><font color="orange" size="">参与评论400人</font></i>：定义橙色的倾斜文本。

3.3 水平线标签（`<hr>`）

水平线标签用于在页面中插入一条水平线，常用于分隔不同的内容区域。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>水平线标签示例</title>
</head>
<body>
    <hr color="orange" width="70%" size="10" align="center">
</body>
</html>

代码解析：

<hr color="orange" width="70%" size="10" align="center">：定义一条橙色的水平线，宽度为页面的70%，高度为10像素，居中对齐。

3.4 转义字符

HTML 中有一些特殊字符需要使用转义字符来表示，以避免被浏览器解析为标签或特殊符号。

：表示一个空格。
：表示一个全角空格。
<：表示小于号 <。
>：表示大于号 >.
©：表示版权符号 ©.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>转义字符示例</title>
</head>
<body>
    <p>
        &emsp;&emsp;司法女案卷案件发你佳恩反奥尔芬按键开关呢啊夹克男噶几
        看过那看看就按个发奋接客给你见多识广收割机哪个那三家
        概念是鞥给你
    </p>
    <p>
        我爱&lt;guazi&gt;我爱&copy;
    </p>
</body>
</html>

代码解析：

：表示两个全角空格。
<guazi>：表示 <guazi>。
©：表示版权符号 ©.

3.5 强制换行标签（`<br>`）

强制换行标签用于在同一段落内进行换行，不会产生额外的间距。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>强制换行标签示例</title>
</head>
<body>
    <p>
        这是一段文本。<br>
        这是另一段文本。
    </p>
</body>
</html>

代码解析：

<br>：表示强制换行。

3.6 删除线标签（`<del>` 和 `<s>`）

删除线标签用于表示已删除或不再有效的文本。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>删除线标签示例</title>
</head>
<body>
    <s>19999</s>
</body>
</html>

代码解析：

<s>19999</s>：表示带有删除线的文本。

3.7 上标和下标标签（`<sup>` 和 `<sub>`）

上标和下标标签用于表示指数和化学公式中的上下标。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE-edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>上标和下标标签示例</title>
</head>
<body>
    <p>
        h <sub>2</sub>o
        c <sup>o</sup>2
    </p>
</body>
</html>

代码解析：

h <sub>2</sub>o：表示水的化学式 H₂O。
c <sup>o</sup>2：表示二氧化碳的化学式 CO₂。

4. 超链接（`<a>`）

超链接用于在网页中实现跳转，可以指向其他页面、图像、邮箱地址等。

html<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE-edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>超链接示例</title>
</head>
<body>
    <a href="html/login.html" target="_blank">点击跳转</a>
</body>
</html>

代码解析：

<a href="html/login.html" target="_blank">点击跳转</a>：定义一个超链接，href 属性指定链接地址，target="_blank" 属性表示在新窗口中打开链接。

结尾

通过本文的学习，读者应该已经掌握了HTML中列表和表单的基本用法，以及一些常用的HTML标签。这些知识将帮助读者更好地构建和设计网页，提升用户体验。希望本文对大家有所帮助，祝学习愉快！

以上内容涵盖了HTML中列表、表单、常用标签和超链接的基本用法，希望能为初学者提供一个全面的入门指南。如果有任何疑问或需要进一步的帮助，请随时联系。

方便获取更多学习、工作、生活信息请关注本站微信公众号 城东书院微信服务号

来顶一下

返回首页

上一篇:CSS 核心属性详解下一篇:Css动画:星空效果图实现

围棋入门教程十天即	围棋下法
Grid-A-Licious 基于	使用Windows API实现

首页

学习

工作

生活

兴趣组

电子

计算机

掌上机件

图库

游戏

考试与竞赛

黑板报

国学

外语

下载

故事汇

社区

课程

HTML 列表与表单基础教程

前言

1. HTML 列表

1.1 有序列表（`<ol>`）

1.2 无序列表（`<ul>`）

1.3 自定义列表（`<dl>`）

2. HTML 表单

2.1 表单基本结构

2.2 表单控件

3. 其他常用标签

3.1 标题标签（`<h1>` 至 `<h6>`）

3.2 段落标签（`<p>`）

3.3 水平线标签（`<hr>`）

3.4 转义字符

3.5 强制换行标签（`<br>`）

3.6 删除线标签（`<del>` 和 `<s>`）

3.7 上标和下标标签（`<sup>` 和 `<sub>`）

4. 超链接（`<a>`）

结尾

HTML 列表与表单基础教程

前言

1. HTML 列表

1.1 有序列表（<ol>）

1.2 无序列表（<ul>）

1.3 自定义列表（<dl>）

2. HTML 表单

2.1 表单基本结构

2.2 表单控件

3. 其他常用标签

3.1 标题标签（<h1> 至 <h6>）

3.2 段落标签（<p>）

3.3 水平线标签（<hr>）

3.4 转义字符

3.5 强制换行标签（<br>）

3.6 删除线标签（<del> 和 <s>）

3.7 上标和下标标签（<sup> 和 <sub>）

4. 超链接（<a>）

结尾

1.1 有序列表（`<ol>`）

1.2 无序列表（`<ul>`）

1.3 自定义列表（`<dl>`）

3.1 标题标签（`<h1>` 至 `<h6>`）

3.2 段落标签（`<p>`）

3.3 水平线标签（`<hr>`）

3.5 强制换行标签（`<br>`）

3.6 删除线标签（`<del>` 和 `<s>`）

3.7 上标和下标标签（`<sup>` 和 `<sub>`）

4. 超链接（`<a>`）