基于HTML和JS教你一步步搭建物联网系统

  还有复杂一点的复合型选择器,下面的是HTML文件

  

  

  

  

  

  

  

  

如果没有一个好的结构

 

  

 

  

那么以后可能就是这样子。。。。

 

  

 

  

  

  还有CSS文件

  .para{

  font-size: 22px;

  color:#f00;

  text-align: center;

  padding-left: 20px;

  }

  .para2{

  font-size:44px;

  color:#3ed;

  text-indent: 2em;

  padding-left: 2em;

  }

  p.para{

  color:#f0f;

  }

  div#content p {

  font-size:22px;

  }

  4.5 更有趣的CSS

  一个包含了para2以及para_bg的例子

  

 

  

那么以后可能就是这样子。。。。

 

  

 

  我们只是添加了一个黑色的背景

  .para_bg{

  background-color:#000;

  }

  重新改变后的网页变得比原来有趣了很多,所谓的继承与合并就是上面的例子。

  我们还可以用CSS3做出更多有趣的效果,而这些并不在我们的讨论范围里面,因为我们讨论的是be a geek。

  或许我们写的代码都是那么的简单,从HTML到Javascript,还有现在的CSS,只是总有一些核心的东西,而不是去考虑那些基础语法,基础的东西我们可以在实践的过程中一一发现。但是我们可能发现不了,或者在平时的使用中考虑不到一些有趣的用法或者说特殊的用法,这时候可以通过观察一些精致设计的代码中学习到。复杂的东西可以变得很简单,简单的东西也可以变得很复杂。

  5 无处不在的三剑客

  这时我们终于了解了我们的三剑客,他们也就这么可以结合到一起了,HTML+Javascript+CSS是这一切的基础。而我们用到的其他语言如PHP、Python、Ruby等等到最后都会变成上面的结果,当然还有Coffeescript之类的语言都是以此为基础,这才是我们需要的知识。

  5.1 Hello,Geek

  有了一些些基础之后,我们终于能试着去写一些程序了。也是时候去创建一个像样的东西,或许你在一些界面设计方面的书籍看过类似的东西,可能我写得也没有那些内容好,只是这些都是一些过程。过去我们都是一点点慢慢过来的,只是现在我们也是如此,技术上的一些东西,事实上大家都是知道的。就好比我们都觉得我们可以开个超市,但是如果让我们去开超市的话,我们并不一定能赚钱。

  学习编程的目的可能不在于我们能找到一份工作,那只是在编程之外的东西,虽然确实也是很确定的。但是除此之处,有些东西也是很重要的。

  过去总是不理解为什么会一些人会不厌其烦地去回答别人的问题,有时候可能会想是一种能力越大责任越大的感觉,但是有时候在写一些博客或者回答别人的问题的时候我们又重新思考了这些问题,又重新学习了这些技能。所以这里可能说的不是关于编程的东西而是一些编程以外的东西,关于学习或者学习以外的东西。

  5.2 从源码学习

  过去总觉得学了一种语言的语法便算是学会了一种语言,直到有一天接触运用该语言的项目的时候,虽然也会写上几行代码,但是却不像这种语言的风格。于是这也是这一篇的意义所在了:

  5.3 浏览器渲染过程

  基本的渲染引擎的过程如下图所示:

  

 

  flow

  解析HTML去构建DOM树

  渲染树形结构

  生成渲染的树形图布局

  绘制树形图

  对于Webkit浏览器来说,他的过程如下所示:

  

 

  webkitflow

  5.3.1 HTML

  写好HTML的一个要点在于读别人写的代码,这只是一方面,我们所说的HTML方面的内容可能不够多,原因有很多,很多东西都需要在实战中去解决。读万卷书和行万里路,分不清哪个有重要的意义,但是如果可以同时做好两个的话,成长会更快的。

  写好HTML应该会有下面的要点