web前端面試題-HTML篇（持續(xù)更新...）

，Doctype作用？標(biāo)準(zhǔn)模式與兼容模式各有什么區(qū)別?

（1）、<!DOCTYPE>聲明位于位于HTML文檔中的第一行，處于 <html> 標(biāo)簽之前。告知瀏覽器的解析器用什么文檔標(biāo)準(zhǔn)解析這個(gè)文檔。DOCTYPE不存在或格式不正確會導(dǎo)致文檔以兼容模式呈現(xiàn)。
（2）、標(biāo)準(zhǔn)模式的排版和JS運(yùn)作模式都是以該瀏覽器支持的最高標(biāo)準(zhǔn)運(yùn)行。在兼容模式中，頁面以寬松的向后兼容的方式顯示,模擬老式瀏覽器的行為以防止站點(diǎn)無法工作。

2，HTML5 為什么只需要寫 <!DOCTYPE HTML>？

HTML5 不基于 SGML，因此不需要對DTD進(jìn)行引用，但是需要doctype來規(guī)范瀏覽器的行為（讓瀏覽器按照它們應(yīng)該的方式來運(yùn)行）；
而HTML4.01基于SGML,所以需要對DTD進(jìn)行引用，才能告知瀏覽器文檔所使用的文檔類型。

3，行內(nèi)元素有哪些？塊級元素有哪些？空(void)元素有那些？

首先：CSS規(guī)范規(guī)定，每個(gè)元素都有display屬性，確定該元素的類型，每個(gè)元素都有默認(rèn)的display值，如div的display默認(rèn)值為“block”，則為“塊級”元素；span默認(rèn)display屬性值為“inline”，是“行內(nèi)”元素。
（1）行內(nèi)元素有：a b span img input select strong（強(qiáng)調(diào)的語氣）
（2）塊級元素有：div ul ol li dl dt dd h1 h2 h3 h4…p
（3）常見的空元素：
<br> <hr> <img> <input> <link> <meta>
鮮為人知的是：
<area> <base> <col> <command> <embed> <keygen> <param> <source> <track> <wbr>

4，頁面導(dǎo)入樣式時(shí)，使用link和@import有什么區(qū)別？

（1）link屬于XHTML標(biāo)簽，除了加載CSS外，還能用于定義RSS, 定義rel連接屬性等作用；而@import是CSS提供的，只能用于加載CSS;
（2）頁面被加載的時(shí)，link會同時(shí)被加載，而@import引用的CSS會等到頁面被加載完再加載;
（3）import是CSS2.1 提出的，只在IE5以上才能被識別，而link是XHTML標(biāo)簽，無兼容問題;

5，介紹一下你對瀏覽器內(nèi)核的理解？

主要分成兩部分：渲染引擎(layout engineer或Rendering Engine)和JS引擎。
（1）渲染引擎：負(fù)責(zé)取得網(wǎng)頁的內(nèi)容（HTML、XML、圖像等等）、整理訊息（例如加入CSS等），以及計(jì)算網(wǎng)頁的顯示方式，然后會輸出至顯示器或打印機(jī)。瀏覽器的內(nèi)核的不同對于網(wǎng)頁的語法解釋會有不同，所以渲染的效果也不相同。所有網(wǎng)頁瀏覽器、電子郵件客戶端以及其它需要編輯、顯示網(wǎng)絡(luò)內(nèi)容的應(yīng)用程序都需要內(nèi)核。
（2）JS引擎則：解析和執(zhí)行javascript來實(shí)現(xiàn)網(wǎng)頁的動態(tài)效果。
最開始渲染引擎和JS引擎并沒有區(qū)分的很明確，后來JS引擎越來越獨(dú)立，內(nèi)核就傾向于只指渲染引擎。

6，常見的瀏覽器內(nèi)核有哪些？

Trident內(nèi)核：IE,MaxThon,TT,The World,360,搜狗瀏覽器等。[又稱MSHTML]
Gecko內(nèi)核：Netscape6及以上版本，F(xiàn)F,MozillaSuite/SeaMonkey等
Presto內(nèi)核：Opera7及以上。 [Opera內(nèi)核原為：Presto，現(xiàn)為：Blink;]
Webkit內(nèi)核：Safari,Chrome等。 [ Chrome的：Blink（WebKit的分支）]

7，html5有哪些新特性、移除了那些元素？如何處理HTML5新標(biāo)簽的瀏覽器兼容問題？如何區(qū)分 HTML 和 HTML5？

* HTML5 現(xiàn)在已經(jīng)不是 SGML 的子集，主要是關(guān)于圖像，位置，存儲，多任務(wù)等功能的增加。
繪畫 canvas;
用于媒介回放的 video 和 audio 元素;
本地離線存儲 localStorage 長期存儲數(shù)據(jù)，瀏覽器關(guān)閉后數(shù)據(jù)不丟失;
sessionStorage 的數(shù)據(jù)在瀏覽器關(guān)閉后自動刪除;
語意化更好的內(nèi)容元素，比如 article、footer、header、nav、section;
表單控件，calendar、date、time、email、url、search;
新的技術(shù)webworker, websocket, Geolocation;
移除的元素：
純表現(xiàn)的元素：basefont，big，center，font, s，strike，tt，u;
對可用性產(chǎn)生負(fù)面影響的元素：frame，frameset，noframes；
* 支持HTML5新標(biāo)簽：
IE8/IE7/IE6支持通過document.createElement方法產(chǎn)生的標(biāo)簽，
可以利用這一特性讓這些瀏覽器支持HTML5新標(biāo)簽，
瀏覽器支持新標(biāo)簽后，還需要添加標(biāo)簽?zāi)J(rèn)的樣式。
當(dāng)然也可以直接使用成熟的框架、比如html5shim;

