HTML:框架标签、表单标签、span和div的区别

HTML:框架标签

名称：<frameset><frame></frame></frameset>
注意：frameset不能和body标签同时使用！

frameset标签属性

属性名	属性说明
cols	对页面进行列切割；单位：像素/百分比
rows	对页面进行行切割；单位：像素/百分比

按列切割：

代码实现：

<frameset cols="20%,*,30%">
		<frame />
		<frame />
		<frame />
	</frameset>

按行切割：

代码实现：

<frameset rows="15%,*,20%">
		<frame />
		<frame />
		<frame />
	</frameset>

混合切割：

代码实现：

<frameset rows="15%,*">
		<frame />
		<frameset cols="25%,*">
			<frame />
			<frame />
		</frameset>
	</frameset>

frame标签属性

属性名	属性说明
src	引入的页面路径
name	该框架的名称用于和a标签target连用

应用案例（商城管理系统）：

代码实现：
left.html

<h2><a href="product.html" target="hehe">商品管理</a></h2>
<h2><a href="order.html" target="hehe">订单管理</a></h2>

main.html

<frameset rows="15%,*">
		<frame src="top.html"/>
		<frameset cols="20%,*">
			<frame src="left.html"/>
			<frame src="center.html" name="hehe"/>
		</frameset>
	</frameset>

其他页面省略

HTML:表单标签

作用：用于接收用户输入的数据，并将数据提交给服务器
名称：<form></form>
重点：输入项标签：input、select、text-area；表单属性：action、method.

HTML:表单输入项标签（input）

作用：用于获得用户输入信息，type属性值不同，会成为不同的组件。
名称：<input>

input属性

属性名	属性说明
type	决定表单输入项标签类型
name	组件名
value	组件默认值
checked	设置单/复选框默认选中状态
readonly	设置该标签的参数值只读，参数名可以正常提交
disabled	设置该标签禁用，参数名不能正常提交
size	组件长度

注：
1.参数值为用户手动输入的值
2.当type的值为text、password ，value可以加可不加(一般不加)。
3.当type的值为radio、checkbox，此时用户只能点击不能输入具体的值。所以，要求必须提供value属性

input-type属性

属性名	属性说明
text	文本框
password	密码框
value	组件默认值
radio	单选框，name值保持一致
checkbox	复选框。name值保持一致
submit	提交按钮
reset	重置按钮
file	附件框（文件上传）
hidden	隐藏域（正常提交参数，不显示）
button	普通按钮（结合JS）
date	定义日期字段
number	定义数字字段
email	定义电子邮箱字段
image	定义图片作为提交按钮
color	取色器

HTML:表单输入项标签（select）

作用：下拉列表标签
名称：<select><option></option></select>

select属性

属性名	属性说明
name	组件名
Multiple	设置该标签选项全部显示，并且可以进行多选提交

option属性

属性名	属性说明
value	需要提交的参数值
select	设置某个列表项默认选中

注：如果不设置value属性，参数值就是<option>中的内容体

如果设置了value属性，参数值就是value设置的值
代码实现：

学历：<select name="xueli">
					<option value="ss">硕士</option>
					<option value="bk">本科</option>
					<option value="dz">大专</option>
					<option value="xx" selected="selected">小学</option>
				</select>

HTML：表单输入项标签（text-area）

作用：文本域标签，可支持用户输入并提交大量纯文字数据。
名称：<textarea></textarea>

textarea属性

属性名	属性说明
name	组件名
cols	设置文本域列
rows	设置文本域行

代码实现：

个人介绍：
			<textarea cols="30" rows="5" name="message">
			</textarea>

HTML：表单标签（form）常用属性

form属性：

属性名	属性说明
action	表单提交目标路径
method	表单提交方式

注：
1.action：点击type=submit和type=image ，需要些跳转的路径；不写action：默认跳转到当前页面路径
2.method：提交的方式，常用的有两种：get(默认)、post
get与post的区别：
1.参数提交位置不同。get：请求行；post：请求体。
2.安全性。get数据不安全；post：数据相对安全。
3.提交数据量：get：少量数据；post：大量数据

HTML:span标签和div标签区别

行内元素：span
1.有多少内容占多大空间
2.不会自动换行
块级元素：div
1.独自占一行
2.会自动换行
应用场景：
1.div一般用于网页的布局
2.span一般用于少量信息展示