今天我们来系统的、全面的 了解一下前端的一些技术，将有助于我们写出 更优秀的 产品 出来。

什么是HTML？

HTML 是用来描写叙述网页的一种语言。

HTML 包括一些根节点。子节点，文本节点。属性节点。组成，

它通过一系列提前定义标签来描写叙述网页结构。如： <title>This is title</title> 。这个表明该网页的标题是 This is title。

什么是CSS？

CSS 指层叠样式表 (Cascading Style Sheets)，它描写叙述浏览器显示怎样显示html元素。

看以下代码，浏览器 将会 以 20px绿色字体   显示 p标签中的文本节点

p {

            font-size: 20px;

            color: green;

 }

这些html元素 、css样式 是由W3C组织制定规范。

然后由不同浏览器实现，全部你会看到 同一个网页 页面，通过不同的 浏览器查看。显示会有一些区别。

以下图片是说明 浏览器 怎样解析 html 和 css的:

html 就是一个文本文件，

1、浏览器通过http 请求 server，把html文档 下载下来

2、把html解析成dom树。同一时候提供dom接口，方便其它编程语言操作dom树，如：javascript

3、下载并，解析css样式规则

4、把样式规则依附在html元素上（以css选择器作为依赖）

5、渲染dom树

6、显示

为什么说html，css。javascript 是 跨平台的？

html，css，javascript 事实上 就是 一个文本文件，然后通过浏览器 不同的引擎 去 解析对应的 代码 来 运行，

所以 仅仅有 实现某个 平台 下 的 浏览器即可了 ，就能够在 这个平台上 使用 这个 Web Project，听起来 是不是 认为 顿悟了。

而java 跨平台 的原理 则是 ，把 java源文件 翻译成 与 平台无关的class文件，然后通过 JVM 去 载入 运行。

值得一提的是 JVM 也是 一个 规范， 使用广泛的JVM 是 Java HotSpot ，假设你能力够强的话，能够基于openjdk

来 开发 自己的jdk ，来实现jdk级别的 优化。

如此分析，是不是认为HTML、CSS、Javascript 非常可爱。它事实上就是一个规范，

如今HTML5 、CSS3 ,EcmaScript6 提出非常多 新的 特性。概论，假设一旦 浏览器得到了更好的 支持，那就移动Web开发 将成为 主流， 而 android，ios ，这类原生的程序 将会慢慢 的降低。

想象一下，通过浏览器。就能够实现全部的请求。比方 聊天 ，看视频。上网方式 将会变得很 优美，不是么。

好吧，接下来 说一下 node-webkit，我的理解是 它是一个nodejs引擎+ webkit 引擎。

通过nodejs引擎 解析 js 。而通过 webkit
引擎 解析 html 、 css ，所以在网页中能够嵌入 nodejs 的代码 。

有些html 、 css、js的经验的话。 会非常平滑的过渡，来开发一些东西。

那我们来 掀起node-webkit的盖头来 吧。

打开nw.exe 来看看

乍一看 ，就是 谷歌浏览器啊，好吧，来点干货吧。

index.html

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title>what's node-webkit?</title>

    <style>

        h1 {

            color: red;

        }

        p {

            font-size: 20px;

            color: green;

        }

    </style>

    <script>

        console.log('当你看到这段文字，说明这段代码被nodejs引擎。解释，运行了');

        console.log(this);

    </script>

</head>

<body>

<h1>This is a nw app.</h1>

<p>它是一个nodejs引擎+ webkit 引擎 </p>

</body>

</html>

package.json

{

    "name": "nw-frist",

    "version": "0.0.1",

    "main": "index.html"

}

打包成zip格式的文件，然后执行 nw.exe nw-first.zip 来执行它

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvem91dG9uZ3l1YW4=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="">

第一图 是用 nw 去运行 ，第二图是在Google Chrome 中查看。

能够看出 。效果 是一样的。

好吧，来加入点不一样的。

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title>what's node-webkit?

</title>

    <style>

        h1 {

            color: red;

        }

        p {

            font-size: 20px;

            color: green;

        }

    </style>

    <script>

        console.log('当你看到这段文字。说明这段代码被nodejs引擎，解释。运行了');

        console.log('this : ', this);

        console.log('global : ', global);

    </script>

</head>

<body>

<h1>This is a nw app.</h1>

<p>它是一个nodejs引擎+ webkit 引擎 </p>

</body>

</html>

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvem91dG9uZ3l1YW4=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="">

能够看到我们输出 global 对象的信息，

这意味着node-webkit  javascript 执行环境 是 nodejs，

那 我们就能够在 html script标签中 使用 nodejs 进行 编程，包含，读取本地文件，进行网络请求。訪问本地硬件设备。。。等等 ，这是不是 意味着能够用来 开发 本地程序 ？答案 当然是 true ，并且能够 跨平台 ，就如 上面分析的一样。我们能够使用html5 、css3 开发 很优美，交互更棒的 本地 web app ，有大量的 nodejs 包 和 js lib 使用。
试想一下 用 c++ ， vb 。Python 开发一个 美丽的本地程序。要自己定义 一些 组件， 那是多么 麻烦。

有时间我们将通过  node-webkit。写一个 文件浏览器，来实践一下 ，这些技术是 怎么 结合 的？

以上 纯属个人 见解。