* 如何區(qū)分HTML5： DOCTYPE聲明\新增的結(jié)構(gòu)元素\功能元素

8，簡述一下你對HTML語義化的理解？

用正確的標(biāo)簽做正確的事情。
html語義化讓頁面的內(nèi)容結(jié)構(gòu)化，結(jié)構(gòu)更清晰，便于對瀏覽器、搜索引擎解析;
即使在沒有樣式CSS情況下也以一種文檔格式顯示，并且是容易閱讀的;
搜索引擎的爬蟲也依賴于HTML標(biāo)記來確定上下文和各個(gè)關(guān)鍵字的權(quán)重，利于SEO;
使閱讀源代碼的人對網(wǎng)站更容易將網(wǎng)站分塊，便于閱讀維護(hù)理解。

9，HTML5的離線儲存怎么使用，工作原理能不能解釋一下？

在用戶沒有與因特網(wǎng)連接時(shí)，可以正常訪問站點(diǎn)或應(yīng)用，在用戶與因特網(wǎng)連接時(shí)，更新用戶機(jī)器上的緩存文件。
原理：HTML5的離線存儲是基于一個(gè)新建的.appcache文件的緩存機(jī)制(不是存儲技術(shù))，通過這個(gè)文件上的解析清單離線存儲資源，這些資源就會像cookie一樣被存儲了下來。之后當(dāng)網(wǎng)絡(luò)在處于離線狀態(tài)下時(shí)，瀏覽器會通過被離線存儲的數(shù)據(jù)進(jìn)行頁面展示。
如何使用：
1、頁面頭部像下面一樣加入一個(gè)manifest的屬性；
2、在cache.manifest文件的編寫離線存儲的資源；
CACHE MANIFEST
#v0.11
CACHE:
js/app.js
css/style.css
NETWORK:
resourse/logo.png
FALLBACK:
/ /offline.html
3、在離線狀態(tài)時(shí)，操作window.applicationCache進(jìn)行需求實(shí)現(xiàn)。

10，瀏覽器是怎么對HTML5的離線儲存資源進(jìn)行管理和加載的呢？

在線的情況下，瀏覽器發(fā)現(xiàn)html頭部有manifest屬性，它會請求manifest文件，如果是第一次訪問app，那么瀏覽器就會根據(jù)manifest文件的內(nèi)容下載相應(yīng)的資源并且進(jìn)行離線存儲。如果已經(jīng)訪問過app并且資源已經(jīng)離線存儲了，那么瀏覽器就會使用離線的資源加載頁面，然后瀏覽器會對比新的manifest文件與舊的manifest文件，如果文件沒有發(fā)生改變，就不做任何操作，如果文件改變了，那么就會重新下載文件中的資源并進(jìn)行離線存儲。
離線的情況下，瀏覽器就直接使用離線存儲的資源。

11，請描述一下 cookies，sessionStorage 和 localStorage 的區(qū)別？

cookie是網(wǎng)站為了標(biāo)示用戶身份而儲存在用戶本地終端（Client Side）上的數(shù)據(jù)（通常經(jīng)過加密）。
cookie數(shù)據(jù)始終在同源的http請求中攜帶（即使不需要），記會在瀏覽器和服務(wù)器間來回傳遞。
sessionStorage和localStorage不會自動把數(shù)據(jù)發(fā)給服務(wù)器，僅在本地保存。
存儲大小：
cookie數(shù)據(jù)大小不能超過4k。
sessionStorage和localStorage 雖然也有存儲大小的限制，但比cookie大得多，可以達(dá)到5M或更大。
有期時(shí)間：
localStorage 存儲持久數(shù)據(jù)，瀏覽器關(guān)閉后數(shù)據(jù)不丟失除非主動刪除數(shù)據(jù)；
sessionStorage 數(shù)據(jù)在當(dāng)前瀏覽器窗口關(guān)閉后自動刪除。
cookie 設(shè)置的cookie過期時(shí)間之前一直有效，即使窗口或?yàn)g覽器關(guān)閉

12，iframe有那些缺點(diǎn)？

*iframe會阻塞主頁面的Onload事件；
*搜索引擎的檢索程序無法解讀這種頁面，不利于SEO;
*iframe和主頁面共享連接池，而瀏覽器對相同域的連接有限制，所以會影響頁面的并行加載。
使用iframe之前需要考慮這兩個(gè)缺點(diǎn)。如果需要使用iframe，最好是通過javascript
動態(tài)給iframe添加src屬性值，這樣可以繞開以上兩個(gè)問題。

13，Label的作用是什么？是怎么用的？

label標(biāo)簽來定義表單控制間的關(guān)系,當(dāng)用戶選擇該標(biāo)簽時(shí)，瀏覽器會自動將焦點(diǎn)轉(zhuǎn)到和標(biāo)簽相關(guān)的表單控件上。
<label for="Name">Number:</label>
<input type=“text“name="Name" id="Name"/>
<label>Date:<input type="text" name="B"/></label>

14，如何實(shí)現(xiàn)瀏覽器內(nèi)多個(gè)標(biāo)簽頁之間的通信?

