HTML 文檔的結(jié)構(gòu),標(biāo)簽,在 HTML 文檔中插入特殊字符,創(chuàng)建超級(jí)鏈接

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

2、在編輯器中鍵入源代碼示例：DreamWeaverMacromedia Dreamweaver 是一種專(zhuān)業(yè)的 HTML 編輯器，用于設(shè)計(jì)、編碼、開(kāi)發(fā)網(wǎng)站、網(wǎng)頁(yè)和強(qiáng)大的 Web 應(yīng)用程序。HTML 文檔結(jié)構(gòu)6學(xué)習(xí) HTML 歡迎來(lái)到 HTML 世界HTML 網(wǎng)頁(yè)網(wǎng)頁(yè)頭部部分頭部部分主體部分主體部分標(biāo)簽標(biāo)記 HTML 文檔的開(kāi)始和結(jié)束這部分包括標(biāo)題和其他說(shuō)明信息。包括在 標(biāo)簽內(nèi)這部分包含文本、圖像和鏈接。它包括在 標(biāo)簽內(nèi)HTML 標(biāo)簽 2-27學(xué)習(xí) HTML 歡迎來(lái)到 HTML 世界標(biāo)簽標(biāo)識(shí) BODY 元素屬性屬性提供有關(guān)元素的附加信息值分配給屬性的內(nèi)容META 標(biāo)簽 2-1nMETA 標(biāo)簽是一個(gè)特

3、殊的 HTML 標(biāo)簽，提供有關(guān)網(wǎng)頁(yè)的信息，如作者姓名、公司名稱(chēng)和聯(lián)系信息等n許多搜索引擎都使用 META 標(biāo)簽信息n例如，要將 Graham Browne 指定為作者，則使用以下 META 標(biāo)簽： 8META 標(biāo)簽 2-2nhttp-equiv 屬性可用來(lái)代替 META 標(biāo)簽中的 name 屬性 9 表示有效期：格林尼治標(biāo)準(zhǔn)時(shí)間 2011 年 9 月 14 日，星期三 14:25:27 一旦網(wǎng)頁(yè)過(guò)期，必須到服務(wù)器上重新傳輸。 屬性值：具體的過(guò)期時(shí)間屬性名稱(chēng)：網(wǎng)頁(yè)過(guò)期 表示每隔2秒，自動(dòng)刷新網(wǎng)頁(yè) 演示：自動(dòng)刷新的例子HTML 基本元素n標(biāo)題 n段落n換行符n預(yù)先格式化n字符格式化n列表n水平線n

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

5、文本（如 HTML 文檔中所示）該元素中的文本保留空格、換行符，文本為等寬字體。該元素中的文本保留空格、換行符，文本為等寬字體。字符格式化標(biāo)簽15學(xué)習(xí) HTML這很有趣這很有趣 -粗體足球是最令人喜愛(ài)的運(yùn)動(dòng)之一足球是最令人喜愛(ài)的運(yùn)動(dòng)之一。信息技術(shù)是發(fā)展的關(guān)鍵信息技術(shù)是發(fā)展的關(guān)鍵。 水的分子式是水的分子式是 H 2 O。 3 2 等于等于 9。 這類(lèi)標(biāo)簽用于對(duì)文本應(yīng)用各種格式，如粗體、斜體、下劃線、下標(biāo)、上標(biāo)等樣式表來(lái)取得更加豐富的效果樣式表來(lái)取得更加豐富的效果列表簡(jiǎn)介n列表用于按邏輯方式對(duì)數(shù)據(jù)分組16 玫瑰花向日葵蘭花蘋(píng)果桔子水仙芒果水果 蘋(píng)果 芒果 桔子花卉 水仙 蘭花 向日葵 玫瑰花列表類(lèi)

6、型：無(wú)序列表 17星期中的每一天星期日星期一星期二星期三星期四星期五星期六無(wú)序列表也稱(chēng)為“項(xiàng)目列表”星期中的每一天星期日星期一星期二星期三星期四星期五星期六 列表類(lèi)型：有序列表 有序列表的屬性有序列表的屬性 大羅馬大羅馬 小羅馬小羅馬大寫(xiě)字母大寫(xiě)字母小寫(xiě)字母小寫(xiě)字母起始點(diǎn)起始點(diǎn)18在有序列表中，列表項(xiàng)以自動(dòng)生成的順序顯示 不贊成使用，用樣式取代它。使用水平線19動(dòng)物世界老虎的夜間視覺(jué) 老虎的夜視能力優(yōu)于人類(lèi)的夜視能力五倍以上 標(biāo)簽屬性 alignWidthSizeNoshade 標(biāo)簽用于在頁(yè)面上繪制水平線 （Horizontal Rule） 使用字體和屬性20動(dòng)物世界了解有關(guān)動(dòng)物的更多信息斑馬

