《HTML 5与CSS 3 权威指南(第3版·上册)》——1.1 迎接新的Web时代-阿里云开发者社区

开发者社区> 华章计算机> 正文

《HTML 5与CSS 3 权威指南(第3版·上册)》——1.1 迎接新的Web时代

简介:
+关注继续查看

本节书摘来自华章出版社《HTML 5与CSS 3 权威指南(第3版·上册)》一 书中的第1章,第1.1节,作者:陆凌牛,更多章节内容可以访问云栖社区“华章计算机”公众号查看。

1.1 迎接新的Web时代

1.1.1 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-1所示。
代码清单1-1 HTML 4中的JavaScript代码示例

<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中,这段代码将会以怎样的形式出现呢?具体如代码清单1-2所示。
代码清单1-2 用HTML 5实现代码清单1-1中的JavaScript代码


Search:


`
我们来看一下在HTML 4中常见的一种页面结构,代码如代码清单1-3所示。
代码清单1-3 div标签示例(用HTML 4实现)
<div id="header">...</div>
<div id="nav">...</div>
<div class="article">
</div>
<div id="side-bar">...</div>
<div id="footer">...</div>```
页面中有关该部分的结构示意图如图1-1所示。

<div style="text-align: center"><img src="https://yqfile.alicdn.com/55d0778ab9a6dfbeab700aa8432984e2aeb9493d.png" width="" height="">
</div>

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

...
...


...
...`
页面中有关该部分的结构示意图如图1-2所示。

bbcd7d900acca486c4817b3394beb2284d163999

怎么样?看出区别来了吗?在第一个示例中,我们可以看见,在HTML 4中的一段JavaScript代码,在HTML 5中消失了,取而代之的是一个在HTML 5中新出现的属性。在第二个示例中,我们可以看见,在HTML 4中常见的用div来划分页面结构的方法,到了HTML 5中,也被一种HTML 5中新出现的标签给替代了。那么究竟为什么HTML 5要对HTML 4的脚本以及页面代码做这种修改呢?做这种修改的目的又是什
么呢?

1.1.2 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开发者的欢迎。

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
阿里云服务器怎么设置密码?怎么停机?怎么重启服务器?
如果在创建实例时没有设置密码,或者密码丢失,您可以在控制台上重新设置实例的登录密码。本文仅描述如何在 ECS 管理控制台上修改实例登录密码。
9161 0
《VMware Virtual SAN权威指南》一2.2.4 容量层设备
本节书摘来华章计算机《VMware Virtual SAN权威指南》一书中的第2章 ,第2.2.4节, [美] 科马克·霍根(Cormac Hogan)邓肯·埃平(Duncan Epping)  著 徐 炯 译译更多章节内容可以访问云栖社区“华章计算机”公众号查看。
967 0
阿里云服务器端口号设置
阿里云服务器初级使用者可能面临的问题之一. 使用tomcat或者其他服务器软件设置端口号后,比如 一些不是默认的, mysql的 3306, mssql的1433,有时候打不开网页, 原因是没有在ecs安全组去设置这个端口号. 解决: 点击ecs下网络和安全下的安全组 在弹出的安全组中,如果没有就新建安全组,然后点击配置规则 最后如上图点击添加...或快速创建.   have fun!  将编程看作是一门艺术,而不单单是个技术。
10745 0
《Ext JS权威指南》——3.6节本章小结
本节书摘来自华章社区《Ext JS权威指南》一书中的第3章,第3.6节本章小结,作者:黄灯桥,更多章节内容可以访问云栖社区“华章社区”公众号查看
867 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,阿里云优惠总结大概有三种登录方式: 登录到ECS云服务器控制台 在ECS云服务器控制台用户可以更改密码、更换系.
12853 0
《PHP和MySQL Web开发从新手到高手(第5版)》一导读
在本书中,我们将带你实际地看看在使用PHP和MySQL构建一个数据库驱动的Web站点的时候,会涉及哪些内容。如果你的Web虚拟主机支持PHP和MySQL,你很幸运;如果不是这样,我们将向你介绍如何在安装了Windows、Mac OS X或Linux的机器上安装它们,所以你也不必着急。
2507 0
10059
文章
0
问答
来源圈子
更多
+ 订阅
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载