zoukankan      html  css  js  c++  java
  • 2017.9.20 HTML学习总结----下拉列表标签

    接上:

    1.下拉列表框<option>,<selcct>

    (1)解释:在表单中,通过option select标记可设计一个下拉式的列表或带有滚动条的列表,

       用户可以在列表中选中一个或者多个选项。

    (2)基本语法:<select name="" size="" multiple>

          <option value="" selected>....</option>

          <option value="">...</option>

          ....

          </select>

    (3)语法说明:    例如:<select size="4" name="list1" multiple="multiple">

      <select>标记有:

        name:设定下拉列表名字;

        size:用于改变下拉框的大小,默认值为1;

        multiple:表示允许用户从列表中选择多项,若缺省,则表示单选;

    这3个属性。

      option标记有:

        value:用于设置当该选项被选中并提交后,浏览器传送给服务器的数据;

        selected:用来指定选项的初始状态,表示该选项在初始时被选中;

    这两个属性。

    2.多行文本框<textarea>标记

    基本语法:

      <texearea name="" rows="" cols="" wrao="off|virtual|physical">

        初始值

        </textarea>

    例如:<textara name="Letter" rows="4" cols="40"></textarea>  

       <textarea name="userBasicInfo" rows="5" cols="50"></textarea>

     end!

    注意:rows设置输入域的行数, cols设置输入域的列数 ;wrap设置是否换行;

    表单设计案例------学生入校注册页面设计

    <html>
      <head>
        <title>学生信息注页面</title>
      </head>
      <body>
        <h3 align="center">学生信息注册</h3>
         <form name="stu" action="">
         <table>
             <tr><td>姓名:</td><td><input type="text" name="stuName"></td></tr>
             <tr> <td>性别:</td><td>
                 <input type="radio" name="stuSex" checked="checked"><input type="radio" name="stuSex" checked="checked"></td>
             </tr>
             <tr><td>出生日期</td>
             <td><input type="text" name="stuBirthday"></td>
             <td>按照格式yyy-mm-dd</td>
             </tr>
             <tr><td>学校:</td><td><input type="text" name="stuSchool"</td></tr>
             <tr><td>专业:</td>
             <td><select name="stuSeltct2">
                 <option selected>计算机科学与技术</option>
                 <option >网络工程</option>
                 <option>物联网工程</option>
                 <option>应用数学</option>
                     </select>
                 </td>
                 </tr>
                 <tr><td>体育特长:</td>
                     <td colsopan=2>
                     <input type="checkbox" name="stuCheck">篮球
                     <input type="checkbox" name="stuCheck">排球
                     <input type="checkbox" name="stuCheck">足球
                     <input type="checkbox" name="stuCheck">游泳
                     </td>
                 <tr>
                 <tr><td>上传照片:</td><td colspan="2"><input type="file"></td></tr>
                 <tr><td>密码:</td><td><input type="password" name="stuPWD"></td></tr>
                 <tr><td>个人介绍:</td>
                 <td colspan="2"><textarea name="Letter" rows="4" cols="40"></textarea></td>
                 </tr>
                 <tr>
                 <td ><input type="submit" value="提交">
                     <input type="reset" value="取消">
                     </td>
                 </tr>
             </table>
         </form>
      </body>
    </html>

     3.HTML框架标签与框架设计

    页面分割用<frame>标记与<frameset>标记来定义的,其中<frame>标记用来定义框架,而<framset>标记则用来定义框架集

    3.1窗口的分割与设置

    3.1.1 分割框架的语法结构:

    <frameset rows="高度1,高度2...."或者  cols=“宽度1,宽度2.......”>

       <frame src="网页1">

       <frame src="网页2">

      .......

    </frameset>

    语法说明:

    (1)row属性是表示水平分割,cols属性是垂直分割。

    (2)rows(或cols)属性的值代表个子窗口的高度(或宽度)

    ·对于rows,是从上到下分割,各子窗口的高度依次为高度1,高度2,....,直到最后一个评分完剩下的

    ·对于cols,是从左到右分割,各子窗口的宽度依次为宽度1,宽度2,....直到最后一个平分完之后剩下的

    (3)设置高度(宽度)的数值方式有以下两种

    ·采用整数设置,单位为像素(px)

    例如:<frameset rows="100,200,*">

    解释:该语句将窗口水平分为3个子窗口,第一个高度为100个单位,第二个高度为200单位,第三个高度为-300

    ·采用百分比设置

    例如:<framset rows="20%,50%">

    解释:平分为3个子窗口,第一个高度占原高度的20%,第2个高度占原高度的50%,第三个占原高度30%.

     

    3.1.2 窗口的嵌套分割

    将水平分割框架与垂直分割框架实现嵌套

     

    3.2 子窗口的设置

    基本语法:

    <frameset src="html文件的位置" name="子窗口的名称" scrolling=yes或 no 或者auto>

    语法说明:

    ·name属性指定子窗口的名称,在该子窗口内显示由src属性指定的HTML文件网页内容

    ·scrolling属性用于设置控制窗口框架中是否显示滚动条,yes显示滚动条,no不显示,auto为自动;

    在框架中定义了一个子窗口main,在main中显示jc.html网页

    <frameset set="jc.html" name="main " scrolling="auto">

     

    3.3 target属性

      在框架结构子窗口的HTML文档中如果含有超链接,当用户点击该链接时,目标网页显示的位置有target

    属性指定,若没有指定则在当前子窗口打开。

    ·target属性使用格式:

    <a href="目标网页地址" target="显示目标网页的子窗口名字">超链接文字</a>

    ·若jc.html中有一个超链接,再点击该链接后,网页newhtml将要显示在名为main的子窗口中,如下

    <a href="new.html" target="main">需要链接的文本

     

  • 相关阅读:
    年轻人如何去有效的学习(很好的鸡汤,一语惊醒梦中人)
    python基础07 函数
    python基础06 循环
    python基础05 缩进与选择
    python基础04 运算
    python基础03 序列
    python基础02 基本数据类型
    python基础01 Hello World
    CSS3(三)BFC、定位、浮动、7种垂直居中方法
    CSS3(二)Box Model、边距折叠、内联与块标签、CSSReset
  • 原文地址:https://www.cnblogs.com/qichunlin/p/7561708.html
Copyright © 2011-2022 走看看