HTML教程(最全的圖文并茂教程)

1、HTML網(wǎng)頁(yè)制作,1：HTML簡(jiǎn)介 2：HTML常用標(biāo)簽介紹 3：表單布局 4：表格布局 5：框架布局 6：CSS樣式表 7：使用Dreamweaver制作網(wǎng)頁(yè),HTML簡(jiǎn)介,HTML：Hyper Text Markup Language 超文本標(biāo)簽語(yǔ)言 HTML：網(wǎng)頁(yè)的“源碼” 瀏覽器：“解釋和執(zhí)行”HTML源碼的工具,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)題和其他說(shuō)明信息，包括在 標(biāo)簽內(nèi),這部分包含文本、圖像和鏈接

2、，它包括在 標(biāo)簽內(nèi),網(wǎng)頁(yè)的摘要信息,網(wǎng)頁(yè)摘要信息利于瀏覽器解析和搜索引擎搜索： 使用標(biāo)簽, 搜狐-中國(guó)最大的門(mén)戶網(wǎng)站 , , ,使用標(biāo)簽 （1）描述文檔類型和字符編碼 （2）描述搜索關(guān)鍵字和描述,提供搜索關(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)題

3、 ,h1最大 h6最小 前后隔行,標(biāo)題 標(biāo)題,基本塊級(jí)標(biāo)簽段落,段落標(biāo)簽, 北京歡迎你 北京歡迎你，有夢(mèng)想誰(shuí)都了不起！ 有勇氣就會(huì)有奇跡。 ,前后換行，類似教材中的段落,基本塊級(jí)標(biāo)簽水平線,水平線標(biāo)簽, 北京歡迎你 北京歡迎你，有夢(mèng)想誰(shuí)都了不起！ 有勇氣就會(huì)有奇跡。 ,橫線用于內(nèi)容分割,單個(gè)標(biāo)簽的閉合形式,常用于布局的塊級(jí)標(biāo)簽有序列表,有序列表標(biāo)簽, 注冊(cè)步驟： 填寫(xiě)信息 收電子郵件 注冊(cè)成功 ,有序列表, 列表項(xiàng)1 ,常用于布局的塊級(jí)標(biāo)簽無(wú)序列表,無(wú)序列表標(biāo)簽, 新人上路指南 如何激活會(huì)員名？ 如何注冊(cè)貴美會(huì)員？ 注冊(cè)時(shí)密碼設(shè)置有什么要求？ 貴美認(rèn)證 ,無(wú)序列表, 列表項(xiàng)1 ,常用于布局的塊

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

5、級(jí)標(biāo)簽div層,分區(qū)標(biāo)簽 ,div標(biāo)簽可內(nèi)嵌到等標(biāo)簽內(nèi)，作為普通塊狀元素使用,一般當(dāng)作結(jié)構(gòu)化塊狀元素使用，作為邏輯分區(qū)（分塊）即容器來(lái)使用, 新人上路 div其實(shí)就是一個(gè). ,小結(jié),請(qǐng)說(shuō)出實(shí)際開(kāi)發(fā)常用的4種塊狀結(jié)構(gòu)是什么？,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：常用于布局表單,行級(jí)標(biāo)簽圖像標(biāo)簽,圖像標(biāo)簽, ,為了不同瀏覽器之間的兼容，推薦使用title屬性 ，確保能顯示提示文字,行級(jí)標(biāo)簽范圍標(biāo)簽,范圍標(biāo)簽 ：顯示某行內(nèi)的獨(dú)特樣式

6、, 商品價(jià)格:僅售10元 ,文本等行級(jí)內(nèi)容,設(shè)置紅色、大號(hào)字突出顯示,行級(jí)標(biāo)簽換行標(biāo)簽,換行標(biāo)簽 , 北京歡迎你，有夢(mèng)想誰(shuí)都了不起！ 有勇氣就會(huì)有奇跡。 北京歡迎你，為你開(kāi)天辟地 流動(dòng)中的魅力充滿朝氣。 北京歡迎你，在太陽(yáng)下分享呼吸 在黃土地刷新成績(jī)。 北京歡迎你，像音樂(lè)感動(dòng)你 讓我們都加油去超越自己。 ,和的區(qū)別： 前后不換行,為什么需要W3C標(biāo)準(zhǔn),W3C：World 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è)面交互方面：ECMASc

