购买
下载掌阅APP,畅读海量书库
立即打开
畅读海量书库
扫码下载掌阅APP

1.1 HTML概述

HTML是应用最广泛的互联网技术之一,用于定义便于在互联网上分享的富文本文档。万维网(World Wide Web,WWW)上的大量文档使用HTML定义,包括我们熟悉的百度、网易、搜狐、淘宝、京东等网站的页面,也包括微信公众号中的文章页面。

1.1.1 HTML简介

HTML是一种标记语言。标记语言的代码本身是普通文本,但可通过特殊的标记(即标签)描绘图片、视频等多媒体内容,或者表示格式等不属于文本的信息。请看下面的代码。

<img src="1.jpg" />
<font color="red" size="14">新春</font>快乐!!!

文字内容是“新春”和“快乐!!!”。标签是“<img src="1.jpg" />” “<font color="red" size="14">”和“</font >”。按照HTML的语法,“<img src="1.jpg" />”代表一张图片,图片的文件名是“1.jpg”;“<font color="red" size="14">”和“</font >”表示它们中间的文字的颜色设置成红色,字体大小设置为14。

使用Web浏览器(以下简称浏览器)可以显示HTML文档。以上代码在浏览器中渲染的效果如图1.1所示。

图1.1 “新春快乐!!!”的渲染效果

注意

不同浏览器对相同的HTML文档的渲染结果可能不同,这跟浏览器的具体实现有关,但一般来说渲染效果区别不大。

标记语言可以用于文档排版、数据传输等领域。其中HTML5就是如今互联网上广泛采用的文档表示格式。XML(Extensible Markup Language,可扩展标记语言)是一种用于数据传输的标记语言。TeX是一种学术界常用的排版工具,也是一种标记语言。Markdown是一种轻量级的标记语言,可以使用简单的语法标记文本格式并进行文档排版,功能比较强大,值得注意的是,Markdown支持内嵌HTML。

HTML作为标记语言,主要用于描述富文本信息。可以理解为它的功能与Word等文字处理软件的功能类似。

使用HTML技术的主要目的是创建便于在互联网上分享的多媒体文档,并提供多种多样的用户交互功能。图1.2展示的是使用HTML5实现的一种弹窗,用于向用户传递信息。

图1.3展示的是使用HTML5实现的博客评论系统,其中包括文章的阅读量、评论内容等。该系统还提供了表单,允许用户输入和发表新的评论。

图1.2 使用HTML5实现的一种弹窗

图1.3 HTML5博客评论系统界面

HTML不仅能展示多媒体文档,提供用户交互功能;还提供标记文档信息关系的功能,用户通过单击链接可在文档间跳转。

1.1.2 HTML的发展

HTML由英国计算机和物理学家蒂姆·伯纳斯·李发明。他在1990年开发了万维网的服务器和客户端。万维网也简称为Web,是通过互联网发布和获取信息的系统,这个系统使用的文档格式就是HTML。我们经常使用的网页,如百度、淘宝、京东等网站的网页,还有微信公众号中的文章网页都是万维网中的网页。

万维网主要包括服务器和客户端,客户端一般就是浏览器,当用户在地址栏中输入网址并按Enter键或单击链接时,浏览器就向服务器发送请求。服务器会发送对应的文档给客户端,文档的格式通常是HTML。图1.4展示了Web的服务器、客户端,以及HTML文档的关系。

图1.4 Web示意

为了适应互联网的发展,HTML标准不断更新。1995年HTML 2.0标准发布,它是后续HTML标准的基础。

HTML5是HTML的新版本,已于2014年正式发布,成为推荐版本。但在这之前关于HTML新版本的讨论已经进行了很久。因为互联网的普及和移动互联网的高速发展,有很多问题不能使用旧的HTML标准解决。

其中一个突出的问题是如何用HTML展示音频、视频。HTML5之前的标准中没有音频和视频专用的标签,所以那时,实现在网页里播放音频、视频的技术有很多,其中最流行的技术之一是Flash插件,但总体来说很不统一,对移动设备(比如手机和平板电脑)的支持也不完善。

早在2010年,时任苹果公司CEO的乔布斯就发表文章“Thoughts on Flash”,预言随着HTML5的发展,播放视频将不再依赖Flash插件。

如今HTML5标准中加入的<video>、<audio>标签得到了大多数浏览器的支持,使得在网页中插入视频、音频如插入图片一样简单。而Flash已逐渐退出了历史舞台。

HTML5现在已获得极大的成功,有广泛的应用,且还在不断发展和更新。HTML5的发展既推动了浏览器的发展,也促进了HTML5应用的开发和使用。

1.1.3 HTML5与CSS3

CSS(Cascading Style Sheets,串联样式表)专门用于定义文档的样式,常与HTML一起使用。现在使用最广泛的CSS标准之一是CSS3。既可以在HTML5文档中直接使用CSS3,也可以在单独的样式表文件中定义CSS3样式规则。CSS3可以用于对文档样式进行精细控制,也可以用于实现动画效果。

CSS3已经和HTML5的生态紧密结合,所以通常意义的HTML5开发总离不开CSS3。第5章将详细介绍CSS3。

1.1.4 HTML5与JavaScript

JavaScript是被广泛使用在网页中的一种计算机程序设计语言。与标记语言不同,程序设计语言通常用于描述和规定操作或流程。JavaScript用于编写运行在浏览器中的程序,可以实现多种动态效果,使HTML5网页成为真正的“应用程序”。

与CSS3一样,JavaScript也已经与HTML生态紧密结合,尤其是在HTML5应用中,很难不使用JavaScript。在一些复杂的应用中,例如,HTML5游戏或者复杂的单页面应用中,JavaScript的代码数量可能相当庞大。

JavaScript使HTML5页面能快速响应用户操作,而不必等待服务器发送响应,因为浏览器与服务器的通信需要经过网络,而网络通信的速度往往比本地计算机硬件处理的速度慢得多。

简单的逻辑可以通过JavaScript程序实现,它同HTML5文档一起传输到用户计算机,由浏览器解释执行。这不仅减少了服务器的负载(服务器不必处理简单逻辑),也减少了网络的使用,还提高了用户体验(页面响应更快速)。

1.1.5 HTML5标准和文档

万维网联盟(World Wide Web Consortium,W3C)是致力于发展Web技术的国际组织。W3C组织制定标准草案,在通过一系列评审过程后,将标准草案发表为W3C推荐标准(W3C Recommendation)。

在W3C的官方网站可以找到包括HTML5标准在内的多种Web标准文档。

除了W3C官方文档外,Mozilla提供的HTML5技术相关文档也值得参考。Mozilla的MDN Web Docs不仅提供中文等多种语言的Web标准文档,还提供很多扩展内容及站内搜索等功能。 zTZVtl3MGNLtU1pmBgp2XYKMMm+gOcUqGMbhshQ25fJy8Bxo9C8jxOUW1l4O6GZZ

点击中间区域
呼出菜单
上一章
目录
下一章
×