web前端开发HTML02(HTML 表格、表单、列表)

Insomeop

已于 2023-08-17 11:38:48 修改

阅读量262

点赞数 2

文章标签：前端 html 笔记 html5

于 2023-07-18 08:51:28 首次发布

本文链接：https://blog.csdn.net/qq_68510847/article/details/131779073

版权

文章目录

1、表格

1.1 表格结构

在使用表格进行布局时，可以将表格划分为标题、头部、主体和脚注。

<caption>:用来定义表格标题
<thead>:用来定义表格的头部
<tbody>:用来定义表格的主体
<tfoot>:用于定义表格从脚注

定义行和列的标签：

<tr>：用于定义表格的一行
<td>：用于定义表格的单元格
<th>：用于定义表头单元格(内容会自动加粗并居中)

示例：

<table align="center">
        <caption>
            <h2>商品信息表</h2>
            <p>制表时间：2000/5/6</p>
        </caption>
        <tr>
            <th>ID</th>
            <th>品类</th>
            <th>数量</th>
            <th>金额</th>
        </tr>
        <tr>
            <td>1</td>
            <td>衣服</td>
            <td>冬装</td>
            <td>1</td>
            <td>100</td>
        </tr>
        <tr>
            <td>2</td>
            <td>衣服</td>
            <td>夏装</td>
            <td>1</td>
            <td>100</td>
        </tr>
        <tr>
            <td>3</td>
            <td>饮料</td>
            <td>可口可乐</td>
            <td>1</td>
            <td>100</td>
        </tr>
        <tr>
            <td>4</td>
            <td>饮料</td>
            <td>百事可乐</td>
            <td>1</td>
            <td>100</td>
        </tr>
</table>

效果：

在这里插入图片描述

1.2 表格属性

属性名	含义	默认值
border	设置表格边框	0，无边框
cellspacing	设置单元格与单元格边框之间的空白间距	2px
cellpadding	设置单元格内容与单元格边框之间的空白间距	1px
width	设置表格的宽度
height	设置表格的高度
align	设置表格在网页中的水平对齐方式

对上述实例进行修改：

<table align="center" border="1px" cellspacing="0" width="500px" height="200px">
        <caption>
            <h2>商品信息表</h2>
            <p>制表时间：2000/5/6</p>
        </caption>
        <tr align="center">
            <th>ID</th>
            <th>品类</th>
            <th>品名</th>
            <th>数量</th>
            <th>金额</th>
        </tr>
        <tr align="center">
            <td>1</td>
            <td>衣服</td>
            <td>冬装</td>
            <td>1</td>
            <td>100</td>
        </tr>
        <tr align="center">
            <td>2</td>
            <td>衣服</td>
            <td>夏装</td>
            <td>1</td>
            <td>100</td>
        </tr>
        <tr align="center">
            <td>3</td>
            <td>饮料</td>
            <td>可口可乐</td>
            <td>1</td>
            <td>100</td>
        </tr>
        <tr align="center">
            <td>4</td>
            <td>饮料</td>
            <td>百事可乐</td>
            <td>1</td>
            <td>100</td>
        </tr>
    </table>

效果：

在这里插入图片描述

1.3 合并单元格

跨行合并：rowspan；

跨列合并：colspan；

修改上述代码：

<table align="center" border="1px" cellspacing="0" width="500px" height="200px">
        <caption>
            <h2>商品信息表</h2>
            <p>制表时间：2000/5/6</p>
        </caption>
        <tr align="center">
            <th>ID</th>
            <th>品类</th>
            <th>品名</th>
            <th>数量</th>
            <th>金额</th>
        </tr>
        <tr align="center">
            <td>1</td>
            <td rowspan="2">衣服</td>
            <td>冬装</td>
            <td>1</td>
            <td>100</td>
        </tr>
        <tr align="center">
            <td>2</td>
            <td>夏装</td>
            <td>1</td>
            <td>100</td>
        </tr>
        <tr align="center">
            <td colspan="5">跨列，哈哈</td>
        </tr>
        <tr align="center">
            <td>3</td>
            <td rowspan="2">饮料</td>
            <td>可口可乐</td>
            <td>1</td>
            <td>100</td>
        </tr>
        <tr align="center">
            <td>4</td>
            <td>百事可乐</td>
            <td>1</td>
            <td>100</td>
        </tr>
    </table>

效果：

在这里插入图片描述

2、表单

2.1 表单的用途

HTML表单用于收集用户输入的信息。

HTML表单表示文档中的一个区域，此区域包含交互控件，将用户收集到的信息发送到web服务器。

一个表单有三个基础组成部分：

表单标签：这包含了处理表单数据所用的URL以及数据提交到服务器的方式。
表单域(表单空间)：包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等。
表单按钮：包括提交按钮、复位(重置)按钮和一般按钮；用于将数据传送到服务器上或取消输入，还可以用表单按钮来控制其他定义了处理脚本的处理工作。

2.2 表单基本语法

用<form>标签来创建表单：

<form action="表单提交地址" method="提交方法">
        ...文本框等表单元素
</form>

form表单属性：

action 用于指定提交表单数据的请求URL。
method 表单数据发送至服务器的方法，常用的又两种get(默认)/post。

get和post的区别：

get提交：用户输入的信息，显示在地址栏中，通过地址栏传输，不安全，请求内容长度有限制，请求速度快。
post请求：用户输入的信息不会显示在地址栏中，安全，请求内容长度无限制(重要数据)，请求速度慢。

注：实际开发中，页面布局一般和table一起使用。

