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

时间: 2024-11-13 06:47:19

初学web前端HTML,如何让页面看起来整齐的相关文章

初学web前端必读的基本书籍推荐分享

零基础开始学习web前端技术,那么没有好的书籍你怎么开始学习呢?作为一个从零开始学习web前端技术的人给大家推荐基本不错的书籍,希望对于刚刚想进入web前端的人有一定的帮助,以下就是给初学web前端最近书籍推荐. 一.<Web前端开发最佳实践> 这本书是前端开发领域的经典之作,是一本扎实前端基本功,规范我们前端代码的实践性书籍.本书主要讲解了HTML.CSS.Javascript以及移动端开发的最佳实践方案,能够对缺乏良好指导的开发者产生很大的帮助.通过阅读本书我们可以掌握如何编写高可读性.高

web前端开发怎么样学习?看这份web前端学习路线

前端开发是创建Web页面或app等前端界面呈现给用户的过程.前端开发通过HTML,CSS及JavaScript以及衍生出来的各种技术.框架.解决方案,来实现互联网产品的用户界面交互.它从网页制作演变而来,名称上有很明显的时代特征.在互联网的演化进程中,网页制作是Web1.0时代的产物,早期网站主要内容都是静态,以图片和文字为主,用户使用网站的行为也以浏览为主.随着互联网技术的发展和HTML5.CSS3的应用,现代网页更加美观,交互效果显著,功能更加强大. 随着时代的发展,现在从事IT方向的人有很

初学Web前端开发,学会这几个必杀技,薪资爆表!

曾经的我怎么也想不到,web前端开领域能发展到今天的样子,但是对于很多想转行学习的初学者,你首先需要先掌握必备的基础知识,以及独立学习及解决问题的技能.下面我们来详谈一下!坐下来详谈 地基-基础:HTML.CSS 和 JavaScript-----网页三剑客 在一开始一个初学者都是蒙圈的状态,不知道自己该学什么是正常的,首先你需要先了解 HTML.CSS 以及 JavaScript 的基本语法,这好比我们盖房子打下的地基,地基有多么牢靠,房子就能盖多高,地基打好了,房子就会变成楼房,学习HTML

Web前端代码规范与页面布局

一.    规范目的: 为提高工作效率,便于后台人员添加功能及前端后期优化维护,输出高质量的文档,在网站建设中,使结构更加清晰,代码简明有序,有一个更好的前端架构,有利于SEO优化. 二.    规范基本准则: 符合web标准,使用具有语义的标签,使结构.表现.行为分离,兼容性优良,页面性能优化,代码简洁.明了.有序,尽可能的减少服务器的负载,保证最快的解析速度. 三. 文件规范: html.css.js.images文件均归档至约定的目录中. 1.    html (1)编码:所有编码均采用x

10款web前端基于jquery的页面代码

1.基于jquery实现的带按钮的图片左右滚动切换 jquery带按钮的图片滚动切换代码是一款jquery制作带按钮的图片左右滚动切换特效代码 在线演示 源码下载 2.基于jQuery的图片上下左右无缝连续循环滚动 imgscroll插件是一款支持图片焦点滚动(支持渐变和滚动),图片连续无缝循环滚动的js库,依赖于jQuery图片无缝连续循环滚动 支持上下左右的滚动. 在线演示 源码下载 3.jquery实现的fixed固定层时间轴动态效果 jquery实现的fixed固定层时间轴动态效果源码,

【Web前端笔记】浏览器页面白边问题,css修改默认边距

html页面出现白边,这个白边是由不同浏览器body默认的外边距造成的. 只要用css重写页面边距即可: 1 body { 2 margin:0px; 3 } 4 5 #container { 6 position:relative; 7 margin-right:auto; 8 margin-lef:auto; 9 10 }

独家分享——大牛教你如何学习Web前端开发

2014-12-18 14:35:42   引语 自从2008年接触网站开发以来到现在已经有六个年头了,今天偶然整理电脑资料看到当时为参加系里面一个比赛而做的第一个网站时,勾起了在这网站开发道路上的一串串回忆,成功与喜悦.烦恼与纠结都历历在目,感慨颇多.在此与大家分享,希望对初学Web前端的各位童鞋来说有所帮助.欢迎各位吐槽.拍砖. 先从大家学习上的一个误区开始谈起. Web前端的学习误区 网页制作是计算机专业同学在大学期间都会接触到的一门课程,而学习网页制作所用的第一个集成开发环境(IDE)想

web前端篇(1)——了解什么是前端,以及与后端的关系

简介 1.什么是web前端 说这个之前,我们先了解web前端工程师是干什么的,百度百科的解释: Web前端开发工程师,主要职责是利用(X)HTML/CSS/JavaScript/Flash等各种Web技术进行客户端产品的开发.完成客户端程序(也就是浏览器端)的开发,开发JavaScript以及Flash模块,同时结合后台开发技术模拟整体效果,进行丰富互联网的Web开发,致力于通过技术改善用户体验 得知这个之后,那么什么是web前端相信各位也就有个大概了解了,就是浏览器和app界面的开发嘛. we

给web前端初学者的一些有效率建议,突破就业难题123点!

因为IT互联网发展的非常迅速,而web前端这块很火,目前工资水平给的很高,在市场上也是非常的稀缺人才,现在各个行业转行做web前端的很多,今天给大家一些建议,希望新手少走点弯路吧! 建议一:有一个比较适合自己系统的学习方案,系统的学习教程,很多人在开始学习web前端的时候都不知道如何规划,也不知道web前端应该学什么内容.先把web前端学了一遍之后才是真正的入门,然后就是不断的练习,不断的巩固,为之后的工作打下坚实的基础. 建议二:我看很多新手刚学web前端就看各种书籍,我一个做了5年web前端