首先上個(gè)網(wǎng)頁效果圖
我們平常都用 html+css+JavaScript 來寫網(wǎng)頁，使網(wǎng)頁美觀生動(dòng)。今天先不說 JavaScript，那么就是靜態(tài)頁面的實(shí)現(xiàn)，html+css。實(shí)現(xiàn)上面的效果是很容易的。
就像下面這樣：
那么你知道 xml+css 也是可以寫網(wǎng)頁的嗎？
在學(xué)到 css 課程之前，我從來沒有這么想過。
接下來我們分析一下（先找個(gè)理由把它們聯(lián)系起來吧，可能分析的不是那末正確，but just now,who cares?）：
先來看看他們的定義（來自維基百科）：
HTML（超文本標(biāo)記語言/HyperText Markup Language）是一種用于創(chuàng)建網(wǎng)頁的標(biāo)準(zhǔn)標(biāo)記語言。HTML 是一種基礎(chǔ)技術(shù)，常與 CSS、JavaScript 一起被眾多網(wǎng)站用于設(shè)計(jì)使人賞心悅目的網(wǎng)頁、網(wǎng)頁利用程序和移動(dòng)利用程序的用戶界面。網(wǎng)頁閱讀器可以讀取 HTML 文件，并將其渲染成可視化網(wǎng)頁。HTML 描寫了一個(gè)網(wǎng)站的結(jié)構(gòu)語義隨著線索的顯現(xiàn)，使之成為一種標(biāo)記語言而非編程語言。
XML（可擴(kuò)大標(biāo)記語言/eXtensible Markup Language），是一種標(biāo)記語言。標(biāo)記指計(jì)算機(jī)所能理解的信息符號(hào)，通過此種標(biāo)記，計(jì)算機(jī)之間可以處理包括各種信息的文章等。如何定義這些標(biāo)記，既可以選擇國(guó)際通用的標(biāo)記語言，比如 HTML，也能夠使用像 XML 這樣由相干人士自由決定的標(biāo)記語言，這就是語言的可擴(kuò)大性。XML 是從標(biāo)準(zhǔn)通用標(biāo)記語言（SGML）中簡(jiǎn)化修改出來的。它主要用到的有可擴(kuò)大標(biāo)記語言、可擴(kuò)大樣式語言（XSL）、XBRL 和 XPath 等。
CSS（層疊樣式表/Cascading Style Sheets），又稱串樣式列表、級(jí)聯(lián)樣式表、串接樣式表、層疊樣式表，一種用來為結(jié)構(gòu)化文檔（如HTML 文檔或 XML 利用）添加樣式（字體、間距和色彩等）的計(jì)算機(jī)語言，由 W3C 定義和保護(hù)。目前最新版本是 CSS2.1，為 W3C 的推薦標(biāo)準(zhǔn)。CSS3 現(xiàn)在已被大部份現(xiàn)代閱讀器支持，而下一版的 CSS4 仍在開發(fā)進(jìn)程中。
HTML 與 XML 同為標(biāo)記語言。標(biāo)記語言，是一種將文本和文本相干的其他信息結(jié)合起來，展現(xiàn)出關(guān)于文檔結(jié)構(gòu)和數(shù)據(jù)處理細(xì)節(jié)的電腦文字編碼。與文本相干的其他信息（包括文本的結(jié)構(gòu)和表示信息等）與原來的文本結(jié)合在一起，但是使用標(biāo)記進(jìn)行標(biāo)識(shí)。
感覺定義好長(zhǎng)，自己順一下理解就是，標(biāo)記語言是將普通的文本加上標(biāo)記，合在一起構(gòu)成一個(gè)文檔，這個(gè)文檔是有結(jié)構(gòu)的，而且是適用于電腦處理的。
感覺還是理解的不深入。這么想吧，html 和 xml 都可以被閱讀器解析，顯示在網(wǎng)頁上。然后再加上 CSS 渲染，應(yīng)當(dāng)也是可以展現(xiàn)在網(wǎng)頁上的。
分析終了（好費(fèi)頭腦），理論上 xml+css 是可以實(shí)現(xiàn)效果的。那末實(shí)際呢？沒錯(cuò)，也是可以的，Duang~~~
那么為何大家熟知的都是用 html，從沒見過用 xml 寫網(wǎng)頁的呢？
由于設(shè)計(jì)初衷不同：XML 設(shè)計(jì)用來傳送及攜帶數(shù)據(jù)信息，不用來表現(xiàn)或展現(xiàn)數(shù)據(jù)，HTML 語言則用來表現(xiàn)數(shù)據(jù)，所以 XML 用處的焦點(diǎn)是它說明數(shù)據(jù)是甚么，和攜帶數(shù)據(jù)信息。
術(shù)業(yè)有專攻。適用的就是好的。
PS：今天這個(gè)例子就只是擴(kuò)大一下，其實(shí)不是說推薦用 xml 來寫頁面。
【附】
古詩鑒賞源碼：
1、HTML+CSS實(shí)現(xiàn)
html源碼：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF⑻">
<title>靜夜思</title>
<link type="text/css" rel="stylesheet" href="靜夜思.css" />
</head>
<body>
<img src="poem.jpg" class="img"/>
<div class="div1">
<span class="title">靜夜思</span><br/>
<span class="author">唐 李白</span><br/>
<div class="verse"> 床前明月光<br/>
疑是地上霜<br/>
舉頭望明月<br/>
低頭思故鄉(xiāng) </div>
</div>
</body>
</html>
與 html 配合的 css 源碼：
.div1{ }
.img{ width:360px; height:490px; position:absolute; left:0px; top:0px; }
.title{ font-size:19px; color:#FFFF00; position:absolute; left:62px; top:150px; }
.author{ font-size:12px; color:#4f2b00; position:absolute; left:100px; top:176px; }
.verse{ position:absolute; /* 絕對(duì)定位 */ color:#FFFFFF; font-size:14px; left:55px; top:200px; line-height:20px; /* 行間距 */ }
2.XML+CSS 實(shí)現(xiàn)
xml 源碼：
<?xml version="1.0" encoding="gb2312"?>
<?xml-stylesheet type="text/css" href="14⑺.css"?>
<poem>
<title>靜夜思</title>
<author>唐 李白</author>
<verse> 床前明月光<br/>
疑是地上霜<br/>
舉頭望明月<br/>
低頭思故鄉(xiāng)</verse>
</poem>
與 XMl 配合的 css 源碼：
poem{ margin:0px; background:url(poem.jpg) no-repeat; /*添加背景圖片 */ width:360px; height:490px; position:absolute; /* 絕對(duì)定位 */ left:0px; top:0px; }
title{ font-size:19px; color:#FFFF00; position:absolute; left:62px; top:150px; }
author{ font-size:12px; color:#4f2b00; position:absolute; left:100px; top:176px; }
verse{ position:absolute; /* 絕對(duì)定位 */ color:#FFFFFF; font-size:14px; left:55px; top:200px; line-height:20px; /* 行間距 */ }
br{ display:block; /* 讓詩句分行顯示 */ }