又一次认识HTML，CSS，Javascript 之node-webkit 初探的更多相关文章

  1. html css javascript 加载的顺序

    html /css /javascript 这三者的加载顺序影响整个页面的加载速度.而加载速度的快慢直接影响pv(访问量),而且会影响经济收入.在大网站中,可能打开速度快一秒,一年能多带来上亿的收入. ...

  2. Sublime Text插件：HTML+CSS+JAVASCRIPT+JSON快速格式化[转]

    今天在github上乱逛,无意间找到victorporof分享的htmlpretty插件,特做推荐: 先看看他是怎么描述htmlpretty的: This is a Sublime Text 2 an ...

  3. html+css+javascript实现列表循环滚动示例代码

    使用html+css+javascript实现列表循环滚动,设置时间定时,在规定的时间内替换前一个节点的内容,具体示例如下,感兴趣的朋友可以参考下 说明:设置时间定时,在规定的时间内替换前一个节点的内 ...

  4. HTML+CSS+JAVASCRIPT 总结

    1. HTML 1: <!doctype html> 2: <!-- This is a test html for html, css, javascript --> 3: ...

  5. Umbraco（3） - CSS & Javascript（翻译文档）

    原文地址:http://www.ncloud.hk/%E6%8A%80%E6%9C%AF%E5%88%86%E4%BA%AB/umbraco3css-javascript/ CSS & Jav ...

  6. 原创的基于HTML/CSS/JavaScript的层级目录树

    之前参加过一些基于HTML/CSS/JavaScript的项目,当在页面中需要生成一颗目录树时,总是首先想着网上有没有现成的生成树的源代码,比如dtree.zthee,或者使用一些javascript ...

  7. MiniCodeEditor：只有168字节的在线Html/CSS/JavaScript编辑器

    博客搬到了fresky.github.io - Dawei XU,请各位看官挪步.最新的一篇是:MiniCodeEditor:只有168字节的在线Html/CSS/JavaScript编辑器.

  8. CSS+Javascript的那些框架

    CSS CSS 制作框架 SASS http://www.oschina.net/p/sass Blueprint  http://www.oschina.net/p/blueprintcss Ela ...

  9. 3 Ways to Preload Images with CSS, JavaScript, or Ajax---reference

    Preloading images is a great way to improve the user experience. When images are preloaded in the br ...

  10. Brackets - 强大免费的开源跨平台Web前端开发工具IDE (HTML/CSS/Javascript代码编辑器)

    Brackets 是一个免费.开源且跨平台的 HTML/CSS/JavaScript 前端 WEB 集成开发环境 (IDE工具).该项目由 Adobe 创建和维护,根据MIT许可证发布,支持 Wind ...

随机推荐

  1. SynchronousQueue、LinkedBlockingQueue、ArrayBlockingQueue性能测试

    SynchronousQueue.LinkedBlockingQueue.ArrayBlockingQueue性能测试 JDK6对SynchronousQueue做了性能优化,避免对竞争资源加锁,所以 ...

  2. 优秀Java程序员必须了解的GC工作原理（转）

    一个优秀的Java程序员必须了解GC(Garbage Collection 垃圾收集)的工作原理.如何优化GC的性能.如何与GC进行有限的交互,因为有一些应用程序对性能要求较高,例如嵌入式系统.实时系 ...

  3. Django写的投票系统1（转）

    当然主要是从django的帮助文档里面来的,权当是翻译吧 这个投票系统的主要功能有 1.一个前台页面,可以让用户来投票 2.一个管理员页面,可以用来添加.修改.删除投票 首页第一步要确定你已经安装了D ...

  4. java參数传递方式问题

    java的參数传递方式到底是值传递还是引用传递,这一直是一个争论不休的问题,一直以来没有形成统一意见. 在这里,我也仅仅是说一说个人见解,不保证是对的,全当是抛砖引玉. 首先我的观点是java採用的是 ...

  5. ecshop 浏览历史样式的修改

    ecshop的浏览历史的样式,例如我修改的是只让浏览历史显示浏览历史的商品名称 而不显示浏览历史的商品的价格和图片 首先找到要修改 的文件includes\lib_insert.php 找到函数fun ...

  6. 动态接口服务 webservice

    private void GetDll() { WebClient client = new WebClient(); string url = "http://xxxx/services/ ...

  7. 从零开始学Xamarin.Forms(五) 技巧

    原文:从零开始学Xamarin.Forms(五) 技巧 由于HTML5规范于2014年10月终于定稿,公司.net开发人员较少,国内外已有了较为成熟的UI框架.手机软件硬件的快速发展等等原因,所以我就 ...

  8. 状态压缩dp（hdu2167，poj2411）

    hdu2167 http://acm.hdu.edu.cn/showproblem.php?pid=2167 给定一个N*N的板子,里面有N*N个数字,选中一些数字,使得和最大 要求任意两个选中的数字 ...

  9. WebService(2)-XML系列之Java和Xml之间相互转换

    源代码下载:链接:http://pan.baidu.com/s/1ntL1a7R password: rwp1 本文主要讲述:使用jaxb完毕对象和xml之间的转换 TestJava2xml.java ...

  10. Ubuntu下安装vmware 9.0 + 注册码

    先附上一些注册码到时使用: NA0UF-DUH00-QZHM0-MU17K-CC824 4F469-F024Q-CZ8R9-DL1N0-13C6W HF261-0HL40-FZX21-F9AQ2-0C ...