第1章：HTML基本標(biāo)簽

1、第1章HTML基本標(biāo)簽本章目標(biāo) 會(huì)使用HTML的基本結(jié)構(gòu)創(chuàng)建網(wǎng)頁(yè) 會(huì)使用文本相關(guān)標(biāo)簽實(shí)現(xiàn)文字修飾和布局 會(huì)使用圖像相關(guān)標(biāo)簽實(shí)現(xiàn)圖文并茂的頁(yè)面 會(huì)使用超鏈接相關(guān)標(biāo)簽實(shí)現(xiàn)頁(yè)面間的跳轉(zhuǎn)HTML文件的基本結(jié)構(gòu) HTML文檔的結(jié)構(gòu)我的第一個(gè)網(wǎng)頁(yè)我的第一個(gè)網(wǎng)頁(yè) Hello World!HTML 網(wǎng)頁(yè)網(wǎng)頁(yè)頭部部分頭部部分主體部分主體部分標(biāo)簽標(biāo)記標(biāo)簽標(biāo)記 HTML 文檔的開(kāi)始和結(jié)束文檔的開(kāi)始和結(jié)束網(wǎng)頁(yè)標(biāo)題網(wǎng)頁(yè)標(biāo)題網(wǎng)頁(yè)內(nèi)容，可以是網(wǎng)頁(yè)內(nèi)容，可以是文本、圖像等文本、圖像等這部分包含文本、圖像和鏈接。它包括在這部分包含文本、圖像和鏈接。它包括在 標(biāo)簽內(nèi)標(biāo)簽內(nèi)這部分包括標(biāo)題和其他說(shuō)明信息。包括在這部分包括標(biāo)題和其他說(shuō)

2、明信息。包括在 標(biāo)簽內(nèi)標(biāo)簽內(nèi)使用記事本創(chuàng)建網(wǎng)頁(yè)演示示例演示示例2 2：如何在記事本里創(chuàng)建網(wǎng)頁(yè)：如何在記事本里創(chuàng)建網(wǎng)頁(yè) 使用記事本創(chuàng)建網(wǎng)頁(yè)的步驟： 1、打開(kāi)記事本2、輸入HTML代碼3、保存為*.html或*.htm文件，注意格式問(wèn)題4、打開(kāi)網(wǎng)頁(yè)預(yù)覽效果 使用記事本創(chuàng)建網(wǎng)頁(yè)標(biāo)簽網(wǎng)頁(yè)標(biāo)題網(wǎng)頁(yè)標(biāo)題網(wǎng)頁(yè)頁(yè)面中出現(xiàn)亂碼，那如何消除亂碼使其正常顯示？使用使用標(biāo)簽標(biāo)簽簡(jiǎn)體中文：簡(jiǎn)體中文：gb2312繁體中文：繁體中文：big5純英文網(wǎng)頁(yè)：純英文網(wǎng)頁(yè)：iso-8859-1可以避免頁(yè)面可以避免頁(yè)面中的亂碼中的亂碼頁(yè)面背景色或背景圖像 Hello World！為了使頁(yè)面美麗大方，網(wǎng)頁(yè)背景要盡量地淺為了使頁(yè)面美麗大

