列表框分组列表框标签（label）分组框（fieldset）框架(frameset)

Posted 2020-08-19 奋斗的少年WH

列表框（select）
下拉列表，用户可以从一些可选项中选择。
示例：简单的下拉列表
<select name="country">
        <option value="America">美国</option>
        <option value="China" selected="selected">中国</option>
        <option value="India">印度</option>
        <option value="Russia">俄罗斯</option>
</select>

<optgroup>标签                         *****************
用来对选项进行分组（分组标签是不可选择的）

<select name="country2">               *****************
        <optgroup label="北美洲">
            <option value="America">美国</option>
        </optgroup>
        <optgroup label="亚洲">
            <option value="China" selected="selected">中国</option>
            <option value="India">印度</option>
            <option value="Russia">俄罗斯</option>
        </optgroup>
</select>                               *****************

列表框（以平铺的形式显示）              *****************
设置<select>标签的属性 size 的值大于 1 即可
size表示显示多少行

示例：列表框与多选列表框？              *****************
<select name="country4" size="5">
        <option value="America">美国</option>
        <option value="China" selected="selected">中国</option>
        <option value="India">印度</option>
        <option value="Russia">俄罗斯</option>
</select>

列表框（可以多选）                       *****************
设置<select>标签的属性 multiple="multiple“
用户可以通过Ctrl或Shift选择多个选项。

-------------------------------------------------
标签（label） ********************
有些html标签尺寸很小，比如单选框和多选框。希望点击单选框旁边的按钮和点击单选框的效果相同。

示例：<label>标签常见的使用场景？
<label for="blue">蓝色</label>
<input type="radio" id="blue" value="blue" name="color" />

注意：label标签中的for值和输入框中的id值须一致

-------------------------------------------------
id和name有什么区别呢？ ********************
id 在整个页面是唯一的，没有任何两个HTML标签的id是一样的。
name 用在向服务器发送数据时，保存HTML标签的值。
可以有相同的name的HTML标签存在（比如相同name的radio是同一分组的）。

-------------------------------------------------
分组框（fieldset） ********************
分组框<fieldset>标签。
<legend>标签来显示分组框标题。

<fieldset style="width:200px;">
<legend>选择颜色</legend>
<ul>
<li>蓝色<input type="radio" value="blue" name="color" /></li>
<li>红色<input type="radio" value="red" checked="checked" name="color" /></li>
<li>白色<input type="radio" value="white" name="color" /></li>
</ul>
</fieldset>

-------------------------------------------------
框架

为什么使用frameset
<frameset> 允许我们把很多页面组合成一个页面

常见的应用场景
一个frame中放置页面导航，另一个frame中放置页面内容，
当点击页面导航时，只刷新页面内容。（部分刷新）
-------------------------------------------------
垂直分栏框架
<frameset>的 cols 属性，定义垂直分栏的各列的宽度：

示例：一个三列的框架，其中第一列占据150px的宽度，第二列占据10%的宽度，
第三列占据剩余的宽度。

<frameset cols="150, 10%, *">
<frame src="1.htm" />
<frame src="2.htm" />
<frame src="3.htm" />
</frameset>

-------------------------------------------------
水平分栏框架

示例：
<frameset rows="50, 10%, *">
<frame src="1.htm" />
<frame src="2.htm" />
<frame src="3.htm" />
</frameset>

-------------------------------------------------
水平分栏框架

<frame>标签的属性
frameborder="0“
用来设置不显示分隔条
noresize="noresize“
则设置分隔条不可拖动
scrolling=”no”
不显示滚动条。

-------------------------------------------------