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

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

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

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

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

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

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

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

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