WebSocket、SharedWorker；
也可以調(diào)用localstorge、cookies等本地存儲方式；
localstorge另一個(gè)瀏覽上下文里被添加、修改或刪除時(shí)，它都會觸發(fā)一個(gè)事件，
我們通過監(jiān)聽事件，控制它的值來進(jìn)行頁面信息通信；
注意quirks：Safari 在無痕模式下設(shè)置localstorge值時(shí)會拋出 QuotaExceededError 的異常；

15，如何在頁面上實(shí)現(xiàn)一個(gè)圓形的可點(diǎn)擊區(qū)域？

1、map+area或者svg
2、border-radius
3、純js實(shí)現(xiàn) 需要求一個(gè)點(diǎn)在不在圓上簡單算法、獲取鼠標(biāo)坐標(biāo)等等

16，title與h1的區(qū)別、b與strong的區(qū)別、i與em的區(qū)別？

title屬性沒有明確意義只表示是個(gè)標(biāo)題，H1則表示層次明確的標(biāo)題，對頁面信息的抓取也有很大的影響；

strong是標(biāo)明重點(diǎn)內(nèi)容，有語氣加強(qiáng)的含義，使用閱讀設(shè)備閱讀網(wǎng)絡(luò)時(shí)：<strong>會重讀，而<B>是展示強(qiáng)調(diào)內(nèi)容。

i內(nèi)容展示為斜體，em表示強(qiáng)調(diào)的文本；

Physical Style Elements -- 自然樣式標(biāo)簽

b, i, u, s, pre

Semantic Style Elements -- 語義樣式標(biāo)簽

strong, em, ins, del, code

應(yīng)該準(zhǔn)確使用語義樣式標(biāo)簽, 但不能濫用, 如果不能確定時(shí)首選使用自然樣式標(biāo)簽。

17，你知道多少種Doctype文檔類型？

該標(biāo)簽可聲明三種 DTD 類型，分別表示嚴(yán)格版本、過渡版本以及基于框架的 HTML 文檔。

HTML 4.01 規(guī)定了三種文檔類型：Strict、Transitional 以及 Frameset。

XHTML 1.0 規(guī)定了三種 XML 文檔類型：Strict、Transitional 以及 Frameset。

Standards （標(biāo)準(zhǔn)）模式（也就是嚴(yán)格呈現(xiàn)模式）用于呈現(xiàn)遵循最新標(biāo)準(zhǔn)的網(wǎng)頁，而 Quirks（包容）模式（也就是松散呈現(xiàn)模式或者兼容模式）用于呈現(xiàn)為傳統(tǒng)瀏覽器而設(shè)計(jì)的網(wǎng)頁。

18， HTML與XHTML——二者有什么區(qū)別？

區(qū)別：

1.所有的標(biāo)記都必須要有一個(gè)相應(yīng)的結(jié)束標(biāo)記

2.所有標(biāo)簽的元素和屬性的名字都必須使用小寫

3.所有的XML標(biāo)記都必須合理嵌套

4.所有的屬性必須用引號""括起來

5.把所有<和&特殊符號用編碼表示

6.給所有屬性賦一個(gè)值

7.不要在注釋內(nèi)容中使“--”

8.圖片必須有說明文字

19，<img>的title和alt有什么區(qū)別？

title是global attributes之一，用于為元素提供附加的advisory information。通常當(dāng)鼠標(biāo)滑動到元素上的時(shí)候顯示。

alt是<img>的特有屬性，是圖片內(nèi)容的等價(jià)描述，用于圖片無法加載時(shí)顯示、讀屏器閱讀圖片。可提圖片高可訪問性，除了純裝飾圖片外都必須設(shè)置有意義的值，搜索引擎會重點(diǎn)分析。

、XHTML與HTML的區(qū)別

文檔結(jié)構(gòu)

XHTML DOCTYPE 是強(qiáng)制性的

<html>中的 XML namespace 屬性是強(qiáng)制性的

<html>、<head>、<title>以及 <body>也是強(qiáng)制性的

元素語法

XHTML 元素必須正確嵌套

XHTML 元素必須始終關(guān)閉

XHTML 元素必須小寫

XHTML 文檔必須有一個(gè)根元素

屬性語法

XHTML 屬性必須使用小寫

XHTML 屬性值必須用引號包圍

XHTML 屬性最小化也是禁止的

二、HTML5中一些新特性

用于繪畫的 canvas 元素

用于媒介回放的 video 和 audio 元素

對本地離線存儲的更好的支持

新的特殊內(nèi)容元素，比如 article、footer、header、nav、section

新的表單控件，比如 calendar、date、time、email、url、search

注意：最新版本的 Safari、Chrome、Firefox 以及 Opera 支持某些 HTML5 特性。Internet Explorer 9 將支持某些 HTML5 特性。

IE9 以下版本瀏覽器兼容HTML5的方法，使用本站的靜態(tài)資源的html5shiv包：

<!--[if lt IE 9]>
    <script src="http://cdn.static.runoob.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
<![endif]-->

? ?/*html5*/
article,aside,dialog,footer,header,section,nav,figure,menu{display:block}

我自己是一名從事了多年開發(fā)的web前端老程序員，目前辭職在做自己的web前端私人定制課程，今年年初我花了一個(gè)月整理了一份最適合2019年學(xué)習(xí)的web前端學(xué)習(xí)干貨，各種框架都有整理，送給每一位前端小伙伴，想要獲取的可以關(guān)注我的頭條號并在后臺私信我：前端，即可免費(fèi)獲取。

