初学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"> 用户名:</label></td>
<td><input type="text" id="username"></td>
</tr>
<tr>
<td align="right"><label for="password"> 密 码:</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">  性别:</td>
<td><input type="radio" name="sex">男<input type="radio" name="sex">女</td>
</tr>
<tr>
<td align="right">  爱好:</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">照 片:</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=" "还有就是上下命名要一致
第二种就是没有效果的。
另外 也是空格来的,和 一样,根据个人习惯使用