7、ript ,制定統(tǒng)一的web標(biāo)準(zhǔn),W3C,Netscape的圖標(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ǔ)義，不利于搜索引擎搜索,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ǔ)義化,XHTML 1.0基本規(guī)范, body部分內(nèi)容 ,標(biāo)簽名和屬性名

8、稱必須小寫(xiě) HTML標(biāo)簽必須關(guān)閉 屬性值必須用引號(hào)括起來(lái) 標(biāo)簽必須正確嵌套 必須添加文檔類型聲明,1、聲明必須位于文檔的最前面 2、三種級(jí)別：Strict（嚴(yán)格類型） 、Trasitional（過(guò)度類型）、 Frameset（框架類型）,練習(xí)1,需求說(shuō)明： 實(shí)現(xiàn)簡(jiǎn)單的商品購(gòu)買(mǎi)頁(yè),練習(xí)2,注意HTML結(jié)構(gòu)的語(yǔ)義化，遵守XHTML1.0基本規(guī)范,需求說(shuō)明： 實(shí)現(xiàn)商品促銷頁(yè),超鏈接,超鏈接-實(shí)現(xiàn)頁(yè)面間的導(dǎo)航,鏈接文本或圖像,鏈接地址（目標(biāo)）,超鏈接, 燦坤蒸氣電熨斗 ,鏈接在新窗口中打開(kāi), 鏈接熱點(diǎn)文本或圖像,鏈接路徑, 上級(jí)目錄 上上級(jí)目錄 ,相對(duì)地址：相對(duì)于當(dāng)前目錄的地址，常用 絕對(duì)地址：指向目

9、標(biāo)地址的完整描述 ，少用,上級(jí)目錄：./,上上級(jí)目錄：././,登錄 搜狐,登錄,超鏈接的三類應(yīng)用場(chǎng)合, 免費(fèi)注冊(cè) 登錄 ,頁(yè)面間鏈接 錨鏈接 功能性鏈接,常用于網(wǎng)站導(dǎo)航,相對(duì)路徑,超鏈接的三類應(yīng)用場(chǎng)合,實(shí)現(xiàn)錨鏈接 1、定義標(biāo)記（錨）： 目標(biāo)位置 2、設(shè)置鏈接到標(biāo)記位置：當(dāng)前位置, 明星專區(qū) 明顯專區(qū)內(nèi)容 ,定義標(biāo)記,設(shè)置鏈接到標(biāo)記位置,A.頁(yè)面內(nèi)的錨鏈接,適用于頁(yè)面內(nèi)容較多，超過(guò)一屏的場(chǎng)合,超鏈接的三類應(yīng)用場(chǎng)合,實(shí)現(xiàn)錨鏈接,標(biāo)記所在頁(yè). 明星專區(qū) ,B.頁(yè)面間的錨鏈接,鏈接頁(yè). 明星體驗(yàn)：明星專區(qū) ,超鏈接的三類應(yīng)用場(chǎng)合,功能性鏈接 郵箱、QQ鏈接等, 站長(zhǎng)信箱 ,注釋, 被注釋掉的行將不顯

10、示 - 正常顯示行1 正常顯示行2 ,用于增加代碼的可讀性，不顯示,注釋,特殊符號(hào),特殊符號(hào) 空格：, COPYRIGHT 北京市貴美商城有限公司 ,1、因?yàn)榈确?hào)在HTML中已使用，所以必須用其他符號(hào)來(lái)代替 2、都以分號(hào)結(jié)束（；）,表單的應(yīng)用,表單的典型應(yīng)用,用戶登錄/注冊(cè),收集用戶反饋信息,提供搜索工具,常見(jiàn)的表單元素,單行文本框(text),單選按鈕(radio),復(fù)選框(checkbox),下拉列表(select),重置按鈕 (reset),提交按鈕(submit),密碼框(password),文本域(textarea),表單基本語(yǔ)法, 文本框、按鈕等表單元素 ,指定提交后，由服務(wù)器上

11、哪個(gè)處理程序處理,指定向服務(wù)器提交的方法： 一般為post或get方法, post方法比較安全, 用戶名： 密 ,表單輸入元素：input,表單提交地址和方法的設(shè)置,表單元素基本格式,指定元素的類型，可為text、radio、submit等,控件的名稱,控件的初始值,控件的初始寬度,控件中輸入的最多字符個(gè)數(shù),控件是否被選中checked,表單各元素語(yǔ)法,文本框 密碼框 按鈕 單選按鈕,普通按鈕：button 提交按鈕：submit 重置（清空）按鈕：reset 圖片按鈕：image,表單各元素語(yǔ)法,復(fù)選框 文件域 列表框 多行文本框, , 文本內(nèi)容 ,表單的高級(jí)用法,隱藏域 方便服務(wù)器端“記住