三、HTML5web存儲

使用HTML5可以在本地存儲用戶的瀏覽數(shù)據(jù)。

早些時(shí)候,本地存儲使用的是 cookie。但是Web 存儲需要更加的安全與快速. 這些數(shù)據(jù)不會被保存在服務(wù)器上，但是這些數(shù)據(jù)只用于用戶請求網(wǎng)站數(shù)據(jù)上.它也可以存儲大量的數(shù)據(jù)，而不影響網(wǎng)站的性能.

數(shù)據(jù)以鍵/值對存在, web網(wǎng)頁的數(shù)據(jù)只允許該網(wǎng)頁訪問使用。

瀏覽器支持：

Internet Explorer 8+, Firefox, Opera, Chrome, 和 Safari支持Web 存儲。

注意: Internet Explorer 7 及更早IE版本不支持web 存儲.

localStorage 和 sessionStorage

客戶端存儲數(shù)據(jù)的兩個(gè)對象為：

localStorage - 用于長久保存整個(gè)網(wǎng)站的數(shù)據(jù)，保存的數(shù)據(jù)沒有過期時(shí)間，直到手動去除。

sessionStorage - 用于臨時(shí)保存同一窗口(或標(biāo)簽頁)的數(shù)據(jù)，在關(guān)閉窗口或標(biāo)簽頁之后將會刪除這些數(shù)據(jù)。

在使用 web 存儲前,應(yīng)檢查瀏覽器是否支持 localStorage 和sessionStorage:

if(typeof(Storage)!=="undefined")
{
    // 是的! 支持 localStorage  sessionStorage 對象!
    // 一些代碼.....
} else {
    // 抱歉! 不支持 web 存儲。
}

不管是 localStorage，還是 sessionStorage，可使用的API都相同，常用的有如下幾個(gè)（以localStorage為例）：

保存數(shù)據(jù)：localStorage.setItem(key,value);

讀取數(shù)據(jù)：localStorage.getItem(key);

刪除單個(gè)數(shù)據(jù)：localStorage.removeItem(key);

刪除所有數(shù)據(jù)：localStorage.clear();

得到某個(gè)索引的key：localStorage.key(index);

四、HTML5 應(yīng)用程序緩存

HTML5 -應(yīng)用程序緩存=>使用文章鏈接跳轉(zhuǎn)點(diǎn)這里

五、HTML5 服務(wù)器發(fā)送事件（Server-Sent Events）

Server-Sent 事件指的是網(wǎng)頁自動獲取來自服務(wù)器的更新。

以前也可能做到這一點(diǎn)，前提是網(wǎng)頁不得不詢問是否有可用的更新。通過服務(wù)器發(fā)送事件，更新能夠自動到達(dá)。

例子：Facebook/Twitter 更新、股價(jià)更新、新的博文、賽事結(jié)果等。

所有主流瀏覽器均支持服務(wù)器發(fā)送事件，除了 Internet Explorer。

<h1>獲取服務(wù)端更新數(shù)據(jù)</h1>
<div id="result"></div>

if(typeof(EventSource)!=="undefined")
{
	var source=new EventSource("demo_sse.php");
	source.onmessage=function(event)
	{
		document.getElementById("result").innerHTML+=event.data + "<br>";
	};
}
else
{
	document.getElementById("result").innerHTML="抱歉，你的瀏覽器不支持 server-sent 事件...";
}

六、HTML5 WebSocket

WebSocket 是 HTML5 開始提供的一種在單個(gè) TCP 連接上進(jìn)行全雙工通訊的協(xié)議。

WebSocket 使得客戶端和服務(wù)器之間的數(shù)據(jù)交換變得更加簡單，允許服務(wù)端主動向客戶端推送數(shù)據(jù)。在 WebSocket API 中，瀏覽器和服務(wù)器只需要完成一次握手，兩者之間就直接可以創(chuàng)建持久性的連接，并進(jìn)行雙向數(shù)據(jù)傳輸。

在 WebSocket API 中，瀏覽器和服務(wù)器只需要做一個(gè)握手的動作，然后，瀏覽器和服務(wù)器之間就形成了一條快速通道。兩者之間就直接可以數(shù)據(jù)互相傳送。

現(xiàn)在，很多網(wǎng)站為了實(shí)現(xiàn)推送技術(shù)，所用的技術(shù)都是 Ajax 輪詢。輪詢是在特定的的時(shí)間間隔（如每1秒），由瀏覽器對服務(wù)器發(fā)出HTTP請求，然后由服務(wù)器返回最新的數(shù)據(jù)給客戶端的瀏覽器。這種傳統(tǒng)的模式帶來很明顯的缺點(diǎn)，即瀏覽器需要不斷的向服務(wù)器發(fā)出請求，然而HTTP請求可能包含較長的頭部，其中真正有效的數(shù)據(jù)可能只是很小的一部分，顯然這樣會浪費(fèi)很多的帶寬等資源。

HTML5 定義的 WebSocket 協(xié)議，能更好的節(jié)省服務(wù)器資源和帶寬，并且能夠更實(shí)時(shí)地進(jìn)行通訊。

詳情和代碼示例：.

七、HTTP狀態(tài)消息

1xx: 信息

2xx: 成功

3xx: 重定向

