html網(wǎng)頁(yè)制作PPTchapter1基本標(biāo)簽

1、第一章Html基本標(biāo)簽基本標(biāo)簽 學(xué)完本門(mén)課程后，你能夠：制作界面美觀大方、面向企業(yè)應(yīng)用的靜態(tài)商業(yè)網(wǎng)站課程目標(biāo) 制作圖文并茂的“廣告”頁(yè)面 本章任務(wù) 本章目標(biāo)： 了解 Internet 和萬(wàn)維網(wǎng)（www） 掌握 html 文檔的基本結(jié)構(gòu) 會(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) 本章重點(diǎn)：html 結(jié)構(gòu)控制標(biāo)簽的運(yùn)用 本章難點(diǎn)：掌握文字內(nèi)容與修飾相關(guān)標(biāo)簽的運(yùn)用本章目標(biāo)Internet 和萬(wàn)維網(wǎng) 全球范圍內(nèi)網(wǎng)絡(luò)的網(wǎng)絡(luò)全球范圍內(nèi)網(wǎng)絡(luò)的網(wǎng)絡(luò) Internet 的一部分的一部分 由包含各種信息的文檔

2、組成由包含各種信息的文檔組成6萬(wàn)維網(wǎng) 2-1Web 服務(wù)器服務(wù)器客戶端客戶端hTTP協(xié)議協(xié)議協(xié)議 用于訪問(wèn)用于訪問(wèn) Web 上資源的一組上資源的一組規(guī)則規(guī)則 HTTP 是是 Web 協(xié)議協(xié)議 7萬(wàn)維網(wǎng) 2-2Web 服務(wù)器服務(wù)器客戶端客戶端向服務(wù)器發(fā)送頁(yè)面請(qǐng)求向服務(wù)器發(fā)送頁(yè)面請(qǐng)求Web 服務(wù)器處理請(qǐng)求并返回服務(wù)器處理請(qǐng)求并返回請(qǐng)求的頁(yè)面請(qǐng)求的頁(yè)面HTTP 負(fù)責(zé)請(qǐng)求和響應(yīng)負(fù)責(zé)請(qǐng)求和響應(yīng)8n協(xié)議：是一組標(biāo)準(zhǔn)規(guī)則，訪問(wèn)Web資源都要 遵守相應(yīng)的協(xié)議(HTTP)n地址：是一組命名方案，又稱(chēng)之為URL:Uniform Resource Locator，用于標(biāo)識(shí)web上的頁(yè)面和資源WWW資源WWW資源 常

3、用的網(wǎng)址 http:/ http:/ http:/協(xié)議協(xié)議主機(jī)主機(jī)10WWW資源 URL的組成n 用于通信的協(xié)議，例如http,ftpn 與之通信的主機(jī)（服務(wù)器）n 服務(wù)器上資源的路徑例如：http:/ 網(wǎng)站：萬(wàn)維網(wǎng)上相關(guān)網(wǎng)頁(yè)的集合 網(wǎng)頁(yè)：文件后綴名通常為*.html 或* .htm的頁(yè)面 html：用于制作網(wǎng)頁(yè)的超文本標(biāo)記語(yǔ)言(hyper Text Mark-up Language) 瀏覽器: 是安裝在客戶端計(jì)算機(jī)上的應(yīng)用軟件,如 IE, 用來(lái)讀取html源代碼并按指令顯示頁(yè)面 html編輯器：用于開(kāi)發(fā)網(wǎng)頁(yè)的工具軟件Web相關(guān)術(shù)語(yǔ)13html是一種超文本標(biāo)記語(yǔ)言。使用html編輯的文檔可以可