12、”客戶端的信息、但又不希望客戶看到的數(shù)據(jù),. ,隱藏的客戶代號(hào)信息：666，但客戶端頁(yè)面不顯示,隱藏域：既方便服務(wù)器端“記住”客戶端的數(shù)據(jù)，又避免因顯示瀏覽者不關(guān)心的數(shù)據(jù)導(dǎo)致用戶反感,只讀和禁用屬性 readonly：希望某個(gè)框內(nèi)的內(nèi)容只允許用戶看，不能修改 disabled：因沒(méi)達(dá)到使用的條件，限制用戶使用,表單的高級(jí)用法, 歡迎閱讀服務(wù)條款協(xié)議，貴美的權(quán)利和義務(wù). 同意以上協(xié)議 ,1、用戶不能修改協(xié)議 2、勾選“同意以上協(xié)議”，才允許點(diǎn)擊“注冊(cè)”按鈕,練習(xí)簡(jiǎn)易求職表,“協(xié)議”只讀，“提交”按鈕禁用,用隱藏域提交求職者姓名“zhangsan”,需求說(shuō)明： 使用表單制作簡(jiǎn)易求職表,表格的應(yīng)用,

13、表格應(yīng)用場(chǎng)合,論壇中應(yīng)用表格,購(gòu)物網(wǎng)站應(yīng)用表格,門(mén)戶網(wǎng)站應(yīng)用表格,基本語(yǔ)法, 第1個(gè)單元格的內(nèi)容 第2個(gè)單元格的內(nèi)容 . 第1個(gè)單元格的內(nèi)容 第2個(gè)單元格的內(nèi)容 . , 定義行, 定義列,跨行、跨列, 學(xué)生成績(jī) 張三 語(yǔ)文 98 數(shù)學(xué) 95 .代碼同上兩行. ,rowspan 跨2行,colspan 跨3列,表格高級(jí)應(yīng)用,如何實(shí)現(xiàn)年終數(shù)據(jù)報(bào)表？,表格標(biāo)題,頁(yè)腳,表頭,表格數(shù)據(jù)的分組標(biāo)簽、配合使用，對(duì)報(bào)表數(shù)據(jù)進(jìn)行邏輯分組,表格高級(jí)應(yīng)用, 年終數(shù)據(jù)報(bào)表 月份 收入（RMB） 1月 100 2月 80 平均月收入 196.67 總計(jì) 1180 ,標(biāo)簽對(duì)應(yīng)報(bào)表的頁(yè)眉,對(duì)應(yīng)報(bào)表的數(shù)據(jù)主體,對(duì)應(yīng)報(bào)表的頁(yè)腳

14、,表格布局,表格布局的應(yīng)用場(chǎng)合,圖文布局，數(shù)據(jù)規(guī)則整齊,表單布局，同樣要求數(shù)據(jù)規(guī)則整齊,圖文布局的實(shí)現(xiàn),實(shí)現(xiàn)步驟,圖文布局的實(shí)現(xiàn),實(shí)現(xiàn)步驟, 大學(xué)要求老師開(kāi)網(wǎng)店 安全錘網(wǎng)上大熱銷 ,整個(gè)是5行2列的表格,實(shí)際布局時(shí)border=“0”隱藏邊框,公告欄：跨2列,圖片：跨4行,練習(xí)：貴美商品分類,需求說(shuō)明 根據(jù)提供的素材實(shí)現(xiàn),表單布局應(yīng)用,實(shí)際頁(yè)面中的登錄表單布局,實(shí)際應(yīng)用，需要幾行幾列的表格布局？,表單布局應(yīng)用, 會(huì)員名: 代碼同“會(huì)員名” ,整體布局：4行3列的表格,圖片后的內(nèi)容跨2列，內(nèi)容用“空格”填充,圖片按鈕跨2列,小結(jié),使用表格進(jìn)行布局對(duì)顯示數(shù)據(jù)有什么要求？實(shí)現(xiàn)思路是什么？,使用場(chǎng)合：