4xx: 客戶端錯(cuò)誤

5xx: 服務(wù)器錯(cuò)誤

詳情

八、HTTP 方法：GET 對比 POST

兩種最常用的 HTTP 方法是：GET 和 POST。

什么是 HTTP ？

超文本傳輸協(xié)議（HTTP）的設(shè)計(jì)目的是保證客戶端與服務(wù)器之間的通信。

HTTP 的工作方式是客戶端與服務(wù)器之間的請求-應(yīng)答協(xié)議。

web 瀏覽器可能是客戶端，而計(jì)算機(jī)上的網(wǎng)絡(luò)應(yīng)用程序也可能作為服務(wù)器端。

舉例：客戶端（瀏覽器）向服務(wù)器提交 HTTP 請求；服務(wù)器向客戶端返回響應(yīng)。響應(yīng)包含關(guān)于請求的狀態(tài)信息以及可能被請求的內(nèi)容。

GET - 從指定的資源請求數(shù)據(jù)。

POST - 向指定的資源提交要被處理的數(shù)據(jù)。

GET 方法

請注意，查詢字符串（名稱/值對）是在 GET 請求的 URL 中發(fā)送的：

/test/demo_form.php?name1=value1&name2=value2

有關(guān) GET 請求的其他一些注釋：

GET 請求可被緩存

GET 請求保留在瀏覽器歷史記錄中

GET 請求可被收藏為書簽

GET 請求不應(yīng)在處理敏感數(shù)據(jù)時(shí)使用

GET 請求有長度限制

GET 請求只應(yīng)當(dāng)用于取回?cái)?shù)據(jù)

POST 方法

請注意，查詢字符串（名稱/值對）是在 POST 請求的 HTTP 消息主體中發(fā)送的：

有關(guān) POST 請求的其他一些注釋：

POST 請求不會被緩存

POST 請求不會保留在瀏覽器歷史記錄中

POST 不能被收藏為書簽

POST 請求對數(shù)據(jù)長度沒有要求

其他 HTTP 請求方法

下面的表格列出了其他一些 HTTP 請求方法：

原文鏈接：https://blog.csdn.net/weixin_39834961/article/details/103765680
作者：yhlyeah

件項(xiàng)目實(shí)訓(xùn)及課程設(shè)計(jì)指導(dǎo)——應(yīng)用XML+XSLT技術(shù)分離Web應(yīng)用系統(tǒng)中表示層數(shù)據(jù)和樣式的實(shí)例

1、在J2EE應(yīng)用系統(tǒng)中應(yīng)用XSLT實(shí)現(xiàn)XML文檔轉(zhuǎn)換的基本過程

（1）首先，創(chuàng)建出目標(biāo)XML格式文檔文件，該XML格式文檔文件代表應(yīng)用系統(tǒng)中的數(shù)據(jù)模型

（2）其次，建立出XSLT文檔文件，該XSLT文檔文件代表對XML數(shù)據(jù)的顯示控制

（3）最后，在XML格式文檔文件中調(diào)用這個(gè)XSLT文件以便能夠?qū)ML和XSLT相互關(guān)聯(lián)。

2、在J2EE應(yīng)用系統(tǒng)中應(yīng)用"XML+XSLT"技術(shù)的應(yīng)用示例

作者在下文中通過一個(gè)示例為讀者介紹如何應(yīng)用"XML+XSLT"技術(shù)徹底分離Web應(yīng)用系統(tǒng)中表示層頁面中的數(shù)據(jù)和樣式。

（1）首先，創(chuàng)建出一個(gè)XML格式文檔文件

下面的代碼示例中所示的XML格式文檔文件是一個(gè)很簡單XML格式文檔，只包含一個(gè)節(jié)點(diǎn)的XML結(jié)構(gòu)樹。該XML格式文檔文件的內(nèi)容在實(shí)際的企業(yè)級應(yīng)用系統(tǒng)中，可以在Web服務(wù)器端根據(jù)系統(tǒng)中業(yè)務(wù)處理的規(guī)則動態(tài)創(chuàng)建出，它代表處理結(jié)果的XML文檔。

本示例中的XML文檔文件名稱為FirstXMLFile.xml，具體的內(nèi)容請見如下的代碼示例所示—— XML文檔文件FirstXMLFile.xml的內(nèi)容示例。

<?xml version="1.0" encoding="gb2312" ?>
<firstXML>這是我在學(xué)習(xí)XSLT時(shí)所寫的一個(gè)XML文檔中的內(nèi)容</firstXML >

（2）其次，建立出XSLT格式文檔文件

該XSLT格式文檔文件代表對XML文檔中數(shù)據(jù)的顯示風(fēng)格控制，在本示例中作者所建立的XSLT文檔文件的文件名稱為FirstXSL.xsl，該文件中的具體內(nèi)容請見如下的代碼示例所示—— XSLT文檔文件FirstXSL.xsl的內(nèi)容示例。

<?xml version="1.0" encoding="gb2312" ?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/TR/WD-xsl" version="1.0">
    <xsl:template match="/">
        <html>
            <head>
            <title>這是我在XSLT時(shí)所做的第一個(gè)XSLT文件示例</title>
            </head>
            <body>
            <p><xsl:value-of select="firstXML"/></p>
            </body>
        </html>
    </xsl:template>
</xsl:stylesheet>

為了方便讀者理解上面示例代碼中的XSLT文檔文件中的標(biāo)簽內(nèi)容的含義，作者在下文中對其中的主要標(biāo)簽元素加以解釋說明。

