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>

运行结果:

原文地址:https://www.cnblogs.com/mary-chrisima/p/6940102.html