項(xiàng)目一 網(wǎng)站制作基礎(chǔ)知識(shí)_第1頁(yè)
項(xiàng)目一 網(wǎng)站制作基礎(chǔ)知識(shí)_第2頁(yè)
項(xiàng)目一 網(wǎng)站制作基礎(chǔ)知識(shí)_第3頁(yè)
項(xiàng)目一 網(wǎng)站制作基礎(chǔ)知識(shí)_第4頁(yè)
項(xiàng)目一 網(wǎng)站制作基礎(chǔ)知識(shí)_第5頁(yè)
已閱讀5頁(yè)，還剩90頁(yè)未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

版權(quán)說(shuō)明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡(jiǎn)介

01網(wǎng)站制作基礎(chǔ)知識(shí)1任務(wù)1創(chuàng)建“helloworld”網(wǎng)頁(yè)任務(wù)2制作宋詞《清平樂(lè)》網(wǎng)頁(yè)任務(wù)3制作家用電器排行榜網(wǎng)頁(yè)2創(chuàng)建“helloworld”網(wǎng)頁(yè)任務(wù)13●1.了解網(wǎng)頁(yè)的本質(zhì)和網(wǎng)頁(yè)中的常見(jiàn)元素?！?.了解IP地址、域名和網(wǎng)址等基本概念。4談到網(wǎng)頁(yè)，大家并不陌生，人們平時(shí)使用瀏覽器閱讀新聞、查詢(xún)信息、查看圖片等都是在使用網(wǎng)頁(yè)。但是，大家知道網(wǎng)頁(yè)是怎么制作出來(lái)的嗎？我們可以通過(guò)在記事本中使用html語(yǔ)言對(duì)網(wǎng)頁(yè)進(jìn)行標(biāo)記來(lái)完成一個(gè)簡(jiǎn)單網(wǎng)頁(yè)的制作。本任務(wù)將針對(duì)網(wǎng)頁(yè)相關(guān)概念以及網(wǎng)頁(yè)文件結(jié)構(gòu)來(lái)對(duì)網(wǎng)頁(yè)進(jìn)行詳細(xì)介紹，并完成圖所示的網(wǎng)頁(yè)效果。5“helloworld”網(wǎng)頁(yè)效果6步驟一：新建一個(gè)文本文檔，在文檔中使用html語(yǔ)言寫(xiě)出網(wǎng)頁(yè)文件的結(jié)構(gòu)，如圖所示。網(wǎng)頁(yè)文件的結(jié)構(gòu)7步驟二：在<title></title>中輸入“這是我的第一個(gè)網(wǎng)頁(yè)”，如圖所示。輸入標(biāo)題內(nèi)容8步驟三：保存文檔。選擇記事本菜單欄中的“文件”→“保存”命令，彈出“另存為”對(duì)話框。保存文件9步驟四：操作完成后單擊“保存”按鈕，文本文件就已保存為html文件，此時(shí)可以觀察到文本文件的圖標(biāo)變成了網(wǎng)頁(yè)文件的圖標(biāo)，如圖所示。文件保存完成后，可以使用瀏覽器打開(kāi)，打開(kāi)后的效果如圖所示。保存后的html文件網(wǎng)頁(yè)標(biāo)題10步驟五：繼續(xù)向h1.html文件中添加內(nèi)容，定位到<body></body>，在其中添加“helloworld”，如圖所示。在網(wǎng)頁(yè)文件中添加內(nèi)容11步驟六：保存文件后使用瀏覽器打開(kāi)網(wǎng)頁(yè)文件，網(wǎng)頁(yè)效果如圖所示?！癶elloworld”網(wǎng)頁(yè)效果12一、網(wǎng)頁(yè)的本質(zhì)網(wǎng)頁(yè)是人們上網(wǎng)時(shí)在瀏覽器中看到的一個(gè)個(gè)畫(huà)面，網(wǎng)站則是一組相關(guān)網(wǎng)頁(yè)的集合。圖所示為京東商城網(wǎng)站主頁(yè)及其組成文件，從中可以看出，網(wǎng)頁(yè)由圖像、html文件、CSS文件、JS文件等組成。在瀏覽器中單擊鼠標(biāo)右鍵選擇“另存為”命令，可將網(wǎng)頁(yè)存入本地計(jì)算機(jī)的硬盤(pán)中。13京東商城網(wǎng)站主頁(yè)及其組成文件14二、網(wǎng)頁(yè)中的常見(jiàn)元素從瀏覽者的角度看，網(wǎng)頁(yè)中好像只有一些文字、圖像、動(dòng)畫(huà)等。但從專(zhuān)業(yè)人員的角度來(lái)看，網(wǎng)頁(yè)中通常包含站標(biāo)、導(dǎo)航條、廣告條、文字鏈接和按鈕等元素，如圖所示。構(gòu)成網(wǎng)頁(yè)的常用元素151.文本文本一直是最重要的信息載體與交流工具，網(wǎng)頁(yè)中的信息一般以文本為主。在網(wǎng)頁(yè)中可以通過(guò)字體、大小、顏色、底紋、邊框等設(shè)置文本的屬性。網(wǎng)頁(yè)設(shè)計(jì)者還可以在網(wǎng)頁(yè)中設(shè)計(jì)各種各樣的文字列表，清晰地表達(dá)一系列項(xiàng)目。2.圖像我們現(xiàn)在看到的網(wǎng)頁(yè)之所以豐富多彩，都是因?yàn)橛辛藞D像，可見(jiàn)圖像在網(wǎng)頁(yè)中的重要性。163.超鏈接超鏈接是從一個(gè)網(wǎng)頁(yè)指向另一個(gè)目的端的鏈接。這個(gè)目的端通常是另一個(gè)網(wǎng)頁(yè)，但也可以是一幅圖片、一個(gè)電子郵件地址、一個(gè)文件、一個(gè)程序，或者是本頁(yè)中的其他位置。4.表單表單是用來(lái)收集站點(diǎn)訪問(wèn)者信息的域集。站點(diǎn)訪問(wèn)者填寫(xiě)表單的方式是輸入文本、單擊單選框與復(fù)選框，以及從下拉菜單中選擇選項(xiàng)。175.表格使用表格排版是現(xiàn)在網(wǎng)頁(yè)的主要制作形式。通過(guò)表格可以精確地控制網(wǎng)頁(yè)元素在網(wǎng)頁(yè)中的位置。6.動(dòng)畫(huà)動(dòng)畫(huà)是網(wǎng)頁(yè)上最活躍的元素，通常制作優(yōu)秀、創(chuàng)意出眾的動(dòng)畫(huà)是吸引瀏覽者的最有效方法。網(wǎng)頁(yè)中的廣告條一般都是動(dòng)畫(huà)的形式。網(wǎng)頁(yè)中除了這些最基本的元素外，還包括橫幅廣告、字幕、懸停按鈕、計(jì)數(shù)器、音頻、視頻等。18三、IP地址、域名和網(wǎng)址1.IP地址互聯(lián)網(wǎng)雖然連接了不計(jì)其數(shù)的服務(wù)器與客戶機(jī)，但并不是雜亂無(wú)章的。每一個(gè)主機(jī)在互聯(lián)網(wǎng)上都有唯一的地址，這個(gè)地址稱(chēng)為IP地址（internetprotocoladdress）。IP地址由4組0～255之間的整數(shù)組成，數(shù)字之間用點(diǎn)間隔。例如，“26”就是一個(gè)IP地址。192.域名由于IP地址在使用過(guò)程中難于記憶和書(shū)寫(xiě)，人們又用一種與IP地址對(duì)應(yīng)的字符來(lái)表示地址，這就是域名。每一個(gè)網(wǎng)站都有自己的域名，并且域名是獨(dú)一無(wú)二的。例如，只需在瀏覽器地址欄中輸入“”，就可以訪問(wèn)新浪網(wǎng)站。3.網(wǎng)址網(wǎng)址又稱(chēng)為URL，英文全稱(chēng)是“uniformresourcelocator”，即統(tǒng)一資源定位器。它是一種網(wǎng)絡(luò)上通用的地址格式，用于標(biāo)識(shí)網(wǎng)頁(yè)文件在網(wǎng)絡(luò)中的位置。一個(gè)完整的網(wǎng)址由通信協(xié)議名稱(chēng)、域名或IP地址、網(wǎng)頁(yè)在服務(wù)器中的路徑和文件名四部分組成。20四、html文件的結(jié)構(gòu)在前面的html文件里用到了多個(gè)html標(biāo)簽，下面依次介紹它們的作用。實(shí)際上，它們構(gòu)成了最簡(jiǎn)單的完整html文件結(jié)構(gòu)。1.html標(biāo)簽html標(biāo)簽放在html文件的開(kāi)頭，并沒(méi)有實(shí)質(zhì)性的功能，只是一個(gè)形式上的標(biāo)記，但在編寫(xiě)html文件時(shí)仍要形成一個(gè)良好的習(xí)慣，在html文件開(kāi)頭使用html標(biāo)簽開(kāi)始。212.head標(biāo)簽head稱(chēng)為頭標(biāo)簽，一般放在html標(biāo)簽里，其作用是放置關(guān)于此html文件的信息，如提供索引、定義CSS樣式等。3.title標(biāo)簽title稱(chēng)為標(biāo)題標(biāo)簽，包含在head標(biāo)簽內(nèi)，其作用是設(shè)定網(wǎng)頁(yè)標(biāo)題，在瀏覽器左上方的標(biāo)題欄中將顯示這個(gè)標(biāo)題。此外，在Windows任務(wù)欄中顯示的也是這個(gè)標(biāo)題。224.body標(biāo)簽body稱(chēng)為主體標(biāo)簽，網(wǎng)頁(yè)上所要顯示的內(nèi)容都放在這個(gè)標(biāo)簽內(nèi)，它是html文件的重點(diǎn)所在。在后面的項(xiàng)目中所介紹的html標(biāo)簽都將放在這個(gè)標(biāo)簽內(nèi)。然而它并不僅僅是一個(gè)形式上的標(biāo)簽，其本身也可以控制網(wǎng)頁(yè)的背景顏色或背景圖像，這將在后續(xù)項(xiàng)目中介紹。另外，在構(gòu)建html結(jié)構(gòu)的時(shí)候要注意一個(gè)問(wèn)題：標(biāo)簽是不可以交錯(cuò)的，否則將會(huì)造成結(jié)構(gòu)錯(cuò)誤。例如，在圖所示的代碼中就存在標(biāo)簽交錯(cuò)的情況。23標(biāo)簽交錯(cuò)制作宋詞《清平樂(lè)》網(wǎng)頁(yè)任務(wù)2

