手拉手一起学HTML(下)——表格标签和列表标签，表单标签

🍓个人主页：bit..

🍒系列专栏：Linux(Ubuntu)入门必看 C语言刷题数据结构与算法

一.表格标签

1.1表格的主要作用

1.2表格的基本语法

1.3表头单元格标签

1.4表格属性

1.5表格结构标签

1.6合并单元格（把多个单元格合并成一个单元格）

一.表格标签

表格是实际开发中非常常用的标签：

表格的主要作用
表格的基本语法

1.1表格的主要作用

表格主要用于显示，展示数据，因为他们可以让数据显示的非常规整，可读性好。

1.2表格的基本语法


<table>
    <tr>
        <td>
            单元格内的文字。
        td>
    ...
    tr>
    ...
table>

用于定义表格的标签。
标签用于定义表格的行，必须嵌套在

标签中。
用于定义表格中的单元格，必须嵌套在标签中
字母td指表格数据，级数据单元格的内容。


<table>
    <tr>
        <td>
            姓名
        td>
        <td>
            性别
        td>
    tr>
    ...
table>

1.3表头单元格标签

一般表头单元格位于表的第一行或第一列，表头单元格里面的文本内容加粗居中显示。

标签表示HTML表格的表头部分（table head的缩写）


<table>
    <tr>
        <th>
            姓名
        th>
        ...
    tr>
    ...
table>

1.4表格属性

表格标签这部分属性我们在实际开发中不常用，后面使用CSS来设置

属性名	属性值	描述
align	left,center,right	规定表格周围元素的对齐方式
border	1或者" "	规定表格是否有边框,默认值为" ",表示无边框
cellpadding	像素值	规定单元格边沿与其内容的空白，默认为1像素
cellspacing	像素值	规定单元格之间的空白默认为两像素
width/height	像素值或百分比	规定表格的宽度

1.5表格结构标签

表格的头部区域

表格的主体区域

用于定义表格的头部，内部必须有标签，一般位于第一行。

用于定义表格的主体，主要用于存放数据主体。

以上标签都是放在

标签中。

1.6合并单元格（把多个单元格合并成一个单元格）

合并单元格的方法：

跨行合并：rowspan="合并单元格的个数"

跨行合并：clospan="合并单元格的个数"

目标单元格：（写合并代码）

跨行：最上侧单元格为目标单元格，写合并代码。
跨列：最左侧单元格为目标单元格，写合并代码。

合并单元格三部曲：

先确实是跨行还是跨列合并。
找到目标单元格，写上合并方式等于合并单元格数量。比如：。
删除多余的单元格。

二.列表标签

表格是用来显示数据的，列表就是用来布局的。

列表最大的特点：整体，整洁，有序，他的布局更加自由和方便。

2.1无序列表

标签定义。

格式：


<ul>
    <li>列表1li>
    <li>列表2li>
    ...
ul>

无序列表的各个列表之间没有顺序级别之分，是并列的
中只能嵌套

与
123
无序列表会自带有自己的样式层次，但在实际使用时，我们会使用css来设置。

2.2有序列表

有序列表：即为有排列顺序的列表，其各个列表项会按照一定的顺序排列定义。在HTML标签中，

标签定义列表项。


<ol>
    <li>列表项1li>
    <li>列表项2li>
    <li>列表项3li>
    ·····
ol>

中只能嵌套

与
有序列表会带有自己样式属性，但在实际使用时，我们会用css来设置。

2.3自定义列表（重点）

自定义列表的使用场景：

自定义列表常用于对术语或名词进行解释和描述，定义列表的列表项前没有任何项目符号


<dl>
    <dt>名词1<dt>
    <dd>名词1解释1dd>
    <dd>名词1解释2dd>
dl>

注意：

里面只能包含

和

个数没有限制，经常一个

对应多个

三.表单标签

3.1为什么需要表单

需要表单是为了收集数据。

3.2表单的组成

在HTML中，一个完整的表单通常由表单域表单控件(也称为表单元素)和提示信息三个部分。

3.3表单域是一个包含扁担元素的区域

在HTML标签中，

属性	属性值	作用
action	url地址	用于指定接受表单数据的服务器程序url地址
method	get/post	用于设置表单元素的接交方式,其取值get/post
name	名称	用于指定表单的名称,以区分同一个页面中的多个表单域

<form action="demo.php" method="POST" name="name1"> xxx form>

