HTML基本標(biāo)簽

1、第一章HTML基本標(biāo)簽(一)本門(mén)課程目標(biāo)n 學(xué)完本門(mén)課程后，你能夠：n制作界面美觀大方、面向企業(yè)應(yīng)用的靜態(tài)商業(yè)網(wǎng)站n掌握Web開(kāi)發(fā)的行業(yè)規(guī)范和標(biāo)準(zhǔn)課程項(xiàng)目展示n 貴美商城n首頁(yè)n商品展示頁(yè)（點(diǎn)擊左邊“商品分類(lèi)”任一鏈接）n具體商品詳細(xì)介紹頁(yè)（點(diǎn)擊任一商品圖片）n購(gòu)物車(chē)頁(yè)面（點(diǎn)擊“立刻購(gòu)買(mǎi)”按鈕）n登錄頁(yè)（點(diǎn)擊右上方的導(dǎo)航菜單） n注冊(cè)頁(yè)（點(diǎn)擊右上方的導(dǎo)航菜單） n幫助中心客服頁(yè)面（點(diǎn)擊右上方的導(dǎo)航菜單） 教員現(xiàn)場(chǎng)演示貫穿項(xiàng)目教員現(xiàn)場(chǎng)演示貫穿項(xiàng)目本章任務(wù)n 制作圖文并茂的商品介紹頁(yè) 本章目標(biāo)n 使用HTML的基本結(jié)構(gòu)創(chuàng)建網(wǎng)頁(yè)n 使用行級(jí)和塊級(jí)標(biāo)簽組織頁(yè)面內(nèi)容 n 使用圖像標(biāo)簽實(shí)現(xiàn)圖文并茂的頁(yè)面什

2、么是HTMLn HTML：Hyper Text Markup Language 超文本標(biāo)簽語(yǔ)言n HTML：網(wǎng)頁(yè)的“源碼”n 瀏覽器：“解釋和執(zhí)行”HTML源碼的工具 HTML告知瀏覽器如告知瀏覽器如何顯示網(wǎng)頁(yè)何顯示網(wǎng)頁(yè)n 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)題和其他說(shuō)明信息，包括在這部分包括標(biāo)題和其他說(shuō)明信息，包括在 標(biāo)簽內(nèi)標(biāo)簽內(nèi)這部分包含文本、圖像和鏈接，它包括在

3、這部分包含文本、圖像和鏈接，它包括在 標(biāo)簽內(nèi)標(biāo)簽內(nèi)HTML文檔的基本結(jié)構(gòu)記事本記事本UltraEditHTML的編輯工具操作演示操作演示1：在記事本里創(chuàng)建網(wǎng)頁(yè)：在記事本里創(chuàng)建網(wǎng)頁(yè) 網(wǎng)頁(yè)的摘要信息2-1 網(wǎng)頁(yè)摘要信息利于瀏覽器解析和搜索引擎搜索：網(wǎng)頁(yè)摘要信息利于瀏覽器解析和搜索引擎搜索：使用使用標(biāo)簽標(biāo)簽 搜狐搜狐-中國(guó)最大的門(mén)戶網(wǎng)站中國(guó)最大的門(mén)戶網(wǎng)站 網(wǎng)頁(yè)的摘要信息2-1 使用使用標(biāo)簽標(biāo)簽（1）描述文檔類(lèi)型和字符編碼）描述文檔類(lèi)型和字符編碼（2）描述搜索關(guān)鍵字和描述）描述搜索關(guān)鍵字和描述提供搜索關(guān)鍵字和內(nèi)容描述提供搜索關(guān)鍵字和內(nèi)容描述信息，方便搜索引擎的搜索信息，方便搜索引擎的搜索 HTML頁(yè)面

4、中的塊和行HTML標(biāo)簽分類(lèi)（方便后續(xù)的布局設(shè)計(jì)）：標(biāo)簽分類(lèi)（方便后續(xù)的布局設(shè)計(jì)）：塊級(jí)標(biāo)簽：顯示為塊級(jí)標(biāo)簽：顯示為“塊塊”狀，前后隔一行狀，前后隔一行 行級(jí)標(biāo)簽：按行逐一顯示行級(jí)標(biāo)簽：按行逐一顯示 分類(lèi)好處：方便后續(xù)的布局設(shè)計(jì)分類(lèi)好處：方便后續(xù)的布局設(shè)計(jì) 塊級(jí)：塊級(jí)：塊內(nèi)包含塊內(nèi)包含多行多行行級(jí)：包行級(jí)：包括文字、括文字、圖片等圖片等塊級(jí)標(biāo)簽根據(jù)使用場(chǎng)合，塊級(jí)標(biāo)簽又細(xì)分為：根據(jù)使用場(chǎng)合，塊級(jí)標(biāo)簽又細(xì)分為：基本塊級(jí)標(biāo)簽基本塊級(jí)標(biāo)簽 常用于布局的塊級(jí)標(biāo)簽常用于布局的塊級(jí)標(biāo)簽 n標(biāo)題標(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)題六級(jí)標(biāo)題基本塊