15、數(shù)據(jù)顯示要求較為規(guī)整，符合表格布局的特點(diǎn) 布局的實(shí)現(xiàn)思路： 需要幾行幾列的表格？ 哪些單元格有跨行或跨列？ 編寫(xiě)表格代碼實(shí)現(xiàn),嵌套布局,如何用表格實(shí)現(xiàn)下圖布局？,對(duì)于復(fù)雜的頁(yè)面，如使用表格則必須采用多層嵌套,嵌套布局,嵌套表格布局的缺點(diǎn)： 代碼量大 層次結(jié)構(gòu)也相對(duì)復(fù)雜 不利于Goole等搜索引擎搜索查找數(shù)據(jù) 表格布局僅適用于： 規(guī)則的數(shù)據(jù)顯示 表單頁(yè)面,表格布局不適合不規(guī)則的復(fù)雜頁(yè)面，這種場(chǎng)合需使用DIV+CSS布局（后續(xù)學(xué)習(xí)）,框架的應(yīng)用,頁(yè)面的一個(gè)固定部分顯示LOGO或公司信息,在另一個(gè)固定部分顯示導(dǎo)航部分詳細(xì)內(nèi)容,在此處顯示詳細(xì)內(nèi)容， 頁(yè)面中此部分是變化的,產(chǎn)品 宣傳,技術(shù) 論壇,客戶

16、服務(wù),框架的用途,框架的兩類用途： 1、顯示多窗口頁(yè)面-使用框架集 2、頁(yè)面復(fù)用使用內(nèi)嵌框架,復(fù)用站內(nèi)頁(yè)面： head和foot部分,復(fù)用站外內(nèi)容： 引用Google搜索引擎、顯示sohu新聞等,框架的組成,文件1： top.html,文件2：left.html,文件3： right.html,多個(gè)頁(yè)面文件組成,主文件： index.html,框架基本結(jié)構(gòu),創(chuàng)建框架網(wǎng)頁(yè)的步驟： 創(chuàng)建各子窗口對(duì)應(yīng)的HTML文件 創(chuàng)建整個(gè)框架頁(yè)面文件，引用子窗口文件, ,框架頁(yè)面的基本語(yǔ)法,邊框尺寸大小,將窗口分割成左中右3個(gè)部分,可選,將窗口分割成上下2個(gè)部分,可選,引用各窗口要顯示的網(wǎng)頁(yè)文件,框架基本結(jié)構(gòu),縱

17、向分割窗口, 如瀏覽器不支持框架，才顯示body內(nèi)的內(nèi)容 ,注意： 1、框架和body不能共存 2、為了兼容性，可以使用標(biāo)簽,窗口邊框的寬度,將窗口分割成上中下3部分,推薦：將窗口子文件放在單獨(dú)的文件中用于區(qū)分,框架基本結(jié)構(gòu),橫向分割窗口, ,橫向分為3個(gè)窗口,框架多窗口實(shí)現(xiàn),典型的2行2列結(jié)構(gòu), ,scrolling屬性：是否顯示滾動(dòng)條,如何實(shí)現(xiàn)？,2行2列的 窗口劃分,窗口間的關(guān)聯(lián),如何實(shí)現(xiàn)左列導(dǎo)航，在右面顯示相關(guān)頁(yè)面？,使用標(biāo)簽的target目標(biāo)窗口屬性,窗口間的關(guān)聯(lián),實(shí)現(xiàn)窗口間關(guān)聯(lián)的步驟 1、設(shè)置窗口名（框架主頁(yè)） 2、設(shè)置的target屬性（窗口子頁(yè)面 ）, . . . . ,設(shè)置右窗口名為：rightFrame, ,設(shè)置鏈接在右窗口中打開(kāi),窗口間的關(guān)聯(lián),target的其他用法 在新窗口中顯示：_blank 在自身窗口中顯示：_self 在上級(jí)窗口顯示：_top 在父窗口顯示：_parent,內(nèi)嵌框架,需要使用多個(gè)文件，目錄結(jié)構(gòu)復(fù)雜 內(nèi)嵌較為靈活，可以在網(wǎng)頁(yè)的任何位置使用 可以作為模板，在本網(wǎng)站的多個(gè)頁(yè)面復(fù)用,整個(gè)頁(yè)面只有局部窗口引用sohu的內(nèi)容,內(nèi)嵌框架基本語(yǔ)法, ,和不同，放在標(biāo)簽內(nèi),指明引用的網(wǎng)頁(yè)文件,內(nèi)嵌框架屬性,如何設(shè)置在內(nèi)嵌窗口顯示, 下邊顯示第三頁(yè) ,在內(nèi)嵌窗口mainFrame顯示鏈接內(nèi)容,設(shè)置窗口名,如何實(shí)