HTML—表格、列表、表单

时间:2024-04-07 10:38:32

【前言】

今天来总结一下有关html的三个表的相关知识。

【内容】

1.表格、列表、表单分别是用来做什么的?

如图:

HTML—表格、列表、表单

2.表格

定义:用来显示、展示表格式数据,可以让数据显示的非常的规整,可读性非常好。

语法如下:

<table>

        <tr>

                <td>单元格内的文字</td>

                ......

        </tr>

</table>

说明:

共包含三对HTML标签,分别是table、tr、td,是创建表格的基本标签,缺一不可。

table:用于定义一个表格标签。

tr:用于定义表格中的行,必须嵌套在table标签中。

td:用于定义表格中的单元格,必须嵌套在<tr></tr>标签中。

(1)表格属性

HTML—表格、列表、表单

(2)表头单元格标签th

作用:一般表头单元格位于表格的第一行或第一列,并且文本加粗居中。

语法:只需要表头标签<th></th>替代相应的单元格标签<td></td>即可。

th与td:都是一个单元格,不同的是,th会让自己里面的文字居中并且加粗。

(3)表头标题caption

定义表格标题,通常这个标题会被居中并且显示于表格之上。

语法如下:

<table>

        <caption>我是表格标题</caption>

</table>

说明:

caption标签必须紧随table标签之后,并且这个标签只存在表格里面才有意义。

(4)合并单元格

两种形式:

跨行合并与跨列合并

跨行合并:rowspan="合并单元格的人数"

跨列合并:colspan="合并单元格的人数"

合并单元格顺序:

按照先上后下、先左后右的顺序。

合并单元格三步曲:

1)先确定是跨行还是跨列合并。

2)根据先上后下、先左后右的原则找到目标单元格,然后写上合并方式和要合并的单元格数量。

例如:<td colspan="3"></td>

3)删除多余的单元格。

(5)表格划分结构

对于比较复杂的表格,表格的结构也就相对复杂了,所以又将表格分割成三个部分:题头、正文和脚注。分别用thead、tbody、tfoot来标注,这样更好的划分了表格的结构。

说明:

<thead></thead>:用于定义表格的头部,用来放标题之类的东西,并且<thead>内部必须拥有<tr>标签。

<tbody></tbody>:用于定义表格的主体,放数据本体。

<tfoot></tfoot>:放表格的脚注之类。

这3对标签都要放在<table></table>标签中。

(6)表格小结

标签名

定义

说明

<table></table>

表格标签

四方的盒子

<tr></tr>

表格行标签

行标签要在table标签内才有意义

<td></td>

单元格标签

容器级元素,可以放任何东西

<th></th>

表头单元格标签

一个单元格,大病里面的文字会居中且加粗

<caption></caption>

表格标题标签

表格的标题,跟着表格一起走,和表格居中对齐

clospan与rowspan

合并属性

用来合并单元格的

说明:

表格中没有列元素,列的个数取决于行的单元格个数。

3.列表

容器里面装载着结构,样式一致的文字或图表的一种形式,叫列表。

作用:列表是用来布局的,因为非常整齐和*。

特点:列表最大的特点就是整齐、整洁、有序,和表格类似,但列表可组合*度更高。

(1)列表分类

无序列表、有序列表、自定义列表

(2)无序列表

各个列表项之间没有顺序级别之分,是并列的。语法如下:

<ul>

        <li>列表项1</li>

        <li>列表项2</li>

        ......

</ul>

说明:

<ul></ul>中只能嵌套<li></li>,直接在<ul></ul>标签中输入其他标签或者文字的做法是不被允许的。

<li></li>之间相当于一个容器,可以容纳所有元素。

(3)有序列表

有排列顺序的列表,其各个列表项按照一定的顺序排列定义。语法如下:

<ol>

        <li>列表项1</li>

        <li>列表项2</li>

        ......

</ol>

(4)自定义列表