3.4表单控制(表单元素）

在表单元素中可以定义各种各样表单元素，这些表单元素是允许用在表单中输入或者选择的内容控件。

input 输入表单元素

select 下拉表单元素

text area 文本域元素

3.4.1表单元素

在英文单词中，input为输入的意思，而在表单元素中标签用于收集用户信息。在标签中，包含一个type属性，根据不同的type属性值，输入字段拥有很多中形式(可以是文本字段，复选框，掩码后的文本空间，单选按钮，按钮等）

<input tyoe="属性值"/>

标签为单标签。
type属性设置不同的属性值用来指定不同控件类型。

属性值	描述
button	定义可点击按钮（参数情况下用JavaScript启动脚本
checkbox	定义复选框
file	定义输入字段和浏览按钮，供文件上传
hidden	定义影藏的输入字段
image	定义图像形式的提交按钮
password	定义密码字段，该字段中的字符被掩码
radio	定义单选按钮
reset	定义重置按钮，重置按钮会清除表单中的所有数据
submit	定义提交按钮，提交按钮会把表单元素数据发送到服务器
text	定义单行的输入字段，用户可以在其中输入文本，默认宽度为20个字符

上传后台：

<form action="xxx.php" method="get">

例如：密码的输入


<form>
    
    用户名：<input type="text">
    密码： <input tyoe="password">
form>

单选按钮：

性别: 男<input type="radio">

除了type 属性外，标签还有其他很多属性，其常用属性如下：

属性	属性值	描述
name	由用户自定义	定义input元素的名称
value	由用户自定义	规定input元素的值
checked	checked	规定此input元素首次加载时应当被选中
maxlength	正整数	规定输入字段中的字符的最大长度

name和value是每个单元表单元素有的属性值，主要给后台人员使用
name表单元素的名字，要求单选按钮和复选框有相同的name值
checked属性当页面打开的时候就可以默认选中的这个按钮
maxlength 文本框最多输入的字符长度


<input type="submit" value="免费在注册">
<input type="reset" value="重新填写">
<input type="button" value="获取短息验证码">
<input type="file">  文件上传

3.4.2 标签

标签为input元素定义标注(标签）

标签用于绑定一个表单元素当点击标签内的文本时，浏览器就会自动点击聚焦(光标)转到或选择对应的文本时，浏览器就会自动将焦点(光标)转到或选择对应的表单元素上，用来增加用户体验。

语法：


<lable for="sex"> 男 lable>
<input type="radio" name="sex" id="sex"/>

核心:标签的for属性应当与相关属性的id属性相同。

3.4.3 select 下拉表单元素

使用场景：在页面中，如果有多个选项让用户选择，并且想要节约页面空间时，我们可以使用中至少包含一对

在

3.4.4表单元素

使用场景：当用户输入内容较多的情况下，我们就不能使用文本框表单了，此时我们可以使用标签。</p> <p><strong>语法：</strong></p> <pre data-index="14" class="set-code-show" name="code"><code class="language-html hljs language-xml"><ol class="hljs-ln" style="width:100%"><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="1"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-tag"><<span class="hljs-name">textarea</span> <span class="hljs-attr">rows</span>=<span class="hljs-string">"3"</span> <span class="hljs-attr">cols</span>=<span class="hljs-string">"20"</span>></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="2"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> 文本内容</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="3"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-tag"></<span class="hljs-name">textarea</span>></span></div></div></li></ol></code><div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}" onclick="hljs.signin(event)"></div></pre> <ul><li>通过<textarea>标签可以轻松地创建多行文本输入框。</li><li>cols="每行中的字符数" rows="显示的行数"。我们在实现开发中都不会使用，都是用css来改变大小。</li></ul> <p><strong>-</strong></p> <pre data-index="15" class="set-code-show" name="code"><code class="language-html hljs language-xml"><ol class="hljs-ln" style="width:100%"><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="1"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-tag"><<span class="hljs-name">form</span>></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="2"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">今日内容</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="3"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-tag"><<span class="hljs-name">textarea</span>></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="4"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> 文本内容</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="5"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-tag"></<span class="hljs-name">textarea</span>></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="6"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-tag"></<span class="hljs-name">form</span>></span></div></div></li></ol></code><div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}" onclick="hljs.signin(event)"></div></pre> <p></p> </div> </div> </li> <li class="list-group-item ul-li"> <b>相关阅读:</b><br> <nobr> <a href="/Article/Index/1302706">数字人民币如何将支付宝钱包余额转入到微信支付钱包余额？</a> <br /> <a href="/Article/Index/1390726">八大排序代码——总结</a> <br /> <a href="/Article/Index/1402498">快手视频批量下载.py（10月可以用）</a> <br /> <a href="/Article/Index/1342603">二、thymeleaf与javaweb的集成</a> <br /> <a href="/Article/Index/1325803">Gorsonpy的计算器</a> <br /> <a href="/Article/Index/1086884">HandlerAdapter接口类的简介说明</a> <br /> <a href="/Article/Index/1470471">武汉凯迪正大KDHG-220P互感器综合测试仪</a> <br /> <a href="/Article/Index/1458550">【AI视野·今日NLP 自然语言处理论文速览第六十四期】Fri, 27 Oct 2023</a> <br /> <a href="/Article/Index/798281">java--object类</a> <br /> <a href="/Article/Index/880560">vscode 个人实用插件（资源集合）</a> <br /> </nobr> </li> <li class="list-group-item from-a mb-2"> 原文地址：https://blog.csdn.net/weixin_68773927/article/details/127714933 </li> </ul> </div> <div class="col-lg-4 col-sm-12"> <ul class="list-group" style="word-break:break-all;"> <li class="list-group-item ul-li-bg" aria-current="true"> 最新文章 </li> <li class="list-group-item ul-li"> <nobr> <a href="/Article/Index/1484446">攻防演习之三天拿下官网站群</a> <br /> <a href="/Article/Index/1515268">数据安全治理学习——前期安全规划和安全管理体系建设</a> <br /> <a href="/Article/Index/1759065">企业安全 | 企业内一次钓鱼演练准备过程</a> <br /> <a href="/Article/Index/1485036">内网渗透测试 | Kerberos协议及其部分攻击手法</a> <br /> <a href="/Article/Index/1877332">0day的产生 | 不懂代码的"代码审计"</a> <br /> <a href="/Article/Index/1887576">安装scrcpy-client模块av模块异常，环境问题解决方案</a> <br /> <a href="/Article/Index/1887578">leetcode hot100【LeetCode 279. 完全平方数】java实现</a> <br /> <a href="/Article/Index/1887512">OpenWrt下安装Mosquitto</a> <br /> <a href="/Article/Index/1887520">AnatoMask论文汇总</a> <br /> <a href="/Article/Index/1887496">【AI日记】24.11.01 LangChain、openai api和github copilot</a> <br /> </nobr> </li> </ul> <ul class="list-group pt-2" style="word-break:break-all;"> <li class="list-group-item ul-li-bg" aria-current="true"> 热门文章 </li> <li class="list-group-item ul-li"> <nobr> <a href="/Article/Index/888177">十款代码表白小特效一个比一个浪漫赶紧收藏起来吧！！！</a> <br /> <a href="/Article/Index/797680">奉劝各位学弟学妹们，该打造你的技术影响力了！</a> <br /> <a href="/Article/Index/888183">五年了，我在 CSDN 的两个一百万。</a> <br /> <a href="/Article/Index/888179">Java俄罗斯方块，老程序员花了一个周末，连接中学年代！</a> <br /> <a href="/Article/Index/797730">面试官都震惊，你这网络基础可以啊！</a> <br /> <a href="/Article/Index/797725">你真的会用百度吗？我不信 — 那些不为人知的搜索引擎语法</a> <br /> <a href="/Article/Index/797702">心情不好的时候，用 Python 画棵樱花树送给自己吧</a> <br /> <a href="/Article/Index/797709">通宵一晚做出来的一款类似CS的第一人称射击游戏Demo！原来做游戏也不是很难，连憨憨学妹都学会了！</a> <br /> <a href="/Article/Index/797716">13 万字 C 语言从入门到精通保姆级教程2021 年版</a> <br /> <a href="/Article/Index/888192">10行代码集2000张美女图，Python爬虫120例，再上征途</a> <br /> </nobr> </li> </ul> </div> </div> </div>     <nav class="navbar navbar-inverse navbar-fixed-bottom"> <div class="container"> <div class="row"> <div class="col-md-12"> <div class="text-muted center foot-height"> Copyright © 2022 侵权请联系<a href="mailto:2656653265@qq.com">2656653265@qq.com</a> <a href="https://beian.miit.gov.cn/" target="_blank">京ICP备2022015340号-1</a> </div> <div style="width:300px;margin:0 auto; padding:0px 5px;"> <a href="/regex.html">正则表达式工具</a> <a href="/cron.html">cron表达式工具</a> <a href="/pwdcreator.html">密码生成工具</a> </div> <div style="width:300px;margin:0 auto; padding:5px 0;"> <a target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11010502049817" style="display:inline-block;text-decoration:none;height:20px;line-height:20px;"> <img src="" style="float:left;" /><p style="float:left;height:20px;line-height:20px;margin: 0px 0px 0px 5px; color:#939393;">京公网安备 11010502049817号</p></a> </div> </div> </div> </div> </nav>   <script src="/js/plugins/jquery/jquery.js"></script> <script src="/js/bootstrap.min.js"></script>   </body> </html>