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

相关文章
|
19天前
|
前端开发 JavaScript 开发者
探索Web设计新纪元:CSS3的革新特性如何重塑我们的网页视觉体验?
【8月更文挑战第26天】随着Web技术的发展,CSS3为前端开发带来了众多激动人心的新特性,极大提升了网页设计的视觉效果与创意空间。本文通过对比CSS3与CSS2,详细介绍了CSS3在选择器增强、圆角阴影处理、渐变背景应用、转换动画实现、文字效果优化、媒体查询支持及多列布局方面的显著改进,展示了CSS3如何助力开发者打造更具吸引力和互动性的网页体验。
33 1
|
5天前
|
前端开发 Windows
【前端web入门第一天】02 HTML图片标签 超链接标签 音频标签 视频标签
本文档详细介绍了HTML中的图片、超链接、音频和视频标签的使用方法。首先讲解了`&lt;img&gt;`标签的基本用法及其属性,包括如何使用相对路径和绝对路径。接着介绍了`&lt;a&gt;`标签,用于创建超链接,并展示了如何设置目标页面打开方式。最后,文档还涵盖了如何在网页中嵌入音频和视频文件,包括简化写法及常用属性。
27 13
|
4天前
|
Web App开发 前端开发 JavaScript
HTML/CSS/JS学习笔记 Day3(HTML--网页标签 下)
HTML/CSS/JS学习笔记 Day3(HTML--网页标签 下)
|
1天前
|
XML JavaScript 前端开发
JavaWeb基础4——HTML,JavaScript&CSS
HTML,JavaScript&CSS、元素、标签、css 选择器、属性、JavaScript基础语法、JavaScript对象、BOM浏览器对象模型、DOM文档对象模型、事件监听、正则对象RegExp/ES6
JavaWeb基础4——HTML,JavaScript&CSS
|
14天前
|
移动开发 JavaScript 前端开发
揭秘!如何用Web2py+HTML5/CSS3/jQuery打造超炫响应式网站?你的设计梦想即将照进现实!
【8月更文挑战第31天】本文详细介绍如何利用Web2py框架及HTML5、CSS3与jQuery构建响应式网站。首先需安装Python和Web2py,并启动服务器。接着,在Web2py中创建新应用,例如命名为“ResponsiveSite”。随后,编写HTML5基本结构,包括头部、导航栏等元素。在`styles.css`文件中添加CSS3样式代码,实现响应式布局。最后,通过在`scripts.js`中加入jQuery脚本提升页面交互性,如点击导航项时平滑滚动至目标区域。此教程为你打下响应式网站设计的基础,便于进一步扩展和优化。
10 1
|
17天前
|
移动开发 前端开发 JavaScript
HTML与CSS二三事
HTML与CSS二三事
|
19天前
|
存储 移动开发 前端开发
HTML5时代来临,这些新特性你掌握了吗?一篇文章带你玩转Web前端技术潮流!
【8月更文挑战第26天】HTML5(简称H5)作为新一代Web标准,相比HTML4带来了诸多增强功能。
34 2
|
14天前
|
前端开发 JavaScript 搜索推荐
打造个人博客网站:从零开始的HTML、CSS与JavaScript之旅
在这个数字时代,拥有一个个性化的网络空间已成为许多人的梦想。本文将引导你了解如何从零开始,使用HTML、CSS和JavaScript创建属于自己的博客网站。我们将探索这些技术的基础概念,并通过实际代码示例展示如何将静态页面转变为动态交互式网站。无论你是编程新手还是希望扩展技能的开发者,这篇文章都将为你提供一条清晰的学习路径。【8月更文挑战第31天】
|
14天前
|
Java 数据安全/隐私保护 安全
掌握Struts 2动态方法调用,让你的Web开发如虎添翼,轻松应对复杂业务需求!
【8月更文挑战第31天】在Web应用开发中,Struts 2框架因强大功能和灵活性而广受青睐。其动态方法调用(DMI)特性允许在不修改配置文件的情况下动态调用Action类中的方法,相比传统方法调用(需在`struts.xml`中为每个方法创建单独的`&lt;action&gt;`),DMI简化了配置并提升了灵活性、可维护性和扩展性。本文通过对比DMI与传统方法调用,展示如何利用DMI简化开发流程,并强调了在使用DMI时需注意的安全性和访问控制问题。
10 0
|
14天前
|
Java 开发者 关系型数据库
JSF与AWS的神秘之旅:如何在云端部署JSF应用,让你的Web应用如虎添翼?
【8月更文挑战第31天】在云计算蓬勃发展的今天,AWS已成为企业级应用的首选平台。本文探讨了在AWS上部署JSF(JavaServer Faces)应用的方法,这是一种广泛使用的Java Web框架。通过了解并利用AWS的基础设施与服务,如EC2、RDS 和 S3,开发者能够高效地部署和管理JSF应用。文章还提供了具体的部署步骤示例,并讨论了使用AWS可能遇到的挑战及应对策略,帮助开发者更好地利用AWS的强大功能,提升Web应用开发效率。
40 0