5、級(jí)標(biāo)簽3-1h1h1最大最大h6h6最小最小前后隔行前后隔行操作演示操作演示2：標(biāo)題標(biāo)簽：標(biāo)題標(biāo)簽 標(biāo)題標(biāo)題標(biāo)題標(biāo)題n段落標(biāo)簽 北京歡迎你北京歡迎你 北京歡迎你，有夢(mèng)想誰(shuí)都了不起！北京歡迎你，有夢(mèng)想誰(shuí)都了不起！/p 有勇氣就會(huì)有奇跡。有勇氣就會(huì)有奇跡?；緣K級(jí)標(biāo)簽3-2前后換行，前后換行，類(lèi)似教材中類(lèi)似教材中的段落的段落操作演示操作演示3：段落標(biāo)簽：段落標(biāo)簽 n水平線標(biāo)簽 北京歡迎你北京歡迎你 北京歡迎你，有夢(mèng)想誰(shuí)都了不起！北京歡迎你，有夢(mèng)想誰(shuí)都了不起！/p 有勇氣就會(huì)有奇跡。有勇氣就會(huì)有奇跡。基本塊級(jí)標(biāo)簽3-3橫線用于內(nèi)容橫線用于內(nèi)容分割分割單個(gè)標(biāo)簽的閉單個(gè)標(biāo)簽的閉合形式合形式操作演示操作演

6、示4：水平線標(biāo)簽：水平線標(biāo)簽 練習(xí)基本塊級(jí)標(biāo)簽n 需求說(shuō)明：n顯示唐詩(shī)介紹（ UltraEdit環(huán)境 ） 完成時(shí)間：完成時(shí)間：20分鐘分鐘分析應(yīng)使用哪分析應(yīng)使用哪些標(biāo)簽？些標(biāo)簽？n有序列表標(biāo)簽 注冊(cè)步驟：注冊(cè)步驟： 填寫(xiě)信息填寫(xiě)信息 收電子郵件收電子郵件 注冊(cè)成功注冊(cè)成功 常用于布局的塊級(jí)標(biāo)簽7-1有序列表有序列表操作演示操作演示5：有序列表標(biāo)簽：有序列表標(biāo)簽 列表項(xiàng)列表項(xiàng)1 n無(wú)序列表標(biāo)簽 新人上路指南新人上路指南 如何激活會(huì)員名？如何激活會(huì)員名？ 如何注冊(cè)貴美會(huì)員？如何注冊(cè)貴美會(huì)員？ 注冊(cè)時(shí)密碼設(shè)置有什么要求？注冊(cè)時(shí)密碼設(shè)置有什么要求？ 貴美認(rèn)證貴美認(rèn)證常用于布局的塊級(jí)標(biāo)簽7-2無(wú)序列表無(wú)

7、序列表操作演示操作演示6：無(wú)序列表標(biāo)簽：無(wú)序列表標(biāo)簽 列表項(xiàng)列表項(xiàng)1 n定義描述標(biāo)簽 咖啡咖啡 一種黑色的熱飲料，原料據(jù)說(shuō)是咖啡豆，非洲盛產(chǎn)這類(lèi)原料。一種黑色的熱飲料，原料據(jù)說(shuō)是咖啡豆，非洲盛產(chǎn)這類(lèi)原料。 可以提神，刺激神經(jīng)?？梢蕴嵘瘢碳ど窠?jīng)。常用于布局的塊級(jí)標(biāo)簽7-3這種效果可以和無(wú)序列表互相這種效果可以和無(wú)序列表互相替代，因替代，因dtdt是塊狀元素，所以是塊狀元素，所以常用于圖文混編的布局場(chǎng)合常用于圖文混編的布局場(chǎng)合操作演示操作演示7：dl和和dt標(biāo)簽標(biāo)簽 標(biāo)題標(biāo)題 描述描述1 圖片的圖片的HTML代碼（后續(xù)講解）代碼（后續(xù)講解） 商品名稱(chēng)：燦坤蒸氣電熨斗商品名稱(chēng)：燦坤蒸氣電熨斗 商品

