免費(fèi)AI編程助手
首先上個(gè)網(wǎng)頁(yè)效果圖
我們平常都用 html+css+JavaScript 來(lái)寫(xiě)網(wǎng)頁(yè)，使網(wǎng)頁(yè)美觀生動(dòng)。今天先不說(shuō) JavaScript，那么就是靜態(tài)頁(yè)面的實(shí)現(xiàn)，html+css。實(shí)現(xiàn)上面的效果是很容易的。
就像下面這樣：
那么你知道 xml+css 也是可以寫(xiě)網(wǎng)頁(yè)的嗎？
在學(xué)到 css 課程之前，我從來(lái)沒(méi)有這么想過(guò)。
接下來(lái)我們分析一下（先找個(gè)理由把它們聯(lián)系起來(lái)吧，可能分析的不是那末正確，but just now,who cares?）：
先來(lái)看看他們的定義（來(lái)自維基百科）：
HTML（超文本標(biāo)記語(yǔ)言/HyperText Markup Language）是一種用于創(chuàng)建網(wǎng)頁(yè)的標(biāo)準(zhǔn)標(biāo)記語(yǔ)言。HTML 是一種基礎(chǔ)技術(shù)，常與 CSS、JavaScript 一起被眾多網(wǎng)站用于設(shè)計(jì)使人賞心悅目的網(wǎng)頁(yè)、網(wǎng)頁(yè)利用程序和移動(dòng)利用程序的用戶(hù)界面。網(wǎng)頁(yè)閱讀器可以讀取 HTML 文件，并將其渲染成可視化網(wǎng)頁(yè)。HTML 描寫(xiě)了一個(gè)網(wǎng)站的結(jié)構(gòu)語(yǔ)義隨著線索的顯現(xiàn)，使之成為一種標(biāo)記語(yǔ)言而非編程語(yǔ)言。
XML（可擴(kuò)大標(biāo)記語(yǔ)言/eXtensible Markup Language），是一種標(biāo)記語(yǔ)言。標(biāo)記指計(jì)算機(jī)所能理解的信息符號(hào)，通過(guò)此種標(biāo)記，計(jì)算機(jī)之間可以處理包括各種信息的文章等。如何定義這些標(biāo)記，既可以選擇國(guó)際通用的標(biāo)記語(yǔ)言，比如 HTML，也能夠使用像 XML 這樣由相干人士自由決定的標(biāo)記語(yǔ)言，這就是語(yǔ)言的可擴(kuò)大性。XML 是從標(biāo)準(zhǔn)通用標(biāo)記語(yǔ)言（SGML）中簡(jiǎn)化修改出來(lái)的。它主要用到的有可擴(kuò)大標(biāo)記語(yǔ)言、可擴(kuò)大樣式語(yǔ)言（XSL）、XBRL 和 XPath 等。
CSS（層疊樣式表/Cascading Style Sheets），又稱(chēng)串樣式列表、級(jí)聯(lián)樣式表、串接樣式表、層疊樣式表，一種用來(lái)為結(jié)構(gòu)化文檔（如HTML 文檔或 XML 利用）添加樣式（字體、間距和色彩等）的計(jì)算機(jī)語(yǔ)言，由 W3C 定義和保護(hù)。目前最新版本是 CSS2.1，為 W3C 的推薦標(biāo)準(zhǔn)。CSS3 現(xiàn)在已被大部份現(xiàn)代閱讀器支持，而下一版的 CSS4 仍在開(kāi)發(fā)進(jìn)程中。
HTML 與 XML 同為標(biāo)記語(yǔ)言。標(biāo)記語(yǔ)言，是一種將文本和文本相干的其他信息結(jié)合起來(lái)，展現(xiàn)出關(guān)于文檔結(jié)構(gòu)和數(shù)據(jù)處理細(xì)節(jié)的電腦文字編碼。與文本相干的其他信息（包括文本的結(jié)構(gòu)和表示信息等）與原來(lái)的文本結(jié)合在一起，但是使用標(biāo)記進(jìn)行標(biāo)識(shí)。
感覺(jué)定義好長(zhǎng)，自己順一下理解就是，標(biāo)記語(yǔ)言是將普通的文本加上標(biāo)記，合在一起構(gòu)成一個(gè)文檔，這個(gè)文檔是有結(jié)構(gòu)的，而且是適用于電腦處理的。
感覺(jué)還是理解的不深入。這么想吧，html 和 xml 都可以被閱讀器解析，顯示在網(wǎng)頁(yè)上。然后再加上 CSS 渲染，應(yīng)當(dāng)也是可以展現(xiàn)在網(wǎng)頁(yè)上的。
分析終了（好費(fèi)頭腦），理論上 xml+css 是可以實(shí)現(xiàn)效果的。那末實(shí)際呢？沒(méi)錯(cuò)，也是可以的，Duang~~~
那么為何大家熟知的都是用 html，從沒(méi)見(jiàn)過(guò)用 xml 寫(xiě)網(wǎng)頁(yè)的呢？
由于設(shè)計(jì)初衷不同：XML 設(shè)計(jì)用來(lái)傳送及攜帶數(shù)據(jù)信息，不用來(lái)表現(xiàn)或展現(xiàn)數(shù)據(jù)，HTML 語(yǔ)言則用來(lái)表現(xiàn)數(shù)據(jù)，所以 XML 用處的焦點(diǎn)是它說(shuō)明數(shù)據(jù)是甚么，和攜帶數(shù)據(jù)信息。
術(shù)業(yè)有專(zhuān)攻。適用的就是好的。
PS：今天這個(gè)例子就只是擴(kuò)大一下，其實(shí)不是說(shuō)推薦用 xml 來(lái)寫(xiě)頁(yè)面。
【附】
古詩(shī)鑒賞源碼：
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; /* 讓詩(shī)句分行顯示 */ }