24●1.了解常用的網(wǎng)站制作工具?！?.熟悉HBuilderX軟件的安裝與啟動(dòng)方法?！?.認(rèn)識(shí)HBuilderX軟件的界面?！?.掌握在HBuilderX軟件中新建web項(xiàng)目和運(yùn)行web項(xiàng)目的方法。●5.掌握html基礎(chǔ)標(biāo)簽的用法。25本任務(wù)計(jì)劃使用現(xiàn)在流行的網(wǎng)頁(yè)編輯工具HBuilderX和html基礎(chǔ)標(biāo)簽來(lái)完成圖所示《清平樂(lè)》網(wǎng)頁(yè)效果。本任務(wù)主要利用HBuilderX新建web項(xiàng)目，打開(kāi)及保存html文件，使用p段落標(biāo)簽、hr分隔線標(biāo)簽等功能，將《清平樂(lè)》詩(shī)詞展示在網(wǎng)頁(yè)上。26《清平樂(lè)》網(wǎng)頁(yè)效果27步驟一：在HBuilderX中新建一個(gè)web項(xiàng)目，在項(xiàng)目下新建一個(gè)html文件，在body標(biāo)簽中加入<h2></h2>，在h2標(biāo)題標(biāo)簽中加入文字信息“清平樂(lè)”，網(wǎng)頁(yè)效果如圖所示。28加入標(biāo)題標(biāo)簽29步驟二：在h2標(biāo)題標(biāo)簽下方加入hr水平線標(biāo)簽。加入水平線標(biāo)簽30步驟三：在hr水平線標(biāo)簽的下方加入p段落標(biāo)簽，并在p段落標(biāo)簽中間加入宋詞《清平樂(lè)》的內(nèi)容，網(wǎng)頁(yè)效果如圖所示。加入段落標(biāo)簽31加入段落標(biāo)簽32步驟四：此時(shí)，詩(shī)詞文字在html代碼中是換行的，但是在網(wǎng)頁(yè)的效果中是不換行的。為了讓其在網(wǎng)頁(yè)效果中達(dá)到換行的效果，需要添加若干個(gè)br換行標(biāo)簽，如圖所示。加入換行標(biāo)簽33步驟五：保存文件后使用瀏覽器打開(kāi)網(wǎng)頁(yè)文件，網(wǎng)頁(yè)效果如圖所示。《清平樂(lè)》網(wǎng)頁(yè)效果34一、網(wǎng)站制作工具1.AdobeDreamweaver圖所示為AdobeDreamweaver軟件的界面，AdobeDreamweaver簡(jiǎn)稱(chēng)“DW”，中文名稱(chēng)為“夢(mèng)想編織者”，最初為美國(guó)Macromedia公司開(kāi)發(fā)，2005年被Adobe公司收購(gòu)。DW是集網(wǎng)頁(yè)制作和管理網(wǎng)站于一身的所見(jiàn)即所得網(wǎng)頁(yè)代碼編輯器。利用其對(duì)html、CSS、JavaScript等內(nèi)容的支持，設(shè)計(jì)師和程序員可以在幾乎任何地方快速制作網(wǎng)站和進(jìn)行網(wǎng)站建設(shè)。35AdobeDreamweaver軟件的界面362.VisualStudioCode美國(guó)Microsoft公司在2015年4月30日Build開(kāi)發(fā)者大會(huì)上正式宣布了VisualStudioCode項(xiàng)目，這是一個(gè)運(yùn)行于MacOSX、Windows和Linux中，針對(duì)編寫(xiě)現(xiàn)代web和云應(yīng)用的跨平臺(tái)源代碼編輯器。其優(yōu)點(diǎn)是智能提示功能強(qiáng)大，可以很方便地進(jìn)行插件安裝，具有強(qiáng)大的調(diào)試功能，可以跨平臺(tái)支持源代碼編輯，現(xiàn)在已經(jīng)成為很多前端開(kāi)發(fā)者的必備工具。圖所示為VisualStudioCode軟件界面。37VisualStudioCode軟件界面383.WebStormWebStorm是捷克JetBrains公司推出的一款JavaScript開(kāi)發(fā)工具，被廣大中國(guó)JS（JavaScript，簡(jiǎn)稱(chēng)JS）開(kāi)發(fā)者譽(yù)為web前端開(kāi)發(fā)神器、最強(qiáng)大的html5編輯器、最智能的JavaScriptIDE等。它與IntelliJIDEA同源，繼承了IntelliJIDEA強(qiáng)大的JS部分的功能。圖所示為WebStorm軟件界面。其優(yōu)點(diǎn)是能進(jìn)行智能代碼補(bǔ)全、代碼格式化、代碼檢查和快速修復(fù)等。39WebStorm軟件界面404.HBuilderXHBuilderX是DCloud公司[數(shù)字天堂（北京）網(wǎng)絡(luò)技術(shù)有限公司]推出的一款支持html5的web開(kāi)發(fā)IDE。HBuilderX的編寫(xiě)用到了Java、C、Web和Ruby。HBuilderX本身主體由Java編寫(xiě)。它基于Eclipse，所以順其自然地兼容了Eclipse的插件?？焓荋BuilderX的最大優(yōu)勢(shì)，通過(guò)完整的語(yǔ)法提示和代碼輸入法、代碼塊等，大幅提升了html、JS、CSS的開(kāi)發(fā)效率。41二、HBuilderX的安裝與啟動(dòng)Windows操作系統(tǒng)和Mac操作系統(tǒng)上都可以安裝HBuilderX。其安裝步驟如下。1.直接從DCloud-HBuilder官方網(wǎng)站上下載最新版本的安裝文件。DCloud-HBuilder官方網(wǎng)站422.對(duì)下載的文件夾進(jìn)行解壓縮，HBuilderX不用安裝，解壓完成后即可使用。HBuilderX壓縮包433.打開(kāi)解壓后的文件夾，找到圖所示的“HBuilderX.exe”可執(zhí)行文件，這個(gè)可執(zhí)行文件就是HBuilderX的啟動(dòng)文件，雙擊該文件即可打開(kāi)HBuilderX編輯器。4.可以將HBuilderX.exe這個(gè)可執(zhí)行文件發(fā)送到桌面快捷方式，這樣每次使用時(shí)直接在桌面就可以打開(kāi)。HBuilderX文件目錄44三、HBuilderX界面圖所示為HBuilderX界面布局，HBuilderX的開(kāi)發(fā)界面主要由菜單欄、項(xiàng)目管理器、編輯窗口、視圖模式和控制臺(tái)五部分構(gòu)成。HBuilderX界面布局451.菜單欄菜單欄位于界面的左上方，是所有界面功能的集合和導(dǎo)航。其中常用的選項(xiàng)有“文件”和“運(yùn)行”。2.項(xiàng)目管理器項(xiàng)目管理器位于界面左側(cè)，是管理項(xiàng)目的工具，可以添加、刪除、修改、查看項(xiàng)目文件。關(guān)閉項(xiàng)目管理器后，按F9鍵可重新打開(kāi)。3.編輯窗口在項(xiàng)目管理器中雙擊某個(gè)文件，該文件可在編輯窗口中打開(kāi)。在編輯窗口中可以同時(shí)打開(kāi)并編輯多個(gè)文件。464.視圖模式視圖模式位于界面右側(cè)，單擊“預(yù)覽”按鈕將出現(xiàn)web瀏覽器，可以在web瀏覽器中看到代碼生成的網(wǎng)頁(yè)效果。5.控制臺(tái)調(diào)試代碼時(shí)，控制臺(tái)顯示代碼運(yùn)行狀態(tài)和報(bào)告信息。運(yùn)行代碼時(shí)，控制臺(tái)會(huì)自動(dòng)彈出。當(dāng)控制臺(tái)被關(guān)閉后，可以通過(guò)菜單欄中的“視圖”找到控制臺(tái)并打開(kāi)控制臺(tái)。47四、新建項(xiàng)目和運(yùn)行項(xiàng)目HBuilderX可以創(chuàng)建兩種項(xiàng)目，即web項(xiàng)目和移動(dòng)App項(xiàng)目。web項(xiàng)目開(kāi)發(fā)主要指?jìng)鹘y(tǒng)的PC端網(wǎng)頁(yè)開(kāi)發(fā)，頁(yè)面主要運(yùn)行在PC端瀏覽器中；移動(dòng)App項(xiàng)目開(kāi)發(fā)主要指針對(duì)移動(dòng)設(shè)備的頁(yè)面開(kāi)發(fā)，頁(yè)面主要在移動(dòng)設(shè)備上運(yùn)行。1.新建web項(xiàng)目在菜單欄中選擇“文件”→“新建”→“項(xiàng)目”命令，在出現(xiàn)的“新建項(xiàng)目”對(duì)話框中選擇“普通項(xiàng)目”，設(shè)置項(xiàng)目所在的位置和模板，這里選擇第二個(gè)模板“基本HTML項(xiàng)目”，單擊“創(chuàng)建”按鈕即可，之后新創(chuàng)建的web項(xiàng)目會(huì)在左側(cè)的項(xiàng)目管理器中出現(xiàn)。48創(chuàng)建web項(xiàng)目492.新建App項(xiàng)目在菜單欄中選擇“文件”→“新建”→“項(xiàng)目”命令，在出現(xiàn)的“新建項(xiàng)目”對(duì)話框中選擇uni-app，設(shè)置項(xiàng)目所在的位置和模板，這里選擇第一個(gè)默認(rèn)模板，單擊“創(chuàng)建”按鈕即可，之后新創(chuàng)建的App項(xiàng)目會(huì)在左側(cè)的項(xiàng)目管理器中出現(xiàn)。這里創(chuàng)建的項(xiàng)目名稱(chēng)為Demo，如圖所示。50創(chuàng)建App項(xiàng)目51五、html基礎(chǔ)標(biāo)簽1.標(biāo)題標(biāo)簽html提供了6個(gè)等級(jí)的標(biāo)題標(biāo)簽，即h1、h2、h3、h4、h5和h6，從h1至h6，標(biāo)題的重要性遞減。標(biāo)題標(biāo)簽的基本語(yǔ)法格式如下。52該語(yǔ)法中n的取值為1至6，align屬性為可選屬性，用于指定標(biāo)題的對(duì)齊方式。下面通過(guò)圖所示案例來(lái)演示標(biāo)題標(biāo)簽的應(yīng)用。標(biāo)題標(biāo)簽的應(yīng)用53在上圖中，使用h1至h6標(biāo)題標(biāo)簽設(shè)置6種級(jí)別的標(biāo)題。運(yùn)行上圖中的代碼，效果如圖所示。標(biāo)題標(biāo)簽效果542.段落標(biāo)簽在html中通過(guò)p段落標(biāo)簽來(lái)定義段落，其基本語(yǔ)法格式如下。該語(yǔ)法中align屬性為p段落標(biāo)簽的可選屬性，和標(biāo)題標(biāo)簽h1至h6一樣，同樣可以使用align屬性設(shè)置段落文本的對(duì)齊方式。55p段落標(biāo)簽是html文檔中最常見(jiàn)的標(biāo)簽，默認(rèn)情況下，文本在一個(gè)段落中會(huì)根據(jù)瀏覽器窗口的大小自動(dòng)換行。下面通過(guò)一個(gè)圖所示案例來(lái)演示p段落標(biāo)簽的應(yīng)用。段落標(biāo)簽的應(yīng)用56在上圖中，通過(guò)h1標(biāo)題標(biāo)簽和p段落標(biāo)簽定義了一個(gè)標(biāo)題和兩個(gè)段落。運(yùn)行上圖所示代碼，效果如圖所示。從圖中可以看出，通過(guò)使用p段落標(biāo)簽，每個(gè)段落都會(huì)單獨(dú)顯示，并且段落與段落之間有一定的間隔距離。段落標(biāo)簽效果573.水平線標(biāo)簽在網(wǎng)頁(yè)中，常常會(huì)看到一些水平線將段落與段落之間隔開(kāi)，使得文檔層次分明。這些水平線可以通過(guò)插入圖片實(shí)現(xiàn)，也可以通過(guò)標(biāo)簽來(lái)定義。hr就是創(chuàng)建水平線的標(biāo)簽，其基本語(yǔ)法格式如下。hr是單標(biāo)簽，在網(wǎng)頁(yè)中輸入一個(gè)<hr>，就添加了一條默認(rèn)樣式的水平線。58hr水平線標(biāo)簽的屬性、含義及屬性值見(jiàn)表。hr水平線標(biāo)簽的屬性、含義及屬性值594.換行標(biāo)簽在html中，一個(gè)段落中的文字會(huì)從左到右依次排列，直到瀏覽器窗口的右端，然后自動(dòng)換行。換行標(biāo)簽的應(yīng)用60在上圖中使用了br換行標(biāo)簽。運(yùn)行圖所示代碼，效果如圖所示。換行標(biāo)簽的應(yīng)用615.文本格式化標(biāo)簽在網(wǎng)頁(yè)中，有時(shí)需要為文字設(shè)置粗體、斜體或下畫(huà)線效果，為此，html準(zhǔn)備了專(zhuān)門(mén)的文本格式化標(biāo)簽，使文字以特殊的方式顯示。常用的文本格式化標(biāo)簽及顯示效果見(jiàn)表。常用的文本格式化標(biāo)簽及顯示效果62下面通過(guò)圖所示案例來(lái)演示文本格式化標(biāo)簽的應(yīng)用。文本格式化標(biāo)簽的應(yīng)用63運(yùn)行上圖所示代碼，效果如圖所示。文本格式化標(biāo)簽效果646.特殊字符標(biāo)簽瀏覽網(wǎng)頁(yè)時(shí)，常常會(huì)看到一些包含特殊字符的文本，如數(shù)學(xué)公式、版權(quán)信息等。常用特殊字符的表示65下面通過(guò)圖所示案例來(lái)演示常用特殊字符的應(yīng)用。常用特殊字符的應(yīng)用66運(yùn)行上圖所示代碼，效果如圖所示。特殊字符效果制作家用電器排行榜網(wǎng)頁(yè)任務(wù)367●1.掌握超鏈接標(biāo)簽的用法?！?.掌握?qǐng)D像標(biāo)簽的用法。68本任務(wù)主要通過(guò)使用超鏈接標(biāo)簽去嵌套文字標(biāo)簽和圖像標(biāo)簽，來(lái)完成家用電器排行榜網(wǎng)頁(yè)的制作，最終網(wǎng)頁(yè)效果如圖所示。69家用電器排行榜網(wǎng)頁(yè)效果70步驟一：使用HBuilderX軟件創(chuàng)建一個(gè)web項(xiàng)目，在項(xiàng)目目錄下新建一個(gè)html網(wǎng)頁(yè)文件，在新建的html網(wǎng)頁(yè)文件中的body標(biāo)簽里面分別寫(xiě)入h2標(biāo)簽和a標(biāo)簽，將a標(biāo)簽的href屬性設(shè)置為百度網(wǎng)頁(yè)地址“”，然后在a標(biāo)簽里面插入一些文字信息，代碼和網(wǎng)頁(yè)效果如圖所示。當(dāng)在瀏覽器中單擊這些文字信息時(shí)，網(wǎng)頁(yè)就會(huì)跳轉(zhuǎn)到百度網(wǎng)站。71添加h2標(biāo)簽和a標(biāo)簽72步驟二：在a標(biāo)簽里面的文字信息的上方插入img標(biāo)簽，同時(shí)將創(chuàng)維電視機(jī)圖片復(fù)制、粘貼到項(xiàng)目下的img目錄中去，代碼和網(wǎng)頁(yè)效果如圖所示。添加img標(biāo)簽73添加img標(biāo)簽74步驟三：在a標(biāo)簽下方加入hr水平線標(biāo)簽，代碼和網(wǎng)頁(yè)效果如圖所示添加hr水平線標(biāo)簽75步驟四：將其他四種電視機(jī)圖片素材也都復(fù)制、粘貼到項(xiàng)目目錄下的img目錄中，在hr標(biāo)簽的下方依照步驟一至步驟三，分別再寫(xiě)4組a標(biāo)簽和hr標(biāo)簽，設(shè)置每組a標(biāo)簽中的相關(guān)文字信息和其中img標(biāo)簽的src屬性?xún)?nèi)容，代碼如圖所示。添加其他四種電視機(jī)信息76添加其他四種電視機(jī)信息77步驟五：保存文件后使用瀏覽器打開(kāi)網(wǎng)頁(yè)文件，網(wǎng)頁(yè)效果如圖所示。家用電器排行榜網(wǎng)頁(yè)效果78一、超鏈接在html中添加超鏈接時(shí)，只需要將a標(biāo)簽環(huán)繞到需要添加超鏈接功能的其他網(wǎng)頁(yè)標(biāo)簽上即可。a標(biāo)簽的基本語(yǔ)法格式如下。79在a標(biāo)簽的語(yǔ)法中，a標(biāo)簽是一個(gè)行內(nèi)標(biāo)簽，用于實(shí)現(xiàn)超鏈接。href和target為其常用屬性，具體含義如下。1.hrefhref用于指定鏈接目標(biāo)的URL地址，當(dāng)為a標(biāo)簽應(yīng)用href屬性時(shí)，它就具有了超鏈接的功能。通常用URL來(lái)表示鏈接地址的意思（形式）。鏈接地址有絕對(duì)地址和相對(duì)地址的區(qū)別，絕對(duì)地址指通過(guò)該地址就可以“直達(dá)”該頁(yè)面。相對(duì)地址是指相對(duì)于當(dāng)前a標(biāo)簽所在的網(wǎng)頁(yè)所在位置（文件夾）的一個(gè)相對(duì)位置。802.targettarget用于指定鏈接頁(yè)面的打開(kāi)方式，其取值有_self和_blank兩種。其中_self為默認(rèn)值，意為在原窗口中打開(kāi)；_blank意為在新窗口中打開(kāi)。下面通過(guò)創(chuàng)建一個(gè)帶有超鏈接功能的簡(jiǎn)單網(wǎng)頁(yè)，來(lái)演示超鏈接標(biāo)簽的應(yīng)用，代碼如圖所示。81超鏈接標(biāo)簽的應(yīng)用82在上圖中，創(chuàng)建了兩個(gè)超鏈接，通過(guò)href屬性將它們的鏈接目標(biāo)分別指定為淘寶網(wǎng)站和百度網(wǎng)站，同時(shí)通過(guò)target屬性定義第一個(gè)鏈接網(wǎng)站在原窗口打開(kāi)，第二個(gè)鏈接網(wǎng)站在新窗口打開(kāi)。運(yùn)行上圖所示代碼，效果如圖所示。帶有超鏈接的網(wǎng)頁(yè)83當(dāng)用鼠標(biāo)單擊文本時(shí)，將會(huì)在新窗口中打開(kāi)鏈接網(wǎng)頁(yè)，如圖所示。在原窗口中打開(kāi)鏈接網(wǎng)頁(yè)84在新窗口中打開(kāi)鏈接網(wǎng)頁(yè)85二、錨點(diǎn)鏈接瀏覽網(wǎng)頁(yè)時(shí)，為了提高信息的檢索效率，常需要用到html語(yǔ)言中一種特殊的鏈接ii錨點(diǎn)鏈接，它屬于超鏈

溫馨提示

  • 1. 本站所有資源如無(wú)特殊說(shuō)明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁(yè)內(nèi)容里面會(huì)有圖紙預(yù)覽，若沒(méi)有圖紙預(yù)覽就沒(méi)有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫(kù)網(wǎng)僅提供信息存儲(chǔ)空間，僅對(duì)用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對(duì)用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請(qǐng)與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。

最新文檔

評(píng)論

0/150

提交評(píng)論