1、,HTML語言,目標(biāo),描述 HTML 文檔的結(jié)構(gòu) 使用基本的 HTML 標(biāo)簽 在 HTML 文檔中插入特殊字符 在 HTML 文檔中創(chuàng)建超級鏈接,2,HTML 簡介,3,超文本,提供鏈接到其他頁面或同一頁面的其他位置的文本,標(biāo)記,可以用標(biāo)簽標(biāo)記頁面的不同部分以正確顯示,語言,HTML 可用于： 控制頁面和內(nèi)容的外觀 發(fā)布和檢索聯(lián)機(jī)文檔 創(chuàng)建聯(lián)機(jī)表單 插入諸如音頻剪輯和視頻剪輯等對象,HTML 文檔示例,4, 學(xué)習(xí) HTML 歡迎來到 HTML 世界 ,HTML 代碼,瀏覽器處理代碼并進(jìn)行顯示,編輯器和瀏覽器,5, 學(xué)習(xí) HTML 歡迎來到 HTML 世界 ,HTML 代碼,在編輯器中編寫 HT

2、ML 代碼,瀏覽器顯示 HTML 文檔/頁面,編輯器 2-2,6,需要在編輯器中鍵入源代碼,示例：DreamWeaver,Macromedia Dreamweaver 是一種專業(yè)的 HTML 編輯器，用于設(shè)計、編碼、開發(fā)網(wǎng)站、網(wǎng)頁和強(qiáng)大的 Web 應(yīng)用程序。,HTML 文檔結(jié)構(gòu),7, 學(xué)習(xí) HTML 歡迎來到 HTML 世界 ,HTML 網(wǎng)頁,頭部部分,主體部分,標(biāo)簽標(biāo)記 HTML 文檔的開始和結(jié)束,這部分包括標(biāo)題和其他說明信息。包括在 標(biāo)簽內(nèi),這部分包含文本、圖像和鏈接。它包括在 標(biāo)簽內(nèi),HTML 標(biāo)簽 2-2,8, 學(xué)習(xí) HTML 歡迎來到 HTML 世界 ,標(biāo)簽,標(biāo)識 BODY 元素,屬

3、性,提供有關(guān)元素的附加信息,值,分配給屬性的內(nèi)容,META 標(biāo)簽 2-1,META 標(biāo)簽是一個特殊的 HTML 標(biāo)簽，提供有關(guān)網(wǎng)頁的信息，如作者姓名、公司名稱和聯(lián)系信息等 許多搜索引擎都使用 META 標(biāo)簽信息 例如，要將 Graham Browne 指定為作者，則使用以下 META 標(biāo)簽：,9,META 標(biāo)簽 2-2,http-equiv 屬性可用來代替 META 標(biāo)簽中的 name 屬性,10,表示有效期：格林尼治標(biāo)準(zhǔn)時間 2005 年 9 月 12 日，星期一 14:25:27,表示每隔2秒，自動刷新網(wǎng)頁,演示：自動刷新的例子,HTML 基本元素,標(biāo)題 段落 換行符 預(yù)先格式化 字符格式

4、化 列表 水平線 字體 圖像 特殊字符 超級鏈接,11,標(biāo)題,12, 動物世界 從大自然獲得靈感 從大自然獲得靈感 從大自然獲得靈感 從大自然獲得靈感 從大自然獲得靈感 從大自然獲得靈感 ,H1 到 H6 標(biāo)簽用于指定不同級別的標(biāo)題,段落標(biāo)簽,13, 詩詞學(xué)習(xí) 我是第一段 我是第二段 左對齊顯示 居中顯示 右對齊顯示 , 標(biāo)簽用于標(biāo)記段落,換行符,只要在文本中放入 標(biāo)簽，就會強(qiáng)制換行,14, 詩詞學(xué)習(xí) 我是第一行我是第二行 我是第一段 我是第二段 , 標(biāo)簽,15, 詩詞學(xué)習(xí) 靜夜思 床前明月光 疑是地上霜 舉頭望明月 低頭思故鄉(xiāng) HTML, 標(biāo)簽用于顯示具有預(yù)先定義格式的文本 （如 HTML

