HTML下拉列表 textarea fieldset及表格的运用

表单

1.1下拉列表

使用下拉列表的好处：

（1）节省页面空间，使得页面更加简洁；

（2）方便输入；

（3）规范输入。

<form action="result.html" method="get">

    你来自：

    <select name="province">

       <option value="33">浙江</option>

        <option value="41">河南</option>

        <option value="32">江苏</option>

        <option value="36">江西</option>

    </select>

    <input type="submit" value="提交"/>

</form>

<select>标签定义了一个下拉列表

<option>标签定义了下拉列表的一个选项

<select>标签的name属性定义了提交的参数名

<option>标签的内容定义了该选项显示的文本，而value属性定义了选择该项时传递的参数值。

 

提交的参数如下：

 

多选可通过设置multiple属性来实现，Ctrl+点击选择多个。

你喜欢的颜色有：

    <select name="color" multiple>

        <option value="red">红色</option>

        <option value="blue">蓝色</option>

        <option value="green">绿色</option>

        <option value="yellow">黄色</option>

        <option value="purple">紫色</option>

        <option value="black">黑色</option>

    </select>

 

传递的参数为：

 

<select>标签的size属性定义了下拉列表框显示的选项个数，当小于实际选项个数时，会自动增加一个滚动条。

格式化的快捷键：Ctrl+alt+L

可以使用<optgroup>标签对选项进行分组

你打算购买小汽车的品牌：

    <select name="car">

        <optgroup label="国产车">

            <option value="红旗">红旗</option>

            <option value="BYD">比亚迪</option>

            <option value="奇瑞">奇瑞</option>

        </optgroup>

        <optgroup label="德系车">

            <option value="benz">奔驰</option>

            <option value="bmw">宝马</option>

            <option value="dazhong">大众</option>

        </optgroup>

        <optgroup label="日系车" disabled>

            <option value="丰田">丰田</option>

            <option value="本田">本田</option>

            <option value="三菱">三菱</option>

        </optgroup>

</select>

<optgroup>的label属性定义了分组显示的文字，disable设置该分组不能用。

selected属性设置默认的选项。

1.2textarea

<textarea>标签的作用是当输入文本比较多的时候使用，比如文章、博客。

cols属性指定多行文本的宽度；

rows属性指定多行文本的行数。

cols属性和rows属性设置的都是最小的宽度和行数，它可以被拉宽，拉长。

readonly属性设置文本为只读，不能进行编辑。

disabled属性设置文本为不可用，界面会变灰，也不能编辑。

<textarea rows="20" cols="30"></textarea>

1.3fieldset

fieldset标签是对表单进行分组，可以形成子表单，产生一个边框,与legend标签配合使用，legend可以设置fieldset的标题，默认在左上方。

disabled属性禁用fieldset,fieldset内部的所有表单控件都将不可用；

form属性指定fieldset所属的表单；

name属性为fieldset名称。

legend标签有一个align属性，指定标题的位置，可取值top、left、right、bottom（HTML4.01不赞成使用，效果也不大好，right有效，默认是left）。

<form action="#" method="get">

    <fieldset>

        <legend>健康信息</legend>

        身高：<input type="text"/>

        体重：<input type="text"/>

    </fieldset>

</form>

1.4表单总结

表单控件比较多，input标签提供的就有文本框、单选框、复选框、密码框、提交按钮、重置按钮和普通按钮，此外还有一个隐藏域和文件按钮。此外，还有下拉列表、textarea多行文本和对表单进行分组的fieldset。

表格

2.1表格

表格的组成部分：标题、表头、主题、表尾

<table>定义一个表格

<caption>定义表格的标题

<thead>定义表头部分

<tbody>定义表格主体（数据）部分

<tfoot>定义表尾，一般显示汇总信息等。

<tr>定义一行

<th><td>定义一个数据项（单元格），<td>一般用于表头，有加粗样式，<td>一般用于表格主体部分，没有加粗样式。

<td>的rowspan和colspan分别定义单元格跨行的行数 、跨列的列数。

table标签的cellpadding属性指定单元边沿与其内容的空白,border属性规定表格边框的宽度，cellspacing属性指定单元格之间的空白。

<table border="1">
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
</table>

2.2table布局

布局：是一个页面的整体结构

结构特点：从上到下，从左往右。一般每一行的高度是一致的。

页面的布局可以通过table来实现，一个单元格就是一个布局区域单位。该区域的大小可以通过height和width属性来设置，位置是通过单元格的相对位置来体现的。

同时可以结合rowspan和colspan两个属性来完成单元格的合并。

当布局较为复杂时，可以使用table的嵌套来实现，即在某个单元格中再嵌入一个table进行划分。

table布局用得比较少，一般用于比较规整的网页，早期的网页是用table布局的，但它存在一定的缺陷，table的嵌套会增加浏览器的解析时间，也就是加载比较慢。

<table >

        <tr>

            <td colspan="3"><img src="img/logo.png"/></td>

        </tr>

        <tr>

            <td colspan="3">

                <table>

                    <tr>

                        <td width="300"></td>

                        <td>首页</td>

                        <td>学院概况</td>

                        <td>机构设置</td>

                        <td>新闻公告</td>

                        <td>教学科研</td>

                        <td>招生就业</td>

                        <td>数字校园</td>

                    </tr>

                </table>

            </td>

        </tr>

        <tr>

            <td><img src="img/row_2_left.png"/></td>

            <td colspan="2"><img src="img/row_2_right.png"/></td>

        </tr>

        <tr>

            <td><img src="img/row_3_links.png"/></td>

            <td><img src="img/row_3_new.png"/></td>

            <td><img src="img/row_3_info.png"/></td>

        </tr>

    </table>

div

<div>标签定义了一个分块（division）

3.1写法

<div style="border: dashed;width: 100px;height: 100px;"></div>

显示特点：在新的一行进行显示。块级标签。一般与css配合使用进行页面布局。

标签总结

块级标签：在新的一行进行显示

div、h1-h6、p、hr、li、table、ul、ol、dl、dt、dd、tr、option、catption、optgroup、thead、tbody、tfoot...

内联标签：跟块级标签相反，不会新起一行显示

img、input、a、td、textarea、span、label、select、th、button...

内联标签一般不能嵌套块级标签。