初学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;一样,根据个人习惯使用

转载于:https://www.cnblogs.com/yek9520/p/5732228.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值