第一章01篇

今日教學(xué)任務(wù)

＞網(wǎng)站信息頁血案例（字體標(biāo)簽、排版標(biāo)簽）

＞網(wǎng)站圖片信息頁面案例（圖片標(biāo)簽）

＞網(wǎng)站友情鏈接頁面案例（列表標(biāo)簽）

＞網(wǎng)站首頁案例（表格標(biāo)簽）

＞網(wǎng)站注冊頁面案例（表單標(biāo)簽）

＞網(wǎng)站后臺頁面案例（框架）

教學(xué)導(dǎo)航

教學(xué)目了解什么是標(biāo)記語言

標(biāo)了解什主要特性、主要變更和發(fā)展趨勢

了解結(jié)構(gòu)標(biāo)簽

駕馭的主要標(biāo)簽（字體、圖片、列表、鏈接和表單標(biāo)簽）

教學(xué)方案例驅(qū)動法

法

一、網(wǎng)站信息頁面顯示案例

1.需求分析

我們要在閱讀器中實現(xiàn)一段文本信息的顯示，效果如下:

公司簡介

牛"&畬QimgW甕日.FVHF■?曲EWtm移―i,孰m.jrM4W，1EM?“，亞3的?開亞京20?

rtSK.BW?B杼嶼H取“B?己“，療金祀田，苗1為63.a“■gfMwnElQ

w”，、wra.5.<*?<rni.new^tmuiMiBt^^mHA.asMrwftrwftwAMt.mtR在上rt/itraMn*：■幡?仔網(wǎng)一wtaswatA

?鄧MI祀??丁益傅?不任跖?E㈠”.BW：.WLA.dwnmu最“u.0不?M膘?mir祁

x*w..AHftiirmAM.

