使用html語(yǔ)言和css開(kāi)發(fā)商業(yè)站點(diǎn)

1、HTML基本標(biāo)簽（一）第一章課程地位每階段已包括：項(xiàng)目實(shí)戰(zhàn)、COT課程 總課時(shí)： 1008C#OOPJavaScriptT-SQLJava OOPS2350Y2344JSPS2：Java階段項(xiàng)目預(yù)備課程WinFormsLogic JavaS1314S1：.NET階段項(xiàng)目 HibernateN-TierAjaxSpringStrutsHTMLC#NTCProject知識(shí)Y2：.NET畢業(yè)設(shè)計(jì)項(xiàng)目COTCOTCOTY2：Java畢業(yè)設(shè)計(jì)項(xiàng)目目標(biāo)崗位標(biāo)準(zhǔn)手冊(cè)就業(yè)技能結(jié)構(gòu)圖客戶端技能結(jié)構(gòu)圖本門課程目標(biāo)學(xué)完本門課程后，你能夠：制作界面美觀大方、面向企業(yè)應(yīng)用的靜態(tài)商業(yè)網(wǎng)站掌握Web開(kāi)發(fā)的行業(yè)規(guī)范和標(biāo)準(zhǔn)課程

2、項(xiàng)目展示貴美商城首頁(yè)商品展示頁(yè)（點(diǎn)擊左邊“商品分類”任一鏈接）具體商品詳細(xì)介紹頁(yè)（點(diǎn)擊任一商品圖片）購(gòu)物車頁(yè)面（點(diǎn)擊“立刻購(gòu)買”按鈕）登錄頁(yè)（點(diǎn)擊右上方的導(dǎo)航菜單） 注冊(cè)頁(yè)（點(diǎn)擊右上方的導(dǎo)航菜單） 幫助中心客服頁(yè)面（點(diǎn)擊右上方的導(dǎo)航菜單） 教員現(xiàn)場(chǎng)演示貫穿項(xiàng)目預(yù)習(xí)檢查HTML文檔的基本結(jié)構(gòu)是什么？什么是塊級(jí)、行級(jí)標(biāo)簽？、分別代表什么？插入一條直線用什么標(biāo)簽？本章任務(wù)制作圖文并茂的商品介紹頁(yè) 本章目標(biāo)使用HTML的基本結(jié)構(gòu)創(chuàng)建網(wǎng)頁(yè)使用行級(jí)和塊級(jí)標(biāo)簽組織頁(yè)面內(nèi)容 使用圖像標(biāo)簽實(shí)現(xiàn)圖文并茂的頁(yè)面什么是HTMLHTML：Hyper Text Markup Language 超文本標(biāo)簽語(yǔ)言HTML：網(wǎng)頁(yè)

3、的“源碼”瀏覽器：“解釋和執(zhí)行”HTML源碼的工具 HTML告知瀏覽器如何顯示網(wǎng)頁(yè)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)題和其他說(shuō)明信息，包括在 標(biāo)簽內(nèi)這部分包含文本、圖像和鏈接，它包括在 標(biāo)簽內(nèi)HTML文檔的基本結(jié)構(gòu)記事本UltraEditHTML的編輯工具操作演示1：在記事本里創(chuàng)建網(wǎng)頁(yè) 網(wǎng)頁(yè)的摘要信息2-1 網(wǎng)頁(yè)摘要信息利于瀏覽器解析和搜索引擎搜索：使用標(biāo)簽 搜狐-中國(guó)最大的門戶網(wǎng)站 網(wǎng)頁(yè)的摘要信息2-1 使用標(biāo)簽（1）描述文檔類型和字符編碼（2）描述搜索關(guān)

