HTMl总结(4)_heml action-优快云博客

本文链接：https://blog.youkuaiyun.com/WildKingxue/article/details/119678421

本文介绍了HTML的基础元素，包括<div>和<span>的区别，其中<div>作为块级元素常用于布局，而<span>作为内联元素用于文本样式设置。接着讲解了HTML字符实体的使用，用于替换和表示特殊字符。然后详细阐述了HTML表单的构成，如<form>、<input>元素的属性及其在数据提交中的作用，以及不同类型的表单元素。最后对比了表格布局和<div>布局，并指出CSS在布局中的优势。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一.HTML<div>和<span>

HTML 可以通过 <div> 和 <span>将元素组合起来。

大多数 HTML 元素被定义为块级元素或内联元素。

1.HTML<div>元素

HTML <div> 元素是块级元素。

它可用于组合其他 HTML 元素。可以包含其他的html元素在当前div中显示---容器元素。

div元素前后会自动换行。

div是在当前网页中的一块空白区域，与css一起使用，可以用来制作网页的布局，代替table的页面布局。

div元素的两种用途：

(1)<div> 元素可用于对大的内容块设置样式属性

(2)<div> 元素的另一个常见的用途是文档布局。

例如：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>HTML div元素</title>
	</head>
	<body>
		<div style="width: 200px; height: 300px; background-color: aqua;color: crimson;">
			<p>div元素的运用</p>
			<h4>div元素</h4>
			<a href="../20210812/4-4.html">div</a>
			<br>
			<img src="../20210810/imgs/2.jpg" width="100px" height="180px">
		</div>
	</body>
</html>

2.HTML<span>元素

HTML <span> 元素是内联元素.

span没有具体的含义，可以用来充当文本的容器。

当与 CSS 一同使用时，<span> 元素可用于为部分文本设置样式属性。

例如：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>HTML span元素</title>
	</head>
	<body>
		<h2>span没有具体的含义，可以用来充当文本的<span style="color:red;background-color: #00FFFF;">容器</span></h2>
	</body>
</html>

区别：

HTML 区块元素

块级元素在浏览器显示时，通常会以新行来开始（和结束）。

实例: <h1>, <p>, <ul>, <table>

HTML 内联元素[行内元素]

内联元素在显示时通常不会以新行开始。

实例: <b>, <td>, <a>, <img>

二.HTML字符实体

HTML 中的预留字符必须被替换为字符实体。一些在键盘上找不到的字符也可以使用字符实体来替换。

在编写HTML页面时，需要用到"<"、">"、"空格"等符号，直接输入这些符号时，会错误的把它们与标记混在一起，非常不利于编码。那么就需要把这些字符进行转义，以另一种方式抒写，以相同的形式展现。

格式：

"&"开头，";"结尾，以语义的形式描述字符。

"&#"开头，";"结尾，以编号的形式描述字符。

常见的有：

例如：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>字符的特殊符号</title>
	</head>
	<body>
		<h2>实体字符--表示特殊符号</h2>
		用&amp;lt;;来表示&lt;<br>
		用&amp;gt;来表示&gt;<br>
		用&amp;amp;来表示&amp;<br>
		用&amp;quot;来表示&quot;<br>
		用&amp;apos;来表示&apos;<br>
		用&amp;cent;来表示&cent;<br>
		用&amp;pound;来表示&pound;<br>
		用&amp;yen;来表示&yen;<br>
		用&amp;euro;来表示&euro;<br>
		用&amp;sect;来表示&sect;<br>
		用&amp;copy;来表示&copy;<br>
		用&amp;reg;来表示&reg;<br>
		用&amp;trade;来表示&trade;<br>
		用&amp;times;来表示&times;<br>
		用&amp;divide;来表示&divide;<br>
	</body>
</html>

等等......

三.HTML表单

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

表单元素是允许用户在表单中输入内容。

表单使用表单标签 <form> 来设置。

1.<form>元素的用法

HTML表单用于收集用户输出---<form>元素定义HTML表单。

<form action="" method="post">
	<input type="submit" value=""/>
</form>

HTML表单包含表单元素。

表单元素指的是不同类型的input元素、复选框单选按钮、提交按钮、日期框......

2.<input>元素的用法

<input>元素是最重要的表单元素。

<input>元素有很多中形态，根据不同的type属性。

常用属性

action属性---设置后端处理程序的访问地址

action属性定义在提交表单时执行的动作。向服务器提交表单的通常做法是使用提交按钮。

表单会被提交到wed服务器脚本来处理被提交的表单：<form action="http://www.baidu.com/" >

如果省略action属性，则action会被设置为当前页面。

method属性--设置表单的提交方式【get[默认]/post】

或者：

get方式---将采集的信息数据跟随在后端处理程序的访问地址之后<有数据量限制255个字符>

get最适合少量数据的提交，浏览器会设定容量限制。

get的安全性相对于pos来说有点缺陷，因为在使用get时，表单数据在页面地址栏中是可见的。

post方式--将采集的信息数据封装到网络协议中发送给后端处理程序<没有数据量限制>

post的安全性更好，因为在网页地址栏中被提交的数据是不可见的。

enctype属性--规定在将表单数据发送到后台处理程序之前如何对其进行编码.

application/x-www-form-urlencoded---默认。在发送前对所有字符进行编码（将空格转换为 "+" 符号，特殊字符转换为 ASCII HEX 值）。

