HTML列表、表格和表单

最新推荐文章于 2024-07-20 21:41:48 发布

“!?!

最新推荐文章于 2024-07-20 21:41:48 发布

阅读量59

点赞数 2

文章标签： html 前端 java

本文链接：https://blog.csdn.net/m0_63489735/article/details/131690464

版权

一、列表

1、有序列表

无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。

无序列表使用 <ul> 标签

 <!-- 无序列表
        type: disc 实心圆 默认
              circle 空心圆
              square 实心方框
    -->
    <ul type="square">
        <li>无序列表</li>
        <li>无序列表</li>
        <li>无序列表</li>
        <li>无序列表</li>
        <li>无序列表</li>
    </ul>

2、有序列表

有序列表也是一列项目，列表项目使用数字进行标记。有序列表始于 <ol> 标签。每个列表项始于 <li> 标签。

列表项使用数字来标记。

 <!-- 有序列表 
        type: 1 A a I i
        reversed: 倒序顺序
        start: 设置初始值
    -->
    <ol type="1" reversed start="10">
        <li>有序列表</li>
        <li>有序列表</li>
        <li>有序列表</li>
        <li>有序列表</li>
        <li>有序列表</li>
    </ol>

3、HTML自定义列表

自定义列表不仅仅是一列项目，而是项目及其注释的组合。

自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。


    <!-- 自定义列表 -->
    <dl >
        <dt>列表标题</dt>
        <dd>自定义列表</dd>
        <dd>自定义列表</dd>
        <dd>自定义列表</dd>
        <dd>自定义列表</dd>
        <dd>自定义列表</dd>
    </dl>

4、HTML列表标签

标签	描述
<ol>	定义有序列表
<ul>	定义无序列表
<li>	定义列表列
<dl>	定义列表
<dt>	自定义列表项目
<dd>	定义自定义列表项的描述

二、表格

1、HTML表格

HTML 表格由 <table> 标签来定义。

HTML 表格是一种用于展示结构化数据的标记语言元素。

每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义），表格可以包含标题行（<th>）用于定义列的标题。

tr：tr 是 table row 的缩写，表示表格的一行。
td：td 是 table data 的缩写，表示表格的数据单元格。
th：th 是 table header的缩写，表示表格的表头单元格。

数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

table > 定义表格

tr > 定义行

th > 定义标题

td > 定义列

rowspan: 合并行使用时：值为几，就把对应几行的td删掉

colspan: 合并列使用时：值为几，就删除本行后的几个td

bgcolor: 背景颜色

给一行中任意一个列加高（height）属性，整行都是一个高，如果有冲突，按最大值撑开；

给一列中任意一个行加宽（width）属性，整列都是一个宽，如果有冲突，按最大值撑开。

 <table border="1" align="center" width="600">
        <tr>
            <th bgcolor="pink" height="30">表格标题</th>
            <th height="60">表格标题</th>
            <th>表格标题</th>
        </tr>
        <tr  align="center" >
            <td rowspan="3">第一行第一列</td>
            <td colspan="2">第一行第二列</td>
            <!-- <td>第一行第三列</td> -->
        </tr>
        <tr  align="center" >
            <!-- <td>第二行第一列</td> -->
            <td>第二行第二列</td>
            <td>第二行第三列</td>
        </tr>
        <tr  align="center" >
            <!-- <td>第三行第一列</td> -->
            <td>第三行第二列</td>
            <td>第三行第三列</td>
        </tr>
    </table>

三、表单

HTML 表单用于收集用户的输入信息。

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

1.表单是一个包含表单元素的区域。

表单元素是允许用户在表单中输入内容，比如：文本域（textarea）、下拉列表（select）、单选框（radio-buttons）、复选框（checkbox）等等。

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

    <form action="demo.html">
       
    </form>

2.多数情况下被用到的表单标签是输入标签 <input>。

输入类型是由 type 属性定义。

接下来我们介绍几种常用的输入类型。

<input type="text" id="bbb" name="username" value="大漂亮">

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

<input type="password" id="ccc" name="password">

4.单选按钮

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


                <input type="radio" name="sex" value="nan">男
                <input type="radio" name="sex" value="nv">女
                <input type="radio" name="sex" checked value="qita">其他

radio: 单选

name属性 name属性相同时，为同一组单选选项组

checked 默认选中，选多个时，选中最后拥有该属性的那个

5.复选框

<input type="checkbox"> 定义了复选框。

复选框可以选取一个或多个选项：

 <input type="checkbox" name="a" value="chi">吃
                <input type="checkbox" name="a" value="he" checked>喝
                <input type="checkbox" name="a" value="shui" checked>睡
                <input type="checkbox" name="a" value="wan">玩
                <input type="checkbox" name="a" value="xue" checked>学习

checkbox：复选

name属性 name属性相同时，为同一组复选选项组

checked 默认选中，选多个时，就是多个都选中

6.下拉框

select 下拉框

select - option--选项

- value：选项值

 <select name="地区" id="">
                <option value="" selected></option>
                <option value="1">北京</option>
                <option value="3">上海</option>
                <option value="2">深圳</option>
                <option value="4">太原</option>
            </select>

7.提交按钮

<input type="submit"> 定义了提交按钮。

当用户单击确认按钮时，表单的内容会被传送到服务器。表单的动作属性 action 定义了服务端的文件名。

action 属性会对接收到的用户输入数据进行相关的处理:

  <input type="submit">

            <input type="file">

submit：提交按钮

form:action: 提交地址

8、表单标签

标签	描述
<form>	定义供用户输入的表单
<input>	定义输入域
<textarea>	定义文本域（一个多行的输入控件）
<label>	定义了<input>元素的标签，一般为输入标题
<fieldset>	定义了一组相关的表单元素，并使用外框包含起来
<legend>	定义了<fieldset>元素的标题
<select>	定义了下拉选项列表
<optgroup>	定义选项组
<option>	定义下拉列表中的选项
<button>	定义一个点击按钮
<datalist>	指定一个预先定义的输入控件选项列表
<keygen>	定义了表单的密钥对生成器字段
<output>	定义一个计算结果