1）<xsl:stylesheet>標(biāo)簽定義一個(gè)樣式表

<xsl:stylesheet>標(biāo)簽的主要功能是將此XSLT文檔作為一個(gè)樣式表 (StyleSheet) 來處理，從而明確地定義了本XSLT文檔的用途。

按照XSLT文檔語法的規(guī)定，所有的XSL命令都必須包含在<xsl:stylesheet>起始標(biāo)簽和</xsl:stylesheet>結(jié)束標(biāo)簽之間，也就是說這個(gè)<xsl:stylesheet>標(biāo)簽界定了輸出轉(zhuǎn)換后的XSL樣式的內(nèi)容。

其中的xmlns:xsl屬性是一個(gè)名字空間聲明（XSL樣式表中所有的指令都必須注明屬于http://www.w3.org/TR/WD-xsl這個(gè)XSL專屬的名稱空間），和XML格式文檔中的名字空間的使用方法一樣，用來防止標(biāo)簽元素名稱重復(fù)和混亂。其中的前綴xsl的意思是文檔中使用的標(biāo)簽元素遵守W3C的XSLT語法規(guī)范；最后的version屬性說明樣式表只采用XSLT 1.0的標(biāo)準(zhǔn)功能，這也是目前僅有的標(biāo)準(zhǔn)。

當(dāng)然，也可以在模板HTML頁面中使用CSS層疊樣式表技術(shù)，此時(shí)應(yīng)該在XSLT文檔中添加如下的引用語句, 當(dāng)然也就不再需要<xsl:stylesheet>標(biāo)簽。

<link rel="stylesheet" type="text/css" href="cssStyleFile.css"/>

2）<xsl:template>標(biāo)簽定義一個(gè)模板規(guī)則

XSLT模板把XSLT文檔的設(shè)計(jì)細(xì)化成一個(gè)個(gè)的模塊（每一個(gè)模塊定義為一個(gè)"template"，由<xsl:template>標(biāo)簽定義此模塊），最后再把這些模塊組合串接成一個(gè)完整的XSLT文檔文件。這樣的語法規(guī)則能夠?qū)崿F(xiàn)很好地將數(shù)據(jù)分塊和隔離。

另外，應(yīng)用這種方案可以使開發(fā)者先從整體上考慮整個(gè)XSLT文檔的設(shè)計(jì)，然后再把總體表現(xiàn)形式進(jìn)一步細(xì)化成不同的模塊和子模塊，再分別具體設(shè)計(jì)這些模塊，最后把它們整合和串接在一起。

<xsl:template>標(biāo)簽中的屬性match="/"說明在XML源文檔中這個(gè)模板規(guī)則作用的起點(diǎn)。"/"是一種XPath（XML Path Language，XML路徑語言）語法，這里的"/"代表XML源文檔結(jié)構(gòu)樹的根(root)標(biāo)簽。

3）<xsl:template>標(biāo)簽定義其中的內(nèi)容

當(dāng)模板規(guī)則被觸發(fā)，模板的內(nèi)容就會控制輸出的結(jié)果。在上面的代碼示例中，模板大部分內(nèi)容由HTML標(biāo)簽元素和文本構(gòu)成。只有<xsl:value-of>標(biāo)簽元素是應(yīng)用XSLT語法規(guī)則的標(biāo)簽，這里的<xsl:value-of>標(biāo)簽的主要作用是拷貝原XML源文檔中的一個(gè)標(biāo)簽節(jié)點(diǎn)的值到輸出文檔中。而其中的select屬性則詳細(xì)指定要處理的XML標(biāo)簽節(jié)點(diǎn)名稱——但這是遵守XPath（XML Path Language，XML路徑語言）語法規(guī)則。

其中的值"firstXML"的意思就是尋找XML文檔根標(biāo)簽節(jié)點(diǎn)名為firstXML的標(biāo)簽元素（也就是XML文檔中的<firstXML>標(biāo)簽），并用此模板來處理這個(gè)<firstXML>標(biāo)簽節(jié)點(diǎn)——也就是找到<firstXML>標(biāo)簽元素，然后將該標(biāo)簽元素的值"這是我在學(xué)習(xí)XSL時(shí)所寫的一個(gè)XML文檔中的內(nèi)容"按模板的樣式定義拷貝到輸出文件（本示例為HTML文檔文件）。因此，轉(zhuǎn)換后的HTML文檔結(jié)構(gòu)清晰、修改也方便。

當(dāng)然，讀者也可以用IE5.0以上版本的瀏覽器或者其它瀏覽器打開這個(gè)FirstXSL.xsl文件，將能夠看到如下示圖所示的XSL的結(jié)構(gòu)樹——因?yàn)閄SL文檔本身也是XML格式的文檔，同樣也要遵守XML格式的文檔的各種語法規(guī)則。

（3）最后，在XML格式文檔文件中調(diào)用這個(gè)XSLT文件以便能夠?qū)ML文檔（代表軟件應(yīng)用系統(tǒng)中的業(yè)務(wù)處理后的結(jié)果數(shù)據(jù)）和XSLT（代表對這些結(jié)果數(shù)據(jù)在最終的目標(biāo)終端設(shè)備中如何顯示和輸出）相互關(guān)聯(lián)