5、文檔中所示）,字符格式化標(biāo)簽,16, 學(xué)習(xí) HTML 這很有趣 足球是最令人喜愛的運(yùn)動之一。 信息技術(shù)是發(fā)展的關(guān)鍵。 水的分子式是 H 2 O。 3 2 等于 9。 ,此標(biāo)簽用于對文本應(yīng)用各種格式，如粗體、斜體、下劃線、下標(biāo)、上標(biāo)等,列表簡介,列表用于按邏輯方式對數(shù)據(jù)分組,17,玫瑰花,向日葵,蘭花,蘋果,桔子,水仙,芒果,水果 蘋果 芒果 桔子 花卉 水仙 蘭花 向日葵 玫瑰花,列表類型：無序列表,18, 星期中的每一天 星期日 星期一 星期二 星期三 星期四 星期五 星期六 ,無序列表也稱為“項目列表”,列表類型：有序列表,19, 星期中的每一天 星期日 星期一 星期二 星期三 星期四 星

6、期五 星期六 ,在有序列表中，列表項以自動生成的順序顯示,使用水平線,20, 動物世界 老虎的夜間視覺 老虎的夜視能力優(yōu)于人類的夜視能力五倍以上 , 標(biāo)簽用于在頁面上繪制水平線,使用字體和屬性,21, 動物世界 了解有關(guān)動物的更多信息 斑馬的特性 沒有任何兩匹斑馬的斑紋是完全一樣的，因此每匹斑馬都是獨(dú)一無二的 ,可以按名稱或十六進(jìn)制值指定顏色,可以為字體指定的大小范圍為從 1 到 7,可以指定一列字體，各字體間用逗號分隔。瀏覽器以最先找到的字體顯示文本, 元素及其相關(guān)屬性（如 SIZE、COLOR 和 FACE）可用于控制網(wǎng)頁上文本的顯示,插入圖像 2-1,22, 標(biāo)簽用于在 HTML 文檔中

7、插入圖像。 標(biāo)簽的兩個常用屬性是 SRC 和 ALIGN。,SRC 屬性用于指定要插入的圖像位置。,ALIGN 屬性用于指定圖像相對于文本的對齊方式。,插入圖像 2-2,23, 動物世界 讓我們看看這些可愛的動物 底部對齊 頂部對齊 居中對齊 ,插入特殊字符 2-1,某些字符在 HTML 中具有特殊意義，如小于號 () 定義 HTML 標(biāo)簽的開始 字符實體用于在 HTML 文檔中插入特殊字符，如版權(quán)號 ，注冊商標(biāo)等 通常情況下，HTML會自動截去多余的空格。不管你加多少空格，都被看做一個空格。比如你在兩個字之間加了10個空格，HTML會截去9個空格，只保留一個。為了在網(wǎng)頁中增加空格，你可以使用

8、表示空格。,24,插入特殊字符 需要用HTML字符實體, 空格 ；,插入特殊字符 2-2,25,創(chuàng)建超級鏈接,26, 了解鳥類 會彈琴的狗狗 單擊此處查看 ,絕對和相對路徑名,27,要鏈接到另一目錄 (C:example) 下的頁面，可編寫 或,要鏈接到同一目錄 (C:html) 下的頁面，可編寫 或 ,C:html 目錄,C:example目錄,絕對路徑名,相對路徑名,鏈接到同一文檔的某個部分2-1,錨記標(biāo)簽用于使用戶“跳”到文檔的某個部分 HTML 的 NAME 屬性用于創(chuàng)建錨標(biāo)記 為達(dá)到這種跳轉(zhuǎn)效果，請在 HREF 參數(shù)中使用該標(biāo)記,28,主題名稱,主題名稱,鏈接到同一文檔的各個部分2-

