编程技术

Document

HTML表格表单以及列表

目录

 1.表格标签：

前言:

定义表格:

总结：

2.表单标签：

前言：

表单的定义：

表单的属性：

表单控件：

3.列表标签：

前言:

定义列表：

1.有序列表：

2.无序列表：

3.定义列表：

示例代码如下:

总结：

 1.表格标签：

前言:

在HTML中<table>标签是用来定义表格的。定义完之后发现其结构和Excel的标签是非常相似的，都有行，列，单元格，表头等等，但是Excel毕竟还是专业，不像HTML既不支持排序又不支持求和，还不支持很多数学计算，只能用来展示数据。

HTML常用的图片标签和超链接标签-CSDN博客 ， HTML常用文本标签-CSDN博客

定义表格:

在表格标签有：

  • <table>：表示表格，表格的所有内容需要写在<table>和</table>之间。
  • <tr>：是table row的简称，表示表格的每一行，表格中有多少个<tr>标签就表示有多少行数据。
  • <td>：是table datacell的简称，表示表格的单元格，这是存放表格数据的标签，单元格的数据可以是文本，图片，列表，段落，表单，水平线，表格等多种形式。
  • <th>：是table heading的简称，表示表格的表头。<th>其实是<td>单元格的一种变体，本质上还是一种单元格。<th>一般位于第一行，充当每一列的标题。大多数的浏览器会把表头显示为粗体居中的文本。
  • <caption>：HTML允许使用此标签当做表格的标题，需要注意的是：一个表格只能有一个标题。

一般情况下，HTML定义的表格是没有边框的，但是我们可以通过设置<table>标签的border属性来设置表格的边框宽度，单位是像素(px).

HTML的<table>标签也支持单元格的合并，跨行合并和跨列合并，如下：

  1. rowspan：表示跨行合并，在HTML中，允许我们使用rowspan特性来表明单元格索要跨越的行数。rowspan表示向下合并单元格。
  2. colspan：表示跨列合并，在HTML中，允许我们使用colspan的特性来表明单元格索要跨越的列数。colspan表示向右合并单元格。
  3. 每次合并n个单元格记得要n-1个<td>标签。

一个基本的表格定义如下:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

</head>

<body>

    <!-- border在是边框这里是设置边框为1像素 -->
    <table border="1" style="border-collapse: collapse;">
        <!-- 整个表格的标题 -->
        <caption>此表格为网页信息表</caption>
        <tr>
            <!-- 第一行 -->
            <th>网站名</th>
            <th>网站地址</th>
            <th>网站作用</th>
        </tr>

        <tr>
            <td>bilibili</td>
            <td>https://www.bilibili.com/?from_start_menu</td>
            <td>以视频为主流的网站</td>
        </tr>

        <tr>
            <!-- 向下合并一个单元格 -->
            <td rowspan="2">淘宝</td>
            <td>https://www.taobao.com/</td>
            <td>以购物为主流的网站</td>
        </tr>

        <tr>
            <!-- 向右合并一个单元格 -->
            <td colspan="2">
                https://uland.taobao.com/sem/tbsearch?refpid=mm_26632360_8858797_29866178&keyword=%E5%A5%B3%E8%A3%85&clk1=2d5e46421962bba06c0498319872fcd7&upsId=2d5e46421962bba06c0498319872fcd7
            </td>
        </tr>
    </table>

</body>

</html>

上述代码的运行结果如下图：

总结：

表格标签在如今的网页设计中依然是有用的，因为表格能够更准确分明直观的展示数据，后面学习了javascript就可以替换表格中的数据了。

2.表单标签：

前言：

如果想要通过网页来收集一些用户的信息(如电话，邮箱地址，用户名等)，就需要用HTML表单，表单可以接收用户输入的信息，然后将其发送到后端应用程序，如PHP,Java,Python等，后端应用程序将根据定义好的业务逻辑对表单传递进来的数据进行处理。

其实表单也属于HTML文档中的一部分，其中包含了输入框，复选框，单选按钮，提交按钮等不同的表单控件，用户通过修改表单中的元素(如输入文本，选择某个选项等)来完成表单，通过表单中提交按钮将表单数据提交给后端的程序。

表单的定义：

在HTML中如果需要创建表单则需要用到<form>标签，语法如下:

<form action="URL" method="GET|POST">
    表单里的元素
</form>

说明如下:

  • action：属性用来指明表单中的数据要提交到的页面。
  • method：表示提交数据的方式，分为GET和POST，他们区别是：
    • GET：用户点击提交之后，要提交的信息会被显示在页面的地址栏中，一般情况下，GET提交并不建议包含密码，因为不安全。
    • POST：如果表单包含密码这种信息，建议使用POST方式提交，这样数据会传到后台并不会在地址栏中显示，相对来说安全。
表单的属性：

HTML为<form>标签提供了一些专用的属性，其中action和method是最常用的两个属性，如下表:

属性 可选值 描述
accept MIME_type HTML5中不再支持，设置服务器接收的文件类型。
accept-charset character_set 设置表单数据的字符集(默认为HTML文档字符集)。
action URL 设置要将表单提交到何处(默认为当前页面)。
autocomplete on，off 设置是否启用表单的自动完成功能(默认打开)。
enctype application/x-www-form-urlencoded,multipart/form-data,text/plain 设置在提交表单数据之前如何对数据进行编码(适用于method="post"的情况)。
method get，post

设置使用哪种HTTP方法来提交表单数据(默认为get)。
name text 设置表单的名称。
novalidate novalidate 如果使用该数据，则提交表单时不进行验证。
target _blank,_self,_parent,_top 设置在何处打开action属性设定的链接(默认为_self)
表单控件：

在HTML中表单是用来收集用户数据的，但是用户的数据需要填写在表单控件里面，如下是HTML表单中可以包含的表单控件：

控件/标签 描述
<input> 定义输入框。
<textarea> 定义文本域(一个可以输入多行文本的控件)。
<label> 为表单中的各个控件定义标题。
<fieldset> 定义一组相关的表单元素，并使用边框包裹起来。
<legend> 定义<fieldsel>元素的标题。
<select> 定义下拉列表。
<optgroup> 定义选项组。
<option> 定义下拉列表中的选项。
<button> 定义一个可以点击的按钮。
<datalist> 指定一个预先定义的输入控件选项列表。
<keygen> 定义表单的密钥对生成器字段。
<output> 定义一个计算结果。

下面就通过代码来实现一个完整的示例:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

</head>

<body>

    <form action="./userinfo.php" method="POST">
        <!-- 文本输入框控件 -->
        <label>用户名： </label><input name="username" type="text"><br>
        <!-- 密码框控件 -->
        <label>密&emsp;码： </label><input name="password" type="password"><br>
        <!-- 下拉菜单控件 -->
        <label>性&emsp;别：</label>
        <select name="sex">
            <option value="1">男</option>
            <option value="2">女</option>
            <option value="3">未知</option>
        </select>
        <br>
        <!-- 复选框控件 -->
        <label>爱&emsp;好：</label>
        <input type="checkbox" name="hobby" value="1">听音乐
        <input type="checkbox" name="hobby" value="2">看电影
        <input type="checkbox" name="hobby" value="3">运动
        <br>
        <!-- 单选按钮控件 -->
        <label>学&emsp;历：</label>
        <input type="radio" name="education" value="1">小学
        <input type="radio" name="education" value="2">中学
        <input type="radio" name="education" value="3">本科
        <input type="radio" name="education" value="4">硕士
        <input type="radio" name="education" value="5">博士
        <br>
        <!-- 按钮 -->
        <input type="submit" value="提 交">&emsp;&emsp;
        <input type="reset" value="重 置">
    </form>

</body>

</html>

填写好用户数据，点击“提交”按钮，即可使用 POST 方式将数据提交到当前目录下的 userinfo.php 页面，在服务器端通过 PHP 代码可以接收提交的数据。

3.列表标签：

前言:

HTML列表(List)可以将若干条相关的内容整理起来，让内容看起来更加分明，列表里面可以放文本，图像，链接，也可以在列表中定义另一个列表（嵌套）。

定义列表：

在HTML我们有三种方式可以定义列表:

  • 有序，<ol>+<li>标签。
  • 无序，<ul>+<li>标签。
  • 定义列表,<dl>+<dt>+dd>标签。
1.有序列表：

在HTML中，<ol>标签是用来表示有序列表，有序列表的每一项前面都会有一个数字表示这一项是这个列表的第几个。一般都是<ol>和<li>一起出现，在有序列表中可以包含图片，文本，链接，另一个列表。

2.无序列表：

<ul>无序列表中没有顺序之分，每一项前面使用●表示，一般都是跟<li>标签配合使用的。

3.定义列表：

<dl>标签是用于创建列表的，定义的列表由标题和描述两部组成，描述是对标题的解释，标题是最描述的总结和提炼。其中<dt>是定义标题的，<dd>是定义描述的

示例代码如下:
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>这里存放了一个网页的标题</title>
</head>

<body>
    <dl>
        <dt>有序列表示例</dt>
        <dd>
            <ol>
                <li>有序列表第一项</li>
                <li>有序列表第二项</li>
                <li>有序列表第三项</li>
            </ol>
        </dd>
        <dd>
            上面定义了3个有序列表
        </dd>

        <dt>无序列表示例</dt>
        <dd>
            <ul>
                <li>无序列表第一个</li>
                <li>第二个</li>
                <li>第三个</li>
            </ul>
        </dd>
        <dd>上面定义了3个无序列表</dd>

        <dt>为啥没有定义列表的，因为它本身就是</dt>
    </dl>
</body>
</html>

上述代码的运行结果如下:

总结：

<ol>表示有序列表，里面的<li>表示列表的每一项，前面默认使用阿拉伯数字。<ul>表示无序列表，其中<li>表示列表的每一项，前面使用●符号作为每一项的标记。定义列表中使用<dl>,其中<dt>表示术语，<dd>表示描述，一般情况下，么个<dt>搭配一个<dd>,一个<dl>可以包含多对<dt>和<dd>.