沒有在上面所示的XML文檔文件中添加對XSLT關(guān)聯(lián)之前的執(zhí)行結(jié)果狀態(tài)為如下示圖所示的顯示結(jié)果——無格式化的XML文檔文件的結(jié)果，這不利于人類閱讀和理解——因?yàn)樵跀?shù)據(jù)中還包含有大量的XML格式文檔的標(biāo)簽。

然后在前面所示的XML格式文檔文件中調(diào)用這個(gè)XSLT文件——這只需要修改FirstXMLFile.xml中的代碼為下面的內(nèi)容以增加格式化轉(zhuǎn)換的功能實(shí)現(xiàn)代碼。最終的FirstXMLFile.xml文件的內(nèi)容請見如下代碼所示，請讀者注意其中黑體標(biāo)識的標(biāo)簽—— 對FirstXMLFile.xml文件添加格式轉(zhuǎn)換（引用前面的FirstXSL.xsl樣式表文件）之后的文件內(nèi)容示例如下：

<?xml version="1.0" encoding="gb2312" ?>
<?xml-stylesheet type="text/xsl" href="FirstXSL.xsl"?>
<firstXML>這是我在學(xué)習(xí)XSLT時(shí)所寫的一個(gè)XML文檔中的內(nèi)容</firstXML >

然后再在瀏覽器中瀏覽FirstXMLFile.xml文件，將出現(xiàn)如下示圖所示的內(nèi)容——由于在微軟的IE5.5以上版本的瀏覽器中已經(jīng)內(nèi)嵌了MSXML3解釋器，因此能夠正常地解析。

請讀者注意，如果讀者在瀏覽器中只看到XML結(jié)構(gòu)樹（請參考前一示圖所示的顯示結(jié)果），而不是單獨(dú)的"這是我在學(xué)習(xí)XSLT時(shí)所寫的一個(gè)XML文檔中的內(nèi)容"字樣，則說明讀者機(jī)器中的瀏覽器沒有安裝MSXML3版本的XML Processor（支持XSLT技術(shù)的XML 處理器）程序。

讀者可以對比前面的兩個(gè)示例圖，明顯地能夠了解到對XML文檔文件經(jīng)過XSLT的格式轉(zhuǎn)換后在瀏覽器中能夠按照設(shè)計(jì)者的要求顯示輸出，并且有利于人類的閱讀和理解。

（4）將它們部署到應(yīng)用服務(wù)器中執(zhí)行

為了能夠讓讀者了解XML+XSLT技術(shù)在Web應(yīng)用系統(tǒng)開發(fā)中的具體應(yīng)用，也可以將前面的代碼所示的XML文檔文件FirstXMLFile.xml和XSLT格式文檔文件FirstXSL.xsl都部署到應(yīng)用服務(wù)器（如 Tomcat等）中。然后在瀏覽器中對該FirstXMLFile.xml文件進(jìn)行請求，比如請求的URL地址為：http://127.0.0.1:8080/WebBBS/FirstXMLFile.xml，將能夠看到如下示圖所示的結(jié)果——與前面示圖所示的在本地瀏覽的結(jié)果是一致的。

讀者從上面示例圖所示的結(jié)果應(yīng)該能夠理解，XML與XSLT相互配合，同樣也能夠構(gòu)造服務(wù)器端的應(yīng)用。而且同一個(gè)XML格式的文檔文件，只需要提供不同的XSLT格式文檔文件，將可以產(chǎn)生出不同的顯示效果。據(jù)此，對于不同的終端設(shè)備, 軟件應(yīng)用系統(tǒng)的開發(fā)人員可以設(shè)計(jì)出不同的XSLT文檔文件就可以實(shí)現(xiàn)相同的數(shù)據(jù)在不同的終端設(shè)備中顯示出不同的風(fēng)格。

4、體驗(yàn)"XML+XSLT"技術(shù)中的格式和數(shù)據(jù)分離的優(yōu)點(diǎn)

讀者只需要將前面代碼示例所示的XSLT文檔文件FirstXSL.xsl中的如下的標(biāo)簽內(nèi)容：

<p><xsl:value-of select="firstXML"/></p>

改變?yōu)槿缦碌臉?biāo)簽內(nèi)容：

<p><B><xsl:value-of select="firstXML"/></B></p>

也就是對顯示輸出的文本內(nèi)容應(yīng)用粗體樣式控制，然后再在Web瀏覽器中瀏覽修改后的頁面瀏覽的效果，將能夠看到如下示圖所示的粗體文字的顯示狀態(tài)內(nèi)容。

因此，如果對XML文檔文件中的內(nèi)容："<firstXML>這是我在學(xué)習(xí)XSL時(shí)所寫的一個(gè)XML文檔中的內(nèi)容</firstXML >"應(yīng)用各種不同的XSLT模板處理技術(shù)，將可以產(chǎn)生出滿足不同應(yīng)用需求要求的顯示效果、和滿足不同的顯示設(shè)備的要求，而且"格式控制"和"數(shù)據(jù)內(nèi)容"是相互分離。

當(dāng)然，為了簡化本示例的實(shí)現(xiàn)代碼，作者在本文中直接將XML文檔文件的內(nèi)容設(shè)置為規(guī)定內(nèi)容，其實(shí)該XML格式文檔文件的數(shù)據(jù)內(nèi)容完全可以在Web服務(wù)器端由相關(guān)的程序動態(tài)創(chuàng)建或者對原有的XML文檔文件進(jìn)行修改——XML文檔文件中的數(shù)據(jù)也可以來自于物理數(shù)據(jù)庫系統(tǒng)的數(shù)據(jù)庫表。