9、2,29,. . . 獅子 斑馬 印度豹 獅子 獅子的吼聲從八公里之外就能聽到！雄獅（很容易從鬃毛識別出雌雄）的重量達(dá) 250 公斤。而雌獅則要輕得多，只有 180 公斤。 斑馬 沒有任何兩匹斑馬的斑紋完全一樣，因此每匹斑馬都是獨(dú)一無二的。斑馬也稱為黑白條紋相間的馬.,演示:錨鏈接例子,鏈接到其他文檔的特定位置,30, 讓我們深入了解一些動物 獅子 斑馬 印度豹 ,Animals.htm, 獅子 獅子的吼聲從八公里之外就能聽到！雄獅（很容易從鬃毛識別出雌雄）的重量達(dá) 250 公斤。而雌獅則要輕得多，只有 180 公斤。,Animaldetails.htm,電子郵件鏈接,用戶可從網(wǎng)頁發(fā)送電子郵件

10、,31, 海豚 充分交流，密切配合 據(jù)說，海豚的交流模式幾乎與人類的一樣復(fù)雜！ 請將您的疑問發(fā)送至 David Fernandez ,總結(jié) 2-1,HTML 標(biāo)簽一般配對使用，不區(qū)分大小寫 標(biāo)簽都具有屬性。屬性提供關(guān)于網(wǎng)頁上 HTML 元素的附加信息 META 標(biāo)簽放置在網(wǎng)頁的標(biāo)題處以提供關(guān)于頁面的信息。搜索引擎常會用到這些標(biāo)簽 標(biāo)題級標(biāo)簽使用,32,總結(jié) 2-2,段落標(biāo)簽使用 無序列表使用標(biāo)簽,有序列表使用標(biāo)簽 字體標(biāo)簽 超鏈接標(biāo)簽超鏈接文本,33,表格,行,列,列標(biāo)題,在 HTML 文檔中，廣泛使用表格來存放網(wǎng)頁上的文本和圖像,單元格, 使用表格 姓名 性別 分?jǐn)?shù) Robert M 80

11、. ,創(chuàng)建表格,代表表格的開始，border=2表示邊框尺寸為2,表示行，這是表格的第一行，有三列數(shù)據(jù)，代表列,表格的第二行，有三列數(shù)據(jù),表格的第三行，也有三列數(shù)據(jù), 學(xué)員檔案信息 姓名 性別 分?jǐn)?shù) Robert M 80 . ,表格的標(biāo)題,表示表格標(biāo)題,表示行或列標(biāo)題，粗體顯示,表格的第二行，有三列數(shù)據(jù),表格的第三行，有三列數(shù)據(jù), 學(xué)員檔案信息 姓名 性別 分?jǐn)?shù) Robert M 80 . ,表格的對齊方式,整個表格居中,姓名列默認(rèn)左對齊,性別列居中,分?jǐn)?shù)列右對齊,合并單元格(跨列), 創(chuàng)建表格 第一學(xué)期 第二學(xué)期 數(shù)學(xué) 科學(xué) 英語 數(shù)學(xué) 科學(xué) 英語 98 95 80 95 87 88 .,

12、COLSPAN=“n” 屬性表示跨多少列,合并單元格(跨行), 創(chuàng)建表格 螺母 螺栓 錘子 第一季度 一月 2500 1000 1240 二月 3000 2500 4000 .,ROWSPAN=“n” 屬性表示跨多少行, 學(xué)員檔案信息 姓名 性別 分?jǐn)?shù) Robert M 80 Mary F 18 ,表格的背景色和尺寸設(shè)置,表格的顏色設(shè)置： 表格的背景色 行的背景色 列的背景色 顏色值可以采用 RGB（red/green/blue）紅綠藍(lán)十六進(jìn)制值表示，如紅色#FF0000, 或是一些預(yù)定義色彩名稱：red ，blue，yellow等。,表格的尺寸設(shè)置： 例如： 表示一個長為200像素，寬為10

