【HTML】HTML详解——控件

来源：互联网发布：虎牙直播app下载mac版编辑：程序博客网时间：2024/05/16 11:26

前言

上篇博客说到了HTML的标签，这篇博客我们着重说一下HTML中一些简单控件的使用。

表格

1、表格是用<table>元素来定义的，格式：<table border=n align="alignment" bgcolor="clr">...</talbe>
属性border用于定义表格边框的宽度，n是从0开始的整数；属性align用于设定表格的对齐方式，alignment可以是left、center、或right；属性bgcolor用于指定表格的背景色，取值同color。
2、<caption>...</caption>定义表格标题.
3、<tr align="alignment" valign="alignment">...<tr>
属性align用于指定这一行在水平方向上的对齐方式，alignment可以使left、center、right。
属性valign用于指定这一行在垂直方向上的对齐方式。alignment可以是top、middle、bottom。
4、<th>元素用于定义表头。
5、<td>元素用于定义单元格。

例：

<table border="1" align="center" bgcolor="#ffdddd">    <caption>成绩单</caption>    <tr align="center" valign="middle">        <th>姓名<th>        <th>语文<th>        <th>数学<th>        <th>英语<th>    </tr>    <tr align="center" valign="middle">        <td>张三</td>        <td>98</td>        <td>97</td>        <td>96</td>    </tr>    <tr align="center" valign="middle">        <td>李四</td>        <td>95</td>        <td>94</td>        <td>93</td>    </tr>    <tr align="center" valign="middle">        <td>王五</td>        <td>92</td>        <td>91</td>        <td>90</td>    </tr></table>

这个表格出来的效果如下：

成绩单姓名语文数学英语张三989796李四959493王五929190

用户输入（input）

1、<input>元素用于接受用户输入的信息。

2、<input>元素是一个带有属性的空元素，用来创建表单中的控件，语法如下：

属性type用来指定要创建的控件的类型；

属性name用来指定控件的名称，处理表单的服务端脚本可以获得以名称-值对所表示的表单数据，利用名称，可以取出对应的值，name属性在表单中并不显示；

属性size用来指定表单中控件的初始宽度；

属性value指定控件的初始值。

控件type控件类型type单行文本输入控件text提交按钮submit重置按钮reset口令输入控件password单选按钮radio复选框checkbox隐藏控件hidden

列表框（select）

1、列表框允许用户从一个下拉列表中选择一项或多项，其功能和单/复选按钮相同，但显示方式不同。

2、列表框由<select>元素创建，其中的各个选项用<option>元素提供。

例：如果我们要做一个选择年级的下拉框，该学校有三个年级，分别是一年级、二年级、三年级。

<select size="1" name="Grade">    <option value="一年级">一年级</option>    <option value="二年级">二年级</option>    <option value="三年级">三年级</option></select>

其中，<option>中的value属性为其键值。

多行文本输入控件（textarea）

1、多行文本可以容纳更多的信息，如个人简历。（对比单行输入文本）

2、语法：<textarea name="name" rows="number of rows" cols="number of columns">...</textarea>

属性rows用于指定文本输入控件可视区显示的文本行数；

属性cols用于指定文本输入控件可视区显示的宽度；

在开始标签和结束标签之间出现的文本，将作为文本输入控件中的初始文本而显示。

超链接<a href>

1、超链接需要一种方法来定位Internet上的资源，就是通过URL来实现的，全称Uniform Resource Locator，统一资源定位符，由三部分组成——协议、主机名称、文件目录和文件名

2、语法：<a href="URL">...</a>

属性href用于指定链接的目标，目标地址由URL定位；

在开始标签和结束标签之间的文本将作为浏览器重显示的超链接文本。

3、形式

<a href="form.html">当前目录下的form页面</a>

<a href="../form.html">当前目录上级目录下的form页面</a>

<a href="/form.html">根目录下的form页面</a>

<a href="E:/HTML实例/form.html">绝对路径下的form页面</a>

嵌入图像(img)

1、在Web上使用得最多的两种图像格式是GIF和JPEG，GIF只能用于256色的图像，对于不需要大量颜色的图片，如网站LOGO、图标等，常使用GIF格式；对图片品质要求较高的一些图像，如照片、风景画等，常使用JPEG格式。

2、语法：<img src="URL" width=n height=n>

属性src指定图像资源的位置；

属性width和heigh用于指定图片的尺寸。

3、其中，src的使用形式类似于<a href>标签。

总结

经历了三篇博客，HTML基础算是介绍完成，现在来说，HTML还很主流，基本上所有的B/S都需要使用到HTML，它的强大之处并不止于此文，更多的内容，等待你去探索。

2 0