HTML5教程:1.1 迎接新的Web时代
2012-06-15 22:27
330 查看
一、HTML 5时代即将来临
自从2010年HTML 5正式推出以来,它就以一种惊人的速度被迅速推广着,就连微软也因此为下一代IE 9做了标准上的改进,使其能够支持HTML 5。关于各主流浏览器对于HTML 5所表现出来的热烈欢迎、积极支持的详细情况,以及为什么HTML 5会如此受欢迎,我们将在后面几节中详细介绍,这里,教程制作者要告诉大家的是,目前业界全体都步调一致地朝着HTML 5的方向迈进着,HTML 5的时代马上就要到来了。
在全面介绍HTML 5的相关知识之前,我们先来认识一下HTML 5中的部分代码,对HTML 5有个初步的了解。
首先,我们来看一段HTML 4中常见的JavaScript代码,代码例1所示。WANGYEXX.COM
示例1:
折叠XML/HTML 代码复制内容到剪贴板
<form>
<p><label>Username:<input name=search type="text" id="search"></label></p>
<script type="text/javascript">
document.getElementById ('search').focus()
</script>
</form>
在HTML 5中,这段代码将会以怎样的形式出现呢?具体代码如示例2所示。
示例2:
折叠XML/HTML 代码复制内容到剪贴板
<form>
<p>
<label>Search:<input name=search autofocus></label>
</p>
</form>
我们来看一下在HTML 4中常见的一种页面结构,代码如示例3所示:
示例3:
折叠XML/HTML 代码复制内容到剪贴板
<div id="header">...</div>
<div id="nav">...</div>
<div class="aritcle">
</div>
<div id="side-bar">...</div>
<div id="footer">...</div>
页面中有关该部分的结构示意图如图1所示:
图1 HTML 4中的页面结构
那么,在HTML 5中,又会用怎样的页面代码来描述这种结构呢?具体代码如示例4所示:
示例4:
折叠XML/HTML 代码复制内容到剪贴板
<header>...</header>
<nav>...</nav>
<aritcle> </aritcle>
<aside>...</aside>
<footer>...</footer>
页面中有关该部分的结构示意图如图2所示。
图2 HTML 5中的页面结构
怎么样?看出区别来了吗?在第一个示例中,我们可以看见,在HTML 4中的一段JavaScript代码,在HTML 5中消失了,取而代之的是一个在HTML 5中新出现的属性。在第二个示例中,我们可以看见,在HTML 4中常见的用div来划分页面结构的方法,到了HTML 5中,也被一种HTML 5中新出现的标签给替代了。那么究竟为什么HTML 5要对HTML 4的脚本以及页面代码做这种修改呢?做这种修改的目的又是什么呢?
二、HTML 5的目标
HTML 5的目标是为了能够创建更简单的Web程序,书写出更简洁的HTML代码。例如,为了使Web应用程序的开发变得更容易,提供了很多API,为了使HTML变得更简洁,开发出了新的属性、新的元素,等等。总体来说,为下一代Web平台提供了许许多多新的功能。
那么让我们先来初步接触一下在HTML 5中究竟提供了哪些革命性的新功能。在第2章中,我们会针对这些功能做一个全面介绍。
首先,在HTML 5之前,有很多功能必须要使用JavaScript等脚本语言才能实现,譬如前面例子中提到,登录画面中经常使用的让文本框获得光标焦点的功能。如果使用 HTML 5,同样的功能只要使用元素的属性标签就可以实现了。这样的话,整个页面就变得非常清楚直观,容易理解。因此,Web设计者可以非常放心大胆地使用这磐 HTML 5中新增的属性标签。由于HTML 5中提供了大量的这种可以替代脚本的属性标签,使得开发出来的界面语言也变得更加简洁易懂。
不但如此,HTML 5使页面结构也变得清楚明了。之前使用的div标签也不再使用了,而是使用前面HTML 5示例中所提到的更加语义化的结构标签。这样的话,书写出来的界面结构显得非常清晰,各部位要展示什么内容也让人一目了然。
虽然HTML 5宣称的立场是“非革命性的发展”,但是它所带来的功能是让人渴望的,使用它所进行的设计也是很简单的,因此,它深受Web设计者与Web开发者的欢迎。
点击下载HTML5教程案例资源 返回《深入探索HTML5教程》教程列表
转载请注明本文地址:
http://www.wangyexx.com/html/html5/1607.html如何制作网页 html教程 JavaScript教程 CSS教程 jQuery教程 JSP教程 JAVA教程 C#教程 网络营销教程 数据库教程 SEO教程 HTML5教程 网页制作教程
自从2010年HTML 5正式推出以来,它就以一种惊人的速度被迅速推广着,就连微软也因此为下一代IE 9做了标准上的改进,使其能够支持HTML 5。关于各主流浏览器对于HTML 5所表现出来的热烈欢迎、积极支持的详细情况,以及为什么HTML 5会如此受欢迎,我们将在后面几节中详细介绍,这里,教程制作者要告诉大家的是,目前业界全体都步调一致地朝着HTML 5的方向迈进着,HTML 5的时代马上就要到来了。
在全面介绍HTML 5的相关知识之前,我们先来认识一下HTML 5中的部分代码,对HTML 5有个初步的了解。
首先,我们来看一段HTML 4中常见的JavaScript代码,代码例1所示。WANGYEXX.COM
示例1:
折叠XML/HTML 代码复制内容到剪贴板
<form>
<p><label>Username:<input name=search type="text" id="search"></label></p>
<script type="text/javascript">
document.getElementById ('search').focus()
</script>
</form>
在HTML 5中,这段代码将会以怎样的形式出现呢?具体代码如示例2所示。
示例2:
折叠XML/HTML 代码复制内容到剪贴板
<form>
<p>
<label>Search:<input name=search autofocus></label>
</p>
</form>
我们来看一下在HTML 4中常见的一种页面结构,代码如示例3所示:
示例3:
折叠XML/HTML 代码复制内容到剪贴板
<div id="header">...</div>
<div id="nav">...</div>
<div class="aritcle">
</div>
<div id="side-bar">...</div>
<div id="footer">...</div>
页面中有关该部分的结构示意图如图1所示:
图1 HTML 4中的页面结构
那么,在HTML 5中,又会用怎样的页面代码来描述这种结构呢?具体代码如示例4所示:
示例4:
折叠XML/HTML 代码复制内容到剪贴板
<header>...</header>
<nav>...</nav>
<aritcle> </aritcle>
<aside>...</aside>
<footer>...</footer>
页面中有关该部分的结构示意图如图2所示。
图2 HTML 5中的页面结构
怎么样?看出区别来了吗?在第一个示例中,我们可以看见,在HTML 4中的一段JavaScript代码,在HTML 5中消失了,取而代之的是一个在HTML 5中新出现的属性。在第二个示例中,我们可以看见,在HTML 4中常见的用div来划分页面结构的方法,到了HTML 5中,也被一种HTML 5中新出现的标签给替代了。那么究竟为什么HTML 5要对HTML 4的脚本以及页面代码做这种修改呢?做这种修改的目的又是什么呢?
二、HTML 5的目标
HTML 5的目标是为了能够创建更简单的Web程序,书写出更简洁的HTML代码。例如,为了使Web应用程序的开发变得更容易,提供了很多API,为了使HTML变得更简洁,开发出了新的属性、新的元素,等等。总体来说,为下一代Web平台提供了许许多多新的功能。
那么让我们先来初步接触一下在HTML 5中究竟提供了哪些革命性的新功能。在第2章中,我们会针对这些功能做一个全面介绍。
首先,在HTML 5之前,有很多功能必须要使用JavaScript等脚本语言才能实现,譬如前面例子中提到,登录画面中经常使用的让文本框获得光标焦点的功能。如果使用 HTML 5,同样的功能只要使用元素的属性标签就可以实现了。这样的话,整个页面就变得非常清楚直观,容易理解。因此,Web设计者可以非常放心大胆地使用这磐 HTML 5中新增的属性标签。由于HTML 5中提供了大量的这种可以替代脚本的属性标签,使得开发出来的界面语言也变得更加简洁易懂。
不但如此,HTML 5使页面结构也变得清楚明了。之前使用的div标签也不再使用了,而是使用前面HTML 5示例中所提到的更加语义化的结构标签。这样的话,书写出来的界面结构显得非常清晰,各部位要展示什么内容也让人一目了然。
虽然HTML 5宣称的立场是“非革命性的发展”,但是它所带来的功能是让人渴望的,使用它所进行的设计也是很简单的,因此,它深受Web设计者与Web开发者的欢迎。
点击下载HTML5教程案例资源 返回《深入探索HTML5教程》教程列表
转载请注明本文地址:
http://www.wangyexx.com/html/html5/1607.html如何制作网页 html教程 JavaScript教程 CSS教程 jQuery教程 JSP教程 JAVA教程 C#教程 网络营销教程 数据库教程 SEO教程 HTML5教程 网页制作教程
相关文章推荐
- HTML5教程:1.1 迎接新的Web时代
- 04. Web大前端时代之:HTML5+CSS3入门系列~HTML5 表单
- web时代变迁及html5与4的区别
- Web前端教程-02.04.HTML5样式、链接和表格
- HTML5与jQuery组合:Web开发教程实践
- 使用HTML5的Notification API制作web通知的教程(转)
- HTML5 WebSockets+NodeJs 实例教程
- 【转】【Web缓存机制概述】4 – HTML5时代的Web缓存机制
- HTML5引领Web应用时代到来
- Web程序员们,你准备好迎接HTML5了吗?
- Web程序员们,你准备好迎接HTML5了吗?
- HTML5简明教程-1.1.HTML5画布Canvas
- 值得 Web 开发人员收藏的20个 HTML5 实例教程
- HTML5“强云富端”,迎接App时代——SuperMap iClient 6R(2012) for JavaScript产品新...
- PHP视频教程源码书籍web前端ThinkPHP5/5.0商城实战开发html5秒杀
- HTML5 Web Worker深入浅出教程
- HTML5教程之html 5 本地数据库(Web Sql Database)
- Web程序员们,你准备好迎接HTML5了吗?
- Atitit 互联网之道 1.1. 互联网 1 2. 互联网经历了三个时代,门户时代、搜索/社交时代、大互联网时代 1 2.1. Web2.0.搜索/社交时代(Web 2.0) 2 2.2. Web
- 为 Web 开发者准备的 20 个有用的 HTML5 教程