XHTML網(wǎng)頁圖片應用
?
合理的添加圖片可以使一個網(wǎng)頁更加的美觀。
圖片標簽<img>
<img>標簽用于在網(wǎng)頁里插入圖片。<img>標簽有一個重要的屬性”src”，它的屬性值就是圖片的地址。下面我們就在我們的index.html里插入一個圖片。打開”index.html“文件，在</body>前加上如下代碼：
| <p><img src=”//images.sj33.cn/uploads/allimg/200712/20071224141723713.gif” alt=”技術支持”/></p> |
保存后瀏覽網(wǎng)，請確認您的網(wǎng)頁與該頁面相同。
我們注意到<img>是一個空標簽，需要在結尾加上一個”/”以符合XHTML的要求。這里的例子除src外還有一個屬性alt，我們把它叫做做替換屬性，當圖片由于某種原因而無法顯示的時候，alt的屬性值就會代替圖片出現(xiàn)；而當圖片正常顯示時，只要把鼠標停在圖片上就會看到alt屬性的屬性值。
用圖片作為鏈接
我們在之前的教程中曾經(jīng)學習過創(chuàng)建超級鏈接，下面我們打開“index.html”并且將剛插入的代碼改為下面這段：
| <p><a href=”http://www.webjx.com/”><img src=”//images.sj33.cn/uploads/allimg/200712/20071224141723713.gif”alt=”技術支持”/></a>< /p> |
保存后瀏覽網(wǎng)頁，請再次確認您的網(wǎng)頁與這個網(wǎng)頁相同。看看圖片是不是變成了超級鏈接，點擊一下圖片就會進入菜鳥吧的主頁了。
關于XHTML的效驗
從本節(jié)開始我們就不再修改”index.html”這個網(wǎng)頁的外觀了，現(xiàn)在將我們制作的網(wǎng)頁送交權威機構檢驗一下。首先進入：http: //validator.w3.org/，該頁面就是一個XHTML效驗工具，它用來檢驗我們制作的網(wǎng)頁是否符合XHTML的標準。您可以選擇用網(wǎng)址效驗，也可以上傳文件效驗。您可以選擇文件上傳效驗，方法如下：
在”Validate by File Upload“有“Local File”一欄，點擊瀏覽，找到并選中之前保存的”index.html”，然后點擊“check”按鈕。您的結果應該與我們通過網(wǎng)址效驗的結果一樣。返回如下錯誤信息：
| Sorry, I am unable to validate this document because on line 3, 6-9, 12-14, 16-22 it contained one or more bytes that I cannot interpret as utf-8 (in other words, the bytes found are not valid values in the specified Character Encoding). Please check both the content of the file and the character encoding indication. |
難道我們的網(wǎng)頁不符合XHTML標準嗎？請繼續(xù)看下一節(jié)的內容。
#p#副標題#e#
?
網(wǎng)頁Head和DTD
?
head和DTD盡管不會顯示在頁面上，但是卻是網(wǎng)頁的重要元素。
為什么會出錯？
在上一節(jié)中我們我們在檢驗我們的網(wǎng)頁時得到了一段出錯信息，但是我們在整個網(wǎng)頁的制作過程中都是按照XHTML標準寫的啊。其實問題出在了網(wǎng)頁的“頭部”，下面我們就來解決這個問題。
<head>部分
在之前的教程中除了<title>標簽之外我們修改的都是<body>之間的內容，也就是顯示在頁面里的內容。那么 XHTML中的<head>部分是做什么的呢？其實在<head>部分我么可以加入許多瀏覽器可以“看得見”的信息。下面我們就介紹一些head部分常用的標簽。
注意：本節(jié)的標簽與屬性大多數(shù)難于記憶，事實上在我們在使用網(wǎng)頁制作軟件創(chuàng)建網(wǎng)頁的時候它們會自動生成。本節(jié)的目的是能夠了解這些標簽的含義，以在必要的時候可以做一些手工的修改。現(xiàn)在就打開我們的“index.html”，在<head></head>中間插入如下代碼：
| 1.<meta http-equiv=”Content-Type” content=”text/html;charset=gb2312″ /> |
這段代碼告訴瀏覽器我們的網(wǎng)頁使用的是gb2312中文字符編碼，沒有該段<meta>信息正是上一次檢驗時出現(xiàn)問題的原因之一。
| 2.<meta name=”keywords” content=”小學生,欺負同學,寒暑假作業(yè),家長” /> |
這段代碼是為搜索引擎寫的，content的內容就是index.html的關鍵詞。
請注意，<meta>標簽也是一個空標簽，別忘記加上/。<meta>標簽的作用還遠不只這些，不過在缺少實際應用的情況下，很難了解<meta>標簽的實際用處。如果想了解更多<meta>標簽的知識，可以到百度搜索相關知識。
關于<head>標簽的說明
正如之前所說的，<head>部分的內容并不是為瀏覽者寫的，而是為瀏覽器和搜索引擎寫的。因此<head>部分不應該含有任何在頁面中可視的的內容。
DTD
如果現(xiàn)在再次檢驗我們的網(wǎng)頁，仍然會得到出錯信息，提示找不到DTD文件，那么什么是DTD文件呢？簡單的說它就是在任何人（多數(shù)情況下是類似瀏覽器的軟件）想要讀取我們的文件之前告訴他我們文件是遵照哪一套規(guī)則來寫的。以檢驗過程為例子，如果我們使用HTML4.01的DTD呢，效驗器就會認為我們是使用的HTML4.01的規(guī)則編寫的網(wǎng)頁，然后按照相應的規(guī)則來一行一行的檢驗我們的代碼，最終返回檢驗結果。
我們制作的網(wǎng)頁是使用XHTML的規(guī)則，當然要使用XHTML的DTD。不過正如我們前面提到的，XHTML的DTD也分為相對松散的過渡期DTD 和要求相當嚴格的嚴格DTD。本教程中我們將要在網(wǎng)頁中聲明嚴格的DTD，如果您想了解更多關于DTD的內容需要學習XML，本教程中不做過多討論。
下面我們就為我們的網(wǎng)頁聲明DTD。打開之前保存的”index.html”，在第一行（<html>標簽之前）輸入如下代碼：
| <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd“> |
并且在<html>標簽里添加如下屬性：xmlns=”http://www.w3.org/1999/xhtml“。這個叫做命名空間屬性，屬于XML范疇，我們這里仍然不做過多的討論。
這段代碼的作用就是聲明我們的網(wǎng)頁是使用的xhtml1-strict.dtd。現(xiàn)在再將這個頁面提交給W3的效驗器，這次將返回一個“This Page Is Valid XHTML1.0 Strict!”的信息。這表示我們的代碼中沒有任何錯誤，完全符合XHTML1的strict(嚴格)標準。當然了，實際工作中情況可能不總是如此，在實際的網(wǎng)頁設計過程中，總會有各種原因造成我們寫出不規(guī)范的代碼。這時效驗器就會給出錯誤報告，我們只需要按照提示修改代碼即可。
#p#副標題#e#
?
表格標簽的應用
?
表格是XHTML中處境尷尬的一個標簽，本節(jié)只做了解即可.
關于表格
在CSS流行之前，table被廣泛應用于定位。在XHTML中，table不被推薦用來定位，W3C希望CSS可以取代< table>在定位方面的地位。不過事實上由于利用CSS布局常常需要大量的手寫代碼工作(常用的網(wǎng)頁設計軟件如Dreamweaver并不能完美支持P的顯示)，<table>仍被許多網(wǎng)站用語首頁布局，例如Google的More products頁面就利用了table來定位。不過我個人推薦您開始使用CSS來定位網(wǎng)頁，因為這是Web發(fā)展的方向。當然了，在初期用CSS取代table可能使您遇上很多的麻煩。
表格標簽<table>
在XHTML中，創(chuàng)建表格的標簽是<table>，書寫代碼時，我們要先用<tr>標簽將表格分成一行一行，再用< td>標簽把每行分成一格一格。完全手寫代碼創(chuàng)建table是十分困難和低效的，而在網(wǎng)頁制作軟件中制作表格就如同Word一樣簡單，只需要選擇行列之類的簡單屬性即可。但是我們可能會遇到自動做出的表格不符合要求，而需要在代碼模式調整的可能，因此我們還是要大概了解XHTML表格標簽的具體寫法。
表格的邊框（border）屬性
<table>標簽可以有border屬性。如果不設置border屬性的值，在默認情況下，瀏覽器將不顯示表格的邊框。
表格練習
我們來建立一個四行兩列的標簽，代碼如下：
<table border=”1″>
<tr>
<td>一個格子</td>
<td>一個格子</td>
</tr>
<tr>
<td>一個格子</td>
<td>一個格子</td>
</tr>
<tr>
<td>一個格子</td>
<td>一個格子</td>
</tr>
<tr>
<td>一個格子</td>
<td>一個格子</td>
</tr>
</table>
顯示結果如下：注意上面的代碼，一共有4對<tr>，對應著下面的4個行。而沒個<tr>（行）又有兩個<td>單元格。于是就成了一個4行2列的表格。
| 一個格子 | 一個格子 |
| 一個格子 | 一個格子 |
| 一個格子 | 一個格子 |
| 一個格子 | 一個格子 |
這樣的表格用來列出數(shù)據(jù)之類的信息足夠了，但是用來定位的表格通常要復雜一些。再次強調我們不推薦用table來定位，所以這里僅僅簡單地介紹了<table>。
#p#副標題#e#
?
框架標簽使用
?
框架結構可以讓幾個網(wǎng)頁同時顯示在瀏覽器的一個頁面內。我們不推薦您使用它來設計網(wǎng)站。
框架結構標簽<frameset></frameset>
框架允許你在一個瀏覽器窗口內打開兩個乃至多個頁面。你可以這樣理解，<frameset>其實就是一個大<table>，只不過整個頁面是<table>的主體，而每一個單元格的內容都是一個獨立的網(wǎng)頁。
給框架結構分欄(”cols“和”rows“屬性)
既然我們說框架結構可以被理解為一網(wǎng)頁為單元格的表格，那么就一定要分欄了。其中cols屬性將頁面分為幾列，而rows屬性則將頁面分為幾行。下面來看一個例子。
<html>
<frameset rows=”25%,75%”>
<frame src=”1.html”/>
<frame src=”3.html”/>
</frameset>
</html>
其中”rows=”25%,75%”表示該頁面共分為兩行，因為它有兩個屬性值，而他們的大小則分別為頁面高度的25%和75%。點擊這里查看以上代碼的顯示效果。框架標簽<frame>
上面的實例中已經(jīng)用到了<frame>標簽，它的src屬性就是這個框架里將要顯示的內容。在本實例中的兩個框架是可以通過拖拽開改變大小比例的，如果你希望它們大小固定可以使用noresize=”noresize”屬性。
注意：<frame>標簽是空標簽，需要加上一個”/”以符合XHTML的要求。
關于<noframe>標簽
該標簽只有當瀏覽器不支持框架結構時才會起到作用，由于現(xiàn)在幾乎所有網(wǎng)民的瀏覽器都支持框架結構，所以我們在這里就不介紹這個標簽了。如果你想了解相關內容，可以查閱網(wǎng)絡上的HTML手冊。
框架結構和DTD
框架頁面的DTD與一般網(wǎng)頁不同。聲明方法如下：
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Frameset//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd”>
#p#副標題#e#
表單標簽
表單是用戶提交信息的重要渠道。本節(jié)就將介紹表單的基礎知識。
表單標簽<form>
表單以一個<form>標簽開始。用戶注冊網(wǎng)站會員，投票等等都需要表單來實現(xiàn)。當然了，僅僅依靠XHTML是無法處理這些表單的，如果你想處理這些表但你需要使用一些類似PHP和ASP的網(wǎng)頁后臺技術。（順便說一下，小菜鳥自己的后臺目前還很菜。）
表單內的<input>
下面我們來介紹兩個常見的表單組成元素：
1.文本框
<form>姓名:<inputtype=”text”name=”user”/><br/></form>
姓名:
?
2.密碼框
<form>姓名:<inputtype=”password”name=”pass”/><br/></form>
密碼:
可以看到，這兩個表單元素都用到了<input>標簽，但是密碼框里填寫的內容卻是不可見的。決定了他們類型不同的是< input>標簽的屬性“type”的屬性值。例如text就是文本框，而password則是密碼。你應該注意到了，<imput> 標簽也是一個空標簽。他沒有終止標簽。我們一定要記得在后面加上一個”/”以符合XHTML的要求。
常用的表單元素還有很多，比如單選和復選礦，不過既然我們現(xiàn)在無法處理表單，也就無法理解表單的含義。所以這里就不介紹了，大家以后如果繼續(xù)學習后臺技術的話，自然就會理解form在建站中所起到的作用了。