因此，軟件應(yīng)用系統(tǒng)的開發(fā)人員可以根據(jù)系統(tǒng)業(yè)務(wù)處理的需要，動態(tài)地創(chuàng)建代表業(yè)務(wù)處理結(jié)果的XML格式文檔，然后再針對不同的顯示設(shè)備或者終端（如電腦屏幕、手機(jī)屏幕、電視屏幕等）提供不同版本的XSLT模板，從而可以保證同一個(gè)軟件應(yīng)用系統(tǒng)的處理結(jié)果能夠適用于不同的終端設(shè)備，這將大大地?cái)U(kuò)大了軟件應(yīng)用系統(tǒng)的應(yīng)用場景。

為了能夠讓讀者對"XML+XSLT"相關(guān)技術(shù)的應(yīng)用有一定的感性認(rèn)識，作者給出如下兩個(gè)示例圖，它們的XML格式的文檔是同一個(gè)XML文件，但通過提供不同的XSLT模板文件，最后在同一瀏覽器中顯示出不同的結(jié)果。這說明了XSLT模板的數(shù)據(jù)轉(zhuǎn)換功能的應(yīng)用效果。

5、利用Macromedia Dreamweaver工具以可視化方式創(chuàng)建XSLT文檔文件

讀者在實(shí)際的項(xiàng)目開發(fā)中，如果Web應(yīng)用系統(tǒng)的表示層開發(fā)中需要應(yīng)用XML+XSLT技術(shù)，為了能夠提高開發(fā)效率，一般可以應(yīng)用一些可視化工具如Macromedia Dreamweaver頁面開發(fā)工具創(chuàng)建XSLT格式文檔文件。

作者在下文中為讀者簡要介紹如何利用Macromedia公司的Web頁面開發(fā)工具Dreamweaver軟件以可視化方式創(chuàng)建XSLT文檔文件。

（1）先建立系統(tǒng)中所需要的XML文檔文件

讀者只需要在Dreamweaver頁面開發(fā)工具程序中選擇【新建文檔】菜單，然后彈出如下示例圖所示的【新建文檔】對話框。讀者只需要在該對話框中的【頁面類型】選擇框中選中【XML】類型頁面，將自動地創(chuàng)建出一個(gè)空的XML文檔文件。

（2）其次建立系統(tǒng)中所需要的XSLT格式文檔文件

讀者同樣也只需要在Dreamweaver頁面開發(fā)工具程序中選擇【新建文檔】菜單，然后彈出下圖所示的【新建文檔】對話框。讀者只需要在該對話框中的【頁面類型】選擇框中選中【XSLT（整頁）】類型頁面，將自動地創(chuàng)建出一個(gè)空的XSLT文檔文件。

然后Dreamweaver頁面開發(fā)工具程序自動要求綁定XML數(shù)據(jù)源，并彈出下圖所示的【定位XML源】對話框，讀者只需要選定在前面示例圖中所生成的XML文檔文件。

（3）在XSLT文檔文件中綁定XML文檔文件中的目標(biāo)數(shù)據(jù)

讀者可以在Dreamweaver頁面開發(fā)工具程序中選擇【插入記錄】菜單中的【XSLT對象】子菜單的各個(gè)下一級菜單項(xiàng)目，在XSLT文檔文件中插入各種控制標(biāo)簽——請見下圖所示的操作過程的結(jié)果截圖。

當(dāng)然，也可以直接在右面的綁定面板中將可使用的字段直接拖到XSLT文檔文件窗口中，并且快速選定需要循環(huán)的部分，最后將自動地插入XSLT循環(huán)控制標(biāo)簽——請見下圖所示的操作過程的結(jié)果截圖。

（4）將XSLT文檔文件關(guān)聯(lián)到目標(biāo)XML文檔文件中

讀者最后只需要將XSLT文檔文件關(guān)聯(lián)到目標(biāo)XML文檔文件中，請讀者參考前面代碼示例中的黑體標(biāo)識的標(biāo)簽。最后再打開XML文件并附加上對應(yīng)的目標(biāo)XSLT樣式表文件，然后存盤保存。

如何應(yīng)用“XML+XSLT”技術(shù)分離Web表示層數(shù)據(jù)和樣式

如何應(yīng)用CSS+Div分離Web表示層數(shù)據(jù)處理邏輯和展現(xiàn)邏輯

如何正確應(yīng)用Web MVC架構(gòu)模式分離表示層和模型層耦合關(guān)系

如何應(yīng)用策略設(shè)計(jì)模式分離JDBC數(shù)據(jù)庫連接中的外部環(huán)境信息

如何應(yīng)用策略設(shè)計(jì)模式的思想設(shè)計(jì)通用的數(shù)據(jù)庫連接類

在線咨詢

上一篇：傳染病是如何傳播的？
下一篇：select如何讓文字右對齊

您的項(xiàng)目需求

*請認(rèn)真填寫需求信息，我們會在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商

web前端面試題-HTML篇（持續(xù)更新...）

件項(xiàng)目實(shí)訓(xùn)及課程設(shè)計(jì)指導(dǎo)——應(yīng)用XML+XSLT技術(shù)分離Web應(yīng)用系統(tǒng)中表示層數(shù)據(jù)和樣式的實(shí)例

您的項(xiàng)目需求