图解HTTP十:构建 Web 内容的技术

10.1 HTML

10.1.1 Web 页面几乎全由 HTML 构建

HTML(HyperText Markup Language,超文本标记语言)是为了发送 Web 上的超文本(Hypertext)而开发的标记语言。超文本是一种文档系统,可将文档中任意位置的信息与其他信息(文本或图片等)建关联,即超链接文本。标记语言是指通过在文档的某部分穿插特别的字符串标签,用来修饰文档的语言。我们把出现在 HTML 文档内的这种特殊字符串叫做 HTML 标签(Tag)。平时我们浏览的 Web 页面几乎全是使用 HTML 写成的。由 HTML 构成的文档经过浏览器的解析、渲染后,呈现出来的结果就是 Web 页面。

在这里插入图片描述

HTML

10.1.2 HTML 的版本

HTML5 标准不仅解决了浏览器之间的兼容性问题,并且可把文本作为数据对待,更容易复用,动画等效果也变得更生动。

10.1.3 设计应用 CSS

CSS(Cascading Style Sheets,层叠样式表)可以指定如何展现 HTML 内的各种元素,属于样式表标准之一。即使是相同的 HTML 文档,通过改变应用的 CSS,用浏览器看到的页面外观也会随之改变。 CSS 的理念就是让文档的结构和设计分离,达到解耦的目的。
下面让我们来看一个 CSS 的用例。

.logo {
	padding: 20px;
	text-align: center;
}

可在选择器(selector) .logo 的指定范围内,使用 {} 括起来的声明块中写明的 padding: 20px 等声明语句应用指定的样式。可通过指定 HTML 元素或特定的 class、 ID 等作为选择器来限定样式的应用范围。

10.2 动态 HTML

10.2.1 让 Web 页面动起来的动态 HTML

所谓动态 HTML(Dynamic HTML),是指使用客户端脚本语言将静态的 HTML 内容变成动态的技术的总称。鼠标单击点开的新闻、 Google Maps 等可滚动的地图就用到了动态 HTML。动态 HTML 技术是通过调用客户端脚本语言 JavaScript,实现对 HTML 的 Web 页面的动态改造。利用 DOM(Document Object Model,文档对象模型)可指定欲发生动态变化的 HTML 元素。

10.2.2 更易控制 HTML 的 DOM

DOM 是用以操作 HTML 文档和 XML 文档的 API(Application Programming Interface,应用编程接口)。使用 DOM 可以将 HTML 内的元素当作对象操作,如取出元素内的字符串、改变那个 CSS 的属性等,使页面的设计发生改变。通过调用 JavaScript 等脚本语言对 DOM 的操作,可以以更为简单的方式控制 HTML 的改变。

<body>
	<h1>繁琐的Web安全</h1>
	<p>第Ⅰ部分 Web的构成元素</p>
	<p>第Ⅱ部分 浏览器的安全功能</p>
	<p>第Ⅲ部分 接下来发生的事</p>
</body>

比如,从 JavaScript 的角度来看,将上述 HTML 文档的第 3 个 P 元素(P 标签)改变文字颜色时,会像下方这样编写代码。

<script type="text/javascript">
	var content = document.getElementsByTagName('P');
	content[2].style.color = '#FF0000';
</script>

document.getElementsByTagName(‘P’) 语句调用 getElementsByTagName 函数,从整个 HTML 文档(document object)内取出 P 元素。接下来的 content[2].style.color = ‘#FF0000’ 语句指定 content 的索引为 2(第 3 个)的元素的样式颜色改为红色(#FF0000)。DOM 内存在各种函数,使用它们可查阅 HTML 中的各个元素。

10.3 Web 应用

10.3.1 通过 Web 提供功能的 Web 应用

原本应用 HTTP 协议的 Web 的机制就是对客户端发来的请求,返回事前准备好的内容。可随着 Web 越来越普及,仅靠这样的做法已不足以应对所有的需求,更需要引入由程序创建 HTML 内容的做法。类似这种由程序创建的内容称为动态内容,而事先准备好的内容称为静态内容。 Web 应用则作用于动态内容
之上。

10.3.2 与 Web 服务器及程序协作的 CGI

CGI(Common Gateway Interface,通用网关接口)是指 Web 服务器在接收到客户端发送过来的请求后转发给程序的一组机制。在 CGI 的作用下,程序会对请求内容做出相应的动作,比如创建 HTML 等动态内容。使用 CGI 的程序叫做 CGI 程序,通常是用 Perl、 PHP、 Ruby 和 C 等编程语言编写而成。

10.4 数据发布的格式及语言

10.4.1 可扩展标记语言

XML(eXtensible Markup Language,可扩展标记语言)是一种可按应用目标进行扩展的通用标记语言。旨在通过使用 XML,使互联网数据共享变得更容易。XML 和 HTML 都是从标准通用标记语言 SGML(Standard Generalized Markup Language)简化而成。与 HTML 相比,它对数据的记录方式做了特殊处理。

10.4.2 JavaScript 衍生的轻量级易用 JSON

JSON(JavaScript Object Notation)是一种以 JavaScript(ECMAScript)的对象表示法为基础的轻量级数据标记语言。能够处理的数据类型有 false/null/true/ 对象 / 数组 / 数字 / 字符串,这 7 种类型。
{"name": "Web Application Security", "num": "TR001"}
JSON 让数据更轻更纯粹,并且 JSON 的字符串形式可被 JavaScript 轻易地读入。当初配合 XML 使用的 Ajax技术也让 JSON 的应用变得更为广泛。另外,其他各种编程语言也提供丰富的库类,以达到轻便操作 JSON的目的。

猜你喜欢

转载自blog.csdn.net/weixin_39020133/article/details/106758466