zoukankan      html  css  js  c++  java
  • 列表框、分组列表框、标签(label)、分组框(fieldset)、框架(frameset)

    列表框(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="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”
    不显示滚动条。

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

     
  • 相关阅读:
    (数据科学学习手札09)系统聚类算法Python与R的比较
    写完代码就去吃饺子|The 10th Henan Polytechnic University Programming Contest
    《四月物语》
    PAT(甲级)2017年春季考试
    PAT(甲级)2017年秋季考试
    2019年全国高校计算机能力挑战赛 C语言程序设计决赛
    CF#603 Div2
    redhat7 上安装dummynet
    cassandra 如何写数据以及放置副本
    Eclipse中设置VM参数
  • 原文地址:https://www.cnblogs.com/1020182600HENG/p/6057229.html
Copyright © 2011-2022 走看看