HTML学习2（表单、表格、框架）

最新推荐文章于 2023-07-14 19:00:42 发布

herryone123

最新推荐文章于 2023-07-14 19:00:42 发布

阅读量922

点赞数 1

分类专栏： Web前端

本文链接：https://blog.csdn.net/kenjianqi1647/article/details/104887823

版权

Web前端专栏收录该内容

19 篇文章 2 订阅

订阅专栏

一、表单

1、表单概述

网页中的表单可以用来收集用户填写的信息，如调查问卷、注册会员等。表单是个容器，表单里面的元素有文本框、密码框、单选框和复选框等。表单是一种数据提交的方法。

表单中的子元素又叫做表单控件。表单结构中，同一种表单控件可以添加多个，表单控件有一个name属性，必须赋予不同的名字，用于标识不同的控件。

（1）表单的基本语法

格式：<form></form>

（2）表单的数据传输方式

表单数据传输会用到action和method属性。action表示表单提交后发送的URL地址;发送的方式用method表示，可选择的参数有GET

(传输量比较小)和POST（传输值比较大）。

2、文本框和密码框

（1）文本框

文本框用来输入文字信息，可以输入汉字、数字和字母。

语法格式：<input type="text">

（2）密码框

语法格式：<input type="password">

3、单选框和复选框

（1）单选框

单选框用于在表单中有多个选项，且只能选一个的情况下使用。

语法格式：<input type="password">

应用举例：

<input type="radio" name="book"> DIV
<input type="radio" name="book" checked> HTML
<input type="radio" name="book"> CSS

（2）复选框

复选框是可以选择多个选项的选框。

应用举例：

<input type="checkbox" name="book"> DIV
<input type="checkbox" name="book" checked> HTML
<input type="checkbox" name="book" checked> CSS

4、下拉列表与文字域

（1）下拉列表

下拉列表是可以选择的列表，当在列表中选择要选择的选项时使用，且只能选择其中一个选项。

<select>
    <option>选项一</option>
    <option selected>选项一</option>
    <option>选项一</option>
</select>

应用举例：

<select>
		<option selected>HTML</option>
		<option >CSS</option>
		<option >DIV</option>
</select>

（2）文本域

文本域用于输入多行文字，或大量文字。

语法格式：

文字域通过rows属性和cols属性分别设置行和列。

应用举例：

<textarea name="book" rows="10" cols="10"></textarea>

5、按钮

语法格式：

<input type="submit" value="按钮"  >

二、表格

1、表格的基本语法

表格语法：<table></.table>

表格中的常用属性：

（1）表行：表示表格的一行

（2）表头：表示一列

（3）表元；表示表格中的一个方格

应用举例：

<table border="1">
		<tr><!--设置表行-->
			<th>表头一</th><!--设置表头-->
			<th>表头二</th>
		</tr>
		<tr>
			<td>表元1</td><!--设置表元-->
			<td>表元2</td>
		</tr>
		<tr>
			<td>表元3</td>
			<td>表元4</td>
		</tr>
	</table>

2、跨多行、多列表元

（1）跨多行表元

th和td使用rowspan表示跨多少个单元格

如：

<th rowspan="3">表头一</th><!--设置表头-->

（2）跨多列表元

th和td使用colspan表示跨多列表元。

如：<th colspan="3"><th>

3、设置表格大小

（1）设置表格边框

border后面的数值越大，宽度越大。

（2）设置表格的高度和宽度

4、表格文字对齐

设置对齐格式：

#可选择的参数有left、center、right

5、表格在网页中对齐

对齐格式:<table align=#></table>

#可选择的参数有left、center、right

三、框架

1、框架的基本概念

网页中框架的作用是将浏览器分割成几个相对独立的小窗口，浏览器可以将不同的网页文件同时传送到这几个小窗口。

基本语法：框架有<frameset></frameset>标记对表示，它与<head></head>标记对并列，<frameset></frameset>标记对里面用<frame></frame>标记对来表示在框架中放入什么文件。

应用举例：

</head>
	<frameset cols="25%,50%,25%">
		<frame src="http://www.baidu.com/"></frame>
	    <frame src="http://www.baidu.com/"></frame>
        <frame src="http://www.baidu.com/"></frame>
</frameset><noframes></noframes>

2、框架分栏

（1）垂直分栏

垂直分栏对框架里的网页文档垂直排列，每张网页文档占用一列显示。
<frameset cols="25%,25%">
<frame src="http://www.baidu.com/"></frame>
<frame src="http://www.baidu.com/"></frame>
</frameset>

如上例每张网页占50%。

（2）框架水平分栏

水平分栏就是把网页文档分成多行显示。

3、框架的常用属性

（1）设置不可调节框架大小

添加noresize=" noresize"后，边框的大小用户无法改变。

（2）浏览器不支持框架

旧版的浏览器不支持框架，可以在<noframes></noframes>显示不支持框架的显示内容。

（3）设置框架边框

框架边框在<frameset>中用frameborder属性表示。

#有两种表示方式：

yes表示有边框，no表示无边框
1表示有边框，0表示无边框

（4）设置滚动条

滚动条的设置在<frame>里的scrolling属性。

语法格式：<frame src= " " scrolling="#" />

#可以为auto、 yes、 no分别为自动滚条、有滚条和无滚条。

4、框架链接

（1）导航框架

导航框架在<frame>中加入name属性，表示该<frame>的名称。

应用举例：

1）新建如下两个html文件

2)主页.html代码

<frameset cols="25%,75%">
	<frame noresize="noresize" src="导航框架链接.html"></frame>
	<frame noresize="noresize" name="myframe" src="http://www.baidu.com/"></frame>
</frameset><noframes></noframes>

代码分析：第一个<frame>显示导航框架链接.html的网页，第二个<frame>命名为myframe,并显示百度的界面。

3）导航框架链接.html代码

<body>
	<a href="http://www.sina.com.cn/" target="myframe" >导航链接</a>
</body>

代码分析：建立文字链接，将新浪的界面显示到名字为myframe的<frame>中。

测试结果：

启动后显示结果：

点击左侧“导航链接”后显示结果：

（2）内联框架

内联框架是存在于<body></body>的单个HTML文件中，可以链接其他网页并显示它，即在一个页面张红嵌入一个框架窗口来显示另一个页面的内容。

语法：<iframe></iframe>

其他属性设置：

应用举例：

<body>
	<iframe src="http://www.baidu.com/"/>
</body>

herryone123

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
HTML学习2（表单、表格、框架）

一、表单1、表单概述网页中的表单可以用来收集用户填写的信息，如调查问卷、注册会员等。表单是个容器，表单里面的元素有文本框、密码框、单选框和复选框等。表单是一种数据提交的方法。表单中的子元素又叫做表单控件。表单结构中，同一种表单控件可以添加多个，表单控件有一个name属性，必须赋予不同的名字，用于标识不同的控件。（1）表单的基本语法格式：<form></form...
复制链接

扫一扫