第一節(jié) 網(wǎng)頁結(jié)構(gòu)分析方法
本節(jié)講解網(wǎng)頁結(jié)構(gòu)分析方法。下面講解的內(nèi)容為：一、網(wǎng)頁結(jié)構(gòu)分析方法，二、在“代碼編輯”頁面分析網(wǎng)頁的代碼結(jié)構(gòu)。
前面的兩章，已經(jīng)講解了代碼的基礎(chǔ)知識(shí)，講解了常用標(biāo)簽的應(yīng)用方法。想來您對(duì)代碼已經(jīng)熟悉了，也能夠應(yīng)用代碼制作許多漂亮的網(wǎng)頁了。但是，也許你曾經(jīng)遇到過這樣的問題：看到別人制作的漂亮的網(wǎng)頁，還是不大會(huì)分析，不知道人家的網(wǎng)頁效果是如何制作出來的，是如何安排其網(wǎng)頁結(jié)構(gòu)的。本章我就講解一下這方面的內(nèi)容，幫助您熟悉網(wǎng)頁結(jié)構(gòu)，引導(dǎo)您分析別人制作的網(wǎng)頁，使您能夠更好地安排網(wǎng)頁結(jié)構(gòu)，得心應(yīng)手地制作出更多的漂亮網(wǎng)頁來。
一、網(wǎng)頁結(jié)構(gòu)分析方法：
網(wǎng)頁結(jié)構(gòu)分析方法，歸納起來，大約有三種方法：
1、在網(wǎng)頁“瀏覽頁面”分析網(wǎng)頁的結(jié)構(gòu)：
大多數(shù)的網(wǎng)頁，在打開網(wǎng)頁、瀏覽網(wǎng)頁的頁面中，即可清楚網(wǎng)頁的結(jié)構(gòu)。這個(gè)網(wǎng)頁中有多少段文字，有多少個(gè)圖片，還有什么內(nèi)容，它們的結(jié)構(gòu)是如何安排的，都可一目了然。但是，也有例外。例如：一幅漂亮的動(dòng)態(tài)圖片，是動(dòng)畫圖片，還是在一個(gè)靜態(tài)圖片中插入了動(dòng)畫？一個(gè)美麗的邊框，它究竟是幾重邊框？邊框中的諸多內(nèi)容，是放置在同一層次的邊框中，還是放置在不同層次的邊框內(nèi)？諸如此類的問題，在此頁面中是很難分辨清楚的，只有分析它的代碼，才能知道廬山真面目。
2、在網(wǎng)頁的“修改頁面”分析網(wǎng)頁的結(jié)構(gòu)：
收藏到你的圖書館中的文章，在打開文章、瀏覽文章的頁面中，點(diǎn)擊頁面左上方或者左下方的“修改”按鈕，就進(jìn)入文章的修改頁面，也就是文章圖片的編撰頁面。
“網(wǎng)頁的修改頁面”，盡管與網(wǎng)頁的真實(shí)面目之間有一定的差別，但是還是有它的獨(dú)到之處的。在“網(wǎng)頁的修改頁面”中，可以分辨清楚應(yīng)用表格在圖片中添加文字、圖片、動(dòng)畫等內(nèi)容的情況，還可以分辨清楚調(diào)用css絕對(duì)定位、相對(duì)定位的情況，在這些地方，往往會(huì)出現(xiàn)一個(gè)虛線框或者藍(lán)色的方框，顯示添加文字、圖片，使用定位代碼的具體情況，幫助你了解網(wǎng)頁的結(jié)構(gòu)狀況。
3、在網(wǎng)頁的“代碼編輯頁面”分析網(wǎng)頁的代碼結(jié)構(gòu)：
網(wǎng)頁的“代碼編輯頁面”，全面地詳細(xì)地毫無差別地展現(xiàn)了網(wǎng)頁代碼的真實(shí)面目。要真正學(xué)會(huì)分析網(wǎng)頁的代碼結(jié)構(gòu)，要真正學(xué)習(xí)代碼，弄懂代碼，應(yīng)該在這個(gè)頁面中去分析網(wǎng)頁代碼結(jié)構(gòu)。本章要講解的內(nèi)容，就是在網(wǎng)頁的“代碼編輯頁面”中，來分析網(wǎng)頁的代碼結(jié)構(gòu)。
二、在“代碼編輯”頁面分析網(wǎng)頁的代碼結(jié)構(gòu)：
網(wǎng)頁代碼，對(duì)于不懂代碼的朋友而言，簡直就是一部天書。密密麻麻亂七八糟的一大片代碼，真不知該從哪里入手。就是對(duì)于稍有一點(diǎn)兒代碼基礎(chǔ)的館友而言，也是一件頭痛的事兒，究竟該如何進(jìn)行分析呀！
別犯愁！只要掌握了方法，分析網(wǎng)頁代碼結(jié)構(gòu)也不是什么難事。在講解分析方法之前，我們先來復(fù)習(xí)一下有關(guān)的基礎(chǔ)知識(shí)。復(fù)習(xí)什么內(nèi)容呢？答案是“標(biāo)簽”。
什么是“標(biāo)簽”？
在《代碼入門教程（２）》中我已經(jīng)講過了：在html語言里，標(biāo)簽是由一個(gè)尖括號(hào)和它里面的內(nèi)容組成的統(tǒng)一體。
形如：<CENTER>、<table border="5" cellSpacing="1" cellPadding="3" width="650" height="210">的，都是標(biāo)簽。大部分的標(biāo)簽，都是成對(duì)使用的，前面有其首標(biāo)簽，后面必定有其尾標(biāo)簽。
那么，什么是首標(biāo)簽，什么是尾標(biāo)簽?zāi)?？我們可以這樣來理解：在成對(duì)使用的一對(duì)標(biāo)簽中，用在內(nèi)容前面的那個(gè)標(biāo)簽就是首標(biāo)簽，用在內(nèi)容后面的那個(gè)標(biāo)簽就是尾標(biāo)簽。
首標(biāo)簽表示此項(xiàng)內(nèi)容的開始處。標(biāo)簽內(nèi)的第一小段代碼就是這個(gè)標(biāo)簽的名稱，后面的代碼都是這個(gè)標(biāo)簽的屬性與屬值。標(biāo)簽名稱與屬性屬值之間用空格隔開，屬性與屬值之間用等號(hào)連接起來，各個(gè)屬性之間也是用空格隔開。首標(biāo)簽內(nèi)可以添加若干個(gè)屬性與屬值，也可以不添加。
尾標(biāo)簽表示此項(xiàng)內(nèi)容的結(jié)束處。尾標(biāo)簽內(nèi)沒有屬性與屬值，在標(biāo)簽名稱的前面有一條斜桿。
首標(biāo)簽與尾標(biāo)簽之間的內(nèi)容，就是它們管轄的、修飾的、限制的內(nèi)容。
“首標(biāo)簽與尾標(biāo)簽之間的內(nèi)容，就是它們管轄的、修飾的、限制的內(nèi)容?！?/font>，這一點(diǎn)非常重要。我們在分析網(wǎng)頁的代碼結(jié)構(gòu)時(shí)要經(jīng)常用到。有不少的朋友不會(huì)分析網(wǎng)頁代碼結(jié)構(gòu)，其實(shí)就是沒有真正弄懂這一點(diǎn)。
下面舉個(gè)例子：
<FONT color=#ff0000 size=6 face=隸書>“春天沒來”歡迎您</FONT>
上面的代碼是成對(duì)使用的一對(duì)標(biāo)簽，是文字標(biāo)簽。
前面的標(biāo)簽：<FONT color=#ff0000 size=6 face=隸書>是首標(biāo)簽，首標(biāo)簽內(nèi)第一小段代碼FONT是標(biāo)簽名稱：文字標(biāo)簽。標(biāo)簽名稱后面有三個(gè)屬性與屬值：文字顏色＝紅色，字號(hào)＝６號(hào)，字體＝隸書。
后面的標(biāo)簽 </FONT>是尾標(biāo)簽，尾標(biāo)簽內(nèi)只有一條斜桿和標(biāo)簽名稱。
中間的內(nèi)容：“春天沒來”歡迎您是這一對(duì)文字標(biāo)簽“管轄的、修飾的、限制的內(nèi)容”。
上面這段代碼發(fā)表以后的網(wǎng)頁頁面，是用紅色的６號(hào)隸書字體顯示“春天沒來”歡迎您的文字內(nèi)容。
書歸正傳，下面講解分析網(wǎng)頁代碼結(jié)構(gòu)的方法：（點(diǎn)擊“回車鍵”整理代碼，查看標(biāo)簽分析代碼）
在你的圖書館內(nèi)，隨便找一個(gè)網(wǎng)頁（開始練習(xí)，要找簡單一點(diǎn)的歐?。?，復(fù)制其代碼。然后把光標(biāo)置于標(biāo)簽的前面（第一個(gè)標(biāo)簽除外），點(diǎn)擊一下“回車鍵”。每一個(gè)標(biāo)簽都這樣操作一下，這樣就把各個(gè)標(biāo)簽代碼都分為了一個(gè)段落。接著，就可以分析各個(gè)段落的代碼情況了。
舉例如下：
</a></p><p style="text-indent: 2em;"><font color="#008080" size="5"><font face="宋體"> 夫妻像一雙筷子，男人是一根筷子，女人是另一根筷子。兩根筷子有緣握在一起，成為一雙筷子，那才是夫妻。</font></font></p><p style="text-indent: 2em;"><font color="#008080" size="5">一雙筷子，心往一處想，勁往一處使，才能把美味的佳肴送進(jìn)口中。男人和女人，少了哪一個(gè)都不行。兩個(gè)人只有一條心，彼此才會(huì)親密無間。兩個(gè)人只有和平相處，才不會(huì)難堪。 一根筷子，永遠(yuǎn)捕捉不到生活的真正滋味。</font></p><p style="text-indent: 2em;"><font color="#008080" size="5">想讓兩根毫不相干的筷子牢牢地夾住食物，其中的一根就應(yīng)該放低姿態(tài)，給另一根筷子一個(gè)有力的支點(diǎn)。如果兩人都想占上風(fēng)，雙方都會(huì)受到傷害。</font></p><p style="text-indent: 2em;"><font color="#008080" size="5">筷子的作用總是需要雙方共同來完成的，夾子也可以夾起東西，但是夾子無法張的更大，而筷子是自由的，它可以獅子大口，把一切美好的東西盡收囊中，這就是愛情的力量。因此，不要忘記，一雙筷子應(yīng)該是平行的。夫妻也是一種選擇，雖然沒有完美，但是平行也是一種珍貴。</font></p><p style="text-indent: 2em;"><font color="#008080" size="5">筷子有很多種，人也一樣。一根筷子太長，另一根就不能太短。一根太粗，另一根太細(xì)，也不行?？纯醋约菏窃鯓拥囊桓曜?，才可以在茫茫人海中盡快找到自己的另一半。</font></p><p style="text-indent: 2em;"><font color="#008080" size="5">夫妻之所以像一雙筷子，最根本的一點(diǎn)在于：他們之間誰也離不開誰，為了生活，永遠(yuǎn)不分開。他們總是一起品嘗生活的酸甜苦辣，共同承擔(dān)苦難，分享幸福。夫妻只有相戀相愛一生，才是世上的至寶 。</font></p>
把上面的代碼按照我講的方法整理一下，其結(jié)果如下：
分析此代碼的結(jié)構(gòu)如下：
上面的代碼（網(wǎng)頁）一共分為９個(gè)段落：
第1段是文章的標(biāo)題，用#008080顏色的６號(hào)字體顯示，文章的對(duì)齊方式為居中對(duì)齊，文字內(nèi)容為：夫妻就像一雙筷子。
第2段是空段落。其目的是為了把文章標(biāo)題與下面的內(nèi)容間隔兩行。
第4段用#008080顏色的5號(hào)字體顯示文字內(nèi)容，段落行首縮進(jìn)2em。文字內(nèi)容為：“夫妻像一雙筷子，男人是一根筷子，女人是另一根筷子。兩根筷子有緣握在一起，成為一雙筷子，那才是夫妻?！?/font>
第5段用#008080顏色的5號(hào)字體顯示文字內(nèi)容，段落行首縮進(jìn)2em。文字內(nèi)容為：“一雙筷子，心往一處想，勁往一處使，才能把美味的佳肴送進(jìn)口中。男人和女人，少了哪一個(gè)都不行。兩個(gè)人只有一條心，彼此才會(huì)親密無間。兩個(gè)人只有和平相處，才不會(huì)難堪。 一根筷子，永遠(yuǎn)捕捉不到生活的真正滋味?！?。
第6段用#008080顏色的5號(hào)字體顯示文字內(nèi)容，段落行首縮進(jìn)2em。文字內(nèi)容為：“想讓兩根毫不相干的筷子牢牢地夾住食物，其中的一根就應(yīng)該放低姿態(tài)，給另一根筷子一個(gè)有力的支點(diǎn)。如果兩人都想占上風(fēng)，雙方都會(huì)受到傷害?！?。
第7段用#008080顏色的5號(hào)字體顯示文字內(nèi)容，文字內(nèi)容為：“筷子的作用總是需要雙方共同來完成的，夾子也可以夾起東西，但是夾子無法張的更大，而筷子是自由的，它可以獅子大口，把一切美好的東西盡收囊中，這就是愛情的力量。因此，不要忘記，一雙筷子應(yīng)該是平行的。夫妻也是一種選擇，雖然沒有完美，但是平行也是一種珍貴?！?/font>
第8段用#008080顏色的5號(hào)字體顯示文字內(nèi)容，段落行首縮進(jìn)2em。文字內(nèi)容為：“筷子有很多種，人也一樣。一根筷子太長，另一根就不能太短。一根太粗，另一根太細(xì)，也不行?？纯醋约菏窃鯓拥囊桓曜?，才可以在茫茫人海中盡快找到自己的另一半?！?。
第9段用#008080顏色的5號(hào)字體顯示文字內(nèi)容，段落行首縮進(jìn)2em。文字內(nèi)容為：“夫妻之所以像一雙筷子，最根本的一點(diǎn)在于：他們之間誰也離不開誰，為了生活，永遠(yuǎn)不分開。他們總是一起品嘗生活的酸甜苦辣，共同承擔(dān)苦難，分享幸福。夫妻只有相戀相愛一生，才是世上的至寶?！?。
作業(yè)：
1、掌握標(biāo)簽的定義，弄清楚各種標(biāo)簽的首標(biāo)簽與尾標(biāo)簽。
2、“首標(biāo)簽與尾標(biāo)簽之間的內(nèi)容，就是它們管轄的、修飾的、限制的內(nèi) 容?！痹诜治鼍W(wǎng)頁代碼結(jié)構(gòu)的時(shí)候，請(qǐng)你牢牢記住這一點(diǎn)。
3、“點(diǎn)擊'回車鍵’整理代碼，查看標(biāo)簽分析代碼?！?/font>這是分析網(wǎng)頁代碼結(jié)構(gòu)最基本的方法。應(yīng)用這種方法，試著分析幾篇網(wǎng)頁代碼的結(jié)構(gòu)。
2013年2月15日于北京
 “春天沒來”祝福朋友新春快樂 |
