zoukankan      html  css  js  c++  java
  • HTML中的表格、表单元素与框架的构建

      表格

        <table></table>表格

           宽度可用像素或百分比;

          height:高度可用像素或百分比;

          border:边框宽度;

          cellpadding:内容跟单元格边框的边距 常用0;

          cellspacing:单元格之间的间距  常用0;

          align: 对齐方式;

          bgcolor:背景色;

        <tr></tr>

          align:一行内容的水平对齐方式;

          valign: 垂直对齐方式;

        <td></td> 单元格

        <th></th> 表头,单元格内容自动居中加粗;

        单元格合并:

          colspan="n"  (合并同一行的单元格,后面写代码减去相对应的列)

          rowspan="n" (合并同一列单元格,从第二行开始减去对应的列)

      表单

        <form id="" name="" method="post/get" action="负责处理的服务端">get提交后编码内容地址栏可见,post提交后不可见</form>

          Form内元素:

            文本框:<input type="text" name="" value="" id="" placeholder="提醒的文字"/>

            密码框: <input type="password" name="" value="" id=""/>

            提交按钮: <input type="submit" name="" value="" id="" disabled="disabled">

            重置按钮: <input type="reset" name="" value="" id="" disabled="disabled">

            普通按钮: <input type="button" name="" value="" id="" disabled="disabled">

            图片按钮: <input type="image" name="" src=""  id="" disabled="disabled">

            单选按钮: <input type="radio" name="" checked="checked" value=""/>

            多选按钮: <input type="checkbox" name="" checked="checked" value=""/>

            下拉框: <select name="" id="" size="" multiple="multiple">

                <option value="值">内容</option>

                <option value="值" selected="selected">内容</option>   设为默认;

      例:注册表格

    <html>
        <head>
        <title>用户注册页面</title>
        </head>
        
        <body bgcolor="#999999">
            <center><form method="get" action="http://www.baidu.com" name="tj">
            <table width="500" height="600" bgcolor="#009966">
                
                    <th colspan="2"><font size="+3">用户注册</font></th>
                
                <tr>
                    <td align="right">用户名:</td>
                    <td><input type="text" name="uname" placeholder="请输入用户名"/></td>
                </tr>
                <tr>
                    <td align="right">密码:</td>
                    <td><input type="password" name="pwd"/></td>
                </tr>
                <tr>
                    <td align="right">新密码:</td>
                    <td><input type="password" name="pwd"/></td>
                </tr>
                <tr>
                    <td align="right">姓别:</td>
                    <td><input id="sex0" type="radio" name="sex" value="0" checked="checked"/><label for="sex0"></label>
                        <input id="sex1" type="radio" name="sex" value="1"/><label for="sex1"></label>
                    </td>
                </tr>
                <tr>
                    <td align="right">出生年月:</td>
                    <td><select name="year" size="1">
                            <option value="1990">1990</option>
                            <option value="1990">1991</option>
                            <option value="1990">1992</option>
                            <option value="1990">1993</option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td align="right">兴趣爱好:</td>
                    <td>
                        <input id="a" type="radio" name="足球" value="0"/><label for="a">足球</label>
                        <input id="b" type="radio" name="篮球" value="1"/><label for="b">篮球</label>
                        <input id="c" type="radio" name="乒乓球" value="2"/><label for="c">乒乓球</label>
                    </td>
                </tr>
                <tr height="90">
                    <td align="right">验证码:</td>
                      <td>
                        <img src="验证码.jpg" width="150" height="50" /><br />
                        <input type="text" name="uname"/>
                    </td>
                </tr>
                <tr>
                    <td align="right" colspan="2">
                        <input type="submit" value="提交"/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                    
                        <input type="reset" value="重置"/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                    
                    </td>
                </tr>
            </table>
            </form></center>
        </body>
    </html>

      框架

        frameset使用时最外层去掉body;

          rows("300,*")上下分,第一行300像素,剩下的是第二行;

          cols("100,*")左右分,左侧宽100,剩余是右侧;

          frameborder="no",  去掉边框;

          <frame src="页面地址" noresize="noresize">   noresize 禁止调整页面大小

          <frame src="" scrolling="no">   取消显示滚动条

        iframe可以在原来页面插入小窗口显示其他页面

          <iframe src="其他页面地址" width="" height="" frameborder="0" scrolling="no"></iframe>

      <html >
        <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>无标题文档</title>
        </head>
          <frameset rows="25%,75%",>
              <frame src="topp.html"> 
            <frameset cols="30%,70%"><frame src="button.html">
                                <frame src="fram-c.html" />
             </frameset>
        </frameset>
      </html>

      

  • 相关阅读:
    swagger 接口文档,控制器 和 object类型的参数与返回值 的 注释不显示问题
    python学习——练习题(13)
    python学习——练习题(12)
    女生生日祝词
    python学习——练习题(11)
    python学习——练习题(10)
    python学习——练习题(9)
    python学习——练习题(8)
    python学习——练习题(7)
    python学习——练习题(6)
  • 原文地址:https://www.cnblogs.com/bekeyuan123/p/6765081.html
Copyright © 2011-2022 走看看