1.html5的起源,历史背景……

  按照一般的套路,我这里应该对html5的起源和发展历史,其优越性等大书特书一番。但既然你有意识地专门去找类似的文章,说明你早有相应的认识,就算没有,类似的东西网上也一大堆。我这里就不写这些没有营养的东西了。所以这里略过了N个字…………

2.html5是什么?

  按照比较正式的说法,html系列的语言都被称为超文本标记语言,那究竟什么叫做超文本标记语言呢?

  首先,我们要建立一个概念,其实html页面就是一个文档,这和你打开一个word文档的行为相差无几。下面是一些实验: 

文本
<span>文本</span>
<scolia>文本</scolia>
<scolia abcd=123>文本</scolia>

  以上的代码在浏览器中的访问效果是这样的:

  

  首先,他能够正常访问,并没有报错。但留心我的html代码的第一行,它并没有任何的标签,单纯就是两个字符,这里我们就可以得出第一个结论:

    1.在html文档中文字就算没有标签包裹的,也能够正常显示。

  再看看第三行,很明显html中不可能认识<scolia>这个标签,因为这是我瞎写的,这里可以得出第二个结论:

    2.在html文档中使用不被识别的标签,页面也能正常显示。

  第四行,我在一个不被识别的标签里也写了一个不被识别的属性,但依然能正常显示,这里可以得出第三个结论:

    3.在html文档中的标签中设置一个不被识别的属性,页面也能够正常显示。

  最后再看第二行,<span>是html文档内置的一个标签,也就是说它是可识别的,但是为什么他看起来和其他乱写的效果是一样的呢?

  为了说明这个问题,我有继续做了下面的实验:

<em>文本</em>
<strong>文本</strong>

  其在浏览器显示的效果:

  

  这次的效果很明显,一个倾斜,一个加粗。<em>、<strong>和<span>都是内置的标签,为什么在效果上差别那么大呢?

  如果你之前有过学过一点脚本语言的话,下面的解释就很好懂了,因为它的行为和脚本语言其实还是很类似的。

  首先,我们能看到的内容其实就是一个文档,文档本身可以不包含任何标签,就像我们在word文档中看到的可以是单纯的文字一样。但是就像我们可以在word文档编辑文字的倾向和加粗一样,我们的文档查看器(也就是浏览器)也能做到。但是和word中使用鼠标和快捷键的编辑方式不同,html文档的编辑是通过标签的形式,就像上面实现的文字倾斜和加粗效果一样。

  若按照脚本语言的角度来讲,网页文档其实就是源码文件,而我们的浏览器就是脚本解释器,浏览器通过解释特定的标签而实现相应的功能。但和真正的脚本语言编程不同,浏览器并不强制要求所有文字都要标签包裹,也就是一个文件中可以只有部分的代码符合浏览器的语法,而浏览器也只解释那部分的代码,对于没有标签的或者是标签不识别的,都会忽略,当成普通的文字来显示。

  <em>、<strong>和<span>都是内置的标签,浏览器对这些进行标签解释以后(这个解释的过程也可以说是渲染),为其加上不同的效果。当然<em>、<strong>已经内置倾斜和加粗的效果,而<span>并没有内置任何效果,所以就造成了以上显示的区别。如果有一天浏览器为<span>标签也加上效果的话,或者为我之前写的<scolia>标签加上效果。那么,当我使用相应的标签的时候,就会有相应的效果。

  其实作为前端最大的痛苦不是如果构建代码,而是如何去兼容各种浏览器。我这里也用脚本语言的思想去解释为什么要兼容。

  首先,传统的脚本语言的解释器只有官方出的一种,最多也就是版本上的区别,但一定你选用了哪个版本,然后用这个版本的解释器是构建代码,那么任何时候,相同的代码,解释器解释后就结果就只有一种。

  但是,html语言的解释器是浏览器,而浏览器却不止一种,各各公司所出的浏览器在解释上有一定的差异,同一个公司的不同版本也有差异。而最大的困难是你能要求自己只使用某个解释器去解释代码,而不能要求你的用户都使用哪个浏览器去浏览你的网页。这样造成的结果就是同样的代码,在不同的浏览器就会有不同的效果。效果不同还好说,万一某个浏览器不支持某个语法,对html语言来说那段文字就会被当成普通文字来对待了,这也就是为什么要做兼容。

  其实我们也可以使用脚本语言的思想去理解css和JavaScript,如果你之前并不知道什么是脚本语言,那很抱歉可能这篇文章并没有办法帮助你理解。此时,你可能需要通过别的方式来自己理解了,只有自己正在理解的东西才是真正属于自己的。

  如果你想找视频还学习html5或者其他前端语言的话,你可以去www.yc60.com

  反正是免费的,别说我是卖广告的。

  我的前端知识也是那里学来的,博客里的很多内容也是摘自那里的课件,外加自己的部分理解。这里写在这里就当作是参考文献的声明吧。

