1、任務(wù)3 圖像和超鏈接第二單元 HTML5語(yǔ)言基礎(chǔ)錨點(diǎn)標(biāo)簽圖像標(biāo)簽絕對(duì)路徑和相對(duì)路徑超鏈接標(biāo)簽掌握學(xué)習(xí)目標(biāo)網(wǎng)頁(yè)中常用的圖片格式了解:學(xué)習(xí)目標(biāo)實(shí)戰(zhàn)演練制作網(wǎng)頁(yè)技術(shù)介紹頁(yè)面任務(wù)目標(biāo)強(qiáng)化訓(xùn)練制作“文章故事網(wǎng)”頁(yè)面任務(wù)目標(biāo)1. 圖像標(biāo)簽語(yǔ)法格式：圖像標(biāo)簽的屬性：屬性描述屬性描述src規(guī)定顯示圖像的URL。alt圖像不能顯示時(shí)的替換文本。align規(guī)定如何根據(jù)周圍的文本來(lái)排列圖像。（不推薦使用）border定義圖像周圍的邊框。（不推薦使用）height定義圖像的高度。width設(shè)置圖像的寬度。hspace定義圖像左側(cè)和右側(cè)的空白。（不推薦使用）vspace定義圖像頂部和底部的空白。（不推薦使用）title

2、光標(biāo)停留在圖像上時(shí)，顯示提示文字。知識(shí)準(zhǔn)備示例：在網(wǎng)頁(yè)中插入圖像 無(wú)標(biāo)題文檔 知識(shí)準(zhǔn)備2. 絕對(duì)路徑和相對(duì)路徑絕對(duì)路徑：指文件或目錄在硬盤上真正的路徑。比如，圖像top.jpg存放在c盤的images文件夾下，那么該圖像的絕對(duì)路徑表示方法為c:imagestop.jpg。相對(duì)路徑：相對(duì)于當(dāng)前文件的路徑。網(wǎng)頁(yè)中的圖片、超鏈接等一般都使用相對(duì)路徑來(lái)表示。知識(shí)準(zhǔn)備2. 絕對(duì)路徑和相對(duì)路徑相對(duì)路徑常見(jiàn)的表示方法Html文檔的位置圖像的位置相對(duì)路徑情形說(shuō)明c:democ:demo圖文均在同一目錄c:democ:demoimages圖在網(wǎng)頁(yè)下一層目錄c:democ:圖在網(wǎng)頁(yè)上一層c:democ:image

3、s圖文在同一層但不同目錄提示：“./”指回到上一層目錄，“images/”指進(jìn)入下一層目錄images，“./images/”指回到上一層目錄，然后再進(jìn)入目錄images中。知識(shí)準(zhǔn)備示例：絕對(duì)路徑和相對(duì)路徑 無(wú)標(biāo)題文檔 知識(shí)準(zhǔn)備3. 超鏈接標(biāo)簽語(yǔ)法格式：鏈接文本href屬性：描述鏈接的地址target屬性：描述鏈接頁(yè)面的打開(kāi)方式_self：默認(rèn)值，表示在原網(wǎng)頁(yè)窗口中打開(kāi)鏈接_blank：在新窗口中打開(kāi)鏈接知識(shí)準(zhǔn)備示例：在網(wǎng)頁(yè)中插入超鏈接 無(wú)標(biāo)題文檔 百度主頁(yè)，原窗口打開(kāi) 新浪主頁(yè)，新窗口打開(kāi) 提示：href屬性的內(nèi)容可以是站點(diǎn)內(nèi)網(wǎng)頁(yè)文件的相對(duì)路徑，也可以是網(wǎng)頁(yè)的網(wǎng)址等。知識(shí)準(zhǔn)備4. 錨點(diǎn)標(biāo)簽錨

4、點(diǎn)鏈接：可以幫助瀏覽者快速定位網(wǎng)頁(yè)內(nèi)的目標(biāo)內(nèi)容，實(shí)現(xiàn)網(wǎng)頁(yè)內(nèi)的鏈接跳轉(zhuǎn)。創(chuàng)建方法：第一步：使用創(chuàng)建目標(biāo)位置的錨點(diǎn)名稱第二步：使用鏈接文本創(chuàng)建錨點(diǎn)鏈接這樣，鼠標(biāo)點(diǎn)擊鏈接文本，網(wǎng)頁(yè)窗口即可定位到目標(biāo)位置。知識(shí)準(zhǔn)備示例：在網(wǎng)頁(yè)中插入錨點(diǎn)鏈接（因篇幅有限，僅列出部分代碼和效果截圖） 節(jié)氣謠諺詩(shī)歌 節(jié)氣分類 節(jié)氣的安排及含義 二十四番花信風(fēng) 各地有關(guān)節(jié)氣的諺語(yǔ) 節(jié)氣謠諺詩(shī)歌回到菜單創(chuàng)建錨點(diǎn)鏈接創(chuàng)建目標(biāo)位置的錨點(diǎn)名稱創(chuàng)建目標(biāo)位置的錨點(diǎn)名稱創(chuàng)建錨點(diǎn)鏈接知識(shí)準(zhǔn)備案例描述：設(shè)計(jì)并制作網(wǎng)頁(yè)技術(shù)介紹頁(yè)面，單擊index.html頁(yè)面中的圖片時(shí)，跳轉(zhuǎn)顯示page1.html頁(yè)面，網(wǎng)頁(yè)效果如下。制作網(wǎng)頁(yè)技術(shù)介紹頁(yè)面index.htmlpage1.htmlpage2.html實(shí)戰(zhàn)演練案例描述：設(shè)計(jì)并制作“文章故事網(wǎng)”頁(yè)面，網(wǎng)頁(yè)效果如下。制作“文章故事網(wǎng)”頁(yè)面