13、0像素的表格。 表示一個寬為窗口的20%，高為窗口的10%的表格。,表單輸入元素-7,課堂練習(xí):請編寫HTML代碼,表單,METHOD =“post或get”,表單,ACTION,METHOD,指定提交后由服務(wù)器上哪個處理程序處理,指定向服務(wù)器提交的方法: 一般為post或get方法, post方法比較安全,ACTION = “URL”,表單輸入元素-1,文本框、按鈕、單選按鈕、復(fù)選框等都是輸入元素。 ,表單輸入元素-2, ,BUTTON（按鈕）,表單輸入元素-3,身份證號,TEXT（文本）,密 碼： ,請?zhí)顚懩墓ぷ鹘?jīng)歷,表單輸入元素-4,性別：男性 女性,單選按鈕和復(fù)選框,你喜歡以下哪些明

14、星： 酒井法子 鄭秀文 BonJovi,HTML輸入元素-5, 2004 年歐錦賽 預(yù)測“最佳球員” Ronaldo Beckham Zidane 預(yù)測大賽亞軍 巴西 法國 阿根廷 預(yù)測誰將成為 2004 年歐錦賽冠軍？ ,閱讀代碼，請問網(wǎng)頁中的顯示結(jié)果？,表單輸入元素-6,下拉菜單,誰是 2002 年世界杯冠軍？ 西班牙 法國 巴西 德國 ,列表選項,表單輸入元素-7,課堂練習(xí):請編寫HTML代碼,框架,廣告欄頂部框架(top.htm),商品詳細(xì)介紹右側(cè)框架(main.htm),商品導(dǎo)航 左側(cè) 框架(left.htm),為何使用框架,在另一個固定部分 顯示導(dǎo)航部分,在頁面的一個固定部分顯示徽

15、標(biāo)或靜態(tài)信息,在此處顯示主要內(nèi)容。 站點中只有此部分是變化的。,總結(jié) 4-1, 表格標(biāo)題 數(shù)據(jù)1 數(shù)據(jù)2 . 數(shù)據(jù)11 數(shù)據(jù)22 ,跨行的單元格： 數(shù)據(jù)11 跨列的單元格： 數(shù)據(jù)22 ,表格的一般語法：,總結(jié) 4-2, 文本框 密碼框 文本域 單選按鈕 男性 復(fù)選框 酒井法子,表單的一般語法：,總結(jié) 4-3, 選項1 選項2 . ,總結(jié) 4-4,框架,頂部窗口顯示廣告 top.htm,顯示詳細(xì)內(nèi)容 main.htm,左側(cè)窗口顯示 導(dǎo)航鏈接 left.htm,DHTML 簡介,DHTML,=,HTML,腳本語言 JavaScript,+,+,層疊樣式表 CSS,指定一個網(wǎng)頁的元素,決定元素的大小

16、 顏色和位置,操縱網(wǎng)頁的元素,DHTML 是制作動態(tài) HTML 頁面的技術(shù)！,DHTML 的功能,設(shè)計人員可以隨著與用戶的交互操作而改變文本的顏色、字體和大小,設(shè)計人員可以隨用戶的輸入或事件（如單擊鼠標(biāo)）而更改頁面的內(nèi)容,設(shè)計人員可以用 x 座標(biāo)和 y 座標(biāo)來指定網(wǎng)頁元素的確切位置（絕對位置或相對位置）,設(shè)計人員可以將網(wǎng)頁中的表格綁定到數(shù)據(jù)庫,設(shè)計人員可以將選擇的字體和網(wǎng)頁一起封裝,Web 程序員可以編寫腳本以更改網(wǎng)頁的樣式和內(nèi)容,在 DHTML 中，每個元素都被視為一個對象。可以獨(dú)立地對每個對象進(jìn)行訪問和編程,動態(tài)樣式,動態(tài)內(nèi)容,定位,數(shù)據(jù)綁定,可下載字體,腳本,對象結(jié)構(gòu),DHTML 示例,