8、價(jià)格：商品價(jià)格：388元元 商品簡(jiǎn)介：金鋼低血超硬超順滑商品簡(jiǎn)介：金鋼低血超硬超順滑,140ml透明大水箱設(shè)計(jì)透明大水箱設(shè)計(jì)常用于布局的塊級(jí)標(biāo)簽7-4n 用定義描述標(biāo)簽實(shí)現(xiàn)圖文混編的效果文字有一定的縮進(jìn)文字有一定的縮進(jìn)n表格 百度 新浪 常用于布局的塊級(jí)標(biāo)簽7-5-表格表格 -行行 -列（單元格）列（單元格）演示示例演示示例8：表格標(biāo)簽：表格標(biāo)簽 常用于布局的塊級(jí)標(biāo)簽7-6n 表單 一般和一般和table使用：使用： . . .演示示例演示示例9：表單標(biāo)簽：表單標(biāo)簽 常用于布局的塊級(jí)標(biāo)簽7-7n 分區(qū)標(biāo)簽 divdiv標(biāo)簽可內(nèi)嵌到標(biāo)簽可內(nèi)嵌到等標(biāo)簽等標(biāo)簽內(nèi)，作為普通塊狀元素使用內(nèi)，作為普通塊狀

9、元素使用一般當(dāng)作結(jié)構(gòu)化塊狀元素使用，作一般當(dāng)作結(jié)構(gòu)化塊狀元素使用，作為邏輯分區(qū)（分塊）即容器來(lái)使用為邏輯分區(qū)（分塊）即容器來(lái)使用 新人上路新人上路 div其實(shí)就是一個(gè)其實(shí)就是一個(gè). 操作演示操作演示10：分區(qū)標(biāo)簽：分區(qū)標(biāo)簽 小結(jié)1、div-ul(ol)-li ：常用于分類(lèi)導(dǎo)航或菜單等 2、div-dl-dt-dd ：常用于圖文混編的場(chǎng)合 3、table-tr-td ：常用于圖文布局或顯示數(shù)據(jù) 4、form-table-tr-td：常用于布局表單 請(qǐng)說(shuō)出實(shí)際開(kāi)發(fā)常用的請(qǐng)說(shuō)出實(shí)際開(kāi)發(fā)常用的4種塊狀結(jié)構(gòu)是什么？種塊狀結(jié)構(gòu)是什么？練習(xí)常用于布局的塊級(jí)標(biāo)簽 n 需求說(shuō)明：n實(shí)現(xiàn)簡(jiǎn)單的商品購(gòu)買(mǎi)頁(yè) 完成時(shí)間

10、：完成時(shí)間：25分鐘分鐘分析應(yīng)使用哪些分析應(yīng)使用哪些標(biāo)簽？標(biāo)簽？共性問(wèn)題集中講解共性問(wèn)題集中講解n常見(jiàn)調(diào)試問(wèn)題及解決辦法常見(jiàn)調(diào)試問(wèn)題及解決辦法n代碼規(guī)范問(wèn)題代碼規(guī)范問(wèn)題共性問(wèn)題集中講解共性問(wèn)題集中講解n圖像標(biāo)簽 行級(jí)標(biāo)簽3-1為了不同瀏覽器之間的兼容，推薦使用為了不同瀏覽器之間的兼容，推薦使用title屬性屬性 ，確保能顯示提示文字，確保能顯示提示文字操作演示操作演示11：圖像標(biāo)簽：圖像標(biāo)簽 n范圍標(biāo)簽 ：顯示某行內(nèi)的獨(dú)特樣式 商品價(jià)格商品價(jià)格:僅售僅售10元元行級(jí)標(biāo)簽3-2操作演示操作演示12：span標(biāo)簽標(biāo)簽 文本等行級(jí)內(nèi)容文本等行級(jí)內(nèi)容設(shè)置紅色、大號(hào)字設(shè)置紅色、大號(hào)字突出顯示突出顯示 n

