初学web前端HTML,如何让页面看起来整齐

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<h3>用户注册页面</h3>
<table cellpadding="2">
  <tr>
    <td align="right"><label for="username">&emsp;用户名:</label></td>
    <td><input type="text" id="username"></td>
  </tr>
  <tr>
    <td align="right"><label for="password">&emsp;密&emsp;码:</label></td>
    <td><input type="password" id="password"></td>
  </tr>
  <tr>
    <td align="right"><label for="password">确认密码:</label></td>
    <td><input type="password" id="password"></td>
  </tr>
  <tr>
    <td align="right">&emsp;&emsp;性别:</td>
    <td><input type="radio" name="sex">男<input type="radio" name="sex">女</td>
  </tr>
  <tr>
    <td align="right">&emsp;&emsp;爱好:</td>
    <td>

      <input type="checkbox" name="hobby"1>听音乐

      <input type="checkbox" name="hobby"2>看电影

      <input type="checkbox" name="hobby"3>玩游戏

    </td>
  </tr>
  <tr>
    <td align="right">你所在的城市:</td>
    <td>
      <select>
       <option >广州市</option>
      </select>
    </td>
  </tr>
  <tr>
    <td align="right">照&emsp;片:</td>
    <td>
      <input type="text" name="mypic">
      <input type="button" name="btn" value="浏览...">
    </td>
  </tr>
  <tr>
    <td align="right">个人简介:</td>
    <td>
      <textarea name="desc" cols="60" rows="7"></textarea>
    </td>
  </tr>

  <tr>
    <td></td>
    <td>
      <input type="submit" name="sub" value="提交">
      <input type="reset" name="res" value="重写">

    </td>
  </tr>


</table>
</body>
</html>

如果不嵌套一个表格,展示出来的效果就会很乱,你会发现各种对不齐,显得页面不美观,上面是已经用table嵌套好的。

<label for="username">用户名:</label>

<input type="text" id="username">

/////////////

用户名:<input type="text" name="username">

这两种方法看起来的效果是一样的,但是用户体验不一样

第一种,单击用户名是有效果的,但是要注意用id=" ",不要用到name=" "还有就是上下命名要一致

第二种就是没有效果的。

另外&emsp;也是空格来的,和&nbsp;一样,根据个人习惯使用

posted @ 2016-08-03 11:42  车水码龙  阅读(755)  评论(0编辑  收藏  举报