17、閃爍文本,移動文本,消隱文本, 設(shè)置屬性 這個段落應(yīng)用了樣式 這個段落按默認(rèn)樣式顯示 ,什么是樣式？,指定顯示樣式,常用的樣式屬性,根據(jù)樣式代碼的位置，分為三類： 行內(nèi)樣式 內(nèi)嵌樣式 外部樣式,樣式的分類,在最后一個聲明后面加上一個分號 (;) 是一個好習(xí)慣,行內(nèi)樣式,您如果希望某段文字和其他段落的文字顯示風(fēng)格不一樣，那么請采用“行內(nèi)樣式”。行內(nèi)樣式使用元素標(biāo)簽的 STYLE 屬性定義。,/*關(guān)鍵代碼-*/ 剩余時間：成交結(jié)束 新舊程度：全新 所 在 地：北京 寶貝數(shù)量：5 件 瀏 覽 量：220 次 另送價值50元的充電器套裝！(一個充電器，兩節(jié)充電電池)可使用半年以 , 應(yīng)用樣式 P fo

18、nt-size:20px; color:blue; text-align:center 我是段落 1 我是段落 2 我是段落 3 我們的樣式絕對統(tǒng)一 ,內(nèi)嵌樣式-1,所有的段落都采用 P 樣式，保證樣式統(tǒng)一,行內(nèi)樣式表局限于某個標(biāo)簽，如果希望本網(wǎng)頁內(nèi)的所以同類標(biāo)簽都采用統(tǒng)一樣式，這時應(yīng)采用內(nèi)嵌樣式。,用分號隔開,內(nèi)嵌樣式-2 選擇器,根據(jù)選擇器的不同，內(nèi)嵌樣式又分為： HTML 選擇器 CLASS 類選擇器 ID 選擇器,/*-關(guān)鍵代碼-*/ P /*設(shè)置樣式：字體和背景色*/ font-family: System; font-size: 18px; color: #3333CC; H2 b

19、ackground-color: #CCFF33; text-align: center; 品種特征方面： 1、蛋魚：蛋魚.。 2、龍睛：龍睛.。 3、高頭：高頭.。,內(nèi)嵌樣式-3 HTML選擇器,應(yīng)用H2樣式,應(yīng)用P樣式,內(nèi)嵌樣式-4 class類選擇器, .myinput border: 1px solid; border-color:#D4BFFF; color:#2A00FF 用戶名 密 碼 ,CLASS類選擇器,應(yīng)用類選擇器： class”類名“,類選擇器的定義格式為： .類名 樣式規(guī)則; , #fire color:red; font-size: 24px; 我是二級標(biāo)題，火是這樣

20、的 我是段落，火是這樣的 ,內(nèi)嵌樣式-5 ID選擇器,ID選擇器,ID選擇器的定義格式為： ID名 樣式規(guī)則; ,應(yīng)用ID選擇器：ID”ID名“, A /*設(shè)置超鏈接不帶下劃線*/ color: blue; text-decoration: none; /*文本修飾：無*/ A:hover /*鼠標(biāo)在超鏈接上方停留時，帶下劃線 */ color: red; text-decoration:underline; /*文本修飾：下劃線*/ HEAD 俺是超鏈接，移過來我就顯示下劃線 ,內(nèi)嵌樣式-6 特殊的選擇器,HTML選擇器,特殊的偽類：A代表超鏈接，hover代表鼠標(biāo)懸停,外部樣式,根據(jù)樣式文件與網(wǎng)頁的關(guān)聯(lián)方式又分為： 鏈接（LINK ）外部樣式表 導(dǎo)入（import）外部樣式表,樣式文件 P . ,網(wǎng)頁2,網(wǎng)頁3,網(wǎng)頁1,鏈接外部樣式表,使用LINK（鏈接）標(biāo)簽 ，語法： ,第一步：創(chuàng)建樣式表文件newstyle.css,第二步：把樣式文件和網(wǎng)頁關(guān)聯(lián),樣式文件： newstyle.css P . ,Onel.htm,another.htm,第三步：瀏覽查看各網(wǎng)頁,演示：鏈接樣式表示例,導(dǎo)入外部樣式表,使用i