4、以通過(guò)萬(wàn)維網(wǎng)瀏覽器查看。文檔中可以包括文本、圖象、聲音、動(dòng)畫(huà)等。用IE、Firefox等瀏覽器。讀取html文本來(lái)顯示頁(yè)面 標(biāo)記語(yǔ)言是由特定字符分隔的基本元素，指定基本元素中所包含的文本如何顯示html 簡(jiǎn)介 html 文件是一個(gè)包含標(biāo)記的文本文件 這些標(biāo)記指導(dǎo)瀏覽器怎樣顯示這個(gè)頁(yè)面 html 文件必須有 htm 或者 html 擴(kuò)展名 html 文件可以用一個(gè)簡(jiǎn)單的文本編輯器創(chuàng)建 html 文件 html文件的編輯工具n通過(guò)文本編輯器創(chuàng)建n使用Dreamwerver編輯器創(chuàng)建 html 文件html 示例頁(yè)面標(biāo)題頁(yè)面標(biāo)題這是我的第一個(gè)頁(yè)面這是我的第一個(gè)頁(yè)面這里的文字要加粗這里的文字要加粗運(yùn)行

5、結(jié)果運(yùn)行結(jié)果使用記事本創(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è)演示示例2：如何在記事本里創(chuàng)建網(wǎng)頁(yè) 使用記事本創(chuàng)建網(wǎng)頁(yè)html 編輯器-Dreamweaver html文檔的結(jié)構(gòu)html文件的基本結(jié)構(gòu)我的第一個(gè)網(wǎng)頁(yè) hello world!html 網(wǎng)頁(yè)頭部部分主體部分標(biāo)簽標(biāo)記 html 文檔的開(kāi)始和結(jié)束網(wǎng)頁(yè)標(biāo)題網(wǎng)頁(yè)內(nèi)容，可以是文本、圖像等這部分包含文本、圖像和鏈接。它包括在 標(biāo)簽內(nèi)查看源代碼查看源代碼這部分包括標(biāo)題和其他說(shuō)明信息。包括在 標(biāo)簽內(nèi) html 標(biāo)簽用來(lái)組成 html 元素 html

6、 標(biāo)簽兩端有兩個(gè)包括字符：“” ，這兩個(gè)包括字符被稱(chēng)為尖括號(hào) html 標(biāo)簽通常成對(duì)出現(xiàn)，比如 和 ，一對(duì)標(biāo)簽的前面一個(gè)是開(kāi)始標(biāo)簽，第二個(gè)是結(jié)束標(biāo)簽,在開(kāi)始和結(jié)束標(biāo)簽之間的文本是元素內(nèi)容 html 標(biāo)簽是大小寫(xiě)無(wú)關(guān)的，跟表示的意思是一樣的html 標(biāo)簽 注釋 !- !- 被注釋掉的行將不顯示被注釋掉的行將不顯示 - - 正常顯示行正常顯示行11 正常顯示行正常顯示行22注釋 !- -用于增加代碼的可讀用于增加代碼的可讀性，不顯示性，不顯示22 標(biāo)簽可以擁有屬性。屬性能夠?yàn)轫?yè)面上的 html 元素提供附加信息 例如：標(biāo)簽 定義了 html 頁(yè)面的主體元素，使用一個(gè)附加的 bgcolor 屬性，你

7、可以告訴瀏覽器：你頁(yè)面的背景色是紅色的，就像這樣： 屬性通常由屬性名和值成對(duì)出現(xiàn)，就像這樣：name=value。屬性通常是附加給html元素的開(kāi)始標(biāo)簽的標(biāo)簽屬性頁(yè)面背景色或背景圖像 hello world！為了使頁(yè)面美麗大方，網(wǎng)頁(yè)背景要盡量地淺hello world!查看源代碼查看源代碼網(wǎng)頁(yè)背景色彩 網(wǎng)頁(yè)背景圖像 字體、字號(hào)標(biāo)題標(biāo)簽標(biāo)簽特殊符號(hào)文本相關(guān)標(biāo)簽使用了換段了設(shè)置了字體的大小和顏色換行了特殊符號(hào)標(biāo)題標(biāo)簽 . #=1, 2, 3, 4, 5, 6 說(shuō)明：到字體大小依次遞減字體、字號(hào)相關(guān)標(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í)別

