HTML常用标签02

作者：shaihaiyou | 来源：互联网 | 2023-08-29 14:14

1.表格嵌套表格的嵌套

1.表格嵌套

<html><head><meta charset&＃61;"UTF-8"><title>表格的嵌套title>head><body><table border&＃61;"1px" align&＃61;"center" width&＃61;"400px" height&＃61;"300px"><caption>xxx学校高数平均成绩caption><tr><th>姓名th><th>班级th><th>成绩th>tr><tr><td>张三td><td><table border&＃61;"1px" width&＃61;"100%" height&＃61;"100%"><tr><td>11td><td>12td><td>13td>tr> <tr><td>21td><td>22td><td>23td>tr> <tr><td>31td><td>32td><td>33td>tr>table>td><td>78td>tr><tr><td>李四td><td>二班td><td>79td>tr><tr><td>王五td><td>一班td><td>67td>tr>table>body> html>

效果&＃xff1a; 在这里插入图片描述

2.表单标签form

input标签中必填的属性&＃xff1a;name&＃xff08;给后台标记当前input标签中的内容&＃xff09;

属性&＃xff1a;

action&＃xff1a;提交到地址的url
method&＃xff1a;提交方式
1&＃xff09;get方式
2&＃xff09;post方式
二者区别&＃xff1a;
-get&＃xff1a;将用户的信息提交到了地址栏&＃xff0c;不安全&＃xff1b;提交的数据大小有限制&＃xff0c;不超过4KB.
-post&＃xff1a;不会讲用户的信息提交到地址栏&＃xff1a;在浏览器Header中可看到实体内容&＃xff1b;使用post方式居多&＃xff0c;用来上传文件&＃xff0c;提交的数据大小无限制。

表单项&＃xff1a;input type &＃61; “text”&＃xff1a;文本输入框input type &＃61; “password”&＃xff1a;密码输入框input type &＃61; “radio”&＃xff1a;单选按钮input type&＃61; “checkbox”&＃xff1a;复选框select&＃xff1a;下拉菜单option&＃xff1a;下拉选项input type &＃61; “file”&＃xff1a;上传文件input type &＃61; “date”&＃xff1a;当前年月日时间input type &＃61; “date-local”&＃xff1a;当前年月日--&＃xff1a;--input type &＃61; “number”&＃xff1a;只能输入数字h5中的属性&＃xff1a;placeholder&＃xff1a;当前input的默认值按钮&＃xff1a;input type &＃61; “submit”&＃xff1a;提交input type &＃61; “button”&＃xff1a;普通按钮input type &＃61; “reset”&＃xff1a;重置按钮textarea&＃xff1a;文本域属性&＃xff1a;rows&＃xff08;指定文本域的行数&＃xff09;cols&＃xff08;指定列数&＃xff09;input type &＃61; “hidden”&＃xff1a;隐藏域&＃xff08;没有任何效果显示&＃xff09;

