傳智播客韓順平輕松搞定網(wǎng)設(shè)計html

1、高級軟件人才實作培訓(xùn)專家高級軟件人才實作培訓(xùn)專家! !北京傳智播客教育 輕松搞定網(wǎng)頁設(shè)計之輕松搞定網(wǎng)頁設(shè)計之htmlhtml講師：韓順平email:qq: 2317702760 高級軟件人才實作培訓(xùn)專家高級軟件人才實作培訓(xùn)專家! !內(nèi)容介紹內(nèi)容介紹: :1.html1.html介紹介紹2.2.優(yōu)秀網(wǎng)頁欣賞優(yōu)秀網(wǎng)頁欣賞3.html3.html項目演示項目演示4.html4.html運行基本原理運行基本原理(hello,(hello,順平順平) ) 5.html5.html的基礎(chǔ)知識的基礎(chǔ)知識高級軟件人才實作培訓(xùn)專家高級軟件人才實作培訓(xùn)專家! ! 了解了解html的基本概念的基本概念 理解理解ht

2、ml的運行基本原理的運行基本原理 掌握掌握html的一些基本用法的一些基本用法 能寫出簡單的網(wǎng)頁能寫出簡單的網(wǎng)頁學(xué)習(xí)目標(biāo)學(xué)習(xí)目標(biāo)高級軟件人才實作培訓(xùn)專家高級軟件人才實作培訓(xùn)專家! ! htmlhtml是什么是什么htmlhtml（hypertext mark-up languagehypertext mark-up language）即超文本）即超文本標(biāo)記語言或超文本鏈接標(biāo)示語言，是目前網(wǎng)絡(luò)上應(yīng)用標(biāo)記語言或超文本鏈接標(biāo)示語言，是目前網(wǎng)絡(luò)上應(yīng)用最為廣泛的語言，也是構(gòu)成網(wǎng)頁文檔的主要語言。最為廣泛的語言，也是構(gòu)成網(wǎng)頁文檔的主要語言。htmlhtml文本是由文本是由htmlhtml命令組成的描述性文

3、本，命令組成的描述性文本，htmlhtml命令命令可以說明文字、圖形、動畫、聲音、表格、鏈接等。可以說明文字、圖形、動畫、聲音、表格、鏈接等。htmlhtml的結(jié)構(gòu)包括頭部（的結(jié)構(gòu)包括頭部（headhead）、主體（）、主體（bodybody）兩大部）兩大部分，其中頭部描述瀏覽器所需的信息，而主體則包含分，其中頭部描述瀏覽器所需的信息，而主體則包含所要說明的具體內(nèi)容。所要說明的具體內(nèi)容。 高級軟件人才實作培訓(xùn)專家高級軟件人才實作培訓(xùn)專家! ! htmlhtml可以做什么可以做什么htmlhtml可以編寫靜態(tài)網(wǎng)頁可以編寫靜態(tài)網(wǎng)頁. .該靜態(tài)網(wǎng)頁可以包括文字、圖形、動畫、聲音、該靜態(tài)網(wǎng)頁可以包括文

4、字、圖形、動畫、聲音、表格、鏈接。從而構(gòu)成一個個漂亮的網(wǎng)頁。表格、鏈接。從而構(gòu)成一個個漂亮的網(wǎng)頁。給大家看幾個漂亮的網(wǎng)頁吧給大家看幾個漂亮的網(wǎng)頁吧! !高級軟件人才實作培訓(xùn)專家高級軟件人才實作培訓(xùn)專家! ! htmlhtml發(fā)展歷史發(fā)展歷史1993標(biāo)記語標(biāo)記語言第一版言第一版1995 html2.01996 html3.2w3c推薦標(biāo)準(zhǔn)推薦標(biāo)準(zhǔn)1999 html4.0.1w3c推薦標(biāo)準(zhǔn)推薦標(biāo)準(zhǔn)2000 xhtml1.0w3c推薦標(biāo)準(zhǔn)推薦標(biāo)準(zhǔn)2001 xhtml1.1w3c推薦標(biāo)準(zhǔn)推薦標(biāo)準(zhǔn)2008 html5蒂姆蒂姆伯納斯一李伯納斯一李萬維網(wǎng)之父萬維網(wǎng)之父html設(shè)計者設(shè)計者w3c 創(chuàng)始人創(chuàng)始人