3、方，網(wǎng)頁(yè)背景要盡量地淺Hello World!網(wǎng)頁(yè)背景色彩網(wǎng)頁(yè)背景色彩 網(wǎng)頁(yè)背景圖像網(wǎng)頁(yè)背景圖像 文本相關(guān)標(biāo)簽字體、字號(hào) 標(biāo)題標(biāo)簽 標(biāo)簽 特殊符號(hào)行的控制 段落標(biāo)簽 換行標(biāo)簽使用了使用了 換段了換段了設(shè)置了字體的設(shè)置了字體的大小和顏色大小和顏色換行了換行了特殊符號(hào)特殊符號(hào)字體、字號(hào)相關(guān)標(biāo)簽標(biāo)題標(biāo)簽 . #=1, 2, 3, 4, 5, 6 說(shuō)明：到字體大小依次遞減 一級(jí)標(biāo)題一級(jí)標(biāo)題 二級(jí)標(biāo)題二級(jí)標(biāo)題 三級(jí)標(biāo)題三級(jí)標(biāo)題 四級(jí)標(biāo)題四級(jí)標(biāo)題 五級(jí)標(biāo)題五級(jí)標(biāo)題 六級(jí)標(biāo)題六級(jí)標(biāo)題 H1 到到 H6 標(biāo)簽用于指定不同級(jí)別的標(biāo)題標(biāo)簽用于指定不同級(jí)別的標(biāo)題 標(biāo)簽 特殊符號(hào) . 字體、字號(hào)相關(guān)標(biāo)簽特殊字符轉(zhuǎn)義碼

4、空格 引號(hào)(“”)"小于()>版權(quán)號(hào)( )©字體的字體的大小值大小值字體的字體的顏色顏色字體的字體的類(lèi)型類(lèi)型字體、字號(hào)相關(guān)標(biāo)簽. 手機(jī)充值、手機(jī)充值、IP卡卡/電話(huà)卡電話(huà)卡 移動(dòng)移動(dòng) |  100 |  聯(lián)通聯(lián)通 |  50 Copyright © 2007 "淘寶網(wǎng)淘寶網(wǎng)" All rights.空格效果空格效果. 淘寶集市歡迎您！淘寶集市歡迎您！ 淘寶網(wǎng)首屆翠友會(huì)！淘寶網(wǎng)首屆翠友會(huì)！ 行的控制相關(guān)標(biāo)

5、簽段落標(biāo)簽 段(Paragraph) (可以看作是空行) 換行標(biāo)簽 換行 換段了換段了換行了換行了圖像標(biāo)簽常見(jiàn)的圖片格式介紹圖像類(lèi)型優(yōu)點(diǎn)缺點(diǎn)適用場(chǎng)合制作工具*.jpg體積小，比較清晰有損壓縮 、畫(huà)面失真 網(wǎng)頁(yè)圖片Photoshop*.gif支持 Internet 標(biāo)準(zhǔn) ,支持無(wú)損耗壓縮和透明度，很流行 支持有限的透明度,效果不如別的圖像網(wǎng)頁(yè)圖片Photoshop*.png體積小,便于網(wǎng)絡(luò)傳輸,無(wú)損壓縮,支持透明不支持動(dòng)畫(huà)網(wǎng)頁(yè)圖片Photoshop*.bmp支持 24 位顏色深度，兼容性好不支持壓縮 容量大桌面墻紙photoshop圖像標(biāo)簽圖像的基本語(yǔ)法 當(dāng)圖片不顯示時(shí)出現(xiàn)的提當(dāng)圖片不顯示時(shí)出現(xiàn)

6、的提示性文字，示性文字，IE早期版本當(dāng)鼠標(biāo)放到圖早期版本當(dāng)鼠標(biāo)放到圖片上時(shí)也會(huì)顯示提示文字片上時(shí)也會(huì)顯示提示文字圖像的圖像的位置位置圖像的圖像的寬度寬度圖像的圖像的高度高度為圖像添加的提示性文字為圖像添加的提示性文字圖像標(biāo)簽 圖像與文本的對(duì)齊方式 圖像與文本居中對(duì)圖像與文本居中對(duì)齊齊,還可以取還可以取top, bottom 值值. 請(qǐng)點(diǎn)擊廣告進(jìn)入明星專(zhuān)區(qū)請(qǐng)點(diǎn)擊廣告進(jìn)入明星專(zhuān)區(qū)圖像和文本居圖像和文本居中對(duì)齊中對(duì)齊小結(jié)1字號(hào)大小為字號(hào)大小為3編寫(xiě)如下圖所示效果對(duì)應(yīng)的html代碼文字布局 內(nèi)容分隔標(biāo)簽 項(xiàng)目列表和編號(hào) 有序列表 無(wú)序列表水平分隔線(xiàn)水平分隔線(xiàn)有序列表有序列表無(wú)序列表無(wú)序列表如何使用內(nèi)容