8、的標(biāo)題查看源代碼查看源代碼字體、字號(hào)相關(guān)標(biāo)簽 標(biāo)簽 . 字體的大小值字體的顏色字體的類(lèi)型 特殊符號(hào)1 1、因?yàn)?、因?yàn)?等符號(hào)在等符號(hào)在HTMLHTML中中已使用，所以必須用其他符已使用，所以必須用其他符號(hào)來(lái)代替號(hào)來(lái)代替2 2、都以分號(hào)結(jié)束（；）、都以分號(hào)結(jié)束（；）字體、字號(hào)相關(guān)標(biāo)簽查看源代碼查看源代碼. 手機(jī)充值、ip卡/電話卡 移動(dòng) |  100 |  聯(lián)通 |  50 copyright © 2007 "淘寶網(wǎng)" all rights.空格效果. 淘寶集市歡迎您！ 淘寶網(wǎng)首屆翠友會(huì)！ 段落標(biāo)簽段(paragraph) (

9、可以看作是空行) 換行標(biāo)簽換行 行的控制相關(guān)標(biāo)簽查看源代碼查看源代碼換段了換行了和和的區(qū)別：的區(qū)別：前后不換行前后不換行 如何使用內(nèi)容分隔標(biāo)簽線的厚度值線的寬度查看源代碼查看源代碼 標(biāo)簽用于在頁(yè)面上繪制水平線 線的顏色圖像標(biāo)簽 img src=images/drink.jpg alt= /為了不同瀏覽器之間的兼容，推薦使用為了不同瀏覽器之間的兼容，推薦使用titletitle屬性屬性 ，確保能顯示提示文字，確保能顯示提示文字img src= /31 圖像與文本的對(duì)齊方式 圖像標(biāo)簽圖像與文本居中對(duì)齊,還可以取top, bottom 值. 請(qǐng)點(diǎn)擊廣告進(jìn)入明星專(zhuān)區(qū)查看源代碼查看源代碼圖像和文本居中對(duì)

10、齊編寫(xiě)如下圖所示效果對(duì)應(yīng)的html代碼小結(jié)1 1字號(hào)大小為3練習(xí)答案練習(xí)答案練習(xí)代碼練習(xí)代碼 項(xiàng)目列表和編號(hào) 有序列表 無(wú)序列表文字布局水平分隔線有序列表無(wú)序列表用了預(yù)先定義好的格式如何使用列表 無(wú)序列表語(yǔ)法 列表項(xiàng)內(nèi)容 有序列表語(yǔ)法 列表項(xiàng)內(nèi)容 查看源代碼查看源代碼 注冊(cè)步驟： 填寫(xiě)信息 收電子郵件 注冊(cè)成功 新人上路指南 如何激活會(huì)員名？ 如何注冊(cè)淘寶會(huì)員？ 注冊(cè)時(shí)密碼設(shè)置有什么要求？ 支付寶認(rèn)證 定義描述標(biāo)簽 咖啡咖啡 一種黑色的熱飲料，原料據(jù)說(shuō)是咖啡豆，非洲盛產(chǎn)這類(lèi)原料。一種黑色的熱飲料，原料據(jù)說(shuō)是咖啡豆，非洲盛產(chǎn)這類(lèi)原料。 可以提神，刺激神經(jīng)?？梢蕴嵘瘢碳ど窠?jīng)。這種效果可以和無(wú)序列

11、表互相這種效果可以和無(wú)序列表互相替代，因替代，因dtdt是塊狀元素，所以是塊狀元素，所以常用于圖文混編的布局場(chǎng)合常用于圖文混編的布局場(chǎng)合 標(biāo)題標(biāo)題 描述描述1 1 36 圖片的圖片的HTMLHTML代碼（后續(xù)講解）代碼（后續(xù)講解） 商品名稱(chēng)：燦坤蒸氣電熨斗商品名稱(chēng)：燦坤蒸氣電熨斗 商品價(jià)格：商品價(jià)格：388388元元 商品簡(jiǎn)介：金鋼低血超硬超順滑商品簡(jiǎn)介：金鋼低血超硬超順滑,140ml,140ml透明大水箱設(shè)計(jì)透明大水箱設(shè)計(jì) 用定義描述標(biāo)簽實(shí)現(xiàn)圖文混編的效果文字有一定的縮進(jìn)文字有一定的縮進(jìn)37小結(jié)2 2有序列表OL無(wú)序列表UL練習(xí)答案練習(xí)答案練習(xí)代碼練習(xí)代碼編寫(xiě)如下圖所示效果對(duì)應(yīng)的html代碼