2.3 表单控件的属性

<input>定义输入控件。

根据不同的type属性值，输入字段拥有很多种形式。输入字段可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等等。

控件名称	type属性值	描述
文本框	text(默认)	默认。定义一个单行的文本字段(默认宽度为20个字符)。
密码框	password	定义密码字段
单选按钮	radio	定义单选按钮。
复选框	checkbox	定义复选按钮。
提交按钮	submit	定义提交按钮
重置按钮	reset	定义重置按钮(重置所有的表单值为默认值)
图片提交按钮	image	定义图像作为提交按钮
普通按钮	button	定义可点击的按钮(通常与js一起使用来启动脚本)
隐藏文本框	hidden	定义隐藏输入字段。前后台交互非常有用
文件上传框	file	定义文件选择字段和 “浏览…” 按钮，供文件上传。可以通过accept属性规范选取文件的类型,比如图片/视频,如果不设置则什么类型都可以。 accept属性的值: image/* 接受所有的图像文件。 image/png 表示只接受图片文件的png文件 audio/* 接受所有的声音文件。 video/* 接受所有的视频文件。 multiple属性可以用来设置一次允许选择多个文件 multiple=“multiple”

2.4 表单元素的属性

属性	值	描述
type	在4.3节	type属性规定要显示的`<input>`元素的类型。
value	text	指定元素 value 的值。
src	URL	src 属性规定显示为提交按钮的图像的 URL。 (只针对 type=“image”)
size	number	size 属性规定以字符数计的`<input>` 元素的可见宽度。
readonly	readonly	readonly 属性规定输入字段是只读的。
name	text	name 属性规定`<input>`元素的名称。
maxlength	number	属性规定`<input>`元素中允许的最大字符数。
disabled	disabled	disabled 属性规定应该禁用的`<input>`元素。
checked	checked	checked 属性规定在页面加载时应该被预先选定的`<input>`元素。 (只针对 type=“checkbox” 或者 type=“radio”)
accept	audio/video/image/*MIME_type	规定通过文件上传来提交的文件的类型。 (只针对 type=“file”)
selected	selected	下拉框的默认选中

⭐`<label>`标签

label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。

方式一： for属性,让标签和指点的input元素建立关联,多数使用在单选或复选给单选或复选后面的文字加入label标签,for属性值是input的id值
```
<input type="radio" name="gender" id="man" checked>
<label for="man">女</label>
```
方式二：将input元素包含在lable标签中如果将input放置在label标签之间,那么for属性就可以不用

<label><input type="radio" name="gender" checked>女</label>

注：和单选、复选结合使用，提高用户体验。

看不懂介绍的话，最好是自己上手试试，在对比下原来的效果

2.5 其他表单控件

1、<textarea>定义文本域 (一个多行的输入控件)

文本区域中可容纳无限数量的文本，其中的文本的默认字体是等宽字体（通常是 Courier）。可以通过 cols 和 rows 属性来规定 textarea 的尺寸大小，不过更好的办法是使用 CSS 的 height 和 width 属性。

缩放设置：

禁止缩放：resize: none;
水平缩放：resize: horizontal;
垂直缩放：resize: vertical;
水平垂直缩放：resize: both;

2、<select>、<option>

<select>定义了下拉选项列表

<option>定义下拉列表中的选项（一个条目）。

size属性用来定义列表中显示的列表项,在select标签设置

multiple属性用来定义是否可以多选

3、<optgroup>: 定义选项组

对列表项进行分组并命名,必须使用该标签的label属性才可以命名;

1、把对应的option标签放在optgroup里面

2、给optgroup添加label属性,用以列表组命名

4、<button>:定义一个点击按钮

在<button>元素内部，您可以放置内容，比如文本或图像。这是该元素与使用<input>元素创建的按钮之间的不同之处。

提示：请始终为<button>元素规定 type 属性。不同的浏览器对<button>元素的 type 属性使用不同的默认值。

type属性:可以设置三个值 submit/reset/button与input元素设置的按钮含义一致

3、列表

3.1 无序列表

无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。

定义无序列表，使用ul表示。

定义列表项，使用li表示，<li></li>表示一对li，表示一个列表项。

给列表的小图标更换样式，使用属性type值：disc(默认值)、circle、square。

3.2 有序列表

有序列表也是一列项目，列表项目使用数字进行标记。有序列表始于<ol>。每个列表项始于<li>标签。

定义有序列表，使用ol表示。

给列表的小图标更换样式，使用属性type值：1、a、A、i、I。

有序列表的start属性：定义列表的开始序号。

有序列表的value属性：定义单个列表项的序号。注意：设置之后,该列表项之后的值都随之变化。

3.3 自定义列表

自定义列表不仅仅是一列项目，而是项目及其注释的组合。

自定义列表以<dl>开始。每个自定义列表项的定义以<dt>开始。

Insomeop

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
2
评论
web前端开发HTML02(HTML 表格、表单、列表)

HTML 笔记，表格、表单列表，lable标签的用法。
复制链接

扫一扫

web前端开发HTML02(HTML 表格、表单、列表)

文章目录

1、表格

1.1 表格结构

1.2 表格属性

1.3 合并单元格

2、表单

2.1 表单的用途

2.2 表单基本语法

2.3 表单控件的属性

2.4 表单元素的属性

⭐<label>标签

2.5 其他表单控件

3、列表

3.1 无序列表

3.2 有序列表

3.3 自定义列表

“相关推荐”对你有帮助么？

⭐`<label>`标签