HTML5教程:1.1 迎接新的Web时代
一、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:
- <form>
- <p><label>Username:<input name=search type="text" id="search"></label></p>
- <script type="text/javascript">
- document.getElementById_x ('search').focus()
- </script>
- </form>
在HTML 5中,这段代码将会以怎样的形式出现呢?具体代码如示例2所示。
示例2:
- <form>
- <p>
- <label>Search:<input name=search autofocus></label>
- </p>
- </form>
我们来看一下在HTML 4中常见的一种页面结构,代码如示例3所示:
示例3:
- <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:
- <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教程
转载于:https://blog.51cto.com/wangyexx/886308
HTML5教程:1.1 迎接新的Web时代相关推荐
- 如何迎接新的 .NET 时代
看完.NET 基金会. Roslyn 编译器 ,应该已经能慢慢了解,现在所谓的".NET 开源".".NET Open Source"并不是完全把现有的 .NE ...
- 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 ...
- HTML5和CSS3不仅仅是两项新的Web技术标准
2019独角兽企业重金招聘Python工程师标准>>> HTML5和CSS3不仅仅是两项新的Web技术标准 HTML5和CSS3不仅仅是两项新的Web技术标准,更代表了下一代HTML ...
- mui打开新的html页面跳转,HTML5教程 mui页面跳转
本篇教程探讨了HTML5教程 mui页面跳转,希望阅读本篇文章以后大家有所收获,帮助大家HTML5+CSS3从入门到精通 . < 1 2 mui.init(); 3 ...
- html5 上传超大文件,HTML5教程 如何拖拽上传大文件
本篇教程探讨了HTML5教程 如何拖拽上传大文件,希望阅读本篇文章以后大家有所收获,帮助大家HTML5+CSS3从入门到精通 . < 前言: 大文件传输一直是技术上的一大难点.文件过大时,一些性 ...
- html5发展前景-兄弟连,IT兄弟连 HTML5教程 HTML5的曲折发展过程 HTML5的诞生
原标题:IT兄弟连 HTML5教程 HTML5的曲折发展过程 HTML5的诞生 十年磨一剑,正如我们所看到的一样,HTML5大潮正来势汹汹.但也正如我们所知道的一样,HTML5是一种技术标准,它的语义 ...
- 分享31个非常有用的 HTML5 教程
HTML5教程相关文章 15个非常有用的 HTML5 开发教程和速查手册 12个优秀的 HTML5 网站设计案例欣赏 分享25个优秀的 HTML5 开发教程 12款精美的免费 HTML 网站模板下载 ...
- HTML5超链接和多媒体,IT兄弟连 HTML5教程 多媒体应用 创建图像和链接
原标题:IT兄弟连 HTML5教程 多媒体应用 创建图像和链接 指引 多媒体来自多种不同的格式.它可以是您听到或看到的任何内容,文字.图片.音乐.音效.录音.电影.动画等等.在因特网上,您会经常发现嵌 ...
- HTML5教程:1.3 HTML 5的使用理由和待解决问题
一.可以放心使用HTML 5的三个理由 Web开发者最担心的是新技术推出时由于其不成熟所产生的问题.如果能够实现互联网通用标准,可以避免各浏览器之间的不统一,这一点已经被明确了,但是在朝着这方面前进的 ...
最新文章
- 特斯拉AI高管都推荐的张量工具,开源了三年后终于中顶会了! | ICLR 2022 Oral
- 一文弄懂YOLO目标检测算法
- 华为的Java虚拟机_华为方舟编译器解析:提升安卓运行效率
- 常见网络加速技术浅谈(二)
- C和C++数据结构相关概念
- phpcms v9 的表单向导功能的使用方法
- eclipse 保存html 提示 save could not be completed
- 为什么redis适合操作小数据,memcache适合操作大数据
- priority_queue C++
- Win32写一个极简定时关机软件的全部过程讲解
- Tomcat,jsp中文乱码问题解决
- 吉利远景 SUV 升级车机系统 MCU 及 SPD 的一些问题
- Flink1.13 DataStream API - Event Time - Generating Watermarks
- [Erlang 0125] Know a little Erlang opcode
- gensim w2v 使用记录
- 个人网站的制作,维护,推广,营销
- model.train()与model.eval()的用法
- 使用Ionic.Zip压缩、分卷压缩、解压文件
- 模拟豆机、高尔顿瓶【java】
- jmap 和jstack使用
热门文章
- Linux创建进程必须fork么,Linux - fork() 创建进程
- [Ext JS ] 7.25.1 Form或者面板自动定位到错误的输入框
- html5 xml文本编辑,简介XML文档的阅读与编辑
- java保存文件的时候提示系统找不到路径_java.io.FileNotFoundException (系统找不到指定的路径。)...
- CentOS:linux开放指定端口命令
- 【爬虫剑谱】一卷2章 软件篇-EdgeDriver的安装及配置
- ftp ---- 匿名用户(实例配置示例1:匿名用户登录)
- nginx ---- Nginx服务器基础配置实例
- bat脚本保存dir结果_MySQL备份脚本,应该这么写
- 服务器重装系统要注意什么_视频海外服务器前期要准备什么?