html表格标签表单标签列表标签

作者： | 来源：互联网 | 2023-08-24 10:26

表格标签1.表格框架标签描述table定义表格tr行td列th表头标签caption表格标题2.表格属性属性名含义常用属性值border设置表格的边框(默认border0

表格标签

1.表格框架

标签	描述
table	定义表格
tr	行
td	列
th	表头标签
caption	表格标题

2.表格属性

属性名	含义	常用属性值
border	设置表格的边框(默认border&＃61;"0"无边框)	像素值
cellspacing	设置单元格与单元格边框之间的空白间距	像素值(默认为2像素)
cellpading	设置单元格内容与单元格边框之间的空白间距	像素值(默认为1像素)
width	设置表格的宽度	像素值
height	设置表格的高度	像素值
align	设置表格再网页中的水平对齐方式	left、center、right

3.合并单元格

1.合并单元格 2.删除多余单元格

跨行合并先上后下

<td rowspan&＃61;"3">文本td>

跨列合并先左后右

<td clospan&＃61;"3">文本td>

4.表格结构

thead &＃xff1a;用于定义表格的头部。用来放标题之类的东西。内部必须拥有标签

tbody &＃xff1a;用于定义表格主体。放数据本体。

tfoot &＃xff1a;放表格的脚注之类

列表标签

1.`ul`无序列表

ul标签只能嵌套li标签&＃xff0c;li标签相当于一个容器&＃xff0c;可以容纳所有元素

2.`ol`有序列表

如下所示&＃xff1a;

<body> <ul><li>上午课程li><ul><li>计算机文化基础li><li> 网页设计li>ul><li> li><ol><li>C语言程序设计li><li>大学英语li>ol>ul>body>

3.自定义列表 dl

dt 和 dd 是并列关系

<dl><dt>文本1dt><dd>围绕文本1、解释dd><dd>围绕文本1、解释dd><dd>围绕文本1、解释dd> dl>

表单标签

1.input属性

input是单标签

type属性

属性值描述
text 单行文本输入框
password 密码输入框
radio 单选按钮
checkbox 复选框
button 普通按钮
submit 提交按钮
reset 重置按钮
image 图像形式的提交按钮
file 文件域
这个属性通过改变值&＃xff0c;可以决定你属于哪种input表单。

用户名&＃xff1a;<input type&＃61;"text" /> 密码&＃xff1a;<input type&＃61;"password" /><input type&＃61;"属性值" value&＃61;"hello" />
value属性

用户名&＃xff1a;<input type&＃61;"text" name&＃61;"username" value&＃61;"请输入用户名">
value 默认显示的文本。设置表单刚打开页面就默认显示的几个字。
name 属性

name 表单的名字&＃xff0c;后台通过name属性找到表单

页面中的表单很多&＃xff0c;name用于区别不同的表单。

<input type&＃61;"radio" name&＃61;"sex" />男 <input type&＃61;"radio" name&＃61;"sex" />女
checked属性

表示默认选中状态&＃xff0c;常用于单选按钮和复选按钮。

性别&＃xff1a; <input type&＃61;"radio" name&＃61;"sex" value&＃61;"男" checked&＃61;"checked" />男 <input type&＃61;"radio" name&＃61;"sex" value&＃61;"女" />

属性值	描述
text	单行文本输入框
password	密码输入框
radio	单选按钮
checkbox	复选框
button	普通按钮
submit	提交按钮
reset	重置按钮
image	图像形式的提交按钮
file	文件域

2.label元素

当我们鼠标点击 label标签里面的文字时&＃xff0c; 光标会定位到指定的表单里面

如何绑定元素&＃xff1f;

1.用label直接包含input表单、适合单个表单选择

<label> 用户名&＃xff1a;label>

2.使用 for 和 id 关联起来

<label for&＃61;"sex">男label> <input type&＃61;"radio" name&＃61;"sex" id&＃61;"sex">

3.`textarea` 文本域

<textarea cols&＃61;"每行中的字符数" rows&＃61;"显示的行数"> 文本内容 textarea>

通过 textarea 控件可以轻松的创建多行文本输入框

cols&＃61;“每行中的字符数” rows&＃61;“显示的行数” 我们实际开发不用&＃xff0c;直接使用css来更改样式

文本框和文本域的区别

表单	名称	区别	默认值显示	用于场景
input type&＃61;“text”	文本框	只能显示一行文本	单标签&＃xff0c;通过value显示默认值	用户名、昵称、密码等
textarea	文本域	可以显示多行文本	双标签&＃xff0c;默认值写到标签中间	留言板

4.select 下拉列表框

吐个槽吧,看都看了


            
                
                                        会员登录 | 用户注册



    
        推荐阅读
        
            
                                
                    
                        function
                        绕过WAF的XSS检测机制及构建XSS payload的方法
                    

                    
                                                
                        本文介绍了绕过WAF的XSS检测机制的方法，包括确定payload结构、测试和混淆。同时提出了一种构建XSS payload的方法，该payload与安全机制使用的正则表达式不匹配。通过清理用户输入、转义输出、使用文档对象模型（DOM）接收器和源、实施适当的跨域资源共享（CORS）策略和其他安全策略，可以有效阻止XSS漏洞。但是，WAF或自定义过滤器仍然被广泛使用来增加安全性。本文的方法可以绕过这种安全机制，构建与正则表达式不匹配的XSS payload。 ...
                        [详细]
                    
                    

                    
                        蜡笔小新   2023-12-11 19:42:30
                    

                

                
                                
                    
                        function
                        【Vue】表单 input 绑定
                    

                    
                                                
                        网址：https:vue.docschina.orgv2guideforms.html表单input绑定基础用法可以通过使用v-model指令，在 ...
                        [详细]
                    
                    

                    
                        蜡笔小新   2023-12-11 18:07:28
                    

                

                                
                    
                    
                
                
                                
                    
                        function
                        input语句的作用有哪些
                    

                    
                                                
                        本篇文章为大家展示了input语句的作用有哪些，内容简明扼要并且容易理解，绝对能使你眼前一亮，通过这篇文章的详细介绍希望你能有所收获。HTML标签 ...
                        [详细]
                    
                    

                    
                        蜡笔小新   2023-10-15 11:29:51
                    

                

                
                                
                    
                        function
                        前端判断登陆页面输入是否符合要求
                    

                    
                                                
                        前端判断登陆页面输入是否符合要求 ...
                        [详细]
                    
                    

                    
                        蜡笔小新   2023-10-14 14:34:15
                    

                

                
                                
                    
                        php
                        Android 新闻App的本地服务器搭建教程
                    

                    
                                                
                        本文介绍了在开发Android新闻App时，搭建本地服务器的步骤。通过使用XAMPP软件，可以一键式搭建起开发环境，包括Apache、MySQL、PHP、PERL。在本地服务器上新建数据库和表，并设置相应的属性。最后，给出了创建new表的SQL语句。这个教程适合初学者参考。 ...
                        [详细]
                    
                    

                    
                        蜡笔小新   2023-12-14 17:15:19
                    

                

                
                                
                    
                        request
                        【译】发送表单数据
                    

                    
                                                
                        这是原文链接：sendingformdata许多情况下，我们使用表单发送数据到服务器。服务器处理数据并返回响应给用户。这看起来很简单，但是 ...
                        [详细]
                    
                    

                    
                        蜡笔小新   2023-12-14 16:19:10
                    

                

                
                                
                    
                        php
                        南邮ctf-web的writeup
                    

                    
                                                
                        本文介绍了南邮ctf-web的writeup，包括签到题和md5 collision。在CTF比赛和渗透测试中，可以通过查看源代码、代码注释、页面隐藏元素、超链接和HTTP响应头部来寻找flag或提示信息。利用PHP弱类型，可以发现md5('QNKCDZO')='0e830400451993494058024219903391'和md5('240610708')='0e462097431906509019562988736854'。 ...
                        [详细]
                    
                    

                    
                        蜡笔小新   2023-12-13 10:58:55
                    

                

                
                                
                    
                        function
                        单击时动态创建元素 - Dynamically create  element on click
                    

                    
                                                
                        Ihavethefollowingonhtml我在html上有以下内容<html><head><scriptsrc..3003_Tes ...
                        [详细]
                    
                    

                    
                        蜡笔小新   2023-12-12 15:59:36
                    

                

                
                                
                    
                        function
                        前端库Bootstrap框架：「11]使用 span 创建行内元素
                    

                    
                                                
                            
                        
                                                
                        前端库Bootstrap框架：「11]使用 span 创建行内元素 ...
                        [详细]
                    
                    

                    
                        蜡笔小新   2023-10-15 11:37:25
                    

                

                
                                
                    
                        php
                        php:细说PHP之文章发布操作实例1
                    

                    
                                                
                        文章发布实例这个例子，因为前两章是字符串处理和正则表达式，所以重点也就用了这些内容。首先，进的事post.php这个文件<formmethodpostactio ...
                        [详细]
                    
                    

                    
                        蜡笔小新   2023-10-13 18:50:39
                    

                

                
                                
                    
                        php
                        CSS3选择器的使用方法详解，提高Web开发效率和精准度
                    

                    
                                                
                            
                        
                                                
                        本文详细介绍了CSS3新增的选择器方法，包括属性选择器的使用。通过CSS3选择器，可以提高Web开发的效率和精准度，使得查找元素更加方便和快捷。同时，本文还对属性选择器的各种用法进行了详细解释，并给出了相应的代码示例。通过学习本文，读者可以更好地掌握CSS3选择器的使用方法，提升自己的Web开发能力。 ...
                        [详细]
                    
                    

                    
                        蜡笔小新   2023-12-14 14:37:52
                    

                

                
                                
                    
                        function
                        MySQL显示SQL语句执行时间的实例详解
                    

                    
                                                
                        本文详细介绍了如何使用MySQL来显示SQL语句的执行时间，并通过MySQL Query Profiler获取CPU和内存使用量以及系统锁和表锁的时间。同时介绍了效能分析的三种方法：瓶颈分析、工作负载分析和基于比率的分析。 ...
                        [详细]
                    
                    

                    
                        蜡笔小新   2023-12-12 16:16:42
                    

                

                
                                
                    
                        match
                        PHP对于建括号字符过滤的问题
                    

                    
                                                
                        有几百条数据类似*Oct1809:46:09:%NFPP_IP_GUARD-4-DOS_DETECTED:Host<IP60.12.174.45,MACNA,portGi2 ...
                        [详细]
                    
                    

                    
                        蜡笔小新   2023-10-15 15:30:17
                    

                

                
                                
                    
                        match
                        第二次网页前端培训笔记（表单，INPUT及常用字符）
                    

                    
                                                
                            
                        
                                                
                        1.表单form2.INPUT编号: ...
                        [详细]
                    
                    

                    
                        蜡笔小新   2023-10-15 09:01:49
                    

                

                
                                
                    
                        export
                        linux编写弹球游戏,手把手教你开发一款基于Box2D的弹球游戏（一）
                    

                    
                                                
                            
                        
                                                
                        今天我们来介绍一款物理引擎，并基于它完成一个弹球游戏。提到物理引擎，就是在游戏中模拟真实世界的运动，碰撞，摩擦等等。Coco ...
                        [详细]
                    
                    

                    
                        蜡笔小新   2023-10-14 19:48:47

html表格标签表单标签列表标签

表格标签

1.表格框架

2.表格属性

3.合并单元格

4.表格结构

列表标签

1.ul无序列表

2.ol有序列表

3.自定义列表 dl

表单标签

1.input属性

type属性

value属性

name 属性

checked属性

2.label元素

3.textarea 文本域

文本框和文本域的区别

4.select 下拉列表框

1.`ul`无序列表

2.`ol`有序列表

3.`textarea` 文本域