5、 高級軟件人才實作培訓(xùn)專家高級軟件人才實作培訓(xùn)專家! ! w3cw3c的介紹的介紹w3c是英文是英文 world wide web consortium 的縮的縮寫，中文意思是寫，中文意思是w3c理事會或萬維網(wǎng)聯(lián)盟。理事會或萬維網(wǎng)聯(lián)盟。w3c于于1994年年10月在麻省理工學(xué)院計算機科學(xué)實驗室成立月在麻省理工學(xué)院計算機科學(xué)實驗室成立。創(chuàng)建者是萬維網(wǎng)的發(fā)明者。創(chuàng)建者是萬維網(wǎng)的發(fā)明者tim berners-lee。w3c組織是對網(wǎng)絡(luò)標(biāo)準(zhǔn)制定的一個非贏利組織，像組織是對網(wǎng)絡(luò)標(biāo)準(zhǔn)制定的一個非贏利組織，像html、xhtml、css、xml的標(biāo)準(zhǔn)就是由的標(biāo)準(zhǔn)就是由w3c來來定制。定制。w3c會員（大約會

6、員（大約500名會員）包括生產(chǎn)技術(shù)產(chǎn)名會員）包括生產(chǎn)技術(shù)產(chǎn)品及服務(wù)的廠商、內(nèi)容供應(yīng)商、團(tuán)體用戶、研究實驗品及服務(wù)的廠商、內(nèi)容供應(yīng)商、團(tuán)體用戶、研究實驗室、標(biāo)準(zhǔn)制定機構(gòu)和政府部門，一起協(xié)同工作，致力室、標(biāo)準(zhǔn)制定機構(gòu)和政府部門，一起協(xié)同工作，致力在萬維網(wǎng)發(fā)展方向上達(dá)成共識。在萬維網(wǎng)發(fā)展方向上達(dá)成共識。蒂姆蒂姆伯納斯一李伯納斯一李 高級軟件人才實作培訓(xùn)專家高級軟件人才實作培訓(xùn)專家! ! htmlhtml和和xhtmlxhtml區(qū)別區(qū)別 html-xhtml-xmlhtml語言本身有一些缺陷語言本身有一些缺陷(比如內(nèi)容和形式不能分離比如內(nèi)容和形式不能分離,標(biāo)記單一標(biāo)記單一,數(shù)據(jù)不數(shù)據(jù)不能復(fù)用等能復(fù)用等

7、),隨著隨著xml的興起，的興起，xml越來越受到國際認(rèn)可，所以人們希望越來越受到國際認(rèn)可，所以人們希望xml來彌補來彌補html的不足的不足,但是目前有成千上萬的網(wǎng)頁都是但是目前有成千上萬的網(wǎng)頁都是html編寫的，所以完編寫的，所以完全使用全使用xml來替代來替代html還為時過早還為時過早,于是于是w3c在在2000推出推出xhtml1.0，建立，建立xhtml的目的就是實現(xiàn)的目的就是實現(xiàn)html向向xml的過渡。的過渡。 高級軟件人才實作培訓(xùn)專家高級軟件人才實作培訓(xùn)專家! ! htmlhtml項目演示項目演示 高級郵箱高級郵箱 高級軟件人才實作培訓(xùn)專家高級軟件人才實作培訓(xùn)專家! ! ht

8、mlhtml項目演示項目演示 麥當(dāng)勞導(dǎo)航麥當(dāng)勞導(dǎo)航 高級軟件人才實作培訓(xùn)專家高級軟件人才實作培訓(xùn)專家! ! htmlhtml項目演示項目演示( (可愛屋可愛屋) ) 高級軟件人才實作培訓(xùn)專家高級軟件人才實作培訓(xùn)專家! ! htmlhtml項目演示項目演示( (旅游島旅游島) ) 高級軟件人才實作培訓(xùn)專家高級軟件人才實作培訓(xùn)專家! ! html項目演示項目演示(仿仿sohu首頁面首頁面)高級軟件人才實作培訓(xùn)專家高級軟件人才實作培訓(xùn)專家! ! htmlhtml運行原理運行原理本地運行本地運行 高級軟件人才實作培訓(xùn)專家高級軟件人才實作培訓(xùn)專家! ! htmlhtml運行原理運行原理遠(yuǎn)程訪問運行遠(yuǎn)程訪

9、問運行 你的電腦你的電腦瀏瀏覽覽器器遠(yuǎn)程服務(wù)器遠(yuǎn)程服務(wù)器hello.html你可能產(chǎn)生的疑問你可能產(chǎn)生的疑問? ?ieie是怎樣訪問到是怎樣訪問到hello.html?(url)hello.html?(url)萬維網(wǎng)是個什么東東萬維網(wǎng)是個什么東東? ? 可以使用apache來測試一下這個運行的效果!高級軟件人才實作培訓(xùn)專家高級軟件人才實作培訓(xùn)專家! ! 萬維網(wǎng)萬維網(wǎng)(www)簡略圖簡略圖: :wwwsohu子網(wǎng)子網(wǎng)高級軟件人才實作培訓(xùn)專家高級軟件人才實作培訓(xùn)專家! ! 萬維網(wǎng)萬維網(wǎng)(www)-綜合圖綜合圖高級軟件人才實作培訓(xùn)專家高級軟件人才實作培訓(xùn)專家! ! html的開發(fā)工具的開發(fā)工具記事本

