html中的列表、表格、表单

于 2021-10-16 00:52:59 发布
阅读量1.8k 收藏 2
点赞数 2
文章标签： html html5 css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/YANGMENGZHENG/article/details/120764284
版权
本文详细介绍了HTML5中如何创建和使用列表（有序列表、无序列表及列表嵌套）、表格（主要标签、制作方法及单元格合并）以及表单（标签、控件类型如input、select、textarea等）。通过实例展示了各项元素的用法，帮助理解HTML5的这些基本元素。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

目录

一、列表（有序列表和无序列表）

1、无序列表

2、有序列表

3、列表的嵌套

二、表格

1、表格所需的主要标签

2、详细介绍表格的制作

3、单元格的合并（跨行和跨列）

                            ​

 三、表单

1、表单标签

2、表单控件

A、input控件

B、select控件：下拉列表控件

 C、textarea控件：文本区,可以输入多行、多列数据

D、button控件：按钮控件  

E、label控件：用于显示文本

     3、表单练习

  ​         

我们可以使用html来制作列表、表格和表单。

 

一、列表（有序列表和无序列表）

1、无序列表

(1)需要用到<ul></ul>标签和<li></li>标签。

<body>
    <h3>一个无序列表：</h3>
    <ul>
        <li>苹果</li>
        <li>桃子</li>
        <li>栗子</li>
        <li>桔子</li>
    </ul>
    
</body>

（2）如示例所示，无序列表项目符号默认为小黑点。如果需要更改，则令<ul type="需要的形状">,如图:

<!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>
    <h3>一个无序列表：</h3>
    <ul type="disc">
        <li>苹果</li>
        <li>桃子</li>
        <li>栗子</li>
        <li>桔子</li>
    </ul>
    <br>
    <ul type="circle">
        <li>苹果</li>
        <li>桃子</li>
        <li>栗子</li>
        <li>桔子</li>
    </ul>
    <br>
    <ul type="square">
        <li>苹果</li>
        <li>桃子</li>
        <li>栗子</li>
        <li>桔子</li>
    </ul>
</body>
</html>

列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。

2、有序列表

(1)需要用到<ol></ol>标签和<li></li>标签。

 <h3>一个有序列表：</h3>
    <ol type="disc">
        <li>苹果</li>
        <li>桃子</li>
        <li>栗子</li>
        <li>桔子</li>
    </ol>

 

(2)有序列表项目符号定义举例：

 <li>你平时休闲经常去的地方是哪（）</li>
        <br>
        <ol type="A" start="1">
         <li>郊外</li>
         <li>商场</li>
         <li>公园</li>
         <li>酒吧</li>
         <br>
        </ol>

 

 列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。

3、列表的嵌套

有序列表和无序列表可以实现嵌套，即在有序列表里可以嵌套无序列表，无序列表也是里嵌套有序列表，当然还有其他列表，比如说定义列表。

二、表格

1、表格所需的主要标签

A、每个表格由 table 标签开始。

B、每个表格行由 tr 标签开始。

C、每个表格数据由 td 标签开始

2、详细介绍表格的制作

（1）、标签及其解释

<table border='边框线的宽度' align='表格在页面中的对齐方式' bgcolor='表格的背景色' background='背景图片'></table> 表示一个表格
<thead></thead>语义标签,表示表格的头部
<tr align='行的对齐方式' bgcolor='行的背景色' background='背景图片'></tr>

表示表格的行,一

个tr代表一行

<th width='列宽'></th>表示列头,文字会自动加粗、自动居中,特殊的单元格
<tbody></tbody>语义标签,表示表格的主体部分
<td align='单元格的对齐方式'></td>表示的表格中的单元格
<caption></caption>

表示表格的标题

表格的边框属性：border用来设置边框线的粗细
表格的填充属性:cellpadding表示的是单元格的内容和单元格边框之间的距离
单元格的间距属性：cellspacing表示的是单元格之间的距离

 

（2）、示例

<!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>
    <table border="1" align="center"  >
        <thead>
            <tr bgcolor="grey">
                <th width="400" >
                    这是表头
                </th>
            </tr>
        </thead>
        <tbody>
            <tr bgcolor="yellow" align="center">
                <td>第一</td>
                <td>第二</td>
                <td>第三</td>
                <td>第四</td>
                <td>第五</td>
            </tr>
            <tr>
                <td align="center">二一</td>
                <td bgcolor="blue">二二</td>
                <td>二三</td>
                <td>二四</td>
                <td>二五</td>
            </tr>
            <tr>
                <td>
                    <img src="../images/1.gif" alt="">
                </td>
                <td>
                    <img src="../images/1.gif" alt="">
                </td>
                <td>
                    <img src="../images/1.gif" alt="">
                </td>
                <td>
                    <img src="../images/1.gif" alt="">
                </td>
                <td>
                    <img src="../images/1.gif" alt="">
                </td>
            </tr>
        </tbody>
    </table>
</body>
</html>

 如图所示：这是一个三行五列的表格。tr标签中的背景颜色在本行有效；td标签中的属性设置只在本单元格有效；插入图片需要用到<img></img>标签。

3、单元格的合并（跨行和跨列）

A、跨行（合并行）

在<td>中添加属性rowspan,该属性的值为占据的行数

<body>
    <table border="1" align="center">
        <tr>
            <td rowspan="2">跨两列</td>
            <td>小王</td>
            <td>小李</td>
        </tr>
        <tr>
            <td>张三</td>
            <td>李四</td>
            
        </tr>
    </table>
</body>

                                       

 

B、跨列（合并列）

<body>
    <table border="1" align="center">
        <tr>
            <td colspan="2">跨两行</td>
            <td>小王</td>
        </tr>
        <tr>
            <td>张三</td>
            <td>李四</td>
            <td>王五</td>
            
        </tr>
    </table>
