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

，Doctype作用？標準模式與兼容模式各有什么區別?

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

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

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

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

首先：CSS規范規定，每個元素都有display屬性，確定該元素的類型，每個元素都有默認的display值，如div的display默認值為“block”，則為“塊級”元素；span默認display屬性值為“inline”，是“行內”元素。
（1）行內元素有：a b span img input select strong（強調的語氣）
（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，頁面導入樣式時，使用link和@import有什么區別？

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

5，介紹一下你對瀏覽器內核的理解？

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

6，常見的瀏覽器內核有哪些？

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

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

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

* 如何區分HTML5： DOCTYPE聲明\新增的結構元素\功能元素

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

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

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

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

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

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

11，請描述一下 cookies，sessionStorage 和 localStorage 的區別？

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

12，iframe有那些缺點？

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

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

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

14，如何實現瀏覽器內多個標簽頁之間的通信?

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

15，如何在頁面上實現一個圓形的可點擊區域？

1、map+area或者svg
2、border-radius
3、純js實現需要求一個點在不在圓上簡單算法、獲取鼠標坐標等等

16，title與h1的區別、b與strong的區別、i與em的區別？

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

strong是標明重點內容，有語氣加強的含義，使用閱讀設備閱讀網絡時：<strong>會重讀，而<B>是展示強調內容。

i內容展示為斜體，em表示強調的文本；

Physical Style Elements -- 自然樣式標簽

b, i, u, s, pre

Semantic Style Elements -- 語義樣式標簽

strong, em, ins, del, code

應該準確使用語義樣式標簽, 但不能濫用, 如果不能確定時首選使用自然樣式標簽。

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

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

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

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

Standards （標準）模式（也就是嚴格呈現模式）用于呈現遵循最新標準的網頁，而 Quirks（包容）模式（也就是松散呈現模式或者兼容模式）用于呈現為傳統瀏覽器而設計的網頁。

18， HTML與XHTML——二者有什么區別？

區別：

1.所有的標記都必須要有一個相應的結束標記

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

3.所有的XML標記都必須合理嵌套

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

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

6.給所有屬性賦一個值

7.不要在注釋內容中使“--”

8.圖片必須有說明文字

19，<img>的title和alt有什么區別？

title是global attributes之一，用于為元素提供附加的advisory information。通常當鼠標滑動到元素上的時候顯示。

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

、XHTML與HTML的區別

文檔結構

XHTML DOCTYPE 是強制性的

<html>中的 XML namespace 屬性是強制性的

<html>、<head>、<title>以及 <body>也是強制性的

元素語法

XHTML 元素必須正確嵌套

XHTML 元素必須始終關閉

XHTML 元素必須小寫

XHTML 文檔必須有一個根元素

屬性語法

XHTML 屬性必須使用小寫

XHTML 屬性值必須用引號包圍

XHTML 屬性最小化也是禁止的

二、HTML5中一些新特性

用于繪畫的 canvas 元素

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

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

新的特殊內容元素，比如 article、footer、header、nav、section

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

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

IE9 以下版本瀏覽器兼容HTML5的方法，使用本站的靜態資源的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}

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

三、HTML5web存儲

使用HTML5可以在本地存儲用戶的瀏覽數據。

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

數據以鍵/值對存在, web網頁的數據只允許該網頁訪問使用。

瀏覽器支持：

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

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

localStorage 和 sessionStorage

客戶端存儲數據的兩個對象為：

localStorage - 用于長久保存整個網站的數據，保存的數據沒有過期時間，直到手動去除。

sessionStorage - 用于臨時保存同一窗口(或標簽頁)的數據，在關閉窗口或標簽頁之后將會刪除這些數據。

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

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

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

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

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

刪除單個數據：localStorage.removeItem(key);

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

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

四、HTML5 應用程序緩存

HTML5 -應用程序緩存=>使用文章鏈接跳轉點這里

五、HTML5 服務器發送事件（Server-Sent Events）

Server-Sent 事件指的是網頁自動獲取來自服務器的更新。

