前端学习第五课（表格、表单、列表使用）

最新推荐文章于 2024-05-11 14:22:31 发布

HM-hhxx！

最新推荐文章于 2024-05-11 14:22:31 发布

阅读量1.7k

点赞数 1

文章标签：前端 html

本文链接：https://blog.csdn.net/damadashen/article/details/122284796

版权

表格、表单、列表使用

表格：用于展示数据，让数据显示规范；列表：用于布局，让页面布局规范整齐；表单：用于收集用户信息；

一、表格table使用（了解）

1.创建表格

<table>

<tr>

</tr>

<tr>

</tr>

</table>

实现效果：

表格属性：

cellspace:单元格与单元格之间的距离

cellpadding：单元格与单元格边框的距离

width：单元格宽度

height：单元格高度

例：<table width="500" height="300" cellpadding="20" cellspace="0" >

th标签标识表头：使内容加粗显示

<tr>

</tr>

caption表格标题：为表格加一个标题

效果如下：

2.合并单元格

使用colspan合并列属性

例如<td colspan="4">合并4列内容</td>

使用rowspan合并行属性

例如<td rowspan="2">合并行内容1</td>

3.表格总结

标签名	定义	说明
<table></table>	表格标签	就是一个四方的盒子
<tr></tr>	表格行标签	行标签要再table标签内部才有意义
<td></td>	单元格标签	单元格标签是个容器级元素，可以放任何东西
<th></th>	表头单元格标签	它还是一个单元格，但是里面的文字会居中且加粗
<caption></caption>	表格标题标签	表格的标题，跟着表格一起走，和表格居中对齐
clospan 和 rowspan	合并属性	用来合并单元格的

目前table使用较少，但要能读懂代码，table渲染效率低，占用字节较多等缺点，不如直接使用div进行生成。

二、列表使用（重点）

容器里面装载着结构，样式一致的文字或图表的一种形式，叫列表列表最大的特点就是整齐、整洁、有序，跟表格类似，但是他可组合自由度会更高。

1.无序列表

无序列表的各个列表项之间没有顺序级别之分，是并列的。其基本语法格式如下：

<ul>
  <li>列表项1</li>
  <li>列表项2</li>
  <li>列表项3</li>
  ......
</ul>
例如：

<ul>

<li><a href="http://www.news.cn/world/2022-01/01/c_1128225181.htm ">世界最大自贸区正式启航为世界经济发展增添动力</a></li>

<li><a href="https://mp.weixin.qq.com/s/cam_XbpijRxog_TjBdpgZQ" >壮美！2022年第一缕阳光穿过万里长城</a></li>

<li>美国专家：未来几周美恐将刮起“疫情风暴”</li>

<li>中央网信办所属部分在京事业单位2022年度公开招聘公告</li>

<li>2022年春运购票日历来了！1月3日开抢</li>

</ul>

显示效果如下：

2.有序列表

有序列表即为有排列顺序的列表，其各个列表项按照一定的顺序排列定义，有序列表的基本语法格式如下：

<ol>
  <li>列表项1</li>
  <li>列表项2</li>
  <li>列表项3</li>
  ......
</ol>
所有特性基本与ul 一致。 但是实际中比 无序列表 用的少很多。

例如：

<ol>

</ol>

显示效果如下;

3.自定义列表

使用dl、dt、dd进行设置，基本语法如下：

例如：

<dl>

<dd>地理信息系统（Geographic Information System或 Geo－Information system，GIS）有时又称为“地学信息系统”。它是一种特定的十分重要的空间信息系统。它是在计算机硬、软件系统支持下，对整个或部分地球表层（包括大气层）空间中的有关地理分布数据进行采集、储存、管理、运算、分析、显示和描述的技术系统。</dd>

<dd>RS技术即遥感技术（Remote Sensing，简称RS），遥感技术是指从高空或外层空间接收来自地球表层各类地理的电磁波信息，并通过对这些信息进行扫描、摄影、传输和处理，从而对地表各类地物和现象进行远距离控测和识别的现代综合技术。可用于植被资源调查、作物产量估测、病虫害预测等方面。</dd>

</dl>

显示效果如下：

4.列表总结

标签名	定义	说明
<ul></ul>	无序标签	里面只能包含li 没有顺序，我们以后布局中最常用的列表
<ol></ol>	有序标签	里面只能包含li 有顺序，使用情况较少
<dl></dl>	自定义列表	里面有2个兄弟， dt 和 dd

三、表单标签使用

表单目的是为了收集用户信息。在我们网页中，我们也需要跟用户进行交互，收集用户资料，此时也需要表单。一个完整的表单由表单控件、提示信息和表单域三部分构成。

a.在表单控件中，包含了具体的表单功能项，如文本输入框、密码输入框、复选框、提交按钮、重置按钮等。

b.提示信息指一些表单中的说明性文字，用于提示用户进行天蝎和操作。

c.表单域相当于一个容器，用于容纳所有表单控件和提示信息。

fom表单语法格式：

<form action="url地址" method="提交方式" name="表单名称">
各种表单控件
</form>

action属性用于将表单数据提交给对应的服务器

有get、post两种方法

GET	请求指定的页面信息，并返回实体主体。
POST	向指定资源提交数据进行处理请求（例如提交表单或者上传文件）。数据被包含在请求体中。POST请求可能会导致新的资源的建立和/或已有资源的修改。

get提交数据发送给服务器的方法，将数据放置到url地址里，提交的数据是比较小的；

post提交的数据是放到请求的正文里，提交数据更多，更安全，效率比get低；

1.input控件

语法：<input type="属性值" value="你好">

属性	说明	作用
type	表单类型	用来指定不同的控件类型
value	表单值	表单里面默认显示的文本
name	表单名字	页面中的表单很多，name主要作用就是用于区别不同的表单。
checked	默认选中	表示那个单选或者复选按钮一开始就被选中了

常用属性：

required必须设置有值；

readonly设置为只读；

disabled禁用输入，此时提交数据不包含它；

2.label标签

在html中，<label>标签通常和<input>标签一起使用，<label>标签为input元素定义标注（标记）。<label>标签的作用是为鼠标用户改进了可用性，当用户点击<label>标签中的文本时，浏览器就会自动将焦点转到和该标签相关联的控件上；<label>标签在单选按钮和复选按钮上经常被使用，使用该标签后，你点击单选按钮或复选按钮的文本也是可以选中的。

用法：<label for="关联控件的id" form="所属表单id列表">文本内容</label>

关联控件的id一般指的是input元素的id；在html5中还新增了一个属性form，form属性是用来规定所属的一个或多个表单的 id 列表，以空格隔开；当<label>标签不在表单标签<form>中时，就需要使用form属性来指定所属表单；

3.textarea控件（文本域）

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

cols="每行中的字符数" rows="显示的行数" 我们实际开发不用

语法：

文本框和文本域区别

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