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. 一道 JavaScript 面试题

    有一道 JavaScript 面试题. f = function () { return true; }; g = function () { return false; }; (function() ...

  2. 在 WPF 程序中使用 MVVM 模式

    MVVM 模式是一个很久之前的技术了,最近因为一个项目的原因,需要使用 WPF 技术,所以,重新翻出来从前的一段程序,重温一下当年的技术. MVVM 模式 MVVM 实际上涉及三个部分,Model, ...

  3. android EditText 只允许输入指定字符

    实现只允许只入数字和字符 方法一:在XML文件中实现布局如下: <EditText android:layout_width="match_parent" android:l ...

  4. 【转】WEB测试到移动测试的转换

    移动互联网的发展毋庸置疑是必然的趋势,我们曾经传统WEB互联网测试的同学,也必然走上移动测试的道路,移动测试与pc测试到底需要怎样的思维转变才能更快的进入移动节奏呢?对比下WEB与移动的测试不同点: ...

  5. redis学习(4)redis安装部署

    下载redis-1.2.6.tar.gz 将下载包拷贝到/usr/local/webserver/redis-1.2.6/下 2.安装 tar -zxvf redis-1.2.6.tar.gz ce ...

  6. MSP430F149学习之路——UART

    代码一: #include <msp430x14x.h> void int_clk() { BCSCTL1 &= ~XT2OFF; BCSCTL2 |= SELM_2 + SELS ...

  7. MapReduce和Tez对比

    MapReduce是一种编程模型,用于大规模数据集(大于1TB)的并行运算.概念"Map(映射)"和"Reduce(归约)". Tez是Apache开源的支持D ...

  8. nagios架构及windows,linux客户端配置

    Linux下Nagios的安装与配置 一.Nagios简介 Nagios是一款开源的电脑系统和网络监视工具,能有效监控Windows.Linux和Unix的主机状态,交换机路由器等网络设置,打印机等. ...

  9. 安装Ecshop首页出现报错:Only variables should be passed by referen

    出现下面这就话: Strict Standards: Only variables should be passed by reference in E:\Tools\ECShop_V2.7.3_UT ...

  10. docker学习(一)

    atomic使用有点费劲,我改为centos7来做为学习环境. 1 安装 epel源就自带,目前版本是1.10.3 yum -y install docker docker version Clien ...