戏说HTML5
如果有非技术人员问你,HTML5是什么,你会怎么回答?
新的HTML规范。。。
给浏览器提供了牛逼能力,干以前不能干的事。。。(确切地说应该是给浏览器规定了许多新的接口标准,要求浏览器实现牛逼的功能。。。 这里感谢红枫一叶)
给浏览器暴露了许多新的接口。。。
加了很多新的效果。。。
问的人其实并不明白他想问的真正问题,回答的人貌似明白,但又好像少了点什么。牛逼的能力、新的接口、炫酷的效果,首先回答的人自己就是晕晕乎乎。什么是HTML、什么是CSS、什么是DOM、什么是JavaScript,大部分的前端开发每天都在用这些,但很少会有人去思考一下他们之间的关系。
首先,HTML的全称是超文本标记语言,是一种标记形式的计算机语言。将这种标记语言给专门的解析器,就能够解析出一定的界面效果。浏览器就是专门解析这种标记语言的解析器。我们说他最终的效果是在屏幕上展示出特定的界面,那么浏览器肯定要把一个个的标记转换成内部的一种数据结构,这种数据结构便是DOM元素。比如,一个<a>标签在浏览器内部的世界中就是一个HTMLAnchorElement类型的一个实例。
一个HTML文件就好比用超文本标记语言写的一篇文章,文章通常是有结构的,在浏览器眼里它就是DOM。DOM描述了一系列层次化的节点树。(但这时候的DOM还是存在于浏览器内部是C++语言编写的)
随着历史的发展,当人们不在满足简单的显示文本,对于某些文本需要特殊强调或者给添加特殊格式的需求,慢慢的冒了出来。面对人们需要控制显示效果的需求,最先想到的也最简单的方式就是加标记。加一些样式控制的标记。这时候就出现了像<font>、<center>这种样式控制的标记。但是这样一来,所有的标记就会分为两大类:一种是说我是什么,一种是说我怎么显示。这还不是大问题,标记简单,但是浏览器要解析标记可就不那么简单了。想一想,这样干的话DOM也就要分成两大类,一类属于描述元素的DOM节点,一类属于描述显示效果的DOM节点。一个DOM节点可能代表一个元素,也可能是代表一种显示效果。怎么看都觉得别扭呀。
最后人们决定废弃样式标签,给元素标签添加一个style特性,style特性控制元素的样式(最初的样式声明语法肯定很简单)。原来的样式标签的特性,现在变成了样式特性的语法,样式标记变成了样式特性。这样逻辑上就清晰多了。那么问题来了:
- 一篇文章如果修辞过多,必然会引起读者的反感。如果把元素和显示效果都放在一个文件中,必然不利于阅读。
- 如果有10个元素都需要一个效果,是不是要把一个style重复写十遍呢
- 父元素的设置效果对子元素有没有影响,让不让拼爹
- 。。。。。。。。。
类似的问题肯定有很多,所以出来了CSS,层叠样式表,带来了css规则、css选择器、css声明、css属性等,这样以来就解决了以上痛点。标记语言这层解决了,但是浏览器就不能干坐着玩耍了,必然得提供支持。所以浏览器来解析一个静态html文件时,遍历整个html文档生成DOM树,当所有样式资源加载完毕后,浏览器开始构建呈现树。呈现树就是根据一系列css声明,经历了层叠之后,来确定一个个个DOM元素应该怎么绘制。这时候其实页面上还没有显示任何界面,渲染树也是浏览器内存里面的一种数据结构。渲染树完成之后,开始进行布局,这就好比已经知道一个矩形的宽高,现在要在画布量一量该画在哪,具体占多大地方。这个过程完了之后就是绘制的过程,然后我们便有了我们看到的显示界面了。
给标记加点效果的问题解决了,历史的车轮又开始前进了。慢慢的人们不再满足简单的显示效果,人们希望来点交互。那个时候写HTML的大部分并不懂软件开发,开玩笑嘛,我一写活动页的你让我用C++?C++干这事的确是高射炮打蚊子——大材小用。那正规军不屑干的事就交给游击队吧,这时候网景公司开发出了JavaScript语言,那时候的JavaScript根本没有现在这么火,一土鳖脚本语言,哪像现在这么牛逼哄哄统一宇宙。
JavaScript本是运行在浏览器的语言,HTML文本是静态的,不可能让JavaScript修改静态文件,但可以跟浏览器内部打交道。可是这个时候的DOM并不是今天的DOM,他们是C++对象,要么把JavaScript转换成C++指令操作这些C++对象,要么把这些C++对象包装成JavaScript原生对象。历史选择了后者,这时候也就标志着现代DOM的正式诞生。不过历史有时候会出现倒退,历史上总会出现几个奇葩,比如IE,IE奇葩他全家,包括Edge!
马克思是个江湖骗子,但恩格斯是个好同志。自然辩证法与历史唯物主义是好东西。从历史的角度我们可以看到。CSS、DOM、JavaScript的出现于发展最终的源头都在HTML,超文本标记语言。人们对web的需求最终都汇集在HTML上。所以只要历史产生新的需求,最终的变化都首先发生在HTML规范上。
当交互性不能在满足人们需求时,web迎来了新的需求:webapp。要迎合新的需求,首先要改变的就是HTML规范,这个时候已有的HTML4.0,已经无法满足人们日益增长的需求,所以HTML5迎着历史的需求,经过八年的艰苦努力,终于在2014年正式定稿!HTML5肯定是要加入新标签,然对于传统HTML而言,HTML5算是一个叛逆。所有之前的版本对于JavaScript接口的描述都不过三言两语,主要篇幅都用于定义标记,与JavaScript相关内容一概交由DOM规范去定义。而HTML5规范,则围绕着如何使用新增标记定义了大量JavaScript API(所以其中有一些API是与DOM重叠,定义了浏览器应该支持的DOM扩展,由此可以看到HTML5也必定不是HTML的最终版)。
后记—— 本文只是一个旁观者以线性的方式来翻阅HTML的发展史,但历史更像是晴空上突然的晴天霹雳,一声过后,有人哀嚎遍野,有人高歌入云。以此纪念曾红极一时的Silverlight、Flex,以此纪念广大一线开发者活到老学到老的不懈精神、曾经耗费的精力、曾经逝去的青春。
戏说HTML5的更多相关文章
- 戏说HTML5(转)
如果有非技术人员问你,HTML5是什么,你会怎么回答? 新的HTML规范... 给浏览器提供了牛逼能力,干以前不能干的事...(确切地说应该是给浏览器规定了许多新的接口标准,要求浏览器实现牛逼的功能. ...
- github上最全的资源教程-前端涉及的所有知识体系
前面分享了前端入门资源汇总,今天分享下前端所有的知识体系. 个人站长对个人综合素质要求还是比较高的,要想打造多拉斯自媒体网站,不花点心血是很难成功的,学习前端是必不可少的一个环节, 当然你不一定要成为 ...
- github上最全的资源教程-前端涉及的所有知识体系【转】
github上最全的资源教程-前端涉及的所有知识体系[转自:蓝猫的博客] 综合类 综合类 地址 前端知识体系 http://www.cnblogs.com/sb19871023/p/3894452.h ...
- 使用HTML5开发Kinect体感游戏
一.简介 我们要做的是怎样一款游戏? 在前不久成都TGC2016展会上,我们开发了一款<火影忍者手游>的体感游戏,主要模拟手游章节<九尾袭来 >,用户化身四代,与九尾进行对决, ...
- 读书笔记:《HTML5开发手册》--HTML5新的结构元素
读书笔记:<HTML5开发手册> (HTML5 Developer's CookBook) 虽然从事前端开发已有很长一段时间,对HTML5标签也有使用,但在语义化上面理解还不够清晰.之前在 ...
- HTML5 Boilerplate - 让页面有个好的开始
最近看到了HTML5 Boilerplate模版,系统的学习与了解了一下.在各种CSS库.JS框架层出不穷的今天,能看到这么好的HTML模版,感觉甚爽.写篇博客,推荐给大家使用. 一:HTML5 ...
- nw.js桌面软件开发系列 第0.1节 HTML5和桌面软件开发的碰撞
第0.1节 HTML5和桌面软件开发的碰撞 当我们谈论桌面软件开发技术的时候,你会想到什么?如果不对技术本身进行更为深入的探讨,在我的世界里,有这么多技术概念可以被罗列出来(请原谅我本质上是一个Win ...
- Web大前端时代之:HTML5+CSS3入门系列
准备来一波新技术,待续.... Old: 联系源码:https://github.com/dunitian/LoTHTML5 文档下载:https://github.com/dunitian/LoTD ...
- 07. Web大前端时代之:HTML5+CSS3入门系列~H5 地理位置
Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 源码:https://github.com/duniti ...
随机推荐
- 试试SQLSERVER2014的内存优化表
试试SQLSERVER2014的内存优化表 SQL Server 2014中的内存引擎(代号为Hekaton)将OLTP提升到了新的高度. 现在,存储引擎已整合进当前的数据库管理系统,而使用先进内存技 ...
- [ 高并发]Java高并发编程系列第二篇--线程同步
高并发,听起来高大上的一个词汇,在身处于互联网潮的社会大趋势下,高并发赋予了更多的传奇色彩.首先,我们可以看到很多招聘中,会提到有高并发项目者优先.高并发,意味着,你的前雇主,有很大的业务层面的需求, ...
- DailyTick 开发实录 —— 开始
2009 年我读了李笑来老师的<把时间当朋友>,知识了柳比歇夫的时间记录法.当时激动坏了,马上动手实践起来.一开始的时候,是用一个小本子,走到哪儿都带着.完成一件事,就记录一下花费的时间. ...
- jquery.uploadify文件上传组件
1.jquery.uploadify简介 在ASP.NET中上传的控件有很多,比如.NET自带的FileUpload,以及SWFUpload,Uploadify等等,尤其后面两个控件的用户体验比较好, ...
- C++的内存泄漏检测
C++大量的手动分配.回收内存是存在风险的,也许一个函数中一小块内存泄漏被重复放大之后,最后掏空内存. 这里介绍一种在debug模式下测试内存泄漏的方法. 首先在文件的开头以确定的顺序写下这段代码: ...
- 在Asp.Net中操作PDF – iTextSharp - 使用表格
使用Asp.Net生成PDF最常用的元素应该是表格,表格可以帮助比如订单或者发票类型的文档更加格式化和美观.本篇文章并不会深入探讨表格,仅仅是提供一个使用iTextSharp生成表格的方法介绍 使用i ...
- 【干货分享】流程DEMO-资产请购单
流程名: 资产请购 业务描述: 流程发起时,会检查预算,如果预算不够,流程必须经过总裁审批,如果预算够用,将发起流程,同时占用相应金额的预算,但撤销流程会释放相应金额的预算. 流程相关文件: 流程 ...
- 微信小程序服务范围重大更新
12.29日,小程序服务范围做了重大更新,增对富媒体和工具类型的小程序,增加了很多细分领域 富媒体:增加资讯,FM电台,有声读物等,媒体平台可上小程序了 工具:信息查询,网络代理,健康,企业管理等 , ...
- 基于SOA架构的TDD测试驱动开发模式
以需求用例为基,Case&Coding两条线并行,服务(M)&消费(VC)分离,单元.接口.功能.集成四层质量管理,自动化集成.测试.交付全程支持. 3个大阶段(需求分析阶段.研发准备 ...
- linux之查看系统命令
cpu信息 1.查看逻辑cpu核数 # cat /proc/cpuinfo| grep "processor"| wc -l 2.查看物理cpu个数 # cat /proc/cpu ...