常用于对术语或名词进行解释和描述,定义列表的列表项前没有任何项目符号。语法如下:

<dl>

        <dt>名词1</dt>

        <dd>名词1解释1</dd>

        <dd>名词1解释2</dd>

        ......

</dl>

(5)列表小结

标签名

定义

说明

<ul></ul>

无序标签

里面只能包含li,没有顺序,布局中最常用的列表

<ol></ol>

有序标签

里面只能包含li,有顺序,使用情况较少

<dl></dl>

自定义列表

里面有2个兄弟。dt和dd

4.表单

目的:为了收集用户信息。

在HTML中,一个完整的表单通常由表单控件(表单元素)、提示信息和表单域3个部分构成。

(1)表单标签input(输入)

语法如下:

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

例如:

<body>

        用户名:<input type="text" />

</body>

说明:

<input />标签是单标签

type属性设置不同的属性值来指定不同的控件类型

除了type属性,还有一些其它的属性:

HTML—表格、列表、表单

1)type属性

这个属性通过改变值,可以决定你属于哪种input表单。

例如:type="text" 就表示文本框可以做用户名、昵称等。

例如:type="password" 就表示密码框,用户输入的内容是不可见的。

2)name属性

表单的名字,后台可以通过这个name属性找到这个表单。页面中表单很多,name主要左右就是用于区别不同的表单。

例如1:

用户名:<input type="text" name="username" />

例如2:(如果type为radio类型的)

<input type="radio" name="sex" />男

<input type="radio" name="sex" />女

说明:

radio为一组时,必须给他们命名相同的名字name,这样可以多个选其中的一个。

3)value属性

默认的文本值。有些表单向刚打开页面就默认显示几个文字,就可以通过这个value来设置。

比如:

用户名:<input type="text" name="username" value="请输入用户名" />

4)checked属性

默认选中状态,经常用于单选按钮和复选按钮。

例如:(表示默认选中了男这个单选按钮)

<input type="radio" name="sex" checked="checked" />男

<input type="radio" name="sex" />女

(2)label标签

目标:主要是为了提高用户体验,为用户提高最优秀的服务。

定义:label标签为input元素定义标注。

作用:用于绑定一个表单元素,当点击label标签的时候,被绑定的表单元素就会获得输入焦点。

如何绑定元素?

(1)用label标签直接包括input表单。

例如:

<label>用户名:<input type="text" name="username" value="请输入用户名"></label>

(2)用for属性规定label与哪个表单元素绑定。

例如:

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

<input type="radio" name="sex" id="sex">

小结:

当我们鼠标点击label标签里面的文字时,光标就会定位到指定的表单里面。

(3)textarea文本域

作用:通过textarea控件可以轻松地创建多行文本输入框。

语法如下:

<textarea cols="每行中的字符数" rows="显示的行数">

        文本内容

</textarea>

文本框和文本域的区别:

HTML—表格、列表、表单

(4)select下拉列表

目的:如果有多个选项让用户选择,为了节省空间,我们可以使用select控件定义下拉列表。

语法如下:

<select>

        <option>选项1</option>

        <option>选项2</option>

        <option>选项3</option>

        ……

</select>

说明:

<select>中至少包含一对option。

(5)form表单域

目的:在html中,form标签被用于定义表单域,以实现用户信息的收集和传递,form中所有的内容都会被提交给服务器。

语法如下:

<form action="url地址" method="提交方式" name="表单名称">

        各种表单控件

</form>

常用属性:

属性

属性值

作用

action

url地址

用于指定接收并处理表单数据的服务器程序的url地址

method

get/post

用于设置表单数据的提交方式,其取值为get或post

name

名称

用于指定表单的名称,以区分同一个页面中的多个表单

【感受】

HTML相关知识就先总结到这里,总结的再多不用也是白费,只有用的多了,熟悉了,才能真正掌握html语言,才能在项目中灵活运用。