7、分隔標(biāo)簽 線(xiàn)的厚度值線(xiàn)的厚度值線(xiàn)的寬度線(xiàn)的寬度 標(biāo)簽用于在頁(yè)面上繪制水平線(xiàn)標(biāo)簽用于在頁(yè)面上繪制水平線(xiàn) 線(xiàn)的顏色線(xiàn)的顏色如何使用列表 無(wú)序列表語(yǔ)法 列表項(xiàng)內(nèi)容 有序列表語(yǔ)法 列表項(xiàng)內(nèi)容 注冊(cè)步驟：注冊(cè)步驟： 填寫(xiě)信息填寫(xiě)信息 收電子郵件收電子郵件 注冊(cè)成功注冊(cè)成功 新人上路指南新人上路指南 如何激活會(huì)員名？如何激活會(huì)員名？ 如何注冊(cè)淘寶會(huì)員？如何注冊(cè)淘寶會(huì)員？ 注冊(cè)時(shí)密碼設(shè)置有什么要求注冊(cè)時(shí)密碼設(shè)置有什么要求？ 支付寶認(rèn)證支付寶認(rèn)證 頁(yè)面鏈接標(biāo)簽 鏈接到其他頁(yè)面 免費(fèi)注冊(cè)鏈接內(nèi)容鏈接內(nèi)容鏈接的地址鏈接的地址鏈接到其他頁(yè)面鏈接到其他頁(yè)面 免費(fèi)注冊(cè)免費(fèi)注冊(cè) 登錄登錄 單擊單擊”免費(fèi)注冊(cè)免費(fèi)注冊(cè)”之后

8、鏈接到的頁(yè)面之后鏈接到的頁(yè)面頁(yè)面鏈接標(biāo)簽 鏈接到其他頁(yè)面 絕對(duì)路徑指定從根目錄到文件的完整路徑。 相對(duì)路徑指定相對(duì)于當(dāng)前文件的文件位置。 在同一個(gè)文件夾下有兩個(gè)html文件，從一個(gè)文件超鏈接到另一個(gè)文件的路徑有幾種方式？?jī)煞N方式：相對(duì)路徑和絕對(duì)路徑兩種方式：相對(duì)路徑和絕對(duì)路徑頁(yè)面鏈接標(biāo)簽要鏈接到同一目錄要鏈接到同一目錄 (C:HTML) 下的頁(yè)面，可編寫(xiě)下的頁(yè)面，可編寫(xiě) 或或 相對(duì)路徑名相對(duì)路徑名絕對(duì)路徑名絕對(duì)路徑名頁(yè)面鏈接標(biāo)簽 要實(shí)現(xiàn)如下圖所示的超鏈接效果，怎么辦？演示示例演示示例3 3：演示錨鏈接：演示錨鏈接使用錨記標(biāo)簽使用錨記標(biāo)簽頁(yè)面鏈接標(biāo)簽 鏈接到本頁(yè)面 錨記標(biāo)簽用于使用戶(hù)“跳”到文檔的某個(gè)部分 HTML 的 NAME 屬性用于創(chuàng)建錨標(biāo)記 主題名稱(chēng) 為達(dá)到這種跳轉(zhuǎn)效果，請(qǐng)?jiān)?HREF 參數(shù)中使用該標(biāo)記主題名稱(chēng)演示示例演示示例4 4：演示錨鏈接：演示錨鏈接鏈接到其他頁(yè)面鏈接到其他頁(yè)面新人上路新人上路新人上路指南新人上路指南1、定義錨標(biāo)記、定義