HTML5+CSS——Day3_在使用表格进行布局时,用于定义表格的头部时-CSDN博客

本文链接：https://blog.csdn.net/weixin_51273795/article/details/131783962

HTML图像标签

图片标签

在 HTML 中，图像由标签定义。是空标签，意思是说，它只包含属性，并且没有闭合标签。

要在页面上显示图像，你需要使用源属性（src）。src 指 “source”。源属性的值是图像的 URL 地址。

<img src="url" alt="some_text">

img标签属性：

src属性：用来指定图片地址的来源，可以是本地图片，也可以是网络图片来源；
width和height属性，用来设置图片宽和高，单位是px或% （css替代使用）；
alt属性：用来为图像定义一串预备的可替换的文本，在浏览器无法载入图像时，替换文本属性告诉读者她们失去的信息。此时，浏览器将显示这个替代性的文本而不是图像。为页面上的图像都加上替换文本属性是个好习惯，这样有助于更好的显示信息，并且对于那些使用纯文本浏览器的人来说是非常有用的。
title属性：当鼠标移入图片的时候显示的文字内容；

<img src="images/drink.jpg" alt="精品热卖：高清晰，30寸等离子电视" title="精品热卖：高清晰，30寸等离子电视" />

HTML表格标签

现在已经不推荐使用表格来处理布局，但表格仍然用于 HTML 布局，常用来处理和显示表格式数据。

表格结构

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

caption：用于定义表格标题。

thead：用于定义表格的头部。一般包含列名、行号等表头信息。

tbody：用于定义表格的主体。一般包含数据内容。

tfoot：用于定义表格的脚注。

定义行和列的标签：

tr：用于定义表格的一行。

td：用于定义表格的单元格。

th：用于定义表头单元格

表格属性

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

合并单元格

跨行合并：rowspan；跨列合并：colspan。

合并的顺序：从上到下，自左到右。

表格示例代码

<table width="800" height="180" border="1" bordercolor="black" style="border-collapse: collapse;"align="center">
<caption>
    <h2>商品信息表</h2>
    <p>制表：2023/07/13</p>
</caption>
<thead  bgcolor="#92cddb">
    <tr>
        <th>ID</th>
        <th>品类</th>
        <th>品名</th>
        <th>数量</th>
        <th>单价</th>
        <th>金额</th>
    </tr>
</thead>
<tbody align="center">
    <tr>
     <td>1</td>
     <td rowspan="2">衣服</td>
     <td>冬装</td>
     <td>1</td>
     <td>100</td>
     <td>100</td>
    </tr>
    <tr>
        <td>2</td>
        
        <td>夏装</td>
        <td>1</td>
        <td>100</td>
        <td>100</td>
    </tr>
    <tr>
        <td>3</td>
        <td rowspan="2">饮料</td>
        <td>可口可乐</td>
        <td>1</td>
        <td>100</td>
        <td>100</td>
    </tr>
    <tr>
        <td>4</td>
     
        <td>百事可乐</td>
        <td>1</td>
        <td>100</td>
        <td>100</td>
    </tr>
    <tr bgcolor="#fdeadc">
        <td colspan="6">以下为备用物品</td>
    </tr>
    <tr>
        <td>5</td>
        <td rowspan="2">数码</td>
        <td>相机</td>
        <td>1</td>
        <td>100</td>
        <td>100</td>
    </tr>
    <tr>
        <td>6</td>
        <td>镜头</td>
        <td>1</td>
        <td>100</td>
        <td>100</td>
    </tr>
    <tr>
        <td colspan="4" rowspan="2">合集</td>
        <td bgcolor="#90cbdb">平均单价</td>
        <td bgcolor="#f8bf8a">金额合计</td>
    </tr>
    <tr>
        <td>100</td>
        <td>600</td>
    </tr>
</tbody>
</table>

效果如下：

在这里插入图片描述

HTML基础表单元素

表单的用途

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

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

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

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

常见的表单元素

单行文本框	text
单选按钮	radio
复选框	checkbox
提交按钮	submit
密码框	password
下拉列表	select
重置按钮	reset
文本框	textarea

表单的基本语法

表单是一个包含表单元素的区域。

表单元素是允许用户在表单中输入内容，比如：文本域（textarea）、下拉列表（select）、单选框（radio-buttons）、复选框（checkbox）等等。

使用标签来创建表单：

<form action="表单提交地址" method="提交方法">
</form>

form表单属性

在HTML中，form表单可以使用多个属性来指定表单的行为和特性。以下是几个常见的form表单属性：