12、超鏈接 超鏈接-實(shí)現(xiàn)頁(yè)面間的導(dǎo)航鏈接文本或圖像鏈接文本或圖像鏈接地址（目標(biāo)）鏈接地址（目標(biāo)）39 燦坤蒸氣電熨斗燦坤蒸氣電熨斗基本語(yǔ)法鏈接在新鏈接在新窗口中打窗口中打開(kāi)開(kāi)a href= 鏈接熱點(diǎn)文本或圖鏈接熱點(diǎn)文本或圖像像40上級(jí)目錄上級(jí)目錄上上級(jí)目錄上上級(jí)目錄鏈接路徑 相對(duì)地址：相對(duì)于當(dāng)前目錄的地址，常用 絕對(duì)地址：指向目標(biāo)地址的完整描述 ，少用 上級(jí)目上級(jí)目錄：錄：././上上級(jí)目上上級(jí)目錄：錄：././././登錄登錄搜狐搜狐登錄登錄41 免費(fèi)注免費(fèi)注冊(cè)冊(cè) 登錄登錄 超鏈接的三類(lèi)應(yīng)用場(chǎng)合4-1 頁(yè)面間鏈接 錨鏈接 功能性鏈接 常用于網(wǎng)站常用于網(wǎng)站導(dǎo)航導(dǎo)航相對(duì)路徑相對(duì)路徑42 實(shí)現(xiàn)錨鏈接

13、1、定義標(biāo)記（錨）： 目標(biāo)位置2、設(shè)置鏈接到標(biāo)記位置：當(dāng)前位置 明星專(zhuān)區(qū)明星專(zhuān)區(qū) 明顯專(zhuān)區(qū)內(nèi)容明顯專(zhuān)區(qū)內(nèi)容超鏈接的三類(lèi)應(yīng)用場(chǎng)合4-2 定義標(biāo)記定義標(biāo)記設(shè)置鏈接到設(shè)置鏈接到標(biāo)記位置標(biāo)記位置A.A.頁(yè)面內(nèi)的錨鏈接頁(yè)面內(nèi)的錨鏈接適用于頁(yè)面適用于頁(yè)面內(nèi)容較多，內(nèi)容較多，超過(guò)一屏的超過(guò)一屏的場(chǎng)合場(chǎng)合43超鏈接的三類(lèi)應(yīng)用場(chǎng)合4-3 實(shí)現(xiàn)錨鏈接標(biāo)記所在頁(yè)標(biāo)記所在頁(yè).明星專(zhuān)區(qū)明星專(zhuān)區(qū)B.B.頁(yè)面間的錨鏈接頁(yè)面間的錨鏈接鏈接頁(yè)鏈接頁(yè).明星體驗(yàn)：明星體驗(yàn)：a明星專(zhuān)區(qū)明星專(zhuān)區(qū) 44 功能性鏈接 郵箱、QQ鏈接等 a href=站長(zhǎng)信箱站長(zhǎng)信箱超鏈接的三類(lèi)應(yīng)用場(chǎng)合4-4 45 滾動(dòng)文字或圖像滾動(dòng)標(biāo)簽滾動(dòng)延遲時(shí)間滾動(dòng)對(duì)象的方向q說(shuō)明：q scrolldelay：表示滾動(dòng)延遲時(shí)間，默認(rèn)值為90。q direction：表示滾動(dòng)的方向，默認(rèn)為從右向左。q behavior:表示滾動(dòng)的方式,值可以是scroll(連續(xù)的)、slide(滑動(dòng)一次)、alternate(來(lái)回滾動(dòng))q bgcolor