7、的特性沒(méi)有任何兩匹斑馬的斑紋是完全一樣的，因此每匹斑馬都是獨(dú)一無(wú)二的 可以按名稱(chēng)或十六進(jìn)制值指定顏色可以為字體指定的大小范圍為從 1 到 7可以指定一列字體，各字體間用逗號(hào)分隔。瀏覽器以最先找到的字體顯示文本 元素及其相關(guān)屬性（如 SIZE、COLOR 和 FACE）可用于控制網(wǎng)頁(yè)上文本的顯示 插入圖像 2-121 標(biāo)簽用于在 HTML 文檔中插入圖像。 標(biāo)簽的兩個(gè)常用屬性是 SRC 和 ALIGN。SRC 屬性用于指定要插入的圖像位置。ALIGN 屬性用于指定圖像相對(duì)于文本的對(duì)齊方式。插入圖像 2-222動(dòng)物世界讓我們看看這些可愛(ài)的動(dòng)物底部對(duì)齊頂部對(duì)齊居中對(duì)齊 插入特殊字符 2-1n某些字符

8、在 HTML 中具有特殊意義，如小于號(hào) ( 空格 ；插入特殊字符 2-2特殊字符特殊字符字符實(shí)體字符實(shí)體大于號(hào) () > > 小于號(hào) () << 引號(hào) (“) " " ® ® © © & 號(hào)& & 24創(chuàng)建超級(jí)鏈接25了解鳥(niǎo)類(lèi)了解鳥(niǎo)類(lèi)會(huì)彈琴的狗狗會(huì)彈琴的狗狗 單擊此處查看單擊此處查看絕對(duì)和相對(duì)路徑名26要鏈接到另一目錄 (C:example) 下的頁(yè)面，可編寫(xiě) 或 要鏈接到同一目錄 (C:ht

9、ml) 下的頁(yè)面，可編寫(xiě) 或 C:html 目錄目錄C:example目錄目錄Doc1.htmDoc3.htmDoc2.htmDoc4.htm絕對(duì)路徑名絕對(duì)路徑名相對(duì)路徑名相對(duì)路徑名鏈接到同一文檔的某個(gè)部分2-1n錨記標(biāo)簽用于使用戶“跳”到文檔的某個(gè)部分 nHTML 的 NAME 屬性用于創(chuàng)建錨標(biāo)記 n為達(dá)到這種跳轉(zhuǎn)效果，請(qǐng)?jiān)?HREF 參數(shù)中使用該標(biāo)記27主題名稱(chēng)主題名稱(chēng)鏈接到同一文檔的各個(gè)部分2-228. . .獅子斑馬印度豹獅子獅子的吼聲從八公里之外就能聽(tīng)到！雄獅（很容易從鬃毛識(shí)別出雌雄）的重量達(dá) 250 公斤。而雌獅則要輕得多，只有 180 公斤。斑馬沒(méi)有任何兩匹斑馬的斑紋完全一樣，因此每匹斑馬都是獨(dú)一無(wú)二的。斑馬也稱(chēng)為黑白條紋相間的馬.演示:錨鏈接例子鏈接到其他文檔的特定位置29讓我們深入了解一些動(dòng)物獅子斑馬印度豹Animals.htm獅子獅子的吼聲從八公里之外就能聽(tīng)到！雄獅（很容易從鬃毛識(shí)別出雌雄）的重量達(dá) 250 公斤。而雌獅則要輕得多，只有 180 公斤。Animaldetails.htm電子郵件鏈接n用戶可從網(wǎng)頁(yè)發(fā)送電子郵件30海豚充分交流，密切配合據(jù)說(shuō)，海豚的交流模式幾乎與人類(lèi)的一樣復(fù)雜！請(qǐng)將您的疑問(wèn)發(fā)送至 David Fernandez總結(jié)