<p?rB=*iwimiwfisn^niM<wp.i?4tiiw*a3??m.R霰紳awr不，。人仙?財，?一夏”力求，緝,9WA/iuir(nmQ從?開發(fā)工等，vr?

y￡it”?riMf”.yg.

-1U?.4tt桓戶幽■播通戶”?&色?,?1Ht.科?寅動作，人才?0￥tf?

2.技術(shù)分析

【的概述】

2.1什么是？

：超文本標(biāo)記語言，它不是編程語言，它干脆被閱讀器說明執(zhí)行。

超文本：比一般文本功能更加強大。

標(biāo)記語言：運用一組標(biāo)簽對內(nèi)容進行描述的一門語言。

2.2為什么要學(xué)習(xí)？

正常狀況，我們會運用別人已經(jīng)寫好的靜態(tài)頁面，假如你沒有相關(guān)學(xué)問

的了解，那么你不能進行下一步的開發(fā)了，所以我們須要學(xué)習(xí)相關(guān)技術(shù)。

2.3在哪些地方會運用？

但凡涉及到頁面設(shè)計的內(nèi)容，都可以運用技術(shù)。

2.4怎么運用？

的語法和規(guī)范:

?文件都是以或者結(jié)尾。建議大家運用結(jié)尾。

?文件都是由頭部分和體部分組成（頭部分<）<>體部分<>?）

?的標(biāo)簽都是成對出現(xiàn)的。（<b>內(nèi)容<></?

?標(biāo)簽忽視大小寫的建議大家運用小寫。

>字體標(biāo)簽

??:代表的是字體標(biāo)簽。

屬性：，字體的大小。從1到7逐步變大，超過7的根據(jù)7來進行顯示

，代表是顏色，可以運用單詞表示，還可以運用十六進制.

，代表的是字體，選取的字體必需是本機已存在的。

>排版標(biāo)簽

標(biāo)題標(biāo)簽：</>

加粗加黑顯示的。

水平線標(biāo)簽：</>

加粗標(biāo)簽：<b><>

換行標(biāo)簽：</>

段落標(biāo)簽：<p><>

3.步驟分析

第一步：創(chuàng)建一個文件

其次步：創(chuàng)建一個標(biāo)簽

第三步：創(chuàng)建一個水平線

第四步：創(chuàng)建四個段落

第五步：對段落里面的文件進行一些樣式的變更。

4.代碼實現(xiàn)

<>

<>

<〃8">

?網(wǎng)站信息頁面顯示<〉

<>

<>

<111>公司簡介<1>

</>

<p><”>"中關(guān)村黑馬程序員訓(xùn)練營"?是由<b>傳智播客?聯(lián)

合中關(guān)村軟件園、，并托付傳智播客進行教學(xué)實施的軟件開發(fā)高端培訓(xùn)

機構(gòu)，致力于服務(wù)各大軟件企業(yè)，解決當(dāng)前軟件開發(fā)技術(shù)飛速發(fā)展，而

企業(yè)招不到優(yōu)秀人才的困擾。</>目前，”中關(guān)村黑馬程序員訓(xùn)練

營”已成長為行業(yè)“學(xué)員質(zhì)量好、課程內(nèi)容深、企業(yè)滿足”的移動開發(fā)

高端訓(xùn)練基地，并被評為中關(guān)村軟件園重點扶持人才企業(yè)。<>

<p>黑馬程序員的學(xué)員多為高校畢業(yè)后，有志向、有幻想，想從

事行業(yè)，而沒有環(huán)境和機遇變更自己命運的年輕人。黑馬程序員的學(xué)員

篩選制度，遠比現(xiàn)在90舟以上的企業(yè)聘請流程更為嚴(yán)格。任何一名學(xué)員

想勝利入學(xué)“黑馬程序員”，必需經(jīng)驗長達2個月的面試流程，這些流

程中不僅包括嚴(yán)格的技術(shù)測試、自學(xué)實力測試，還包括性格測試、壓力

測試、品德測試等等測試。亳不夸張地說，黑馬程序員訓(xùn)練營全部學(xué)員

都是精挑細選出來的。百里挑一的殘酷篩選制度確保學(xué)員質(zhì)量，并降低

企業(yè)的用人風(fēng)險。?

中關(guān)村黑馬程序員訓(xùn)練營不僅著重培育學(xué)員的基礎(chǔ)理論學(xué)

問，更注意培育項目實施管理實力，并親密關(guān)注技術(shù)革新，不斷引入先

進的技術(shù)，研發(fā)更新技術(shù)課程，確保學(xué)員進入企業(yè)后不僅能獨立從事開

發(fā)工作，更能給企業(yè)帶來新的技術(shù)體系和理念。?

<P》始終以來，黑馬程序員以技術(shù)視角關(guān)注產(chǎn)業(yè)發(fā)展，以深度共

享推動產(chǎn)業(yè)技術(shù)成長，致力于弘揚技術(shù)創(chuàng)新，提倡共享、開放和協(xié)

作，努力打造高質(zhì)量的人才服務(wù)平臺。<>

<>

<>

二、網(wǎng)站圖片顯示頁面

1.需求分析

假如一個網(wǎng)站全部運用文字進行描述，會顯得比較，我們希望希望添加

一些圖片讓整個網(wǎng)頁顯示得更加豐富。效果如下：

黑馬程序員正品刎砒?*?貨州歐

?www.ithG

2.技術(shù)分析

圖片標(biāo)簽：</>

屬性：

?：指定圖片的位置（路徑）

相對路徑：

：代表的是當(dāng)前書目

：代表的是上一級書目，

肯定路勁：

E:\\\\0423就業(yè)班\01\資料\01\課堂演示圖片匯總,

?：指定圖片的寬度。

?：指定圖片的高度。

：當(dāng)這個圖片無法正常顯示的時候給出的提示信息。（不同的閱讀器顯

示的效果不一樣）

顯示效果：

x將4解恨

火狐顯示效果：

剁手不解恨

3.步驟分析

第一步：創(chuàng)建一個文件

其次步：運用標(biāo)簽引入的圖片

第三步：運用標(biāo)簽引入廣告圖片。

4.代碼實現(xiàn)

<>

<>

<"8”>

?網(wǎng)站圖片顯示頁面<〉

<>

<>

<"2"/>

<""/>

<>

<>

三、網(wǎng)站列表頁面顯示

1.需求分析

我們希望在網(wǎng)站首頁的底部（友情鏈接），實現(xiàn)一個顯示其他公司的信息。

2.技術(shù)分析

>列表標(biāo)簽

列表標(biāo)簽分為：有序列表和無序列表。

無序列表：

<>

<>列表項一<>

?列表項二<>

?列表項三。

<>

屬性：

:實心小圓點

:實心小方塊

:空心小圓圈

有序列表：

<>

?列表項一?

?列表項二<>

?列表項三<>

<>

<>

<T"5"批注[ThinkPadl]:從幾起先（必需是有序列表，而

且是數(shù)字）

?阿里巴巴<>批注[ThinkPadZ]:降序顯示（5432）

?京東＜＞

?百度＜＞

?傳智播客＜＞

4.代碼實現(xiàn)

＞超鏈接標(biāo)簽

＜a＞內(nèi)容?代表的是超鏈接

屬性：

:點擊超鏈接內(nèi)容跳轉(zhuǎn)到的一個位置。

：在閱讀器哪個位置顯示

在當(dāng)前選項卡標(biāo)簽進行顯示

在新的選項卡標(biāo)簽進行顯示

<"8">

?友情鏈接。

<>

<>

<>

<><a阿里巴巴??

<Xa〃案例一：網(wǎng)站信息頁面顯示/網(wǎng)站信息頁面顯示"

京東

?<a"案例一：網(wǎng)站信息頁面顯示/網(wǎng)站信息頁面顯示“

百度?<>

<><a"案例一：網(wǎng)站信息頁面顯示/網(wǎng)站信息頁面顯示“〃〃>

傳智播客<><>

<>

<>

<>

四、網(wǎng)站首頁顯示案例

1.需求分析

我們希望在閱讀器中顯示一個商城首頁的頁面，顯示的效果如下:

2.技術(shù)分析

>表格標(biāo)簽

<>批注［ThinkPads］:代表整個表格

<>

<><>批注［ThinkPad的:代表的是單元格（列）

<>批注［ThinkPads］:代表的是行

<>

屬性：

:表格的邊框

:設(shè)置表格的寬度（單位可以是像素，還可以是百分比）

：設(shè)置表格的高度（單位可以是像素，還可以是百分比）

：設(shè)置單元格和單元格的間距

：設(shè)置單元格月里面內(nèi)容的間距

:設(shè)置表格顯示的位置（、、）

:這是表格的背景顏色。

跨行、跨列的操作

需求:

屬性介紹：

:跨行（在同一列才能跨行）

:跨列（在同一行才能跨列）

<>

<"8">

?表格的跨行跨列。

<>

<>

<"1""0""0〃〃500〃〃300"

<>

<"2"”》11。

0130

0140

<>

<>

0210

<〃2""2">

<〃1”"10C曠"100曠》

<>

OHO

0120

0130

<>

<>

0210

0220

0230

<>

<>

0310

0320

0330

<>

<>

<>

0240

<>

<>

0310

<"2">34<>

<>

<>

0410

0420

0430

<>

<>

<>

<>

3.步驟分析

第一步：創(chuàng)建一個八行一列的表格

其次步：實現(xiàn)第一行（嵌套一個一行三列的表格），然后分別對嵌套表格單

元格進行實現(xiàn)

第三步：實現(xiàn)二行（運用字體標(biāo)簽來實現(xiàn)，帶有超鏈接效果）

苜災(zāi)XURg電跖辦公電3＞公電電?公

第四步：在第三行放置一張輪播圖片一（靜態(tài)的）

第五步：在第四行中嵌登一個三行七列的表格（分別實現(xiàn)）

第六步：在第五行放置一張圖片（廣告）

第七步：在第六行復(fù)制第四行的內(nèi)容

第八步：在第七行放置一張圖片

?UMM-?UW2W"XBMM\JZaWMM

第九步：在第八行添加一些文字信息和超鏈接

父于3MW：?W±"E量-?CMKKflMK1WFBWB

C?WNe2006-201A■趣.

4.代碼實現(xiàn)

<>

<>

<"8”>

?網(wǎng)站首頁顯示頁面<〉

<>

<>

<〃0”"1300""""0""0">

<1部分）

<>

<>

〈嵌套一個一行三列的表格）

<"100%""0"〃0"〃0〃>

<"50">

<“33.3%”〉

<"2〃"47”/》

<>

<“33.3g》

<"""47"/>

<>

<”33.34

；<a〃#〃>登錄<>;

<a"#"》注冊?;

<a"#”>購物車<>

<>

<>

<>

<>

<>

<2.導(dǎo)航欄部分）

<〃50〃>

;<a〃#"><""5">首頁<〉<>;

<a"#〃><""〃3">手機數(shù)碼<>?;

<a〃#"><""〃3">電腦辦公<><>;

<a""3"〉鞋靴箱包<〉<〉;

<a"#〃X"〃〃3">孕嬰保健??

<>

<>

<3.輪播圖）

<>

<>

<"1""10C%"/>

<>

<>

<4.熱門商品》

<>

<>

〈嵌套了一個三行七列的表格）

<〃0〃"10C%"〃0"〃0〃>

<"50"》

<7>

;<"5">熱門商品<>;

「2〃/>

<>

<>

<>

<"2""600""190”>

<"or〃ioo%”"ioo%"/>

<>

<"3""555""250">

<a-1"TOO%"T00%”>

<>

<"185""250"

<a'#"><"03"TOO%""50%"/X>

<p><"”>電燉鍋<><>

<p><，，，z>￥299<><>

<>

<"185""250"

<a"#"><"03”"100%""50%"X>

<p><電燉鍋?<>

<p><"〃>￥299<><>

<>

<"185""250"

<a"#"〉<"03"TOO%"

<p><"”>電燉鍋<><>

<p><"”>￥299<〉<>

<>

<>

<>

<"185""250〃"〃>

<a"#"><"03”"100%"/><>

<p><">電燉鍋<><>

<p><”>￥299<〉<>

<>

<"185""250"”"》

<a'#"><"03”"100%"/><>

<p><電燉鍋?<〉

<p><”>￥299<><>

<>

<"185""250"

<a'#"><"03""100%"/><>

<p><電燉鍋?<>

<p><”>￥299<X>

<>

<"185""250"

<a'#"><"03"TOO%"/><>

<p><”>電燉鍋?<>

<p><"”>￥299<〉<>

<>

<"185""250"

<aW)<"03""100獷/><>

