web应用UI开发基础笔记-html、css、javascript

来源：互联网发布：数据库decode函数编辑：程序博客网时间：2024/05/21 18:44

     对华丽而整洁的UI界面我甚是喜欢，但要让我自己做一个，何其难堪，做了一次之后不是对不齐格子，就是图片放置位置不对，调整来调整去，不得不放弃，还是让他邋遢难堪。大学的时候写个几个网页，静态的纯HTML，放几张图片，写点无聊的话，现在想起来很可笑。
    毕业后，一直在做java开发和运维工作，时代变迁得太快，看着周围的90后用的apple UI，太漂亮了。再看看facebook、校内等等，做互联网，没有UI你就不要玩。阿炜（中间件一把利剑）这几年做的RSMS、CASE是把UI吃透了，随手就可以创建一个漂亮的UI。而我，还是琢磨半天搞出个还过得去的FORM，而且还是用了别人的东西。
    web这东西要做得多，用得多，排版基本靠对html、css的熟练程度，靠javascript来增加客户端的动态效果（ajax是客户端主动请求server）。

第一层：理解xml文件的element、attribute、text
一个xml可以看成一棵树，每个节点node，这些父子node，有自己的attribute和text。
html结构是很简单的，它也就是一个xml文本，遵循这element、attribute、text三大块，元素、属性、文本，简单吗？不简单，不简单在attribute中，每一个元素的每一种attribute都会带来奇妙的效果，只有真正用多了才能熟练，毕业实习单位的一个美工对html+css堪称熟练至级，也是随手可以出个模块的人。
一个element本身有一个tag，表面它自己是什么，例如<html><body><table><input><form>，表明自己是一个完整的文档、文本主体、表格、输入框、表单等等，而attribute则表明他的属性和方法，例如<input type='text' name='username' onclick='alert('you clicked the button')'>，说到这里一个element越来越像java的对象了。
attributte可以定义element的外观，可以监听产生在element上的事件，并表示这个element。
text比较简单，只是在element之间的文本而已。
知道了基本结构后，下一步是游走在各个element之中，并对这个xml文档做增删改查的工作。xml提供了DOM接口专门用来操作xml文档。
getElementById, getElementsByName, getElementsByTagName等方法均是对xml文档的增删改查操作。DOM还提供了诸多接口，但直接使用DOM来操作xml文档显得比较笨重，并且还有浏览器兼容问题，特别是在操作style属性时。
因此第三方js toolkit给我们解决兼容性问题，并引入了简单性。比如jquery的$('p')选择了所有的<p>元素，相应的方法是document.getElementsByTagName('p')。

第二层：理解元素的含义，以及css
    UI要写得好，首先得对界面进行布局，这就涉及到对html元素的深入理解，比如div、table这些常用元素的属性细节。要对单个元素的外观进行控制，则必须使用css对其进行渲染，当然，也可以用它来布局。css其实是最终UI美化之道。
在对这些css、html有了比较深入的理解之后，下一步是学习每个element上可以发生的事件，比如focus、blus等等，结合事件响应可以产生许多动态效果。
    这里另外要提得一定是BOM，也就是浏览器对象，windows、document等都是主要的浏览器对象，它可以获得鼠标位置、浏览器位置、状态栏信息等等，在制造这些动画时常常要用到它们。
    jquery也为我们做了很多，但以上这些内容还是有必要理解得。
    继续，好了，你可能已经理解得够多了，往上走就是所谓的ajax，其实挺简单的，无非就是异步服务请求，不刷新页面而已。
CSS的语法
css的目的是任意的摆布html的每一个element，要做到这点，首先他要寻找（SELECTOR），其次是对这个element赋予规则（RULE），而规则的表述方式是对element的属性（attribute）给予一个值（value）。那么设计者对CSS语法的初衷如下：
SELECTOR { RULE }
RULE = ATTRIBUTE:VALUE;RULE
SELECTOR { RULE }RULE = ATTRIBUTE:VALUE;RULE
例如：
p {margin:0}p.top {margin:0}
选择符是区分大小写的，而规则对大小写不敏感，所以在css中统一使用小写。
html中查找元素的三个要素：元素名、类名、ID名。
第三层: 万物归宗
上面说来说去都是操作性东东，到了这一层就考自己了，只有在上面的东西无限熟练之后，才可任由自己想象力来制造各种各样的界面。

未完成待续

推荐书籍：
《javascript高级程序设计》完全可以作为javascript入门书籍，内容比较详实，如果仅仅使用jquery，而不明白其中道理，推荐看看它。
《html xhtml css基础教程》 html、css超级入门书籍，上手容易。
《jquery基础教程》非常简单易懂的jquery入门书籍。
《瞬间之美-web界面如何让用户心动》
《web开发人员参考大全》正如书名，这本书不是用来读得，而是遇到问题时参考参考的。