以前也可能做到這一點，前提是網頁不得不詢問是否有可用的更新。通過服務器發送事件，更新能夠自動到達。

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

所有主流瀏覽器均支持服務器發送事件，除了 Internet Explorer。

<h1>獲取服務端更新數據</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 開始提供的一種在單個 TCP 連接上進行全雙工通訊的協議。

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

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

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

HTML5 定義的 WebSocket 協議，能更好的節省服務器資源和帶寬，并且能夠更實時地進行通訊。

詳情和代碼示例：.

七、HTTP狀態消息

1xx: 信息

2xx: 成功

3xx: 重定向

4xx: 客戶端錯誤

5xx: 服務器錯誤

詳情

八、HTTP 方法：GET 對比 POST

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

什么是 HTTP ？

超文本傳輸協議（HTTP）的設計目的是保證客戶端與服務器之間的通信。

HTTP 的工作方式是客戶端與服務器之間的請求-應答協議。

web 瀏覽器可能是客戶端，而計算機上的網絡應用程序也可能作為服務器端。

舉例：客戶端（瀏覽器）向服務器提交 HTTP 請求；服務器向客戶端返回響應。響應包含關于請求的狀態信息以及可能被請求的內容。

GET - 從指定的資源請求數據。

POST - 向指定的資源提交要被處理的數據。

GET 方法

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

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

有關 GET 請求的其他一些注釋：

GET 請求可被緩存

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

GET 請求可被收藏為書簽

GET 請求不應在處理敏感數據時使用

GET 請求有長度限制

GET 請求只應當用于取回數據

POST 方法

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

有關 POST 請求的其他一些注釋：

POST 請求不會被緩存

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

POST 不能被收藏為書簽

POST 請求對數據長度沒有要求

其他 HTTP 請求方法

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

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

件項目實訓及課程設計指導——應用XML+XSLT技術分離Web應用系統中表示層數據和樣式的實例

1、在J2EE應用系統中應用XSLT實現XML文檔轉換的基本過程

（1）首先，創建出目標XML格式文檔文件，該XML格式文檔文件代表應用系統中的數據模型

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

（3）最后，在XML格式文檔文件中調用這個XSLT文件以便能夠將XML和XSLT相互關聯。

2、在J2EE應用系統中應用"XML+XSLT"技術的應用示例

作者在下文中通過一個示例為讀者介紹如何應用"XML+XSLT"技術徹底分離Web應用系統中表示層頁面中的數據和樣式。

（1）首先，創建出一個XML格式文檔文件

下面的代碼示例中所示的XML格式文檔文件是一個很簡單XML格式文檔，只包含一個節點的XML結構樹。該XML格式文檔文件的內容在實際的企業級應用系統中，可以在Web服務器端根據系統中業務處理的規則動態創建出，它代表處理結果的XML文檔。

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

<?xml version="1.0" encoding="gb2312" ?>
<firstXML>這是我在學習XSLT時所寫的一個XML文檔中的內容</firstXML >

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

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

<?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時所做的第一個XSLT文件示例</title>
            </head>
            <body>
            <p><xsl:value-of select="firstXML"/></p>
            </body>
        </html>
    </xsl:template>
</xsl:stylesheet>

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

1）<xsl:stylesheet>標簽定義一個樣式表

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

按照XSLT文檔語法的規定，所有的XSL命令都必須包含在<xsl:stylesheet>起始標簽和</xsl:stylesheet>結束標簽之間，也就是說這個<xsl:stylesheet>標簽界定了輸出轉換后的XSL樣式的內容。

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

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

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

2）<xsl:template>標簽定義一個模板規則

XSLT模板把XSLT文檔的設計細化成一個個的模塊（每一個模塊定義為一個"template"，由<xsl:template>標簽定義此模塊），最后再把這些模塊組合串接成一個完整的XSLT文檔文件。這樣的語法規則能夠實現很好地將數據分塊和隔離。

另外，應用這種方案可以使開發者先從整體上考慮整個XSLT文檔的設計，然后再把總體表現形式進一步細化成不同的模塊和子模塊，再分別具體設計這些模塊，最后把它們整合和串接在一起。

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