<p><電燉鍋?<>

<p><>￥29900

<>

<"185"〃250"“"》

<a"MX"03”"100%"/><>

<pX”>電燉鍋<><>

<p><”>￥299<><>

<>

<>

<>

<>

<>

<5.廣告圖片》

<>

<>

<"""100*"/>

<>

<>

<6.熱門商品）

<>

<>

〈嵌套了一個二行七列的表格）

<〃0〃“10C曠"0〃"0〃>

<"50”）

；<"5">熱門商品<>;

<"2"/>

<>

<>

<>

<"2""600""190”>

<"01""100曠"100%"/>

<>

<"3""555""250”>

<a-01"〃100%”

<>

<"185""250"〃”>

<a"#"><"03”"100%""50%"/X>

<p)<""》電燉鍋?<>

<p><**>￥29900

<>

<"185""250"〃”>

<a"#"><"03"TOO%”"50V7X〉

<p><"〉電燉鍋<X>

<p><"”>￥299<X>

<>

<"185""250"〃”>

<a"#"><"03"TOO%""50%"/X>

<p><"”〉電燉鍋。<>

<p><”>￥299<X>

<>

<>

<>

<"185""250"

<a"#"><"03""100%"/><>

<p><電燉鍋?<>

<p><**>￥29900

<>

<"185""250"〃”>

<a"#"><"03”"100%"/><>

<p)<""》電燉鍋?<>

<p><**>￥29900

<>

<"185""250"〃”>

<a"#"><"03"TOO%"/><>

<p><"〉電燉鍋<X>

<p><"”>￥299<X>

<>

<〃185""250"〃”>

<a"#"X"03"〃100%”/><>

<p><電燉鍋?<>

<pX”">￥299<><>

<>

<〃185"〃250"〃〃>

<a"#"X"03""100%，//><>

<p><電燉鍋?<〉

<p><”>￥299<X>

<>

<"185""250"

<a'#〃><"03"〃100曠/><>

<p><電燉鍋?<>

<pX”">￥299<X>

<>

<7.廣告圖片》

<>

<>

<〃“〃100曠/>

<>

<>

<8.友情鏈接和版權(quán)信息>

<>

<a〃#〃>關(guān)干我們<>

<a聯(lián)系我們<>

<a"#">招賢納士<>

<a"#"》法律聲明。

<a"#〃>友情鏈接。

<a"#〃>支付方式<>

<a"#〃>配送方式<>

<a"#">服務(wù)聲明<>

<a廣告聲明<>

<P>的2005-2016傳智商城版權(quán)全部?

<>

<>

<>

<>

五、網(wǎng)站注冊顯示頁面案例

1.需求分析

用戶假如想要在網(wǎng)站進行購物，那么必需成為這個網(wǎng)站的會員，在成為

會員之前，得先注冊。我們就要實現(xiàn)一個注冊的功能。效果：

2.技術(shù)分析

＞表單標(biāo)簽

須要提交到服務(wù)器端的表單須要運用??括起來。

屬性：

:指定表單的名稱

：整個表單提交的位置。

:提交的方式()

/〃〃〃〃、批注［ThinkPads］:指定表單的類型。

<#>

批注［ThinkPad7］:隱藏域

<"〃〃/>批注［ThinkPddS］：文本輸入性

批注［ThinkPads］:用于后臺獲得該字段的值。

用戶名：＜"""""100〃"4"”請輸入用戶名"〉＜/＞

