HTML标签二（列表表格表单）

最新推荐文章于 2024-06-19 19:56:10 发布

月亮不营业

最新推荐文章于 2024-06-19 19:56:10 发布

阅读量189

点赞数 1

分类专栏：笔记文章标签： html html5

本文链接：https://blog.youkuaiyun.com/qq_46440394/article/details/118326585

版权

笔记专栏收录该内容

37 篇文章

订阅专栏

本文介绍了HTML中的列表标签，包括有序列表、无序列表和定义列表；表格标签，如表格结构、表头和表尾等；以及form表单的相关元素，如文本输入框、密码框、按钮、单选按钮、复选框等，还特别讲解了表单的属性和用途。

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

列表标签

1.有序列表order list

格式：

            <ol>
                       <li></li>

            </ol>

2.无序列表

type:circle，空心小圆圈
square,小方块
disc，默认的实心小圆圈

格式：

   <ul>
                 <li></li>

             </ul>

3.定义列表define list

   <dl>
         <dt>
         <dd></dd>
</dt>

    </dl>

表格标签

格式：

     <table>
      <tr>  行

           <td></td>  列

     </tr>
     </table>

定义表格列的属性：<col>

定义表格列的组：<colgroup>

表格的页眉：<thead></thead>

表头：<th></th>

表格内容：<tbody></tbody>

表格底部：<tfoot></tfoot>

标题：<caption></caption>

属性：

1.<table>

align:left  center right

bgcolor：背景颜色

border

cellpadding:单元边沿与其内容之间的空白

 cellspacing:单元格之间的空白

 width

2.<tr>

align

bgcolor

valign:表格行中内容的垂直对齐方式

align
bgcolor  
colspan:单元格可横跨列数 
height
rowspan:单元格可横跨的行数
valign  
width

form表单

**
收集用户信息，并提交给服务器（登录、注册、填表）

格式：<form action="提交地址" method="get|post" name="表单名称" enctpye="被提交数据的编码"></form>

      get：参数信息会显示在url上，不安全

      post：参数信息不会显示在url上，安全

type="text",表示这为一个文本输入框

placeholder，设置输入框提示信息

 size，设置框的宽度

 maxlength，设置输入框输入的最大字符长度

1.单行文本输入框：

<input type="text"></input>

2.密码输入框：

<input type="password"></input>

3.提交按钮：

<input type="submit"></input>

value:用来设置在浏览器中显示的按钮的名称

4.重置按钮：

<input type="reset"></input>

value:用来设置在浏览器中显示的按钮的名称

为了方便用户选择，可以通过<label>标签来选择

<div>

<input type="radio" name="sex" value="1" id="sex1">

<label for="sex1">男</label>

</div>

<label>标签可以放在<input>之前或之后，区别是“男”显示在按钮的左或右边

<label>标签通过for属性与<input>标签的id属性相对应。两者值一致时，点击<label>标签包裹的文本就可以实现选择。

5.单选按钮：

<input type="radio"></input>

value:表示提交到后台的数据

name必须取相同名称

6.复选框：

<input type="checkbox"></input>

7.电子邮件：

<input type="email"></input>

required:表示为一个必填项

8.URL:

<input type="url"></input>

当设置required属性时会验证输入串是否为一个url，如果不是会给出一个提示

9.电话号码：

<input type="tel"></input>

10.日期：

<input type="data" name=""></input>

11.颜色：

<input type="color"></input>

12.数字：

<input type="number"></input>

min：允许输入的最小有效数字

max：允许输入的最大有效数字

step:控制数字变化的步长

13.隐藏表单域：

<input type="hidden" name="sourceSite"></input>

13.文件上传：

<input type="file"></input>

<form>标签的method必须为post;
enctype属性必须为multipart/form-data

14.图片按钮：

<input type="image" src=""></input>

会提交表单数据

普通按钮：button

1.下拉列表：section和option标签

格式：

<section name="" id="" size="" multiple="">

<option value=""></option>  给option设置selected属性，设置当前项为默认选中项

</section>

设置size属性后，允许option同时显示的数量大于1

设置multiple='multiple’后，允许用户按住 ctrl +鼠标左键实现多选

2.多行文本框：

<textarea name="' id="" cols="" rows=""></textarea>

在这里插入图片描述