4、鍵字和描述提供搜索關(guān)鍵字和內(nèi)容描述信息，方便搜索引擎的搜索 HTML頁(yè)面中的塊和行HTML標(biāo)簽分類（方便后續(xù)的布局設(shè)計(jì)）：塊級(jí)標(biāo)簽：顯示為“塊”狀，前后隔一行 行級(jí)標(biāo)簽：按行逐一顯示 分類好處：方便后續(xù)的布局設(shè)計(jì) 塊級(jí)：塊內(nèi)包含多行行級(jí)：包括文字、圖片等塊級(jí)標(biāo)簽根據(jù)使用場(chǎng)合，塊級(jí)標(biāo)簽又細(xì)分為：基本塊級(jí)標(biāo)簽 常用于布局的塊級(jí)標(biāo)簽 標(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)簽3-1h1最大h6最小前后隔行操作演示2：標(biāo)題標(biāo)簽 標(biāo)題標(biāo)題段落標(biāo)簽 北京歡迎你 北京歡迎你，有夢(mèng)想誰(shuí)都了不起！/p 有勇氣就會(huì)有奇跡?；緣K級(jí)標(biāo)簽3-2前后換行，類似教材中的段落操作演示3

5、：段落標(biāo)簽 水平線標(biāo)簽 北京歡迎你 北京歡迎你，有夢(mèng)想誰(shuí)都了不起！/p 有勇氣就會(huì)有奇跡?；緣K級(jí)標(biāo)簽3-3橫線用于內(nèi)容分割單個(gè)標(biāo)簽的閉合形式操作演示4：水平線標(biāo)簽 練習(xí)基本塊級(jí)標(biāo)簽需求說(shuō)明：顯示唐詩(shī)介紹（ UltraEdit環(huán)境 ） 完成時(shí)間：20分鐘分析應(yīng)使用哪些標(biāo)簽？有序列表標(biāo)簽 注冊(cè)步驟： 填寫信息 收電子郵件 注冊(cè)成功 常用于布局的塊級(jí)標(biāo)簽7-1有序列表操作演示5：有序列表標(biāo)簽 列表項(xiàng)1 無(wú)序列表標(biāo)簽 新人上路指南 如何激活會(huì)員名？ 如何注冊(cè)貴美會(huì)員？ 注冊(cè)時(shí)密碼設(shè)置有什么要求？ 貴美認(rèn)證常用于布局的塊級(jí)標(biāo)簽7-2無(wú)序列表操作演示6：無(wú)序列表標(biāo)簽 列表項(xiàng)1 定義描述標(biāo)簽 咖啡 一種黑

6、色的熱飲料，原料據(jù)說(shuō)是咖啡豆，非洲盛產(chǎn)這類原料。 可以提神，刺激神經(jīng)。常用于布局的塊級(jí)標(biāo)簽7-3這種效果可以和無(wú)序列表互相替代，因dt是塊狀元素，所以常用于圖文混編的布局場(chǎng)合操作演示7：dl和dt標(biāo)簽 標(biāo)題 描述1 圖片的HTML代碼（后續(xù)講解） 商品名稱：燦坤蒸氣電熨斗 商品價(jià)格：388元 商品簡(jiǎn)介：金鋼低血超硬超順滑,140ml透明大水箱設(shè)計(jì)常用于布局的塊級(jí)標(biāo)簽7-4用定義描述標(biāo)簽實(shí)現(xiàn)圖文混編的效果文字有一定的縮進(jìn)表格 百度 新浪 常用于布局的塊級(jí)標(biāo)簽7-5-表格 -行 -列（單元格）演示示例8：表格標(biāo)簽 常用于布局的塊級(jí)標(biāo)簽7-6表單 一般和table使用： . . .演示示例9：表單標(biāo)

7、簽 常用于布局的塊級(jí)標(biāo)簽7-7分區(qū)標(biāo)簽 div標(biāo)簽可內(nèi)嵌到等標(biāo)簽內(nèi)，作為普通塊狀元素使用一般當(dāng)作結(jié)構(gòu)化塊狀元素使用，作為邏輯分區(qū)（分塊）即容器來(lái)使用 新人上路 div其實(shí)就是一個(gè). 操作演示10：分區(qū)標(biāo)簽 小結(jié)1、div-ul(ol)-li ：常用于分類導(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ā)常用的4種塊狀結(jié)構(gòu)是什么？練習(xí)常用于布局的塊級(jí)標(biāo)簽 需求說(shuō)明：實(shí)現(xiàn)簡(jiǎn)單的商品購(gòu)買頁(yè) 完成時(shí)間：25分鐘分析應(yīng)使用哪些標(biāo)簽？共性問(wèn)題集中講解常見(jiàn)調(diào)試問(wèn)題及解