3）<xsl:template>標簽定義其中的內容

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

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

當然，讀者也可以用IE5.0以上版本的瀏覽器或者其它瀏覽器打開這個FirstXSL.xsl文件，將能夠看到如下示圖所示的XSL的結構樹——因為XSL文檔本身也是XML格式的文檔，同樣也要遵守XML格式的文檔的各種語法規則。

（3）最后，在XML格式文檔文件中調用這個XSLT文件以便能夠將XML文檔（代表軟件應用系統中的業務處理后的結果數據）和XSLT（代表對這些結果數據在最終的目標終端設備中如何顯示和輸出）相互關聯

沒有在上面所示的XML文檔文件中添加對XSLT關聯之前的執行結果狀態為如下示圖所示的顯示結果——無格式化的XML文檔文件的結果，這不利于人類閱讀和理解——因為在數據中還包含有大量的XML格式文檔的標簽。

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

<?xml version="1.0" encoding="gb2312" ?>
<?xml-stylesheet type="text/xsl" href="FirstXSL.xsl"?>
<firstXML>這是我在學習XSLT時所寫的一個XML文檔中的內容</firstXML >

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

請讀者注意，如果讀者在瀏覽器中只看到XML結構樹（請參考前一示圖所示的顯示結果），而不是單獨的"這是我在學習XSLT時所寫的一個XML文檔中的內容"字樣，則說明讀者機器中的瀏覽器沒有安裝MSXML3版本的XML Processor（支持XSLT技術的XML 處理器）程序。

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

（4）將它們部署到應用服務器中執行

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

讀者從上面示例圖所示的結果應該能夠理解，XML與XSLT相互配合，同樣也能夠構造服務器端的應用。而且同一個XML格式的文檔文件，只需要提供不同的XSLT格式文檔文件，將可以產生出不同的顯示效果。據此，對于不同的終端設備, 軟件應用系統的開發人員可以設計出不同的XSLT文檔文件就可以實現相同的數據在不同的終端設備中顯示出不同的風格。

4、體驗"XML+XSLT"技術中的格式和數據分離的優點

讀者只需要將前面代碼示例所示的XSLT文檔文件FirstXSL.xsl中的如下的標簽內容：

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

改變為如下的標簽內容：

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

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

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

當然，為了簡化本示例的實現代碼，作者在本文中直接將XML文檔文件的內容設置為規定內容，其實該XML格式文檔文件的數據內容完全可以在Web服務器端由相關的程序動態創建或者對原有的XML文檔文件進行修改——XML文檔文件中的數據也可以來自于物理數據庫系統的數據庫表。

因此，軟件應用系統的開發人員可以根據系統業務處理的需要，動態地創建代表業務處理結果的XML格式文檔，然后再針對不同的顯示設備或者終端（如電腦屏幕、手機屏幕、電視屏幕等）提供不同版本的XSLT模板，從而可以保證同一個軟件應用系統的處理結果能夠適用于不同的終端設備，這將大大地擴大了軟件應用系統的應用場景。

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

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

讀者在實際的項目開發中，如果Web應用系統的表示層開發中需要應用XML+XSLT技術，為了能夠提高開發效率，一般可以應用一些可視化工具如Macromedia Dreamweaver頁面開發工具創建XSLT格式文檔文件。

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

（1）先建立系統中所需要的XML文檔文件

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

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

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

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

（3）在XSLT文檔文件中綁定XML文檔文件中的目標數據

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

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

（4）將XSLT文檔文件關聯到目標XML文檔文件中

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

如何應用“XML+XSLT”技術分離Web表示層數據和樣式

如何應用CSS+Div分離Web表示層數據處理邏輯和展現邏輯

如何正確應用Web MVC架構模式分離表示層和模型層耦合關系

如何應用策略設計模式分離JDBC數據庫連接中的外部環境信息

如何應用策略設計模式的思想設計通用的數據庫連接類

在線咨詢

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

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

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

件項目實訓及課程設計指導——應用XML+XSLT技術分離Web應用系統中表示層數據和樣式的實例

您的項目需求