手记

HTML基础练习 一 (文本、表格、表单)

1、文本编辑

<!DOCTYPE html>

<html>

    <head>

         <meta charset="utf-8" />

         <title>1- Louis Lobo</title>

     </head>

    <body>

        <p><font >Louis Lobo </font>出生于瑞士的一个小镇,他从孩提时代起,就立志当一名科学家, 他在<u>桑格上的大学,在苏黎世上的医学院</u>,<br />于16<sup>th</sup> May, 2005大学毕业,他在年幼时就对分子式H<sub>2</sub>0颇感兴趣。</p>

    </body>

</html>

2、表格格式设置

<!DOCTYPE html>

<html>

    <head>

         <meta charset="UTF-8">

         <title></title>

         <style type="text/css">

             td{

             text-align: center;

             }

         </style>

    </head>

    <body>

         <table border="1" align="center" width="200" height="100">

             <caption align="up">表格测试</caption>

             <tr>

                 <td>1</td>

                 <td>2</td>

                 <td>3</td>

             </tr>

             <tr>

                 <td>4</td>

                 <td>5</td>

                 <td rowspan="2">6</td>

             </tr>

             <tr>

                  <td colspan="2">7</td>

             </tr>

         </table>

     </body>

</html>

3、表单设计

<!DOCTYPE html>

<html>

     <head>

         <meta charset="utf-8" />

         <title></title>

     </head>

     <body bgcolor=darkorange>

         <div>

         <form action="#" method="post">

             <table align="center" >

                 <tr>

                      <td align="center" colspan="2" bgcolor="gold">请完成以下表格</td>

                 </tr>

                 <tr>

                     <td ><label>姓名</label></td>

                     <td><input type="text" name="username"/>

                 </tr>

                 <tr>

                     <td><label>密码</label></td>

                     <td><input type="password" name="password" /> </td>

                 </tr>

                 <tr>

                     <td><label>&nbsp;</label></td>

                     <td><font size="2">请在此处填写姓名</font></td>

                 </tr>

                 <tr>

                     <td><label>&nbsp;</label></td>

                     <td><font size="2" color="red"><b>字符最长为四个汉字,或八个英文字母</b></font>                         </td>                  

                 </tr>

                 <tr>

                     <td><label>性别</label></td>

                     <td><input type="radio" name="gender"  >男

                     <input type="radio" name="gender"  >女

                     </td>

                 </tr>

                 <tr>

                     <td><label>电子邮件地址</label></td>

                     <td><input type="email" name="email" ></td>

                 </tr>

                 <tr>

                     <td><label>职业</label></td>

                     <td>

                         <select name="edu">

                         <option value="0">教育/研究</option>

                         <option value="0">医学/药物</option>

                         <option value="0">体育/健身</option>

                         </select>

                     </td>

                 <tr>

                     <td><label>个人爱好</label></td>

                     <td>

                         <input type="checkbox" name="hobby" >电脑网络

                         <input type="checkbox" name="hobby" >影视娱乐

                         <input type="checkbox" name="hobby" >棋游戏牌

                     </td>

                 </tr>

                 <tr>

                     <td><label>&nbsp;</label></td>

                     <td>

                         <input type="checkbox" name="hobby" >读书读报

                         <input type="checkbox" name="hobby" >美酒佳肴

                         <input type="checkbox" name="hobby" >绘画书法

                     </td>

                 </tr>

                 <tr>

                     <td><label>&nbsp;</label></td>

                     <td><font size="2">在此选择兴趣爱好,可选择一个以上的选项</font></td>

                 </tr>

                 <tr>

                     <td><label>留言内容</label></td>

                     <td><textarea cols="50" rows="6" ></textarea></td>

                 </tr>

                 <tr>

                     <td colspan="2"><font size="2" ><div class="text" >填写完成后,点击下面的提交按钮提交表单</div></font></td>

                 </tr>

                 <tr>

                     <td colspan="2"><div class="text" >

                         <input type="submit" value="提交"  />

                         <input type="reset" value="重置"  /></div>

                     </td>

                 </tr>

             </table>

         </form>

         </div>

     </body>

</html>

————————————————

版权声明:本文为博主「hbyhgdyxgs」的原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接及本声明。


0人推荐
随时随地看视频
慕课网APP