您的位置：首页 > Web前端 > HTML

HTML的基本结构语法表格，框架，表单

2017-05-09 12:54 531 查看

三、表格

1.表格基本语法：<table>

<tr><td>内容</td></tr>

</table>

2.表格的对齐方式：

属性	值	说明
align （水平对齐方式）	left	左对齐
center	居中对齐
right	右对齐
valign （垂直对齐方式）	top	顶端对齐
middle	居中对齐
bottom	底端对齐
baseline	基线对齐

3.表格的跨行跨列:

<td colspan=“所跨的列数”>单元格内容</td>

<td rowspan=“所跨的行数”>单元格内容</td>

四、框架

1.框架的优点：

          在同一个浏览器窗口显示多个页面；

可以实现页面复用；

实现典型的“目录结构”；

2.<frameset>框架的基本语法：


<frameset cols=“25%,50%,*” rows=“50%，*” border=“5”>

                   <frame src=“the_second.html”>

                                               ……

   </frameset>

3.纵向分割窗口：

         使用<frameset>标签的“rows”行数属性；

4.横向分割窗口：

         使用<frameset>标签的“cols”列数属性；

5框架<frame>的常用属性：

属性	作用	举例
framebrder	是否显示框架周围的边框	frameboder=“1”
name	框架表识名	name=“mainframe”
scrolling	是否显示滑动条	scrolling=“no”
noresize	是否允许调整框架窗口大小	noresize=“noresize”

6.<iframe>的基本用法：

<iframe src=“引用页面地址”name=“框架标识名”frameborder=“边框” scrolling=“是否出现滚动条”……></iframe>

五、表单

1.<form>标签的属性

属性	说明
action	此属性指示服务器上处理表单输出的程序。一般来说，当用户单击表单上的“提交”按钮后，信息发到web服务器上，由acting属性所指定的程序处理。语法为a 4000 ction=“URL”。如果action属性的值为空，则默认表单提交到本页。
method	此属性告诉浏览器如何将数据发送给服务器，它指定向服务器发送数据的方法（用post方法还是用get方法）。如果值为get，浏览器将创建一个请求，该请求包括页面URL、一个问号和表单的值。浏览器会将请求返回给URL中指定的脚本，以进行处理。如果将指定为post，表单上的数据会作为一个数据块发送到脚本，而不使用请求字符串。语法为method=（get post）

2.<input>元素的属性

属性	说明
type	此属性指定表单元素的类型。可用的选项有text、password、checkbox、radio、submit、reset、file、hidden、image和button。默认选择为text
name	此属性指定表单元素名称。例如：如果表单上有几个文本框，可以按名称来标识他们，如text1、text2等。
value	此属性是可选属性，它指定表单元素的初始值。但如果type为radio，则必须指定一个值。
size	此属性指定表单元素的初始宽度。如果type为text或password，则表单元素的大小以字符为单位。对于其他输入类型，宽度以像素为单位。
maxlength	此属性用于指定可在text或password元素中输入最大字符数。默认值为无限大
checked	指定按钮是否是被选中的。当输入类型为radio或CheckBox时，使用此属性。

3、文本框

<p>用户名<input name=“sname” type=“text” size=“30” maxlength=“20”></p>

4.密码框

<p>密   码:

<input name=“pass” type=“text” size=“21”></p>

5．单选按钮

<fom method=”post” action=””>

性别：

<input name=”gen” type=”radio” class=”input” value=”男”>男；

<input name=”gen” type=”radio” value=”女” class=”input”>女

</form>

6.复选框

<form method=”post” action=””>

爱好：

<input type=”checkbox” name=”interest” value=”sports”>运动

<input type=”checkbox” name=”interest” value=”talk”>聊天

<input type=”checkbox” name=”interest” value=”play”>玩游戏

</form>

7.列表框

<select name=“指定列表名称” size=“行数”>

         <option value=“可选项的值” selected=“selected”>……</option>

         <option value=“可选项的值” >……</option>

</select>

8.按钮

<input type=“reset” name=“Reset” value=“重填”>

按钮的作用：

（1）      reset按钮：重置

（2）      submit按钮：提交到指定URL服务器

（3）      button按钮：属于普通按钮，需要与事件关联使用

9.多行文本域

<textarea name=“textarea” cols=“显示的列的宽度”rows=“显示的行数”>

文本内容

</textarea>

10.文本域

<form action=“” method=“post” enctype=“multipart/from-data”>

<p><input type=“file” name=“files”/><br/>

<input type=“submit” name=“upload” value=“上传”/></p>

</form>

11.表单的语义化

（1）域

         在表单中，可以使用<fieldset>标签实现的定义。

（2）域标题

         所谓域标题就是给创建的域设置一个标题。

         <fiedset>标签与<legend>标签会一起使用。

（3）表单元素的标注

         <lable for=“表单元素的id”>标注的文本</lable>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航

HTML的基本结构语法 表格， 框架， 表单

三、表格

四、框架

五、表单

HTML的基本结构语法表格，框架，表单