HTML篇互聯(lián)網(wǎng)IT計(jì)算機(jī)專業(yè)資料11

第頁第一章01篇今日教學(xué)任務(wù)網(wǎng)站信息頁面案例(字體標(biāo)簽、排版標(biāo)簽)網(wǎng)站圖片信息頁面案例(圖片標(biāo)簽)網(wǎng)站友情鏈接頁面案例(列表標(biāo)簽)網(wǎng)站首頁案例(表格標(biāo)簽)網(wǎng)站注冊(cè)頁面案例(表單標(biāo)簽)網(wǎng)站后臺(tái)頁面案例(框架)教學(xué)導(dǎo)航教學(xué)目標(biāo)了解什么是標(biāo)記語言了解什主要特性、主要變化和發(fā)展趨勢(shì)了解結(jié)構(gòu)標(biāo)簽掌握的主要標(biāo)簽(字體、圖片、列表、鏈接和表單標(biāo)簽)教學(xué)方法案例驅(qū)動(dòng)法一、網(wǎng)站信息頁面顯示案例1.需求分析我們要在瀏覽器中實(shí)現(xiàn)一段文本信息的顯示，效果如下：2.技術(shù)分析【的概述】2.1什么是?：超文本標(biāo)記語言，它不是編程語言，它直接被瀏覽器解釋執(zhí)行。 超文本：比普通文本功能更加強(qiáng)大。 標(biāo)記語言：使用一組標(biāo)簽對(duì)內(nèi)容進(jìn)行描述的一門語言。2.2為什么要學(xué)習(xí)?正常情況，我們會(huì)使用別人已經(jīng)寫好的靜態(tài)頁面，如果你沒有相關(guān)知識(shí)的了解，那么你不能進(jìn)行下一步的開發(fā)了，所以我們需要學(xué)習(xí)相關(guān)技術(shù)。2.3在哪些地方會(huì)使用？但凡涉及到頁面設(shè)計(jì)的內(nèi)容，都可以使用技術(shù)。2.4怎么使用?的語法和規(guī)范：文件都是以或者結(jié)尾。建議大家使用結(jié)尾。文件都是由頭部分和體部分組成(頭部分<><>體部分<><>)的標(biāo)簽都是成對(duì)出現(xiàn)的。(<b>內(nèi)容<></>)標(biāo)簽忽略大小寫的建議大家使用小寫。字體標(biāo)簽<><>:代表的是字體標(biāo)簽。屬性：，字體的大小。從1到7逐步變大，超過7的按照7來進(jìn)行顯示 ,代表是顏色，可以使用單詞表示，還可以使用十六進(jìn)制。 ,代表的是字體，選取的字體必須是本機(jī)已存在的。排版標(biāo)簽標(biāo)題標(biāo)簽：</> 加粗加黑顯示的。水平線標(biāo)簽：</>加粗標(biāo)簽：<b><>換行標(biāo)簽：</>段落標(biāo)簽：<p><>3.步驟分析第一步：創(chuàng)建一個(gè)文件第二步：創(chuàng)建一個(gè)標(biāo)簽第三步：創(chuàng)建一個(gè)水平線第四步：創(chuàng)建四個(gè)段落第五步：對(duì)段落里面的文件進(jìn)行一些樣式的改變。4.代碼實(shí)現(xiàn)<> <> <"8"> <>網(wǎng)站信息頁面顯示<> <> <> <h1>公司簡(jiǎn)介<1> </> <p><"">“中關(guān)村黑馬程序員訓(xùn)練營(yíng)”<>是由<b>傳智播客<>聯(lián)合中關(guān)村軟件園、，并委托傳智播客進(jìn)行教學(xué)實(shí)施的軟件開發(fā)高端培訓(xùn)機(jī)構(gòu)，致力于服務(wù)各大軟件企業(yè)，解決當(dāng)前軟件開發(fā)技術(shù)飛速發(fā)展，而企業(yè)招不到優(yōu)秀人才的困擾。</>目前，“中關(guān)村黑馬程序員訓(xùn)練營(yíng)”已成長(zhǎng)為行業(yè)“學(xué)員質(zhì)量好、課程內(nèi)容深、企業(yè)滿意”的移動(dòng)開發(fā)高端訓(xùn)練基地，并被評(píng)為中關(guān)村軟件園重點(diǎn)扶持人才企業(yè)。<> <p>黑馬程序員的學(xué)員多為大學(xué)畢業(yè)后，有理想、有夢(mèng)想，想從事行業(yè)，而沒有環(huán)境和機(jī)遇改變自己命運(yùn)的年輕人。黑馬程序員的學(xué)員篩選制度，遠(yuǎn)比現(xiàn)在90%以上的企業(yè)招聘流程更為嚴(yán)格。任何一名學(xué)員想成功入學(xué)“黑馬程序員”，必須經(jīng)歷長(zhǎng)達(dá)2個(gè)月的面試流程，這些流程中不僅包括嚴(yán)格的技術(shù)測(cè)試、自學(xué)能力測(cè)試，還包括性格測(cè)試、壓力測(cè)試、品德測(cè)試等等測(cè)試。毫不夸張地說，黑馬程序員訓(xùn)練營(yíng)所有學(xué)員都是精挑細(xì)選出來的。百里挑一的殘酷篩選制度確保學(xué)員質(zhì)量，并降低企業(yè)的用人風(fēng)險(xiǎn)。<> <p>中關(guān)村黑馬程序員訓(xùn)練營(yíng)不僅著重培養(yǎng)學(xué)員的基礎(chǔ)理論知識(shí)，更注重培養(yǎng)項(xiàng)目實(shí)施管理能力，并密切關(guān)注技術(shù)革新，不斷引入先進(jìn)的技術(shù)，研發(fā)更新技術(shù)課程，確保學(xué)員進(jìn)入企業(yè)后不僅能獨(dú)立從事開發(fā)工作，更能給企業(yè)帶來新的技術(shù)體系和理念。<> <p>一直以來，黑馬程序員以技術(shù)視角關(guān)注產(chǎn)業(yè)發(fā)展，以深度分享推進(jìn)產(chǎn)業(yè)技術(shù)成長(zhǎng)，致力于弘揚(yáng)技術(shù)創(chuàng)新，倡導(dǎo)分享、開放和協(xié)作，努力打造高質(zhì)量的人才服務(wù)平臺(tái)。<> <><>二、網(wǎng)站圖片顯示頁面1.需求分析如果一個(gè)網(wǎng)站全部使用文字進(jìn)行描述，會(huì)顯得比較，我們希望希望添加一些圖片讓整個(gè)網(wǎng)頁顯示得更加豐富。效果如下：2.技術(shù)分析圖片標(biāo)簽：</>屬性：：指定圖片的位置(路徑) 相對(duì)路徑： ：代表的是當(dāng)前目錄 ：代表的是上一級(jí)目錄。 絕對(duì)路勁： E:\\\\0423就業(yè)班\01\資料\01\課堂演示圖片匯總\：指定圖片的寬度。：指定圖片的高度。 ：當(dāng)這個(gè)圖片無法正常顯示的時(shí)候給出的提示信息。(不同的瀏覽器顯示的效果不一樣)顯示效果：火狐顯示效果：3.步驟分析第一步：創(chuàng)建一個(gè)文件第二步：使用標(biāo)簽引入的圖片第三步：使用標(biāo)簽引入廣告圖片。4.代碼實(shí)現(xiàn)<> <> <"8"> <>網(wǎng)站圖片顯示頁面<> <> <> <"2"/> <""/> <><>三、網(wǎng)站列表頁面顯示1.需求分析我們希望在網(wǎng)站首頁的底部(友情鏈接)，實(shí)現(xiàn)一個(gè)顯示其他公司的信息。2.技術(shù)分析列表標(biāo)簽列表標(biāo)簽分為：有序列表和無序列表。無序列表： <>列表項(xiàng)一<><>列表項(xiàng)二<><>列表項(xiàng)三<>屬性： ：實(shí)心小圓點(diǎn)：實(shí)心小方塊：空心小圓圈有序列表： <>列表項(xiàng)一<><>列表項(xiàng)二<><>列表項(xiàng)三<><> <"1"從幾開始(必須是有序列表，而且是數(shù)字)從幾開始(必須是有序列表，而且是數(shù)字)降序顯示(5432) <>阿里巴巴<> <>京東<> <>百度<> <>傳智播客<> <><>4.代碼實(shí)現(xiàn)超鏈接標(biāo)簽<a>內(nèi)容<>代表的是超鏈接屬性： :點(diǎn)擊超鏈接內(nèi)容跳轉(zhuǎn)到的一個(gè)位置。 ：在瀏覽器哪個(gè)位置顯示 在當(dāng)前選項(xiàng)卡標(biāo)簽進(jìn)行顯示 在新的選項(xiàng)卡標(biāo)簽進(jìn)行顯示<> <> <"8"> <>友情鏈接<> <> <> <> <><a"#">阿里巴巴<><> <><a"案例一：網(wǎng)站信息頁面顯示/網(wǎng)站信息頁面顯示""">京東<><> <><a"案例一：網(wǎng)站信息頁面顯示/網(wǎng)站信息頁面顯示""">百度<><> <><a"案例一：網(wǎng)站信息頁面顯示/網(wǎng)站信息頁面顯示""">傳智播客<><> <> <><>四、網(wǎng)站首頁顯示案例1.需求分析我們希望在瀏覽器中顯示一個(gè)商城首頁的頁面，顯示的效果如下：2.技術(shù)分析表格標(biāo)簽<>代表整個(gè)表格代表整個(gè)表格<><>代表的是單元格(代表的是單元格(列)<>代表代表的是行屬性： :表格的邊框 :設(shè)置表格的寬度(單位可以是像素，還可以是百分比) ：設(shè)置表格的高度(單位可以是像素，還可以是百分比) ：設(shè)置單元格和單元格的間距 ：設(shè)置單元格月里面內(nèi)容的間距 ：設(shè)置表格顯示的位置(、、) :這是表格的背景顏色。跨行、跨列的操作需求：屬性介紹： :跨行(在同一列才能跨行) :跨列(在同一行才能跨列)<> <> <"8"> <>表格的跨行跨列<> <> <> <"1""0""0""500""300"""> <> <"2""">11<> <>13<> <>14<> <> <> <>21<> <"2""2"> <"1""100%""100%"> <> <>11<> <>12<> <>13<> <> <> <>21<> <>22<> <>23<> <> <> <>31<> <>32<> <>33<> <> <> <> <>24<> <> <> <>31<> <"2">34<> <> <> <>41<> <>42<> <>43<> <> <> <><>3.步驟分析第一步：創(chuàng)建一個(gè)八行一列的表格第二步：實(shí)現(xiàn)第一行(嵌套一個(gè)一行三列的表格)，然后分別對(duì)嵌套表格單元格進(jìn)行實(shí)現(xiàn)第三步：實(shí)現(xiàn)二行(使用字體標(biāo)簽來實(shí)現(xiàn)，帶有超鏈接效果)第四步：在第三行放置一張輪播圖片(靜態(tài)的)第五步：在第四行中嵌套一個(gè)三行七列的表格(分別實(shí)現(xiàn))第六步：在第五行放置一張圖片(廣告)第七步：在第六行復(fù)制第四行的內(nèi)容第八步：在第七行放置一張圖片第九步：在第八行添加一些文字信息和超鏈接4.代碼實(shí)現(xiàn)<> <> <"8"> <>網(wǎng)站首頁顯示頁面<> <> <> <"0""1300""""0""0"> <1部分> <> <> <嵌套一個(gè)一行三列的表格> <"100%""0""0""0"> <"50"> <"33.3%"> <"2""47"/> <> <"33.3%"> <"""47"/> <> <"33.3%"> ;<a"#">登錄<>; <a"#">注冊(cè)<>; <a"#">購物車<> <> <> <> <> <> <2.導(dǎo)航欄部分> <""> <"50"> ;<a"#"><"""5">首頁<><>; <a"#"><"""3">手機(jī)數(shù)碼<><>; <a"#"><"""3">電腦辦公<><>; <a"#"><"""3">鞋靴箱包<><>; <a"#"><"""3">孕嬰保健<><> <> <> <3.輪播圖> <> <> <"1""100%"/> <> <> <4.熱門商品> <> <> <嵌套了一個(gè)三行七列的表格> <"0""100%""0""0"> <"50"> <"7"> ;<"5">熱門商品<>; <"2"/> <> <> <> <"2""600""190"> <"01""100%""100%"/> <> <"3""555""250"> <a"#"><"01""100%""100%"/><> <> <"185""250"""> <a"#"><"03""100%""50%"/><> <p><"">電燉鍋<><> <p><"">￥299<><> <> <"185""250"""> <a"#"><"03""100%""50%"/><> <p><"">電燉鍋<><> <p><"">￥299<><> <> <"185""250"""> <a"#"><"03""100%""50%"/><> <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<><> <> <"185""250"""> <a"#"><"03""100%"/><> <p><"">電燉鍋<><> <p><"">￥299<><> <> <"185""250"""> <a"#"><"03""100%"/><> <p><"">電燉鍋<><> <p><"">￥299<><> <> <"185""250"""> <a"#"><"03""100%"/><> <p><"">電燉鍋<><> <p><"">￥299<><> <> <> <> <> <> <5.廣告圖片> <> <> <"""100%"/> <> <> <6.熱門商品> <> <> <嵌套了一個(gè)三行七列的表格> <"0""100%""0""0"> <"50"> <"7"> ;<"5">熱門商品<>; <"2"/> <> <> <> <"2""600""190"> <"01""100%""100%"/> <> <"3""555""250"> <a"#"><"01""100%""100%"/><> <> <"185""250"""> <a"#"><"03""100%""50%"/><> <p><"">電燉鍋<><> <p><"">￥299<><> <> <"185""250"""> <a"#"><"03""100%""50%"/><> <p><"">電燉鍋<><> <p><"">￥299<><> <> <"185""250"""> <a"#"><"03""100%""50%"/><> <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<><> <> <"185""250"""> <a"#"><"03""100%"/><> <p><"">電燉鍋<><> <p><"">￥299<><> <> <"185""250"""> <a"#"><"03""100%"/><> <p><"">電燉鍋<><> <p><"">￥299<><> <> <"185""250"""> <a"#"><"03""100%"/><> <p><"">電燉鍋<><> <p><"">￥299<><> <> <> <> <> <> <7.廣告圖片> <> <> <"""100%"/> <> <> <8.友情鏈接和版權(quán)信息> <""> <> <a"#">關(guān)于我們<> <a"#">聯(lián)系我們<> <a"#">招賢納士<> <a"#">法律聲明<> <a"#">友情鏈接<> <a"#">支付方式<> <a"#">配送方式<> <a"#">服務(wù)聲明<> <a"#">廣告聲明<> <p>?2019-2019傳智商城版權(quán)所有<> <> <> <> <><>五、網(wǎng)站注冊(cè)顯示頁面案例1.需求分析用戶如果想要在網(wǎng)站進(jìn)行購物，那么必須成為這個(gè)網(wǎng)站的會(huì)員，在成為會(huì)員之前，得先注冊(cè)。我們就要實(shí)現(xiàn)一個(gè)注冊(cè)的功能。效果：2.技術(shù)分析表單標(biāo)簽需要提交到服務(wù)器端的表單需要使用<><>括起來。屬性： :指定表單的名稱 ：整個(gè)表單提交的位置。 :提交的方式()<"""#"""> <指定表單的類型。"隱藏域。""指定表單的類型。隱藏域。 用戶名：<"文本輸入框"用于后臺(tái)獲取該字段的值。""輸入框的寬度。"100"輸入內(nèi)容的長(zhǎng)度"4"文本輸入框用于后臺(tái)獲取該字段的值。輸入框的寬度。輸入內(nèi)容的長(zhǎng)度 密碼：<"密碼框"""/></>密碼框 確認(rèn)密碼：<""""/></> 愛好：<"復(fù)選框"對(duì)復(fù)選框內(nèi)容進(jìn)行分組，劃到同一組的，值必須相同。""復(fù)選框?qū)?fù)選框內(nèi)容進(jìn)行分組，劃到同一組的，值必須相同。提交數(shù)據(jù)到服務(wù)器必須指定的屬性。 <"""""吃肉"/>吃肉</> 性別：<"單選框。""""男"/>單選框。 <"""""女"/默認(rèn)選中"">女<默認(rèn)選中 籍貫： <""> <>請(qǐng)選擇<> <"湖北">湖北<> <"湖南""">湖南<> <></> 頭像： <"文件上傳項(xiàng)"""/><文件上傳項(xiàng) 自我介紹： <"3""4"> <></> <"提交按鈕"提交按鈕 <"普通按鈕，它必須結(jié)合使用才會(huì)有效果。""注冊(cè)普通按鈕，它必須結(jié)合使用才會(huì)有效果。 <"重置按鈕。"重置按鈕。<>面試題： 和的區(qū)別提交方式會(huì)將表單里面數(shù)據(jù)顯示在地址欄，不夠安全，長(zhǎng)度有限制提交方式不會(huì)將表單里面數(shù)據(jù)顯示在地址欄，比較安全，長(zhǎng)度沒有限制。3.步驟分析第一步：創(chuàng)建一個(gè)五行一列的表格第二步：復(fù)制之前的內(nèi)容(第一行、第二行、第四行、第五行)第三步：第三行嵌套一個(gè)十行兩列的表格(表單)4.代碼實(shí)現(xiàn)<3.注冊(cè)表單><"600"> <""> <"#"""> <"4""0""0""800""500"""""> <> <"2"> <"6">會(huì)員注冊(cè)<> <> <> <> <>用戶名<> <> <"""""50"/> <> <> <> <>密碼<> <> <"""""50"/> <> <> <> <>確認(rèn)密碼<> <> <"""""50"/> <> <> <> <><> <>