（二）JavaWeb学习P4-P8（表格标签table，表单标签form，frameset-iframe标签）

岚苼

已于 2022-12-28 17:40:01 修改

阅读量546

点赞数

分类专栏： HTML 文章标签： html 前端

于 2022-12-19 15:14:09 首次发布

本文链接：https://blog.csdn.net/qq_56910237/article/details/128354929

版权

HTML 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

本文详细介绍了HTML中的表格、表单以及frameset和iframe标签的使用，包括表格的创建、样式设置、表单元素以及页面框架的布局。通过实例展示了如何创建带边框的表格、定义表单字段、实现多页面布局以及嵌入子页面。内容涵盖了HTML基本元素的用法和重要属性。

摘要由CSDN通过智能技术生成

HTML表格标签table

标签定义及使用说明
<table> 标签定义 HTML 表格
一个 HTML 表格包括 <table> 元素，一个或多个 <tr>、<th> 以及 <td> 元素。
<tr> 元素定义表格行，<th> 元素定义表头，<td> 元素定义表格单元。
更复杂的 HTML 表格也可能包括 <caption>、<col>、<colgroup>、<thead>、<tfoot> 以及 <tbody> 元素。

align	规定表格相对周围元素的对齐方式。left,center right
bgcolor	规定表格的背景颜色。
border	规定表格单元是否拥有边框。1:表示有边框
cellpadding	规定单元边沿与其内容之间的空白。cellpadding=”间距大小“
cellspacing	规定单元格之间的空白。cellspacing=”间距大小“
frame	规定外侧边框的哪个部分是可见的。
rules	规定内侧边框的哪个部分是可见的。
summary	规定表格的摘要。
width	规定表格的宽度。

frame属性值：
frame
rules属性值：
在这里插入图片描述

表格
标签演示

<html>
<head>
<title>网站</title>
<meta charset="GBK">
<style type="text/css">
</style>
</head>

   <body>
   <table border="1" width="600" cellspacing="0" cellpadding="10"><!--表格-->
    <tr><!--行-->
   <th>1</th>
   <th>2</th>
   <th>4</th>
   </tr>

   <tr align="center"><!--行-->
   <td>第一列</td>
   <td>第二列</td>
   <td>第三列</td>
   </tr>

    <tr align="center"><!--行-->
   <td>第一列</td>
   <td>第二列</td>
   <td>第三列</td>
   </tr>

   </table>
   <hr></hr>
   </body>

</html>
<!--
(1) 表格  table
          行  tr
		  列  td
		  表头列 th
  <table border="1" width="600" cellspacing="0" cellpadding="10">
         border：加边框
		 width: 表格的宽度
		 cellspacing:单元格间距
		 cellpadding:单元格填充
  <tr align="center">   其他left,right
          align="center":单元格内内容居中
  <td rowspan="2">5</td> 表示跨两行合并
  <td colspan="4">180</td> 表示跨4行合并
-->

表单标签

<html>
<head>
<title>表单标签</title>
<meta charset="GBK">
<style type="text/css">
</style>
</head>

   <body>

   <form action="demo5.html" method="post">
       账号：<input type="text" name="why"/>
	   <br/>
	   <!--type="text"省略不写，默认文本框-->
	   密码：<input type="password" name="666888"/><br/>
	   性别：<input type="radio" name="gender" value="malel"/>男
	         <input type="radio" name="gender" value="female" checked="checked"/>女<br/>
	   爱好：<br/><input type="checkbox" name="hobby" value="basketball">篮球<br/>
	   <input type="checkbox" name="hobby" value="baseball">足球<br/>
	   <input type="checkbox" name="hobby" value="earth">羽毛球<br/>
	   星座：<select name="star">
	          <option>白羊座</option>
			  <option>白羊座</option>
			  <option>白羊座</option>
			  <option>白羊座</option>
			  <option>白羊座</option>
			  <option>白羊座</option>
			  <option>白羊座</option>
			  <option>白羊座</option>
			  <option>白羊座</option>
			  <option>白羊座</option>
			  <option>白羊座</option>
			  <option>白羊座</option>
	          <select/><br/>

	   备注：<textarea name="remark" rows="5" cols="50"></textarea></br>
	   </br>
	   </br>
	   <input type="submit" value="注 册"/>
       <input type="reset" value="重置"/>
	   <input type="submit" value="普通按钮"/>
</form>

   </body>

</html>
<!--
（1）表单form
        method=get方式（默认），输入的会出现在地址栏，不安全，有长度限制
		method=post方式：输入的不会出现在地址栏
    1. input type="text"表示文本框。其中name属性必须要指定，否则这个文本框的数据将来是不会发送给服务器的
	2.password <input type="password"> 表示密码框
	3.文本框text，文本框里输入的是什么，value服务器收到的就是什么，不需要设置value,ratio单选按钮需要添加一个value，以便传给服务器
	checked="checked":默认选中
	4.复选框checkbox,需要添加一个value，以便传给服务器
	5.下拉框
	<select name="star">
	 <option>白羊座</option>     选项
	 <select/><br/>
	 下拉框无需设置value，选中的即是值
	 6. 备注：<textarea name="remark" rows="5" cols="50"></textarea>
	     rows="5"：行数     cols="50"：指多少个字符
	 7.
	   1. 提交按钮submit）:提交按钮 <input type="submit" value="注 册">
	   form属性action处理地址<form action="demo5.html">,处理地址
	   2. 重置按钮reset):重置填写初始值（重填）
	   3. 普通按钮）
     8.checked 默认选中
-->

HTML-frameset-iframe标签（多个子页面组成页面）

扩展iframe
在一个页面中嵌入一个子页面
<html>
<head>
</head>
     <body>
	 <iframe src="D:\JavaWeb学习\demo3.html">
	 </body>
</html>
-->

<!--
1.页面框架
 <frameset rows="20%,*">

</frameset>

2.<frame src="D:\JavaWeb学习\demo2.html"/>引用一个网址

3.rows表示分割行
4.cols表示分割列
5.frameborder="no":表示不加边框，默认加上边框

代码演示

<html>
<head>
<title>HTML-frameset-iframe标签</title>
<meta charset="GBK">
<style type="text/css">
</style>
</head>
      <frameset rows="20%,*">
	      <frame src="D:\JavaWeb学习\demo2.html"/>
		  <frameset cols="15%,*">
             <frame src="D:\JavaWeb学习\demo3.html"/>
            <frameset rows="80%,*">
             <frame src="D:\JavaWeb学习\demo4.html"/>
			 <frame src="D:\JavaWeb学习\demo5.html"/>
              </frameset>
		     </frameset>
	  </frameset>
</html>
<!--
扩展iframe
在一个页面中嵌入一个子页面
<html>
<head>
</head>
     <body>
	 <iframe src="D:\JavaWeb学习\demo3.html">
	 </body>
</html>
-->

<!--
1.页面框架
 <frameset rows="20%,*">

</frameset>

2.<frame src="D:\JavaWeb学习\demo2.html"/>引用一个网址

3.rows表示分割行
4.cols表示分割列
5.frameborder="no":表示不加边框，默认加上边框
6.
-->