批注［ThinkPadie］:輸入框的寬度。

密碼：<〃"/></>批注［ThinkPadll］:輸入內(nèi)容的長度

批注［ThinkPad"］:密碼框

面試題:

和的區(qū)分

1.提交方式會將表單里面數(shù)據(jù)顯示在地址欄，不夠平安，長度有限制

2.提交方式不會將表單里面數(shù)據(jù)顯示在地址欄，比較平安，長度沒有限制。

3.步驟分析

第一步：創(chuàng)建一個五行一列的表格

其次步：復(fù)制之前的內(nèi)容（第一行、其次行、第四行、第五行）

第三步：第三行嵌套一個十行兩列的表格（表單）

會員注冊USERREGISTER

用戶名zhangsan

密碼請輸入密碼

確認(rèn)密碼請輸入確認(rèn)密宵

EmailEmail

姓名請輸入姓名

的J嫌先?女

出生日期

蛤證碼I〕HH

硼

4.代碼實現(xiàn)

<3.注冊表單》

<"600”>

<7'〃>

<"4""0""0""800""500*""〃”>

<>

<"2">

<〃6">會員注冊<>

<>

<>

<>

?用戶名。

<>

/〃〃〃〃"LA"/、

\bO//

<>

<>

<>

C密碼。

<>

<〃""""07>

?悵不<>

<>

<>

<>

uu，，”>

<>

?及科c

<>

<>

<>

〈/""””>

<>

<><>

<>

<>

<>

</“og〃““““>

<>

?劑堂氣瓢<>

<>

<>

<>

<>

(〃〃〃用〃/〉男

<"…"女"/》女

<>

<>

<>

<>誕生日期。

<>

(""""

〃50”/>

<>

<>

<>

?驗證碼。

<>

"〃"""cl"/、