8、決辦法代碼規(guī)范問(wèn)題共性問(wèn)題集中講解圖像標(biāo)簽 行級(jí)標(biāo)簽3-1為了不同瀏覽器之間的兼容，推薦使用title屬性 ，確保能顯示提示文字操作演示11：圖像標(biāo)簽 范圍標(biāo)簽 ：顯示某行內(nèi)的獨(dú)特樣式 商品價(jià)格:僅售10元行級(jí)標(biāo)簽3-2操作演示12：span標(biāo)簽 文本等行級(jí)內(nèi)容設(shè)置紅色、大號(hào)字突出顯示 換行標(biāo)簽 北京歡迎你，有夢(mèng)想誰(shuí)都了不起！ 有勇氣就會(huì)有奇跡。 北京歡迎你，為你開(kāi)天辟地 流動(dòng)中的魅力充滿朝氣。 北京歡迎你，在太陽(yáng)下分享呼吸 在黃土地刷新成績(jī)。 北京歡迎你，像音樂(lè)感動(dòng)你 讓我們都加油去超越自己。 行級(jí)標(biāo)簽3-3和的區(qū)別：前后不換行操作演示13：換行標(biāo)簽 為什么需要W3C標(biāo)準(zhǔn)W3C：World

9、Wide Web Consortium，萬(wàn)維網(wǎng)聯(lián)盟W3C的職能：負(fù)責(zé)制定和維護(hù)web行業(yè)標(biāo)準(zhǔn)W3C標(biāo)準(zhǔn)包括：列的標(biāo)準(zhǔn)：HTML內(nèi)容方面：XHTML樣式美化方面：CSS 結(jié)構(gòu)文檔訪問(wèn)方面：OM頁(yè)面交互方面：ECMAScript 制定統(tǒng)一的web標(biāo)準(zhǔn)W3CNetscape的圖標(biāo)W3C提倡的Web結(jié)構(gòu)不規(guī)范的示例一級(jí)主題一級(jí)主題闡述文字 二級(jí)主題二級(jí)主題相關(guān)文字項(xiàng)目列表1項(xiàng)目列表2項(xiàng)目列表3存在問(wèn)題：1、內(nèi)容和表現(xiàn)沒(méi)分離，后期很難維護(hù)和修改 2、HTML代碼不能表示頁(yè)面的內(nèi)容語(yǔ)義，不利于搜索引擎搜索 操作演示：不規(guī)范的示例 W3C提倡的Web結(jié)構(gòu)規(guī)范的示例一級(jí)主題1 一級(jí)主題闡述文字 二級(jí)主題 二級(jí)主題闡述文字 項(xiàng)目列表1 項(xiàng)目列表2 項(xiàng)目列表3 W3C提倡的Web結(jié)構(gòu)：1、內(nèi)容（結(jié)構(gòu)）和表現(xiàn)（樣式）分離2、HTML內(nèi)容結(jié)構(gòu)要求語(yǔ)義化 操作演示：規(guī)范的示例 body部分內(nèi)容XHTML 1.0基本規(guī)范標(biāo)簽名和屬性名稱必須小寫 HTML標(biāo)簽必須關(guān)閉 屬性值必須用引號(hào)括起來(lái) 標(biāo)簽必須正確嵌套 必須添加文檔類型聲明 1、聲明必須位于文檔的最前面2、三種級(jí)別：Strict（嚴(yán)格類型） 、Trasitional（過(guò)度類型）、 Frameset（框架類型） 練習(xí)行級(jí)元素需求說(shuō)明：完成時(shí)間：20分鐘注意HTML結(jié)構(gòu)的語(yǔ)義化，遵守XH