10、記事本editplus vimfrontpagedwzend studio其它的其它的ide 高級軟件人才實作培訓(xùn)專家高級軟件人才實作培訓(xùn)專家! ! htmlhtml的基本結(jié)構(gòu)的基本結(jié)構(gòu)從下面從下面test.html我們可以看出我們可以看出html的基本結(jié)構(gòu)的基本結(jié)構(gòu) 這是我的第一個網(wǎng)頁 這是我的第一個網(wǎng)頁 你好！ 元素內(nèi)容元素內(nèi)容 htmlhtml的基本結(jié)構(gòu)的基本結(jié)構(gòu)高級軟件人才實作培訓(xùn)專家高級軟件人才實作培訓(xùn)專家! ! html的標(biāo)記的標(biāo)記/元素元素html標(biāo)記是用來組成標(biāo)記是用來組成html元素的元素的html標(biāo)記用兩個尖括號標(biāo)記用兩個尖括號”括起來括起來 html標(biāo)記一般是雙標(biāo)記，如標(biāo)

11、記一般是雙標(biāo)記，如和和 前一個標(biāo)記是起始標(biāo)記前一個標(biāo)記是起始標(biāo)記, 后一個標(biāo)記為結(jié)束標(biāo)記后一個標(biāo)記為結(jié)束標(biāo)記 兩個標(biāo)記之間的文本是兩個標(biāo)記之間的文本是html元素的內(nèi)容元素的內(nèi)容 某些標(biāo)記稱為某些標(biāo)記稱為“單標(biāo)記單標(biāo)記”,因為它只需單獨使用就能完整地表達(dá)意思因為它只需單獨使用就能完整地表達(dá)意思,如如html標(biāo)記和標(biāo)記和html元素可以看做是同一個概念，在我的課程中為統(tǒng)元素可以看做是同一個概念，在我的課程中為統(tǒng)一說法，就叫一說法，就叫html元素元素。html常用的元素參考常用的元素參考 html語言教程語言教程(html版版)htmlhtml的標(biāo)記的標(biāo)記/ /元素介紹元素介紹高級軟件人才實作培

12、訓(xùn)專家高級軟件人才實作培訓(xùn)專家! ! html的元素的屬性的元素的屬性 每個元素都有多個屬性每個元素都有多個屬性, ,每個屬性有不同的屬性值來修飾，從而達(dá)到每個屬性有不同的屬性值來修飾，從而達(dá)到不同的顯示效果不同的顯示效果. .舉例舉例: :htmlhtml元素的屬性元素的屬性段落標(biāo)記段落標(biāo)記字體標(biāo)記字體標(biāo)記 size 取值取值 1到到7標(biāo)題字體標(biāo)題字體 #=1，2，3，4，5，6 字體加粗字體加粗高級軟件人才實作培訓(xùn)專家高級軟件人才實作培訓(xùn)專家! ! html的元素的屬性的元素的屬性關(guān)于每個元素，所包含的各個屬性以及各個屬性對應(yīng)的屬性值，請關(guān)于每個元素，所包含的各個屬性以及各個屬性對應(yīng)的屬性

13、值，請各位同學(xué)參看：各位同學(xué)參看：htmlhtml語言教程語言教程(html(html版版) ) htmlhtml元素的屬性元素的屬性高級軟件人才實作培訓(xùn)專家高級軟件人才實作培訓(xùn)專家! ! html符號實體符號實體-介紹介紹 在網(wǎng)頁上顯示一些特殊的符號在網(wǎng)頁上顯示一些特殊的符號, ,我們需要使用我們需要使用htmlhtml的符號實體的符號實體, ,有些有些人把它稱為字符實體人把它稱為字符實體, ,比如我們看一個小小的案例比如我們看一個小小的案例( (html1_1.htmlhtml1_1.html) )。為在網(wǎng)頁上顯示版權(quán)符號為在網(wǎng)頁上顯示版權(quán)符號,我們就需要使用我們就需要使用html的符號實

14、體的符號實體 ©才能在網(wǎng)頁上正確顯示。才能在網(wǎng)頁上正確顯示。高級軟件人才實作培訓(xùn)專家高級軟件人才實作培訓(xùn)專家! ! html符號實體符號實體-一覽表一覽表 高級軟件人才實作培訓(xùn)專家高級軟件人才實作培訓(xùn)專家! ! html超鏈接超鏈接 a.htm代碼：代碼：老鼠愛大米老鼠愛大米齊秦北方的狼 b.htm代碼：代碼：我聽見你的聲音有種特別的感覺讓我不斷想不敢再忘記你我記得有一個人永遠(yuǎn)留在我心中返回返回 打開當(dāng)前計算機系統(tǒng)中默認(rèn)的電子郵件客戶端軟件，例如:outlook express html常用標(biāo)記常用標(biāo)記/元素元素-超鏈接超鏈接高級軟件人才實作培訓(xùn)專家高級軟件人才實作培訓(xùn)專家! ! h