multipart/form-data---不对字符编码。当使用有文件上传控件的表单时，该值是必需的

text/plain---将空格转换为 "+" 符号，但不编码特殊字符。

如果使用表单实现文件上传，那么method属性一定post，enctype属性值一定是multipart/form-data

Name属性--元素名称

如果要正确地被提交，每个输入字段必须设置一个 name 属性。

name 属性用于对提交到服务器后的表单数据进行标识，或者在客户端通过 JavaScript 引用表单数据。

常见的表单元素：

多选框

有多个复选框时,要求name属性值要相同.

“看书”给用户看的，value值提交到后台的数据值。

checked="checked"设置默认被选中

单选框

有多个单选按钮时，为了保证每次只能选一个，要求name属性值要相同。

“男”给用户看的，value表提交到后台的数据值。

checked="checked"设置默认被选中。

多行文本输入

cols--列数设置宽度,rows--行数设置高度

输入超过大小空间之后自带滚动条

按钮

value表示的是按钮上显示的文本值

提交

value表示的是按钮上显示的文本值

提交表单输入数据给后台处理程序

复原

value表示的是按钮上显示的文本值

恢复表单的输入到初始状态

隐藏域

提交给后台处理程序的数据值

邮箱和网址

提交是会被进行校验

还有其他几个元素：

结合上述做个练习：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>表格表单</title>
	</head>
	<body>
		<form action="../20210811/10-2.html" method="get">
			<table border="1" cellspacing="0" cellpadding="2px">
				<tr>
					<td>名称</td>
					<td>表现格式</td>
				</tr>
				<tr>
					<td>用户名</td>
					<td><input type="text" name="yonghuming" value="默认值" /></td>
				</tr>
				<tr>
					<td>密码</td>
					<td><input type="password" name="mima" value="123456" /></td>
				</tr>
				<tr>
					<td>性别</td>
					<td>
						<input type="radio" name="xingbie" value="nan" checked="checked" />男
						<input type="radio" name="xingbie" value="nv" />女
					</td>
				</tr>
				<tr>
					<td>爱好</td>
					<td>
						<input type="checkbox" name="aihao" value="wudao" />舞蹈
						<input type="checkbox" name="aihao" value="dianjing" />电竞
						<input type="checkbox" name="aihao" value="biancheng" />编程
					</td>
				</tr>
				<tr>
					<td>日期</td>
					<td>
						<input type="date" name="riqi" />
					</td>
				</tr>
				<tr>
					<td>文件</td>
					<td>
						<input type="file" name="wenjian" />
					</td>
				</tr>
				<tr>
					<td>地区</td>
					<td>
						陕西省
						<select name="diqu">
							<option value="xian">
								西安
								<!--<select name="xian">
								<option value="ytq">雁塔区</option>
								<option value="bqq">灞桥区</option>
								<option value="ytq">雁塔区</option>
							</select>-->
							</option>
							<option value="weinan">渭南</option>
							<option value="baoji">宝鸡</option>
							<option value="xianyang">咸阳</option>
							<option value="hanzhong">汉中</option>
						</select>
					</td>
				</tr>
				<tr>
					<td>yanse</td>
					<td>
						<input type="color" name="yanse" />
					</td>
				</tr>
				<tr>
					<td>邮件</td>
					<td>
						<input type="email" name="youjian" />
					</td>
				</tr>
				<tr>
					<td>电话</td>
					<td>
						<input type="tel" name="dianhua" />
					</td>
				</tr>
				<tr>
					<td>网址</td>
					<td>
						<input type="url" name="wangzhi" />
					</td>
				</tr>

				<tr>
					<td>自我总结</td>
					<td>
						<textarea rows="5" cols="20"></textarea>
					</td>
				</tr>
				<tr>
					<td colspan="2" align="center">
						<input type="submit" name="tijiao" value="提交" />
						<input type="reset" name="chongzhi" value="重置" />
					</td>
				</tr>
			</table>
		</form>
	</body>
</html>

四.HTML布局

1.使用表格布局

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>表格布局</title>
	</head>
	<body>
		<table border="1" cellspacing="0" cellpadding="1px"width="400px" align="center">
			<tr style="background-color: #FF0000;">
				<td colspan="2" height="50px"><h2 style="font-size: 20px;">主要的网页标题</h2></td>
			</tr>
			<tr style="vertical-align:top; height: 200px;">
				<td style="background-color: #9932CC; " >
					<b>菜单</b><br>
					HTML<br>
					CSS<br>
					JavaScript
				</td>
				<td style="background-color: aqua;">内容在这里</td>
			</tr>
			<tr style="background-color: skyblue;">
				<td colspan="2" align="center">版权&copy;click369.com</td>
			</tr>
		</table>
	</body>
</html>

2.使用div布局

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>表单布局</title>
	</head>
	<body>
		<div style="width: 500px;height: 400px;" >
			<div style="background-color: #00FFFF;">
				<!--<h1 style="margin-bottom:0 ;">主要的网页标题</h1>-->
				<b>主要的网页标题</b>
			</div>
			<div style="background-color: #FF0000;width: 200px;height: 200px;float:left;">
				<b>菜单</b><br>
				HTML<br>
				CSS<br>
				JavaScript
			</div>
			<div style="background-color: beige; width: 300px;height: 200px; float:left;">
				内容在这里
			</div>
			<div style="background-color: blue;text-align:center;">
				版权&copy;click369.com
			</div>
		</div>
	</body>
</html>