action属性：定义了当提交表单时，表单数据要被发送到的URL地址。它指定了接收表单数据的服务器端处理程序的URL。
method属性：指定了表单数据的发送方法。常见的有GET和POST方法。GET方法会将表单数据附加到URL的末尾，而POST方法则将数据作为HTTP请求的一部分发送。
enctype属性：指定了当表单数据被发送到服务器时，编码类型的方式。常见的有"application/x-www-form-urlencoded"和"multipart/form-data"。前者是默认值，适用于大多数情况，而后者适用于上传文件的情况。
target属性：指定了当提交表单时，表单数据要在哪个窗口或者框架中显示结果。常见的取值包括"_blank"（在新窗口中打开）、“_self”（在当前窗口中打开）等。
autocomplete属性：指定了浏览器是否启用表单自动填充功能。可以设置为"on"或者"off"。
novalidate属性：指定了浏览器是否对表单数据进行验证。当设置为"novalidate"时，浏览器将不会执行内置的表单验证规则。

这些是一些常见的form表单属性，根据具体的需求，还可以使用其他属性来实现更多的功能。

get和post的区别：

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

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

表单执行原理

在HTML5中，表单的执行原理可以简单地描述为以下几个步骤：

组织表单元素：首先，HTML表单需要包含一些表单元素，如输入字段、复选框、下拉列表等。这些表单元素被放置在<form>标签内。
用户输入数据：用户通过键盘输入、鼠标点击等方式在表单元素中输入数据。
表单提交：当用户点击提交按钮（通常是<input type="submit">标签或者使用JavaScript触发提交）时，浏览器开始处理表单提交。
验证数据：浏览器会根据表单元素的设置和属性对用户输入的数据进行验证。例如，可以使用required属性来指定某个输入字段是必填的，或者使用正则表达式来验证输入的格式。
提交数据：如果数据验证通过，表单数据会根据action属性指定的URL地址（通常是服务器端的处理程序）进行提交。可以使用method属性指定提交方法，常见的是使用POST方法将表单数据作为HTTP请求的一部分发送到服务器。
处理数据：服务器接收到表单数据后，会根据服务器端的逻辑进行进一步处理，比如保存到数据库、发送电子邮件等。
响应结果：服务器处理完成后，可以返回一个响应结果给浏览器，可以是一个新的网页、一条成功消息或其他信息。

总体来说，HTML5表单的执行原理是通过收集用户输入的数据，进行验证，然后将数据发送到服务器进行处理，并根据处理结果返回响应给用户。

表单控件元素

表单输入控件

定义输入控件

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

控件、单选按钮、按钮等等

控件名称	type属性值	描述
文本框	text（默认值）	默认。定义一个单行的文本字段（默认宽度为20个字符）。
密码框	password	定义密码字段
单选按钮	radio	定义单选按钮。（性别等）
复选框	checkbox	定义复选框（爱好等）
提交按钮	submit	定义提交按钮
重置按钮	reset	定义重置按钮（重置所有表单值为默认值）
图片提交按钮	image	定义图像作为提交按钮
普通按钮	button	定义可点击的按钮（通常与JavaScript一起使用来启动脚本）
隐藏文本框	hidden	定义隐藏输入字段。前后台交互非常有用
文件上传框	file	定义文件选择字段和 “浏览…” 按钮，供文件上传。

其他表单控件

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

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

缩放设置：

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

2、label :定义了 input 元素的标签，一般为输入标题

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

方式一：

for属性,让标签和指点的input元素建立关联,多数使用在单选或复选
给单选或复选后面的文字加入label标签,for属性值是input的id值

方式二：

将input元素包含在lable标签中
如果将input放置在label标签之间,那么for属性就可以不用

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

3、fieldset、legend(了解)

fieldset 标签可以将表单内的相关元素分组。

fieldset 标签会在相关表单元素周围绘制边框。

legend 元素为 fieldset 元素定义标题

4、 select、option

select>定义了下拉选项列表
option 定义下拉列表中的选项（一个条目）。
size属性用来定义列表中显示的列表项,在select标签设置
multiple属性用来定义是否可以多选

5、optgroup定义选项组

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

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

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

6、 :定义一个点击按钮

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

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

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

表单元素的属性

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

HTML列表标签

无序列表

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

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

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

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

有序列表

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

li 标签:

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

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

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

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

自定义列表

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

自定义列表以 dl 标签开始。每个自定义列表项以 dt 开始。每个自定义列表项的定义以 dd 开始。

嵌套列表

有序列表和无序列表可以相互嵌套使用.

<h4>嵌套列表：</h4>
<ul>
	<li>Coffee</li>
	<li>Tea
		<ul>
			<li>Black tea</li>
			<li>Green tea</li>
		</ul>
	</li>
	<li>Milk</li>
</ul>

HTML内嵌框架

通过使用内嵌框架，你可以在同一个浏览器窗口中显示不止一个页面。

iframe语法：

<iframe src="URL"></iframe>

该URL指向不同的网页