11、換行標(biāo)簽 北京歡迎你，有夢(mèng)想誰(shuí)都了不起！北京歡迎你，有夢(mèng)想誰(shuí)都了不起！ 有勇氣就會(huì)有奇跡。有勇氣就會(huì)有奇跡。 北京歡迎你，為你開(kāi)天辟地北京歡迎你，為你開(kāi)天辟地 流動(dòng)中的魅力充滿朝氣。流動(dòng)中的魅力充滿朝氣。 北京歡迎你，在太陽(yáng)下分享呼吸北京歡迎你，在太陽(yáng)下分享呼吸 在黃土地刷新成績(jī)。在黃土地刷新成績(jī)。 北京歡迎你，像音樂(lè)感動(dòng)你北京歡迎你，像音樂(lè)感動(dòng)你 讓我們都加油去超越自己。讓我們都加油去超越自己。 行級(jí)標(biāo)簽3-3和和的區(qū)別：的區(qū)別：前后不換行前后不換行操作演示操作演示13：換行標(biāo)簽：換行標(biāo)簽 為什么需要W3C標(biāo)準(zhǔn)n W3C：World Wide Web Consortium，萬(wàn)維網(wǎng)聯(lián)盟n W3

12、C的職能：負(fù)責(zé)制定和維護(hù)web行業(yè)標(biāo)準(zhǔn)n W3C標(biāo)準(zhǔn)包括：列的標(biāo)準(zhǔn)：nHTML內(nèi)容方面：XHTMLn樣式美化方面：CSS n結(jié)構(gòu)文檔訪問(wèn)方面：OMn頁(yè)面交互方面：ECMAScriptn 制定統(tǒng)一的制定統(tǒng)一的web標(biāo)準(zhǔn)標(biāo)準(zhǔn)W3CNetscape的圖標(biāo)的圖標(biāo)W3C提倡的Web結(jié)構(gòu)n 不規(guī)范的示例一級(jí)主題一級(jí)主題一級(jí)主題闡述文字一級(jí)主題闡述文字 二級(jí)主題二級(jí)主題二級(jí)主題相關(guān)文字二級(jí)主題相關(guān)文字項(xiàng)目列表項(xiàng)目列表1項(xiàng)目列表項(xiàng)目列表2項(xiàng)目列表項(xiàng)目列表3存在問(wèn)題：存在問(wèn)題：1、內(nèi)容和表現(xiàn)沒(méi)分離，后期很難、內(nèi)容和表現(xiàn)沒(méi)分離，后期很難維護(hù)和修改維護(hù)和修改 2、HTML代碼不能表示頁(yè)面的內(nèi)代碼不能表示頁(yè)面的內(nèi)容語(yǔ)

13、義，不利于搜索引擎搜索容語(yǔ)義，不利于搜索引擎搜索 操作演示：不規(guī)范的示例操作演示：不規(guī)范的示例 W3C提倡的Web結(jié)構(gòu)規(guī)范的示例規(guī)范的示例一級(jí)主題一級(jí)主題1 一級(jí)主題闡述文字一級(jí)主題闡述文字 二級(jí)主題二級(jí)主題 二級(jí)主題闡述文字二級(jí)主題闡述文字 項(xiàng)目列表項(xiàng)目列表1 項(xiàng)目列表項(xiàng)目列表2 項(xiàng)目列表項(xiàng)目列表3 W3C提倡的提倡的Web結(jié)構(gòu)：結(jié)構(gòu)：1、內(nèi)容（結(jié)構(gòu)）和表現(xiàn)（樣式）、內(nèi)容（結(jié)構(gòu)）和表現(xiàn)（樣式）分離分離2、HTML內(nèi)容結(jié)構(gòu)要求語(yǔ)義化內(nèi)容結(jié)構(gòu)要求語(yǔ)義化 操作演示：規(guī)范的示例操作演示：規(guī)范的示例 body部分內(nèi)容部分內(nèi)容XHTML 1.0基本規(guī)范標(biāo)簽名和屬性名稱(chēng)必須小寫(xiě)標(biāo)簽名和屬性名稱(chēng)必須小寫(xiě) HTML標(biāo)簽必須關(guān)閉標(biāo)簽必須關(guān)閉 屬性值必須用引號(hào)括起來(lái)屬性值必須用引號(hào)括起來(lái) 標(biāo)簽必須正確嵌套標(biāo)簽必須正確嵌套 必須添加文檔類(lèi)型聲明必須添加文檔類(lèi)型聲明 1、聲明必須位于文檔的最前面、聲明必須位于文檔的最前面2、三種級(jí)別：、三種級(jí)別：Strict（嚴(yán)格類(lèi)型）