<html><head><meta charset&＃61;"UTF-8"><title>表单标签02title>head><body>用户名&＃xff1a; 密码&＃xff1a; 性别&＃xff1a;男女 爱好&＃xff1a;足球篮球排球 籍贯&＃xff1a; 自我介绍&＃xff1a;本人............</textarea>出生日期&＃xff1a;<input type &＃61; "date" name &＃61; "birth" /><input type &＃61; "datetime-local" name &＃61; "birth" /><br />联系电话&＃xff1a;<input type &＃61; "number" name &＃61; "phone" /><br /><input type &＃61; "submit" value&＃61;"提交"/><input type&＃61;"button" value&＃61;"这是一个普通按钮" /><input type &＃61; "reset" value&＃61;"重置" /></form></body> </html></code></pre> 效果&＃xff1a; <img src="https://img.php1.cn/3cd4a/1eebe/cd5/fb32005f2115b419.webp?x-oss-process&＃61;image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlcmZlY3RtYXRjaF9H,size_16,color_FFFFFF,t_70" alt="在这里插入图片描述" /> <h3>3.格式优雅的表单</h3> <code class="prism language-html"> <html><head><meta charset&＃61;"UTF-8"><title>格式优雅的表单</title></head><body><form action&＃61;"#" method&＃61;"get"><table border&＃61;"1px" width &＃61;"300px" align&＃61;"center"><tr><td>用户名</td><td><input type &＃61; "text" name &＃61; "username" /></td></tr><tr><td>密码</td><td><input type &＃61; "password" name &＃61; "password" /></td></tr><tr><td>性别</td><td><input type &＃61; "radio" name &＃61; "gender" />男<input type &＃61; "radio" name &＃61; "gender" />女</td></tr><tr><td>爱好</td><td><input type &＃61; "checkbox" name &＃61; "hobit" />足球<input type &＃61; "checkbox" name &＃61; "hobit" />篮球<input type &＃61; "checkbox" name &＃61; "hobit" />排球</td></tr><tr><td>邮箱</td><td><input type &＃61; "email" name &＃61; "email" /></td></tr><tr><td>出生日期</td><td><input type &＃61; "date" name &＃61; "birth" /></td></tr><tr><td>验证码</td><td><input type &＃61; "text" name &＃61; "code" /></td></tr><tr><td colspan&＃61;"2" align&＃61;"center" ><input type &＃61; "submit" value&＃61;"提交" style &＃61; "background-color: coral"/></td></tr></table> </form></body> </html></code></pre> 效果&＃xff1a; <img src="https://img.php1.cn/3cd4a/1eebe/cd5/3e641eb5f5c8cd90.webp?x-oss-process&＃61;image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlcmZlY3RtYXRjaF9H,size_16,color_FFFFFF,t_70" alt="在这里插入图片描述" /> <script type="text/javascript"> var cpro_id = "u6885494"; </script> <script type="text/javascript" src="//cpro.baidustatic.com/cpro/ui/cm.js"></script> </div> <div class="blog_tags"> <ul> <li><a href="https://www.php1.cn/tag/html" target="_blank" title="html">html</a></li> <li><a href="https://www.php1.cn/tag/char" target="_blank" title="char">char</a></li> <li><a href="https://www.php1.cn/tag/utf-8" target="_blank" title="utf-8">utf-8</a></li> <li><a href="https://www.php1.cn/tag/io" target="_blank" title="io">io</a></li> <li><a href="https://www.php1.cn/tag/input" target="_blank" title="input">input</a></li> <li><a href="https://www.php1.cn/tag/get" target="_blank" title="get">get</a></li> <li><a href="https://www.php1.cn/tag/post" target="_blank" title="post">post</a></li> <li><a href="https://www.php1.cn/tag/安全" target="_blank" title="安全">安全</a></li> <li><a href="https://www.php1.cn/tag/header" target="_blank" title="header">header</a></li> </ul> </div> <div class="article_cmnt" style="display: none;"> <div class="cmnt_title">写下你的评论吧 !</div> <form action="" method="post"> <div class="cmnt_text"> <textarea class="ping-txt" onfocus="ck_txt(this);" onblur="ck_txt2(this);" id="ping-txt" name="ping-txt" >吐个槽吧,看都看了


            
                
                                        会员登录 | 用户注册



    
        推荐阅读
        
            
                                
                    
                        input
                        【译】发送表单数据
                    

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

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

                

                
                                
                    
                        input
                        【Vue】表单 input 绑定
                    

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

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

                

                                
                    
                    
                
                
                                
                    
                        php
                        如何在php文件中添加图片？
                    

                    
                                                
                            
                        
                                                
                        本文详细解答了如何在php文件中添加图片的问题，包括插入图片的代码、使用PHPword在载入模板中插入图片的方法，以及使用gd库生成不同类型的图像文件的示例。同时还介绍了如何生成一个正方形文件的步骤。希望对大家有所帮助。 ...
                        [详细]
                    
                    

                    
                        蜡笔小新   2023-12-11 10:46:38
                    

                

                
                                
                    
                        input
                        input语句的作用有哪些
                    

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

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

                

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

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

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

                

                
                                
                    
                        php
                        高质量SQL书写的30条建议
                    

                    
                                                
                            
                        
                                                
                        本文提供了30条关于优化SQL的建议，包括避免使用select *，使用具体字段，以及使用limit 1等。这些建议是基于实际开发经验总结出来的，旨在帮助读者优化SQL查询。 ...
                        [详细]
                    
                    

                    
                        蜡笔小新   2023-12-13 13:24:33
                    

                

                
                                
                    
                        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
                    

                

                
                                
                    
                        php
                        深入理解CSS中的margin属性及其应用场景
                    

                    
                                                
                            
                        
                                                
                        本文主要介绍了CSS中的margin属性及其应用场景，包括垂直外边距合并、padding的使用时机、行内替换元素与费替换元素的区别、margin的基线、盒子的物理大小、显示大小、逻辑大小等知识点。通过深入理解这些概念，读者可以更好地掌握margin的用法和原理。同时，文中提供了一些相关的文档和规范供读者参考。 ...
                        [详细]
                    
                    

                    
                        蜡笔小新   2023-12-12 18:01:10
                    

                

                
                                
                    
                        php
                        php将utf8转为gbk,php utf8怎么转gbk
                    

                    
                                                
                            
                        
                                                
                        phputf8转gbk的方法：首先创建一个PHP示例文件；然后通过“iconv(UTF-8,gbkTRANSLIT,$str);”方法将字符串的 ...
                        [详细]
                    
                    

                    
                        蜡笔小新   2023-10-17 21:19:24
                    

                

                
                                
                    
                        php
                        asp中如何嵌入python的简单介绍
                    

                    
                                                
                            
                        
                                                
                        本文目录一览：1、如何在IIS中执行Python脚本 ...
                        [详细]
                    
                    

                    
                        蜡笔小新   2023-10-17 19:41:52
                    

                

                
                                
                    
                        php
                        undefined err_url in mult_submits
                    

                    
                                                
                        UsingPMA-2.5.2-rc2onPHP-4.1.2andnothavingDROPTABLEprivilege,whenI-sel ...
                        [详细]
                    
                    

                    
                        蜡笔小新   2023-10-16 14:20:57
                    

                

                
                                
                    
                        select
                        十六.增加一个项目协作留言板功能（二）----- 建立一个任务管理的列表页面
                    

                    
                                                
                            
                        
                                                
                        我们设计一个页面来展示正在处理的任务，该表格可以参照之前基础信息的增删改查。用户通过这个页面对任务进行相应操作。1.在views. ...
                        [详细]
                    
                    

                    
                        蜡笔小新   2023-10-16 11:43:26
                    

                

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

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

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

                

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

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

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

                

                
                                
                    
                        php
                        WP User Frontend pro使用教程
                    

                    
                                                
                            
                        
                                                
                        关于WPUserFrontendpro的自定义字段用法，WPUserFrontendpro的基本常用的字段基本已经和wp的字段匹配，标题就是标题，内容就是内容，特色图片也一起绑 ...
                        [详细]
                    
                    

                    
                        蜡笔小新   2023-10-14 14:31:05