第三章 網(wǎng)頁代碼結(jié)構(gòu)分析
第二節(jié) 網(wǎng)頁結(jié)構(gòu)分析實(shí)例
本節(jié)繼續(xù)講解網(wǎng)頁結(jié)構(gòu)分析方法。下面以具體的實(shí)例分析講解。
例1：代碼：
<table border="3"
cellSpacing="0" borderColorLight="#e7efff"
borderColorDark="#08094a"cellPadding="0" width="750"
align="center"
height="562">
<tbody>
<tr>
<td>
<div> </div>
<div
style="width: 750px; height: 500px;">
<p align="center"><marquee
style="filter: glow(color=#55fa0a, strength=45);"
behavior="alternate"
scrollAmount="3" align="center"> <font style="font-size: 32px;"
color="#ff0000"><strong>美 麗 風(fēng) 景 惹 人 醉</strong>
</font></marquee></p>
<p><embed
height="400" type="application/octet-stream" width="750"
quality="high"
allowScriptAccess="never"
allowNetworking="internal"></p>
<p><embed height="230"
type="application/x-shockwave-flash" width="360"
src="透明flash動(dòng)畫網(wǎng)址"
quality="high" menu="false" wmode="transparent">
</p></div></td></tr></tbody></table>
解析：
這是一篇在大圖片中添加文字和動(dòng)畫圖片的網(wǎng)頁代碼，是比較簡單的網(wǎng)頁代碼，無需點(diǎn)擊回車鍵給代碼分段。分析方法為：先看整篇代碼的首尾，再看整篇代碼的中間部分。
代碼的開始處是：<table border="3" cellSpacing="0" borderColorLight="#e7efff"
borderColorDark="#08094a" cellPadding="0" width="750" background=
align="center" height="562">
<tbody>
<tr>
<td>
這是表格的一套首標(biāo)簽。其順序是：表格標(biāo)簽、表格的主體標(biāo)簽、表格的行標(biāo)簽、表格的列標(biāo)簽。
代碼的結(jié)束處是：</td></tr></tbody></table>
這是表格的一套尾標(biāo)簽。其順序是：表格的列標(biāo)簽、表格的行標(biāo)簽、表格的主體標(biāo)簽、表格標(biāo)簽。
表格的一套尾標(biāo)簽與表格的一套首標(biāo)簽順序正好是相反的。你制作表格或者應(yīng)用表格的時(shí)候，千萬別弄錯(cuò)哦！
代碼的中間部分：
在單元格內(nèi)（“單元格內(nèi)”在什么地方呢？就是<td>與</td>之間的地方。）設(shè)置了一個(gè)空塊區(qū)：<div> </div>這個(gè)空塊區(qū)的作用是讓輸入的文字的位置靠下一些。
接下來又設(shè)置了一個(gè)寬度為750px高度為500px的塊區(qū)，塊區(qū)中設(shè)置了兩個(gè)段落。第一個(gè)段落中放入了移動(dòng)的glow濾鏡文字，內(nèi)容為：美麗風(fēng)景惹人醉。第二個(gè)段落中放入了兩個(gè)動(dòng)畫圖片（標(biāo)簽名稱為：embed 的圖片就是動(dòng)畫圖片）。
代碼2：
<div
align="center">
<table border="1" cellSpacing="60"
borderColorLight="#cccccc"
borderColorDark="#cccccc" cellPadding="0" width="100%"
align="center">
<tbody>
<tr>
<td>
<table
border="1" cellSpacing="30" borderColorLight="#cccccc"
borderColorDark="#cccccc" cellPadding="0" width="100%"
align="center">
<tbody>
<tr>
<td>
<table
border="0" cellSpacing="18" cellPadding="0" width="100%"
<table
border="1" cellSpacing="0" cellPadding="0" width="100%"
bgColor="#cccccc">
<tbody>
<tr>
<td>
<table
border="1" cellSpacing="10" borderColorLight="#cccccc"
borderColorDark="#cccccc" cellPadding="0" width="85%"
align="center">
<tbody>
<tr>
<td
align="center">
<marquee
height="80" width="600" scrollAmount="3" scrollDelay="10">
<table
border="0" cellSpacing="0" cellPadding="0" width="700"
align="center">
<tbody>
<tr>
<td
style="filter: shadow(color=#ff0000,direction=135);"
align="center">
<font
style="width: 100%; height: 80px; color: rgb(5, 250, 0);
line-height:
150%;
font-family: 黑體; font-size: 35pt;"><strong>祝 您 蛇 年 萬 事 如
意
</strong></font></td></tr></tbody></table></marquee></td></tr>
<tr>
<td
align="center">
<embed
height="555" type="application/x-shockwave-flash"
Version=ShockwaveFlash width="700"
allowNetworking="internal" AllowScriptAccess="never"
WMode="Transparent"> </td></tr>
<tr>
<td
align="center">
height="600"> </td></tr>
<tr>
<td
align="center">
width="700"
height="555"> </td></tr>
<tr>
<td
align="center">
<table border="0" cellSpacing="0" borderColor="#990000"
cellPadding="0" width="700" background="地址" bgColor="#000000"
height="300">
<tbody>
<tr>
<td>
<marquee
direction="up" height="200" scrollAmount="2">
<center>
<p
style="width: 100%; color: rgb(255, 255, 0); line-height:
150%;
font-family:
華文行楷; font-size: 30pt; filter: glow(color=#ff0000,
strength=8);"><b>遠(yuǎn) 在 他 方 的 朋 友<br>美 好 的 祝 福 送 給
您<br>祝 您 在 新 的 一 年 里<br>一 帆 風(fēng) 順 二 龍 騰 飛 <br>三 羊 開 泰 四 季 平
安<br>五 福 臨 門 六 六 大 順 <br>七 星 高 照 八 方 來 財(cái) <br>九 九 同 心 十 全 十
美<br>百 事 亨 通 萬 事 如 意<br>家 庭 幸 福 事 業(yè) 輝 煌</b>
</p></center></marquee></td></tr></tbody></table></td></tr>
<tr>
<td
align="center">
<table border="0" cellSpacing="0" cellPadding="0"
width="700"
height="600">
<tbody>
<tr>
<td><embed
style="margin: 5px; color: rgb(69, 221, 28);
background-color: rgb(8, 0, 0);" height="550" type="application/x-shockwave-flash"
src=http://bbs./attachments-bak/day_100207/1002071849725a14054cbb1aed.swf
allownetworking="internal" allowscriptaccess="never"
quality="high"
invokeurls="false" wmode="transparent">
</td></tr></tbody></table>
</td></tr></tbody></table>
</td></tr></tbody></table>
</td></tr></tbody></table>
</td></tr></tbody></table>
</td></tr></tbody></table></div>
解析：
這是我制作的一篇《新春祝福賀卡》的網(wǎng)頁代碼，是一篇比較復(fù)雜的網(wǎng)頁代碼。說它復(fù)雜，就在于多次使用了表格標(biāo)簽。在多重表格（邊框）中，放置了文字、圖片，并且有的文字、圖片又放入了表格之中，再加上還使用了一些其它標(biāo)簽（例如：移動(dòng)標(biāo)簽）來修飾、限制文字或者圖片，像這樣的網(wǎng)頁代碼是比較難分析的網(wǎng)頁代碼。
分析比較復(fù)雜的網(wǎng)頁代碼，其方法依然是先看首尾，再看中間。
這篇代碼的開始處是“塊區(qū)標(biāo)簽”，結(jié)尾處是“塊區(qū)尾標(biāo)簽”。這說明整個(gè)網(wǎng)頁的內(nèi)容都是這個(gè)塊區(qū)的內(nèi)容。設(shè)置這個(gè)塊區(qū)的目的，一是為了放入所有的內(nèi)容，二是為了使放入的內(nèi)容居中顯示。
接下來，代碼的開始處有五套表格的首標(biāo)簽，（第五套表格的首標(biāo)簽下面就是移動(dòng)標(biāo)簽了），代碼的結(jié)尾處有六套表格的尾標(biāo)簽。這說明網(wǎng)頁的內(nèi)容是放在了一個(gè)五層表格中的，并且其最后一個(gè)內(nèi)容是放在一個(gè)表格之中的。
下面我們再來分析中間部分的代碼，即放入第五層表格中的內(nèi)容：
第一行的單元格內(nèi)，是移動(dòng)標(biāo)簽控制的內(nèi)容。其內(nèi)容為移動(dòng)的shadow濾鏡文字：“祝您蛇年萬事如意”。
第五行的單元格內(nèi)，放入了一個(gè)表格，表格中的內(nèi)容是向上移動(dòng)的文字，其文字內(nèi)容為：遠(yuǎn)在他方的朋友 美好的祝福送給您 祝您在新的一年里 一帆風(fēng)順二龍騰飛 三羊開泰四季平安 五福臨門六六大順 七星高照八方來財(cái) 九九同心十全十美 百事亨通萬事如意 家庭幸福事業(yè)輝煌
第六行的單元格內(nèi)，放入了一個(gè)表格，表格中的內(nèi)容是地址為
14054cbb1aed.swf的播放器。
代碼3：
<table border="1"
cellSpacing="20" borderColor="#0000ff" cellPadding="0"
width="650"
bgColor="#ff34b3" height="550">
<tbody>
<tr>
<td
colSpan="3">
width="650"
height="200">
<table border="0"
cellSpacing="0" borderColor="#ab82ff" cellPadding="0"
width="650"
bgColor="#ff34b3" height="156">
<tbody>
<tr>
<td
width="225">
<p align="center">
<marquee direction="right"
height="250" width="150" scrollAmount="1">
<font
style="width: 20px; color: rgb(255, 255, 0); line-height: 150%;
font-family:隸書;
font-size: 20pt; writing-mode: tb-rl;"><strong>山 沒有母親的愛高<br>海
沒有母親的愛深<br>天 沒有母親的愛廣<br>地
沒有母親的愛容</strong></font></marquee></p></td>
<td>
<table border="0" width="200"
align="center"
height="302">
<tbody>
<tr>
<td height="302"
width="225">
<embed
height="300" type="application/x-shockwave-flash" width="200"
menu="false"
wmode="transparent">
</td></tr>
<tr>
<td
align="center"><p align="center"><strong><font
style="font-size: 24px;"
color="#ffff00">難忘母愛</font></strong></p></td></tr></tbody></table></td>
<td
width="225">
<p align="center">
<marquee height="250"
width="150" scrollAmount="1">
<font
style="width: 20px; color: rgb(255, 255, 0); line-height: 150%; font-family:
隸書; font-size: 20pt;
writing-mode: tb-rl;"><strong>地 沒有母親的愛容<br>天 沒有母親的愛廣<br>海
沒有母親的愛深<br>山
沒有母親的愛高</strong></font></marquee></p></td></tr>
<tr>
<td
bgColor="#ffffff" colSpan="3">
<marquee behavior="alternate"
width="650" scrollAmount="2" scrollDelay="30">
<img
style="border: 4px solid rgb(153, 153, 255);"
width="180">
<img
style="border: 4px solid rgb(153, 153, 255);"
width="180">
<img
style="border: 4px solid rgb(153, 153, 255);"
width="180"><img style="border: 4px
solid rgb(153, 153,
255);"
width="180"><img style="border: 4px solid rgb(153,
153, 255);"
width="180"><img style="border: 4px solid rgb(153, 153,
255);"
width="180"></marquee></td></tr></tbody></table>
</td></tr></tbody></table>
解析：
分析方法：先看首尾，再看中間。在分析的過程中，一定要留心觀察各種標(biāo)簽的尾標(biāo)簽在什么地方，其首標(biāo)簽與尾標(biāo)簽之間的內(nèi)容，就是這個(gè)標(biāo)簽所管轄的內(nèi)容。特別是表格標(biāo)簽，尤其應(yīng)該注意，一定要弄清楚你分析的這個(gè)網(wǎng)頁中的表格究竟是幾重表格。
上面的代碼分析如下：
這篇代碼的開始處，是一套表格標(biāo)簽。表格的單元格中已經(jīng)放入了一個(gè)圖片，接著又是一套表格標(biāo)簽，并且，下面的幾行內(nèi)也不見表格的尾標(biāo)簽。
這篇代碼的結(jié)束處，是兩套表格標(biāo)簽。這就不難判斷，這個(gè)網(wǎng)頁的大部分內(nèi)容，都是放入第二個(gè)表格以后，把第二個(gè)表格又放入第一個(gè)表格中的。
下面我們再來分析中間部分的代碼，也就是第二個(gè)表格中的內(nèi)容。
第二個(gè)表格是一個(gè)兩行三列的表格。
在第二個(gè)表格的第一行的第一個(gè)單元格內(nèi)設(shè)置了一套段落標(biāo)簽。在段落中輸入了一段豎排版的“向右”移動(dòng)的文字，文字的內(nèi)容是：“山 沒有母親的愛高 海 沒有母親的愛深 天 沒有母親的愛廣 地 沒有母親的愛容”。
在第一行的第三個(gè)單元格內(nèi)設(shè)置了一套段落標(biāo)簽。在段落中輸入了一段豎排版的“向左”移動(dòng)的文字，文字的內(nèi)容是：“山 沒有母親的愛高 海 沒有母親的愛深 天 沒有母親的愛廣 地 沒有母親的愛容”。
第二個(gè)表格的第二行，是一個(gè)合并了列的單元格，把三個(gè)單元格合并為一個(gè)單元格，放入了六個(gè)左右“來回走”的移動(dòng)小圖片。
作業(yè)：
1、“先看首尾，再看中間”是分析網(wǎng)頁代碼的好方法，請(qǐng)你牢記這種方法，應(yīng)用這種方法去分析網(wǎng)頁代碼結(jié)構(gòu)。
2、網(wǎng)頁代碼中，如果有哪一部分代碼你弄不清楚其顯示效果，可以復(fù)制一下，粘貼到撰寫文章處的代碼編輯頁面中，發(fā)表以后觀察其效果，這也是分析網(wǎng)頁代碼非常有效的一種方法。你可以去試試。
3、應(yīng)用上面講解的方法，分析幾篇網(wǎng)頁代碼，并做好分析筆記。把成功的經(jīng)驗(yàn)記錄保存下來，有疑難的地方，相互交流一下。
2013年2月15日于北京
第三章 網(wǎng)頁代碼結(jié)構(gòu)分析