</body>

                            

 三、表单

1、表单标签

<form></form>
           

 A、action属性：表单数据提交的远程服务器的地址(服务器的URL)
            
 B、method属性：表单数据的提交方式

2、表单控件

A、input控件

单行输入文本框 <input type='text'/>
密码框<input type='password' />
重置按钮<input type='reset' value='按钮上显示的文字'/>,若没有value属性,按钮上默认显示'重置'，只有放在<form></form>中才有效.
提交按钮<input type='submit'/>，将表单数据提交给action指定的URL
单选按钮<input type='radio' name='控件的名称' checked/> ,属性'checked'表示选中
复选框<input type='checkbox' />
数字<input type='number' />
日期选择框<input type='date' />
时间选择框<input type='time' />
隐藏控件<input type='hidden' />

B、select控件：下拉列表控件

<body>
<form action="">
    <select>
        <option value=''>列表项1</option>
        <option value=''>列表项2</option>
        <option value=''>列表项3</option>
     </select>
</form>
</body>

点击即会有列表。

 C、textarea控件：文本区,可以输入多行、多列数据

示例：<textarea cols="30" rows="10"></textarea>

D、button控件：按钮控件  <button type='按钮的类型'></button>

  type属性的取值：
                
                   a、type='button'：普通按钮,不含默认的动作(功能)
                   
                   b、type='reset'：重置按钮,重置表单控件
                   
                   c、type='submit'：提交按钮,将表单控件的值提交给远程服务器


E、label控件：用于显示文本

强调：
              
               (1)所有的表单控件(标签)都可以有id属性,id的属性值不能重复
               
               (2)所有的表单控件都有value属性,value属性的值会提交给远程服务器
               
               (3)所有的表单控件都有name属性,在后台可以通过name属性值找到对应的标签
               
               (4)disabled属性表示input是否可用(置灰)
               
               (5)readonly属性表示input的值是只读的
               
               (6)单行文本输入框(<input type='text'/>)的属性placeholder起提示的作用
               
               (7)required属性表示input是必须要输入的
               
               (8)maxlength属性表示input输入的最大长度
               
               (9)tabIndex属性用于设置表单控件的tab顺序
               
               (10)title属性用来设置鼠标经过时的提示文字

     3、表单练习

<!DOCTYPE html>

</head>
<body>
    <form action="#" method="GET"> 
        <center>
            <font face='宋体' color='bule' size="6" align='center'>
                用户注册表单
            </font>
           </center>
           <br/><br/>
           <hr>
           <table>
               <tbody>
                   <tr>
                       <td width="200">用户名：</td>
                       <td width="400"><input type="text" name="" id=""></td>
                       <td><font face='宋体' color='red' size="3" align='center'>
                        用户名长度为4-16字符
                       </font></td>
                   </tr>
                   <tr>
                    <td width='200' align="left">密码：</td>
                    <td width='300'>
                        <input type="password"  title="登录密码"size='6'/>
                    </td>
                    <td width='200' align="left">
                        <font face='宋体' color='red' size="3" align='left'>
                       密码长度为6个字符
                        </font>
                    </td>
                </tr>
                    <tr>
                        <td width='200' align="left">确认密码：</td>
                        <td width='300'>
                            <input type="password" title="登录密码"size='6'/>
                        </td>
                        <td width='200' align="left">
                            <font face='宋体' color='red' size="3" align='left'>
                           重复密码
                            </font>
                        </td>
                    </tr> 
                    <tr>
                        <td width='200' align="left">性别：</td>
                        <td width='300'>
                            </label>
                                <input type="radio" name="sex" id='s1'>
                                <label for="s1">男</label>
                                 <input type="radio" name="sex" id="s2">
                            <label for="s2">女</label>
                        </td>
                    </tr>
                    <tr>
                        <td width='200' align="left" >出生日期:</td>
                        <td width='300'>
                            <select ><option value="">----</option></select>年
                            <select ><option value="">----</option></select>月
                            <select ><option value="">----</option></select>日
                           
                        </td>
                    </tr>
                    <tr>
                        <td width='200' align="left">爱好：</td>
                        <td>
                            <input type="checkbox" id="chk1">
                            <label for="chk1">体育</label>
                            <input type="checkbox" id="chk2">
                            <label for="chk2">旅游</label>
                            <input type="checkbox" id="chk3">
                            <label for="chk3">音乐</label>
                        </td>
                        <td width='200' align="left">
                            <font face='宋体' color='red' size="3" align='left'>
                          至少选三项
                            </font>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            
                        </td>
                        <td>
                            <input type="checkbox" id="chk1">
                            <label for="chk1">影视</label>
                            <input type="checkbox" id="chk2">
                            <label for="chk2">追星</label>
                            <input type="checkbox" id="chk3">
                            <label for="chk3">写作</label>
                        </td>
                    </tr>
                    <tr>
                        <td width='200' align="left">个人介绍：</td> 
                        <td>
                            <textarea cols="30" rows="10"></textarea> 
                        </td>
                    </tr>
                    <tr>
                        <td width='200' align="left">验证码：</td>
                        <td>
                            <input type="text" >791216
                        </td>  
                        <td width='200' align="left">
                            <font face='宋体' color='red' size="3" align='left'>
                          请输入验证码
                            </font>
                    </tr>
           </table>
           <hr>
       <table>
           <tbody>
            <tr>
                <td width='200'></td>
                <td width='400'></td>
                <td>
                    <button type="reset" value="取消">重置</button>
                    <button type="submit" value="提交">提交</button>
                </td>
            </tr>
           </tbody>
       </table>
    </form>
</body>

           

 

命中。
关注
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值