一、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 代码复制内容到剪贴板
  1. <form>
  2. <p><label>Username:<input name=search type="text" id="search"></label></p>
  3. <script type="text/javascript">
  4. document.getElementById_x ('search').focus()
  5. </script>
  6. </form>

在HTML 5中,这段代码将会以怎样的形式出现呢?具体代码如示例2所示。

示例2:

折叠XML/HTML 代码复制内容到剪贴板
  1. <form>
  2. <p>
  3. <label>Search:<input name=search autofocus></label>
  4. </p>
  5. </form>

我们来看一下在HTML 4中常见的一种页面结构,代码如示例3所示:

示例3:

折叠XML/HTML 代码复制内容到剪贴板
  1. <div id="header">...</div>
  2. <div id="nav">...</div>
  3. <div class="aritcle">
  4. </div>
  5. <div id="side-bar">...</div>
  6. <div id="footer">...</div>

页面中有关该部分的结构示意图如图1所示:


图1 HTML 4中的页面结构

那么,在HTML 5中,又会用怎样的页面代码来描述这种结构呢?具体代码如示例4所示:

示例4:

折叠XML/HTML 代码复制内容到剪贴板
  1. <header>...</header>
  2. <nav>...</nav>
  3. <aritcle> </aritcle>
  4. <aside>...</aside>
  5. <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教程

转载于:https://blog.51cto.com/wangyexx/886308

HTML5教程:1.1 迎接新的Web时代相关推荐

  1. 如何迎接新的 .NET 时代

    看完.NET 基金会. Roslyn 编译器 ,应该已经能慢慢了解,现在所谓的".NET 开源".".NET Open Source"并不是完全把现有的 .NE ...

  2. web前端开发示例_40多个针对Web开发人员HTML5教程和示例

    web前端开发示例 HTML 5 offers a lot of new features to help web developers. In the last few days, I have r ...

  3. HTML5和CSS3不仅仅是两项新的Web技术标准

    2019独角兽企业重金招聘Python工程师标准>>> HTML5和CSS3不仅仅是两项新的Web技术标准 HTML5和CSS3不仅仅是两项新的Web技术标准,更代表了下一代HTML ...

  4. mui打开新的html页面跳转,HTML5教程 mui页面跳转

    本篇教程探讨了HTML5教程 mui页面跳转,希望阅读本篇文章以后大家有所收获,帮助大家HTML5+CSS3从入门到精通 . < 1 2         mui.init(); 3        ...

  5. html5 上传超大文件,HTML5教程 如何拖拽上传大文件

    本篇教程探讨了HTML5教程 如何拖拽上传大文件,希望阅读本篇文章以后大家有所收获,帮助大家HTML5+CSS3从入门到精通 . < 前言: 大文件传输一直是技术上的一大难点.文件过大时,一些性 ...

  6. html5发展前景-兄弟连,IT兄弟连 HTML5教程 HTML5的曲折发展过程 HTML5的诞生

    原标题:IT兄弟连 HTML5教程 HTML5的曲折发展过程 HTML5的诞生 十年磨一剑,正如我们所看到的一样,HTML5大潮正来势汹汹.但也正如我们所知道的一样,HTML5是一种技术标准,它的语义 ...

  7. 分享31个非常有用的 HTML5 教程

    HTML5教程相关文章 15个非常有用的 HTML5 开发教程和速查手册 12个优秀的 HTML5 网站设计案例欣赏 分享25个优秀的 HTML5 开发教程 12款精美的免费 HTML 网站模板下载 ...

  8. HTML5超链接和多媒体,IT兄弟连 HTML5教程 多媒体应用 创建图像和链接

    原标题:IT兄弟连 HTML5教程 多媒体应用 创建图像和链接 指引 多媒体来自多种不同的格式.它可以是您听到或看到的任何内容,文字.图片.音乐.音效.录音.电影.动画等等.在因特网上,您会经常发现嵌 ...

  9. HTML5教程:1.3 HTML 5的使用理由和待解决问题

    一.可以放心使用HTML 5的三个理由 Web开发者最担心的是新技术推出时由于其不成熟所产生的问题.如果能够实现互联网通用标准,可以避免各浏览器之间的不统一,这一点已经被明确了,但是在朝着这方面前进的 ...

最新文章

  1. 特斯拉AI高管都推荐的张量工具,开源了三年后终于中顶会了! | ICLR 2022 Oral
  2. 一文弄懂YOLO目标检测算法
  3. 华为的Java虚拟机_华为方舟编译器解析:提升安卓运行效率
  4. 常见网络加速技术浅谈(二)
  5. C和C++数据结构相关概念
  6. phpcms v9 的表单向导功能的使用方法
  7. eclipse 保存html 提示 save could not be completed
  8. 为什么redis适合操作小数据,memcache适合操作大数据
  9. priority_queue C++
  10. Win32写一个极简定时关机软件的全部过程讲解
  11. Tomcat,jsp中文乱码问题解决
  12. 吉利远景 SUV 升级车机系统 MCU 及 SPD 的一些问题
  13. Flink1.13 DataStream API - Event Time - Generating Watermarks
  14. [Erlang 0125] Know a little Erlang opcode
  15. gensim w2v 使用记录
  16. 个人网站的制作,维护,推广,营销
  17. model.train()与model.eval()的用法
  18. 使用Ionic.Zip压缩、分卷压缩、解压文件
  19. 模拟豆机、高尔顿瓶【java】
  20. jmap 和jstack使用

热门文章

  1. Linux创建进程必须fork么,Linux - fork() 创建进程
  2. [Ext JS ] 7.25.1 Form或者面板自动定位到错误的输入框
  3. html5 xml文本编辑,简介XML文档的阅读与编辑
  4. java保存文件的时候提示系统找不到路径_java.io.FileNotFoundException (系统找不到指定的路径。)...
  5. CentOS:linux开放指定端口命令
  6. 【爬虫剑谱】一卷2章 软件篇-EdgeDriver的安装及配置
  7. ftp ---- 匿名用户(实例配置示例1:匿名用户登录)
  8. nginx ---- Nginx服务器基础配置实例
  9. bat脚本保存dir结果_MySQL备份脚本,应该这么写
  10. 服务器重装系统要注意什么_视频海外服务器前期要准备什么?