1.html5究竟是什么的更多相关文章

  1. 使用Visual Studio 2012 开发 Html5 应用

    Visual Studio 一直以来是开发微软旗下应用的利器,只要是开发微软相关的应用无论是Windows程序,WPF,Asp.Net,WinRT Surface,WindowsPhone 等微软旗下 ...

  2. 让所有浏览器支持HTML5 video视频标签

    HTML5究竟需要多少种视频编码格式 当前,video 元素支持三种视频格式:Ogg = 带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件MPEG4 = 带有 H.264 视频编 ...

  3. HTML5和CSS3的能量究竟是怎样的?

    Web设计师可以使用HTML4和CSS2.1完成一些很酷的东西.我们可以在不使用陈旧的基于table布局的基础上完成文档逻辑结构并创建内容丰富的网站.我们可以在不使用内联<font>和&l ...

  4. html5非常火,他究竟与html4有何差别?

    HTML5是HTML标准的下一个版本号.越来越多的程序猿開始HTML5来构建站点.假设你同一时候使用HTML4和HTML5的话 ,你会发现用HTML5从头构建.比从HTML4迁移到HTML5要方便非常 ...

  5. HTML5 Boilerplate - 让页面有个好的开始

    最近看到了HTML5 Boilerplate模版,系统的学习与了解了一下.在各种CSS库.JS框架层出不穷的今天,能看到这么好的HTML模版,感觉甚爽.写篇博客,推荐给大家使用.   一:HTML5 ...

  6. Demo源码放送:打通B/S与C/S !让HTML5 WebSocket与.NET Socket公用同一个服务端!

    随着HTML5 WebSocket技术的日益成熟与普及,我们可以借助WebSocket来更加方便地打通BS与CS -- 因为B/S中的WebSocket可以直接连接到C/S的服务端,并进行双向通信.如 ...

  7. html5标签知多少

    此文为前段时间团队研究会出品,与小伙伴兮兮圆一起研究的成果,意外地上了公司km的今日推荐,今日挪过来,为新开张的博客先暖暖场吧. 一.常用标签 <header>.<footer> ...

  8. HTML5定稿

    HTML5定稿了,终于有一种编程语言开发的程序可以在Android和IOS两种设备上运行了 本文转载自: http://www.cnblogs.com/tuyile006/p/4103634.html ...

  9. HTML5 离线缓存管理库

    一.HTML5离线缓存技术 支持离线缓存是HTML5中的一个重点,离线缓存就是让用户即使在断网的情况下依然可以正常的运行应用.传统的本地存储数据的方式有 localstorage,sessionsto ...

随机推荐

  1. 一个简单的AJAX实例

    创建一个简单的XMLHttpRequest,从一个TXT文件中返回数据. 来源于菜鸟教程 <!DOCTYPE html><html><head><meta c ...

  2. Jsp:useBean标签的使用

    1.<jsp:useBean id="为Bean起的别名(随意起)" class="Bean的目录,从包名开始写" scope="page | ...

  3. git 仓库操作

    一.git 仓库从远程clone 首先要建立一个本地空目录文件比如 RuntimeJsonModel,然后: 1. git init 2. git clone https://github.com/G ...

  4. [ 兼容 ] IE和Firefox的Javascript兼容性总结

    长久以来JavaScript兼容性一直是Web开发者的一个主要问题.在正式规范.事实标准以及各种实现之间的存在的差异让许多开发者日夜煎熬.为此,主要从以下几方面差异总结IE和Firefox的Javas ...

  5. Flex开发自定义控件

    前期准备: 点击File菜单 -> New -> MXML Component,然后弹出一个对话框. 在对话框中输入组件名,选择此组件继承的类型,如:Canvas,DataGrid,Com ...

  6. MSP430F149学习之路——时钟2

    代码一: /************************** 功能:LED每隔1秒闪烁一次 ****************************/ #include <msp430x14 ...

  7. Hibernate 问题,在执行Query session.createQuery(hql) 报错误

    在配置文件中加入 <prop key="hibernate.query.factory_class">org.hibernate.hql.internal.classi ...

  8. Qt中QObject中的parent参数

    今天写了一个小程序,验证了带参的构造函数中参数parent的作用. 在MainWindow中声明一个QDialog类型的指针,在MainWindow中对它进行初始化.我采用了两种初始化方式,一种是带参 ...

  9. gulp.spritesmith修改px为rem单位

    移动端开发中,使用gulp.spritesmith进行小图sprite并生成样式,但由于spritesmith默认是以px为单位,所以就把插件的内容修改了下让生成rem单位并且能把background ...

  10. Linux 之dhcp服务搭建

    DHCP(Dynamic Host Configuration Protocol,动态主机配置协议)是一个局域网的网络协议 dhcp服务器端监控端口67 涉及的配置文件:/etc/dhcp/dhcpd ...