15、tml圖像元素圖像元素 html常用標(biāo)記常用標(biāo)記/元素元素-image 高級軟件人才實作培訓(xùn)專家高級軟件人才實作培訓(xùn)專家! ! html表格表格html常用標(biāo)記常用標(biāo)記/元素元素-table高級軟件人才實作培訓(xùn)專家高級軟件人才實作培訓(xùn)專家! ! html表格表格-小練習(xí)小練習(xí)html常用標(biāo)記常用標(biāo)記/元素元素-table請用請用html編寫如下網(wǎng)頁編寫如下網(wǎng)頁高級軟件人才實作培訓(xùn)專家高級軟件人才實作培訓(xùn)專家! ! 上機練習(xí)題上機練習(xí)題html常用標(biāo)記常用標(biāo)記/元素元素-table請用html編寫如下網(wǎng)頁高級軟件人才實作培訓(xùn)專家高級軟件人才實作培訓(xùn)專家! ! html列表列表-無序列表無序列表

16、的屬性設(shè)定（常用）： 例如： type=square 設(shè)定符號款式，其值有三種，如下，默認(rèn)為 type=disc： type=disc 時的列項符號為實心圓點。 type=circle 時的列項符號為空心圓。 type=square 時的列項符號為空心正方形。 html常用標(biāo)記常用標(biāo)記/元素元素-ul/li列表內(nèi)容列表內(nèi)容高級軟件人才實作培訓(xùn)專家高級軟件人才實作培訓(xùn)專家! ! html列表列表-有序列表有序列表稱為順序列表標(biāo)記。稱為順序列表標(biāo)記。則用以標(biāo)示列表則用以標(biāo)示列表項目。所謂順序列表就是每一項有順序，又稱項目。所謂順序列表就是每一項有順序，又稱編號列表。編號列表。 的屬性設(shè)定（常用）：

17、的屬性設(shè)定（常用）：例如：例如： type=i設(shè)定數(shù)目款式，其值有五種，請參考設(shè)定數(shù)目款式，其值有五種，請參考 右表，內(nèi)右表，內(nèi)定為定為 type=1。 start=4設(shè)定開始數(shù)目，不論設(shè)定了哪一數(shù)目款式，其設(shè)定開始數(shù)目，不論設(shè)定了哪一數(shù)目款式，其值只能是值只能是 1,2,3. 等整數(shù)，默認(rèn)為等整數(shù)，默認(rèn)為 start=1。 i可以取以下值中的任意一個：可以取以下值中的任意一個： 1 阿拉伯?dāng)?shù)字阿拉伯?dāng)?shù)字 1, 2, 3, . a 小寫字母小寫字母 a, b, c, . a 大寫字母大寫字母 a, b, c, . i 小寫羅馬數(shù)字小寫羅馬數(shù)字 i, ii, iii, . i 大寫羅馬數(shù)字大寫羅

18、馬數(shù)字 i, ii, iii, . 。 html常用標(biāo)記常用標(biāo)記/元素元素-ol/li列表內(nèi)容列表內(nèi)容高級軟件人才實作培訓(xùn)專家高級軟件人才實作培訓(xùn)專家! ! html列表列表-框架框架html常用標(biāo)記常用標(biāo)記/元素元素-frameset高級軟件人才實作培訓(xùn)專家高級軟件人才實作培訓(xùn)專家! ! htmlhtml框架框架-(frameset-(frameset小練習(xí)小練習(xí)) ) html常用標(biāo)記常用標(biāo)記/元素元素-frameset/frame完成下面的網(wǎng)頁完成下面的網(wǎng)頁,用戶點擊左側(cè)的超鏈接，可以看到相應(yīng)的歌詞用戶點擊左側(cè)的超鏈接，可以看到相應(yīng)的歌詞高級軟件人才實作培訓(xùn)專家高級軟件人才實作培訓(xùn)專家! ! iframe iframe 浮動窗口浮動窗口 html常用標(biāo)記常用標(biāo)記/元素元素-iframe 浮動窗口浮動窗口高級軟件人才實作培訓(xùn)專家高級軟件人才實作培訓(xùn)專家! ! form(form(表單表單) )元素介紹元素介紹html常用標(biāo)記常用標(biāo)記/元素元素-form客戶端服務(wù)器. 星號*部分可以為get,也可以是 post 高級