圖解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的目的。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章