zoukankan      html  css  js  c++  java
  • HTML实训

    1.表单

    代码如下:

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>表单</title>
    </head>
    <H1>gansha</H1>
    <body bgcolor="#FF6633">
    <font size="+5">
    <form action="" method="get" id="" name="mmm">
    名:<input style="size:auto;color:#F03; background:#C66; border-color:#3C3;"padding="0";type="text" name="uname"  width="50" height="500" value="名"/><br/><br/><br/>
    密:<input type="password" name="ppp">
    <br/><br/><br/>
    爱:<input type="checkbox" name="PQ" pattern="0" width="50" height="50">PQ
    <input type="checkbox" name="1654">1654
    <input type="checkbox" name="222">222
    <input type="checkbox" name="2326">2326<input type="checkbox" name="45">45
    <br/><br/><br/>
    sex:<input type="radio" name="sex">man
    <input type="radio" name="sex">woman
    <hr/>
    <input type="button" value="ok"/>
    <input type="reset" name="res" value="cancel"/>
    </form></font>
    <br/><br/><br/>
    </body>
    </html>

    运行结果:

    2.表格

    代码:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>表格</title>
    </head>
    
    <body style="color:#369"><font face="微软雅黑">
    <table width="1500" border="1" cellspacing="0" align="center" bordercolor="#99CC66">
    <caption>测试啊啊啊</caption>
      <tr bgcolor="#00FF99" height="50">
        <th>用户名</th><!--使用 scope 属性,可以将数据单元格与表头单元格联系起来。
    通过属性值 row,表头行包括的所有表格都将和表头单元格联系起来。指定 col,会将当前列的所有单元格和表头单元格绑定起来。
    使用 rowgroup 和 colgroup 会将单元格的行组(由 <thead>、<tbody> 或 <tfoot> 标签定义)或列组中的所有单元格和表头单元格绑定起来(由 <col> 或 <colgroup> 标签定义)。-->
        <th scope="col">用户角色</th>
        <th scope="col">联系方式</th>
        <th scope="col">IP地址</th>
        <th scope="col">详细描述</th>
        <th scope="col">基本操作</th>
      </tr>
      <tr  align="center" bgcolor="#CC3366">
        <td>admin</td>
        <td>系统管理员</td>
        <td>111111111</td>
        <td>255.255.255.255</td>
        <td>未知</td>
        <td><a href="1.html">删除&nbsp;</a>|<a href="2.html">查看</a></td>
      </tr>
       <tr  align="center" bordercolor="#99CC66">
        <td>admin</td>
        <td>系统管理员</td>
        <td>111111111</td>
        <td>255.255.255.255</td>
        <td>未知</td>
        <td><a href="1.html">删除&nbsp;</a>|<a href="2.html">查看</a></td>
      </tr> <tr  align="center">
        <td>admin</td>
        <td>系统管理员</td>
        <td>111111111</td>
        <td>255.255.255.255</td>
        <td>未知</td>
        <td><a href="1.html">删除&nbsp;</a>|<a href="2.html">查看</a></td>
      </tr> <tr  align="center">
        <td>admin</td>
        <td>系统管理员</td>
        <td>111111111</td>
        <td>255.255.255.255</td>
        <td>未知</td>
        <td><a href="1.html">删除&nbsp;</a>|<a href="2.html">查看</a></td>
      </tr> <tr  align="center">
        <td>admin</td>
        <td>系统管理员</td>
        <td>111111111</td>
        <td>255.255.255.255</td>
        <td>未知</td>
        <td><a href="1.html">删除&nbsp;</a>|<a href="2.html">查看</a></td>
      </tr> <tr  align="center">
        <td>admin</td>
        <td>系统管理员</td>
        <td>111111111</td>
        <td>255.255.255.255</td>
        <td>未知</td>
        <td><a href="1.html">删除&nbsp;</a>|<a href="2.html">查看</a></td>
      </tr> <tr  align="center">
        <td>admin</td>
        <td>系统管理员</td>
        <td>111111111</td>
        <td>255.255.255.255</td>
        <td>未知</td>
        <td><a href="1.html">删除&nbsp;</a>|<a href="2.html">查看</a></td>
      </tr> <tr  align="center">
        <td>admin</td>
        <td>系统管理员</td>
        <td>111111111</td>
        <td>255.255.255.255</td>
        <td>未知</td>
        <td><a href="1.html">删除&nbsp;</a>|<a href="2.html">查看</a></td>
      </tr> <tr  align="center">
        <td>admin</td>
        <td>系统管理员</td>
        <td>111111111</td>
        <td>255.255.255.255</td>
        <td>未知</td>
        <td><a href="1.html">删除&nbsp;</a>|<a href="2.html">查看</a></td>
      </tr> <tr  align="center">
        <td>admin</td>
        <td>系统管理员</td>
        <td>111111111</td>
        <td>255.255.255.255</td>
        <td>未知</td>
        <td><a href="1.html">删除&nbsp;</a>|<a href="2.html">查看</a></td>
      </tr>
    </table>
    </font>
    </body>
    </html>

    运行:

    3.表格合并

    代码

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>段落属性</title>
    </head>
    
    <body >
    <table width="400" border="1" cellspacing="0" cellpadding="0" align="center">
      <tr height="50" align="center">
        <td colspan="4">网站</td>
      </tr>
     <tr height="50" align="center">
        <td colspan="2">花1</td>
         <td colspan="2">花2</td>
      </tr>
      <tr height="50" align="center">
        <td width="25%">花3</td>
          <td colspan="2" rowspan="3" width="50%" height="50%" ><img width="100%" height="100%" src="图片/a2.png"</td>
          <td width="25%">花3</td>
      </tr><tr height="50" align="center">
       <td width="25%">花3</td><td width="25%">花3</td>
      </tr><tr height="50" align="center">
     <td width="25%">花3</td><td width="25%">花3</td>
      </tr>
      </tr><tr height="50" align="center">
      <td colspan="2">花1</td>
         <td colspan="2">花2</td>
      </tr>
    </table>
    
    </body>
    </html>

    运行结果:

  • 相关阅读:
    软件设计中的分层模式, 三层开发遵循的原则,分层开发的特点和优势
    什么是jsp?
    在Servlet中如何如何获取请求的参数?
    Servlet的加载(执行过程,原理)和生命周期
    servlet的注册
    什么是servlet容器
    什么是Servlet
    如何访问动态页面——URL
    什么是C/S? Client/server的简写,这里Server指的是DBServer。
    MVC(Model-View-Controller)软件设计模式
  • 原文地址:https://www.cnblogs.com/mary-chrisima/p/6940102.html
Copyright © 2011-2022 走看看