HTML語言與文本編輯.ppt

《HTML語言與文本編輯.ppt》由會員分享，可在線閱讀，更多相關(guān)《HTML語言與文本編輯.ppt（47頁珍藏版）》請?jiān)谘b配圖網(wǎng)上搜索。

第3章HTML語言與文本編輯 第3章HTML語言與文本編輯 從本章開始將用3章的篇幅來講解瀏覽器端的網(wǎng)頁開發(fā)技術(shù) 盡管ASP NET是服務(wù)器端技術(shù) 但是作為一個(gè)完整的網(wǎng)站常常離不開前端的瀏覽器 只有將網(wǎng)頁開發(fā)技術(shù)與后臺技術(shù)有機(jī)地結(jié)合才能構(gòu)建出功能強(qiáng)大的網(wǎng)站 另外 ASP NET2 0也提供了網(wǎng)頁開發(fā)的環(huán)境 在這個(gè)環(huán)境中我們完全能夠開發(fā)出生動 美觀的網(wǎng)頁來 本章將首先講解開發(fā)網(wǎng)頁的兩個(gè)最基礎(chǔ)的知識 HTML語言和文本編輯 具體內(nèi)容包括 HTML語言HTML文本編輯超鏈接創(chuàng)建移動的文本HTML與XML比較綜合示例 第3章HTML語言與文本編輯 3 1HTML語言3 2HTML文本編輯3 3超鏈接3 4創(chuàng)建移動的文本3 5HTML與XML的比較3 6綜合示例3 7小結(jié)3 8習(xí)題 3 1HTML語言 3 1 1HTML語言概述3 1 2HTML標(biāo)記的基礎(chǔ)3 1 3HTML文檔的基本結(jié)構(gòu)3 1 4HTML文檔的編輯工具 3 1 1HTML語言概述 HTML是HyperTextMarkupLanguage 超文本標(biāo)記語言 的縮寫 它是WWW WorldWideWeb 中使用的超文本標(biāo)記語言 它是TimBerners Lee在CERN 在日內(nèi)瓦的歐洲粒子物理實(shí)驗(yàn)室 發(fā)明的 它最早源于SGML StandardGeneralizedMarkupLanguage 標(biāo)準(zhǔn)通用標(biāo)記語言 語言 它是在SGML定義下的一個(gè)描述性語言 或者可以說HTML是SGML的一個(gè)應(yīng)用程序 HTML語言的重要性在于 它是所有瀏覽器都能識別的通用語言 是瀏覽器生成網(wǎng)頁的基礎(chǔ) 利用它可以完成以下三方面的工作 定義在瀏覽器上的顯示格式 建立超鏈接 集成其他多媒體軟件 HTML語言的特點(diǎn)是 第一 HTML不是程序語言 它只是一種標(biāo)記語言 一種文本語言 它不同于我們平時(shí)所看到的VB C 這類編程語言 實(shí)際上它只是在一些對象 如文本 圖片 表格等 中加入各種各樣的標(biāo)記 從而使這些對象以這些標(biāo)記所定義的形式顯示出來 第二 任何文本編輯器都可以編輯它 只要能將文件另存成ASCII純文本格式即可 一個(gè)HTML文件是一頁文字信息 就像一封電子郵件或一個(gè)Word字處理文件 而且實(shí)際上完全可以使用Word字處理軟件來編寫一個(gè)HTML網(wǎng)頁 也可以通過其他字處理軟件編寫文本文件 當(dāng)然使用專業(yè)的網(wǎng)頁編輯軟件更為方便一些 第三 需要使用Web瀏覽器 當(dāng)你想把網(wǎng)頁制作成某種模樣時(shí) 需要使用一種編碼通過瀏覽器進(jìn)行解釋 這種編碼就被稱為HTML代碼 所有網(wǎng)頁 都是通過瀏覽器對HTML的解釋而形成的 瀏覽器就相當(dāng)于HTML語言的翻譯程序 負(fù)責(zé)解釋HTML文件各種符號的含義 一個(gè)HTML文件中包含了所有將顯示在網(wǎng)頁上的文字信息 其中也包括對瀏覽器的一些指示 如哪些文字應(yīng)放置在何處 使用哪種顯示模式等 如果還有一些圖片 動畫 聲音或是任何其他形式的資源 HTML文件也會告訴瀏覽器到哪里去查找這些資源 以及這些資源將放置在網(wǎng)頁的什么位置 第四 HTML語言獨(dú)立于各種平臺 自1990年以來HTML就一直被用作WorldWideWeb WWW 的信息表示語言 用于描述網(wǎng)頁的格式設(shè)計(jì)和它與WWW上其他網(wǎng)頁的連接信息 HTML語言目前已經(jīng)成為各種類型瀏覽器的通用標(biāo)準(zhǔn) 它能獨(dú)立于各種操作系統(tǒng)平臺 如UNIX Windows等 其內(nèi)容從功能上大體可分為 文本結(jié)構(gòu)設(shè)置 列表建立 文本屬性制定 超鏈接 圖片和多媒體插入 對象 表格以及窗體的操作等 3 1 2HTML標(biāo)記的基礎(chǔ) HTML語法格式非常簡單 基本上只要明白了各種標(biāo)記的用法便算學(xué)懂了HTML 也就是說它只是在一些對象 如文本 圖片 表格等 中加入各種各樣的標(biāo)記 從而使這些對象以這些標(biāo)記所定義的形式顯示出來 這里我們先了解基本的HTML語法等內(nèi)容 1 基本的HTML語法 1 所有的標(biāo)記都必須用尖括號 即小于號 括起來 它以開始標(biāo)記及結(jié)束標(biāo)記將對象圍住 2 大部分標(biāo)記是成對出現(xiàn)的 包括開始標(biāo)記和結(jié)束標(biāo)記 開始標(biāo)記和相應(yīng)的結(jié)束標(biāo)記定義了標(biāo)記所影響的范圍 結(jié)束標(biāo)記與開始標(biāo)記名稱相同 但結(jié)束標(biāo)記必須用一個(gè)斜線符號開頭 3 所有被標(biāo)記包圍的對象 如文本 圖像 表格等都按照標(biāo)記定義的格式顯示 例如 歡迎參觀本網(wǎng)頁 中間的字符串按照號字體的大小顯示 4 有少數(shù)標(biāo)記允許只有開始標(biāo)記沒有結(jié)束標(biāo)記 例如 斷行用的標(biāo)記 分段用的標(biāo)記 5 標(biāo)記不區(qū)分大小寫 但默認(rèn)情況下 ASP NET2 0中系統(tǒng)提供的HTML標(biāo)記都用小寫字母表示 3 1 2HTML標(biāo)記的基礎(chǔ) 2 標(biāo)記的屬性大多數(shù)標(biāo)記都擁有一些屬性 大部分屬性都有默認(rèn)值 利用這些屬性可以對標(biāo)記的作用進(jìn)行更多的控制 設(shè)置或改變屬性時(shí) 將 屬性名 值 放在標(biāo)記名的同一個(gè)尖括號中 而且所有屬性都放置在開始標(biāo)記的尖括號內(nèi) 例如 本段落將放置在右端其中p是段落標(biāo)記 align代表 對齊方式 是屬性名 right代表 右邊 是屬性的值 這個(gè)標(biāo)記的含義是將字符串放在瀏覽器的右端 其中hr是水平線標(biāo)記 size是水平線的高度 width是水平線的寬度 align為對齊屬性 此行代碼表示增加一條橫線 水平線的高度為6 寬度為160 顯示于瀏覽器的中間 3 1 2HTML標(biāo)記的基礎(chǔ) 3 注釋語句與其他程序設(shè)計(jì)語言一樣 在HTML文本的適當(dāng)位置上增加注釋語句能提高文本的可讀性 編譯器將不解讀注釋部分 即注釋不在瀏覽器窗口中顯示出來 注釋語句的格式是 這里不妨將它看作一種特殊的標(biāo)志 例如 3 1 3HTML文檔的基本結(jié)構(gòu) 一個(gè)基本的HTML文檔通常包含以下三對頂級標(biāo)記 1 HTML標(biāo)記 HTML標(biāo)記是全部文檔內(nèi)容的容器 是開始標(biāo)記 是結(jié)束標(biāo)記 它們分別是網(wǎng)頁的第一個(gè)標(biāo)記和最后一個(gè)標(biāo)記 其他所有HTML代碼都位于這兩個(gè)標(biāo)記之間 HTML標(biāo)記告訴瀏覽器或其他程序 這是一個(gè)網(wǎng)頁文檔 應(yīng)該按照HTML語言規(guī)則對標(biāo)記進(jìn)行解釋 標(biāo)記是可選的 但最好不要省略這兩個(gè)標(biāo)記 以保持Web文檔結(jié)構(gòu)的完整性 2 首部標(biāo)記 首部標(biāo)記用于提供與網(wǎng)頁有關(guān)的各種信息 在首部標(biāo)記中 可以使用和標(biāo)記來指定網(wǎng)頁的標(biāo)題 使用和標(biāo)記來定義CSS樣式表 使用和標(biāo)記來插入腳本 等等 3 1 3HTML文檔的基本結(jié)構(gòu) 3 正文標(biāo)記 正文標(biāo)記包含了文檔的內(nèi)容 文字 圖像 動畫 超鏈接以及其他HTML對象均位于該標(biāo)記中 正文標(biāo)記有下列屬性 BACKGROUD 指定文檔背景圖像的URL地址 圖像平鋪在頁背景上 BGCOLOR 指定文檔的背景顏色 TEXT 指定文檔中文本的顏色 LINK 指定文檔中鏈接的顏色 關(guān)于鏈接的介紹請參閱后面章節(jié) VLINK 指定文檔中已被訪問過的鏈接的顏色 ALINK 指定文檔中正被選中的鏈接的顏色 ONLOAD 指定文檔首次加載時(shí)調(diào)用的事件處理程序 ONUNLOAD 用于指定文檔卸載時(shí)調(diào)用的事件處理程序 在上述屬性中 各個(gè)顏色屬性的值有兩種表示方法 使用顏色名稱來指定 例如紅色 綠色和藍(lán)色分別用red green和blue表示 使用十六進(jìn)制格式數(shù)值 RRGGBB來表示 RR GG和BB分別表示顏色中的紅 綠 藍(lán)三基色的兩位十六進(jìn)制數(shù)據(jù) 3 1 3HTML文檔的基本結(jié)構(gòu) 4 HTML文檔的基本結(jié)構(gòu)學(xué)習(xí)了文檔的幾個(gè)標(biāo)記后 現(xiàn)在需要按照一定的規(guī)則組織它們才能使用 這個(gè)規(guī)則就是HTML文檔的基本結(jié)構(gòu) 學(xué)會它可從整體上把握HTML文檔的使用 HTML文檔的基本結(jié)構(gòu)可以表示如下 標(biāo)題文字文本 圖像 動畫 HTML指令等HTML文檔是一種樹形 層次 結(jié)構(gòu) 標(biāo)記是文檔的根 其他的HTML標(biāo)記全部包括在 以內(nèi) 下面有兩大分支 和 其中 分支為文檔的主體 主體中的內(nèi)容將顯示在客戶端的瀏覽器中 內(nèi)又包括若干分支 如用H1 H2等表示字體字號 P DIV FORM等表示塊元素 等等 而在 段中除 包括的內(nèi)容將作為窗口的標(biāo)題顯示在最上方外 其余部分主要是關(guān)于文檔的說明以及某些共用的腳本程序 與為獨(dú)立的兩個(gè)部分 不能互相嵌套 3 1 4HTML文檔的編輯工具 1 HTML文檔編輯器的選擇雖然任何一種文本編輯器都可以作為HTML編輯器 如Windows的記事本等 但為了減少網(wǎng)頁設(shè)計(jì)的工作量 開發(fā)商設(shè)計(jì)了許多專用的網(wǎng)頁編輯器 像Dreamweaver FrontPage等 提供了可視化設(shè)計(jì)網(wǎng)頁的工具 設(shè)計(jì)者可用 所見即所得 的直觀方法來創(chuàng)建網(wǎng)頁 系統(tǒng)再自動將其轉(zhuǎn)化成HTML語句 然后傳送到瀏覽器 從而簡化了設(shè)計(jì)的過程 本書的例題均在ASP NET2 0的 設(shè)計(jì) 或 源 視圖中進(jìn)行 3 1 4HTML文檔的編輯工具 2 文檔編輯的基本步驟首先創(chuàng)建網(wǎng)站 然后右擊網(wǎng)站名 在彈出的快捷菜單中選擇 添加新項(xiàng) 在彈出的對話框中選擇 HTML頁 在左下方給網(wǎng)頁更名 然后單擊 添加 按鈕 新打開的網(wǎng)頁左下角將出現(xiàn) 設(shè)計(jì) 和 源 兩個(gè)標(biāo)簽 在設(shè)計(jì)視圖中可以進(jìn)行可視化設(shè)計(jì) 在 源 視圖中可以直接編寫HTML代碼 兩個(gè)視圖是等效的 可以隨時(shí)切換 相互補(bǔ)充 圖3 1的中間部分是剛建立HTML網(wǎng)頁時(shí) 源 視圖窗口的情況 左邊工具箱是在 設(shè)計(jì) 視圖中進(jìn)行可視化設(shè)計(jì)時(shí)可以使用的控件 右邊是控件的屬性窗口 有時(shí) 一些網(wǎng)頁中需要多次使用的標(biāo)記 在工具箱中找不到相應(yīng)的圖標(biāo)時(shí) 可以先在 源 視圖窗口中 寫出該標(biāo)記的代碼 然后將這些代碼直接拖到工具箱中 以后就可以直接利用工具箱進(jìn)行可視化操作了 3 1 4HTML文檔的編輯工具 圖3 1剛打開的HTML網(wǎng)頁的代碼界面 3 2HTML文本編輯 3 2 1HTML文本的格式化3 2 2設(shè)置列表文本 3 2HTML文本編輯 現(xiàn)在著重介紹HTML的文本對象的編輯 掌握了這部分內(nèi)容就不難學(xué)會其他對象的編輯 在這里雖然也要用到可視化方法 但是建議用輸入HTML代碼的方法試做一下 為了達(dá)到練習(xí)和鞏固HTML語言的目的 文中有些地方有意不給出其可視化方法 待熟練后 再用可視化方法練習(xí)一遍 3 2 1HTML文本的格式化 1 字符的格式化 1 設(shè)置字體 字號和顏色在HTML語言中 可以使用字體標(biāo)記 來設(shè)置文本的字符格式 為此可以將文本置于和標(biāo)記之間 并通過FAC SIZE和COLOR屬性來設(shè)置文本的字體 字號和顏色 FACE屬性指定一種字體 或者給出一個(gè)字體列表 各種字體名稱用逗號來分隔 可以按照作者的喜好程度來排列 例如 龍卷風(fēng)SIZE屬性指定字體的大小 即字號 其取值可以從1到7 默認(rèn)值為3 SIZE屬性值越大 顯示的字號就越大 相對于基本字體 BASEFONT 的大小 也可使用 或 來指定相對字號 如 龍卷風(fēng)靜態(tài)網(wǎng)頁設(shè)計(jì)COLOR屬性指定文本的顏色 可以用顏色名稱表示 也可以用十六進(jìn)制RGB格式表示 例如 龍卷風(fēng)靜態(tài)網(wǎng)頁設(shè)計(jì) 3 2 1HTML文本的格式化 2 設(shè)置字符樣式和特殊字符設(shè)置字符樣式通過設(shè)置字符樣式可以為某些字符設(shè)置特殊格式 例如粗體 斜體 下劃線 刪除線 上標(biāo) 下標(biāo)等 常用的設(shè)置字符樣式的標(biāo)記如下 粗體 大字體 斜體 刪除線 小字體 刪除線 上標(biāo) 下標(biāo) 固定寬度字體 下劃線插入特殊字符設(shè)計(jì)網(wǎng)頁時(shí) 經(jīng)常要插入一些空格 這本來是一個(gè)十分簡單的問題 但在HTML網(wǎng)頁中卻變得比較麻煩 在輸入文本時(shí)按了多次空格鍵 但在瀏覽器中打開網(wǎng)頁時(shí)卻只能看到一個(gè)空格 另外 在網(wǎng)頁中有時(shí)可能要插入一些特殊符號 如版權(quán)符號 和注冊符號 等 當(dāng)遇到這種情況時(shí) 可以使用兩種方式來輸入特殊符號 使用字符實(shí)體名稱或數(shù)字表示方式 前者為 等等 表3 1列出了一小部分特殊符號的實(shí)體名稱和數(shù)字表示 其他可參考幫助文檔 空格是HTML中最普通的字符實(shí)體 通常情況下 HTML會裁掉文檔中的空格 假如你在文檔中連續(xù)輸入10個(gè)空格 那么HTML會去掉其中的9個(gè) 如果使用使用實(shí)體名稱而不是實(shí)體編號的好處在于 名稱相對來說更容易記憶 而這么做的壞處是 并不是所有的瀏覽器都支持最新的實(shí)體名稱 然而幾乎所有的瀏覽器對實(shí)體編號的支持都很好 注意 實(shí)體對大小寫敏感 3 2 1HTML文本的格式化 3 2 1HTML文本的格式化 2 段落的格式化段落是文檔的基本信息單位 一個(gè)字符也可能是一個(gè)段 將文檔劃分為段落 可以通過使用分段標(biāo)記 換行標(biāo)記 標(biāo)題標(biāo)記或插入水平線的手段來實(shí)現(xiàn) 1 設(shè)置分段標(biāo)記P分段標(biāo)記定義了一個(gè)段落 使用該標(biāo)記時(shí)要跳過一個(gè)空行 使后續(xù)內(nèi)容隔一行顯示 若同時(shí)使用和 則將段落包圍起來 表示一個(gè)分段的塊 若省略結(jié)束標(biāo)記 可以將開始標(biāo)記放在段尾 分段標(biāo)記的常用屬性是ALIGN 用于設(shè)置段落的水平對齊方式 2 設(shè)置換行標(biāo)記BR標(biāo)記強(qiáng)行規(guī)定了當(dāng)前行的中斷 使后續(xù)內(nèi)容在下一行顯示 3 設(shè)置標(biāo)題標(biāo)記Hn標(biāo)題標(biāo)記用于設(shè)置文檔中的標(biāo)題和副標(biāo)題 其中n的取值是1到6 如 標(biāo)記表示字號最大的標(biāo)題 標(biāo)記表示字號最小的標(biāo)題 4 設(shè)置水平線標(biāo)記HRHR標(biāo)記在文檔中添加一條水平線 用來分開文檔的兩個(gè)部分 該標(biāo)記有以下屬性 ALIGN 指定線的對齊方式 取值為left 左對齊 center 居中對齊 或right 右對齊 默認(rèn)值為center COLOR 指定線的顏色 NOSHADE 若指定該項(xiàng) 則顯示一條無陰影的實(shí)線 SIZE 指定線的寬度 以像素為單位 WIDTH 指定線的長度 單位可以是像素或百分比 占頁面寬度的百分比 3 2 1HTML文本的格式化 5 設(shè)置段落的對齊方式在網(wǎng)頁中有四種段落對齊方式 左對齊 右對齊 居中對齊和兩端對齊 在HTML語言中 可以使用ALIGN屬性來設(shè)置段落的對齊方式 ALIGN屬性可以應(yīng)用于多種標(biāo)記 例如分段標(biāo)記 標(biāo)題標(biāo)記 以及水平線標(biāo)記等 ALIGN屬性的取值可以是 left 左對齊 center 居中對齊 right 右對齊 以及justify 兩端對齊 兩端對齊是指將一行中的文本在排滿的情況下向左右兩頁邊對齊 以避免在左右頁邊出現(xiàn)鋸齒狀 對于不同的標(biāo)記 ALIGN屬性的默認(rèn)值是有所不同的 對于分段標(biāo)記和各個(gè)標(biāo)題標(biāo)記 ALIGN屬性的默認(rèn)值為left 對于水平線標(biāo)記 ALIGN屬性的默認(rèn)值為center 若要將文檔中的多個(gè)段落設(shè)置成相同的對齊方式 可將這些段落置于和標(biāo)記之間組成一個(gè)節(jié) 并使用ALIGN屬性來設(shè)置該節(jié)的對齊方式 如果要將部分文檔內(nèi)容設(shè)置為居中對齊 也可以將這部分內(nèi)容置于和標(biāo)記之間 3 2 1HTML文本的格式化 6 示例HTML文本的基本格式化練習(xí)靜思床前明月光 疑是地上霜 舉頭望明月 低頭思故鄉(xiāng) 3 2 2設(shè)置列表文本 1 創(chuàng)建有序列表有序列表 是在各列表項(xiàng)前面顯示數(shù)字或字母的縮排列表 可以使用有序列表標(biāo)記OL和列表項(xiàng)標(biāo)記LI來創(chuàng)建 語法格式如下 列表項(xiàng)1列表項(xiàng)2 列表項(xiàng)nOL標(biāo)記有兩個(gè)常用屬性 START和TYPE START屬性用于數(shù)字序列的起始值 可以取整數(shù)值 TYPE屬性用于設(shè)置數(shù)字序列樣式 其取值可以是 1 表示阿拉伯?dāng)?shù)字1 2 3等 此為默認(rèn)值 A 表示大寫字母A B C等 a 表示小寫字母a b c等 I 表示大寫羅馬數(shù)字I II III IV等 i 表示小寫羅馬數(shù)字i ii iii iv等 當(dāng)位于和標(biāo)記之間時(shí) LI標(biāo)記有兩個(gè)常用屬性 TYPE和VALUE TYPE屬性指定數(shù)字樣式 其取值與OL的TYPE屬性相同 VALUE屬性指定一個(gè)新的數(shù)字序列起始值 以獲得非連續(xù)性的數(shù)字序列 3 2 2設(shè)置列表文本 2 創(chuàng)建無序列表無序列表是一種在各列表項(xiàng)前面顯示特殊項(xiàng)目符號的縮排列表 可以使用無序列表標(biāo)記UL和列表項(xiàng)標(biāo)記LI來創(chuàng)建 語法格式如下 列表項(xiàng)1列表項(xiàng)2列表項(xiàng)nUL標(biāo)記的TYPE屬性用于指定列表項(xiàng)前面顯示的項(xiàng)目符號 其取值可以是 disc 使用實(shí)心圓作為項(xiàng)目符號 默認(rèn)值 circle 使用空心圓作為項(xiàng)目符號 square 使用方塊作為項(xiàng)目符號 應(yīng)注意在IE瀏覽器中 TYPE屬性的值是區(qū)分大小寫的 3 2 2設(shè)置列表文本 3 示例無序和有序列表練習(xí) 星期一課程安排表 無序和有序列表的練習(xí)星期一課程安排表 第一節(jié) 計(jì)算機(jī)導(dǎo)論第二節(jié) Web應(yīng)用程序第三節(jié) 數(shù)據(jù)庫理論第四節(jié) C 及Windows設(shè)計(jì)第五節(jié) 英語第六節(jié) 數(shù)學(xué)第七節(jié) 政治 3 3超鏈接 1 超級鏈接的概念 1 超鏈接的含義 超鏈接 是HTML語言的精華 通過超鏈接你可以隨時(shí)轉(zhuǎn)向其他頁面或者到某個(gè)段落去查看你想要看的東西 還可以跨越站點(diǎn) 到其他站點(diǎn)上去查閱相關(guān)信息 你可以瀏覽世界各地的最新信息 而這一切只需坐在屏幕前點(diǎn)一點(diǎn)鼠標(biāo)就能實(shí)現(xiàn) 超鏈接是由源端點(diǎn)到目標(biāo)端點(diǎn)的一種跳轉(zhuǎn) 源端點(diǎn)可以是網(wǎng)頁中的一段文本或一幅圖像等 目標(biāo)端點(diǎn)可以是任意類型的網(wǎng)絡(luò)資源 例如一個(gè)網(wǎng)頁 一幅圖像 一首歌曲 一段動畫或一個(gè)程序等 2 超鏈接的形式按照目標(biāo)端點(diǎn)的不同 可以將超鏈接分為以下幾種常見形式 文件超鏈接 這種鏈接的目標(biāo)端點(diǎn)是一個(gè)文件 當(dāng)然包括各種文件 如頁面文件 它可以位于當(dāng)前網(wǎng)頁所在的服務(wù)器上 此時(shí)可稱為 站點(diǎn)內(nèi)頁面的鏈接 也可以位于其他服務(wù)器 此時(shí)可稱為 與站點(diǎn)外頁面的鏈接 錨點(diǎn)超鏈接 這種鏈接的目標(biāo)端點(diǎn)是網(wǎng)頁中的一個(gè)位置 通過這種鏈接可以從當(dāng)前網(wǎng)頁跳轉(zhuǎn)到本頁面或其他頁面中的指定位置 E mail鏈接 通過這種鏈接可以啟動電子郵件客戶端程序 如Outlook或FoxMail等 并允許訪問者向指定的地址發(fā)送郵件 圖像超鏈接 這種鏈接是在圖像上建立若干個(gè)區(qū)域稱為 鏈接區(qū) 通過它可以跳轉(zhuǎn)到其他目標(biāo)端點(diǎn)去 3 關(guān)于路徑路徑是指從站點(diǎn)根文件夾或當(dāng)前文件夾到目標(biāo)文件所經(jīng)過的路線 可以使用路徑來指定超鏈接中目標(biāo)端點(diǎn)的位置 路徑有以下幾種類型 絕對路徑 也稱為絕對URL 它給出目標(biāo)文件的完整URL地址 包括傳輸協(xié)議在內(nèi) 如果要鏈接的文件位于外部服務(wù)器上 則必須使用絕對路徑 相對路徑 也稱為相對URL 是指以當(dāng)前文檔所在位置為起點(diǎn)到目標(biāo)文檔所經(jīng)過的路徑 若要將當(dāng)前文檔與處在同一文件夾中的另一個(gè)文檔鏈接 或者將同一站點(diǎn)中不同文件夾下的文檔相互鏈接 都可以使用相對路徑 此時(shí)可以省去當(dāng)前文檔與目標(biāo)文檔完整URL中的相同部分 只留下不同部分 根相對路徑 是指從站點(diǎn)根目錄到被鏈接文件的路徑 使用這種路徑是指定站點(diǎn)內(nèi)文檔鏈接的最好方式 3 3超鏈接 2 常見鏈接的創(chuàng)建 1 創(chuàng)建文件鏈接在HTML語言中 可以使用A標(biāo)記來創(chuàng)建超鏈接 基本語法格式如下 文本上述語法格式包含A標(biāo)記的以下基本屬性 HREF 該屬性是必選項(xiàng) 用于指定目標(biāo)端點(diǎn)的URL地址 可以包含一個(gè)或多個(gè)參數(shù) 具體地 如果是與站點(diǎn)以外頁面鏈接的情況 就為URL 如果是與站點(diǎn)內(nèi)頁面鏈接 則為文件名 TARGET 該屬性是可選項(xiàng) 用于指定一個(gè)窗口或框架的名稱 目標(biāo)文檔將在該窗口或框架中打開 如果省略該屬性 則目標(biāo)文檔將取代包含該超鏈接的文檔 TARGET屬性的取值既可以是窗口或框架的名稱 也可以用 blank 指定將鏈接的目標(biāo)文件加載到未命名的新瀏覽器窗口中 用 parent 指定將鏈接的目標(biāo)文件加載到包含鏈接的父框架頁或窗口中 如果包含鏈接的框架不是嵌套的 則鏈接的目標(biāo)文件加載到整個(gè)瀏覽器窗口中 用 self 指定將鏈接的目標(biāo)文件加載到鏈接所在的同一框架或窗口中 這是默認(rèn)值 用 top 指定將鏈接的目標(biāo)文件加載到整個(gè)瀏覽器窗口中 并由此刪除所有框架 TITLE 該屬性也是可選項(xiàng) 用于指定指向超鏈接時(shí)所顯示的標(biāo)題文字 3 3超鏈接 2 創(chuàng)建錨點(diǎn)鏈接創(chuàng)建錨點(diǎn)鏈接時(shí) 要在頁面的某處設(shè)置一個(gè)位置標(biāo)記 即所謂錨點(diǎn) 并給該位置指定一個(gè)名稱 以便在同一頁面或其他頁面中引用 通過創(chuàng)建錨點(diǎn)鏈接 可以使超鏈接指向當(dāng)前頁面或其他頁面中的指定位置 若要創(chuàng)建錨點(diǎn)鏈接 首先在頁面中為需要跳轉(zhuǎn)的位置命名 即在該位置上放置一個(gè)A標(biāo)記并通過NAME屬性為該位置指定一個(gè)名稱 一般不要在和標(biāo)記之間放置任何文字 例如 可以使用A標(biāo)記在test htm頁面頂部創(chuàng)建一個(gè)錨點(diǎn) 創(chuàng)建錨點(diǎn)后 可以使用A標(biāo)記來創(chuàng)建指向該錨點(diǎn)的超鏈接 例如 要在同一個(gè)頁面中跳轉(zhuǎn)到名為 top 的錨點(diǎn)處 可以使用以下HTML代碼 返回頂部若要在其他頁面中跳轉(zhuǎn)到該錨點(diǎn) 則使用以下HTML代碼 跳轉(zhuǎn)到test htm頁的頂部 3 3超鏈接 3 創(chuàng)建郵件鏈接使用A標(biāo)記創(chuàng)建郵件鏈接 該標(biāo)記的HREF屬性應(yīng)由三個(gè)部分組成 第一部分是電子郵件協(xié)議名稱mailto 第二部分是電子郵件地址 第三部分是可選的郵件主題 其形式為 subject 主題 第一部分與第二部分之間用冒號 分隔 第二部分與第三部分之間用問號 分隔 例如 給我寫信當(dāng)訪問者在瀏覽器窗口中單擊郵件鏈接時(shí) 將會自動啟動電子郵件客戶端程序 例如OutlookExpress或FoxMail等 并將指定的主題填入 主題 欄中 4 創(chuàng)建圖像超鏈接圖像的超鏈接與文本超鏈接差不多 就是將 標(biāo)記放在圖片兩端即可 例如語句 當(dāng)單擊dysb jpg圖片時(shí)將轉(zhuǎn)向Default htm網(wǎng)頁 具體如何使用等標(biāo)記的內(nèi)容請參閱4 2節(jié) 3 3超鏈接 3 示例超鏈接主要形式的示例 注 下面的 代表熱點(diǎn) 即一般用鼠標(biāo)指向時(shí) 鼠標(biāo)指針變手形的區(qū)域 1 創(chuàng)建指向本地頁面的鏈接 鏈接到本地磁盤上同一目錄下的頁面 鏈接到本地磁盤上不同目錄下的頁面 2 創(chuàng)建指向其他服務(wù)器的頁面鏈接 鏈接到Internet上其他服務(wù)器上的頁面 3 創(chuàng)建一個(gè)指向頁面特定部分的鏈接 鏈接到本頁面內(nèi)的某指定位置 鏈接到其他服務(wù)器上頁面的某指定位置 4 創(chuàng)建一個(gè)指向電子郵件的鏈接 3 4創(chuàng)建移動的文本 在網(wǎng)頁中經(jīng)?？梢钥吹揭恍┮苿拥淖址?我們有時(shí)稱這些移動的字符串為 移動字幕 或 跑馬燈 它可以進(jìn)一步吸引人們的注意力 這些移動的字符串是如何形成的呢 利用MARQUEE標(biāo)記可以將靜態(tài)的文本轉(zhuǎn)換為動態(tài)文本 該標(biāo)記使用的語法如下 要滾動顯示的文本信息標(biāo)記有很多屬性可以改變移動的方式 例如 ALIGN 指定字幕與周圍文本的對齊方式 其取值可以是top middle或bottom BEHAVIOR 指定文本動畫的類型 其取值可以是scroll slide或alternate BGCOLOR 指定字幕的背景顏色 DIRECTION 指定文本的移動方向 其取值可以是down left right或up HEIGHT 指定字幕的高度 以像素或百分比為單位 HSPACE 整數(shù) 指定字幕的外部邊緣與瀏覽器窗口之間的左右邊距 像素 LOOP 指定字幕的滾動次數(shù) SCROLLAMOUNT 整數(shù) 指定字幕文本每次移動的距離 以像素為單位 SCROLLDELAY 整數(shù) 指定與前段字幕文本延遲多少ms后重新開始移動文本 VSPACE 整數(shù) 指定字幕的外邊緣與瀏覽器窗口之間的上下邊距 像素 3 4創(chuàng)建移動的文本 下面舉例說明這些屬性的使用方法 例1 我們在移動字符串的前后加上 標(biāo)志 如下所示 移動字符串當(dāng)進(jìn)入瀏覽器時(shí) 移動字符串 這五個(gè)字將從右向左移動 到達(dá)左邊沿時(shí)再快速返回到右邊 繼續(xù)向左移動 不斷循環(huán)直到關(guān)閉該網(wǎng)頁時(shí)為止 根據(jù)需要也可設(shè)置成向不同方向移動 注意 這里雖然沒有明顯地用direction設(shè)置移動方向 但是一般每個(gè)屬性都會有一個(gè)默認(rèn)值 如果沒有設(shè)置該屬性值 就采用默認(rèn)值 而direction的默認(rèn)值為left 即從右向左移動 如果想設(shè)置為從左向右移動 就要寫上direction right 例2 再見了 用于控制移動范圍 例3 滑到終點(diǎn)了 控制移動到左端就停止移動 例4 撞來撞去 啊 我昏啦從右到左 再從左到右反復(fù)進(jìn)行 例5 嘩 太快了 我又昏啦用來控制移動速度和移動的次數(shù) 3 5HTML與XML的比較 到此為止 我們已經(jīng)介紹了兩種標(biāo)記語言 XML與HTML 它們都派生于SGML 都是用標(biāo)記來定義它們的特性 從外觀上看非常相似 但兩者之間卻有著本質(zhì)的區(qū)別 這些區(qū)別是 HTML用來定義顯示 而XML是對語義的描述 HTML的標(biāo)記由系統(tǒng)定義 而XML的標(biāo)記自行定義 HTML的語法比較松散 而XML的語法比較嚴(yán)格 例如 區(qū)分大小寫 各標(biāo)記必須封閉等等 因此XML的執(zhí)行效率要高一些 為了顯示XML文本 常需要與其他文件結(jié)合起來使用 當(dāng)前這兩種標(biāo)記語言都被廣泛地應(yīng)用于網(wǎng)絡(luò)應(yīng)用之中 HTML用來定義瀏覽器的顯示 XML用來在不同平臺之間傳輸和交換數(shù)據(jù) 為了正確顯示XML文本的內(nèi)容 需要和其他文件結(jié)合 有時(shí)也需要和HTML語言相結(jié)合 現(xiàn)在ASP NET2 0中使用XHTML語言 它將HTML語言納入XML語言的規(guī)則中 既然XML語言的標(biāo)記可以任意定義 HTML的標(biāo)記當(dāng)然也可以成為其中的一部分 XHTML與HTML相比只是語法規(guī)則嚴(yán)格了一些 這就是說 在ASP NET2 0中編寫XHTML代碼時(shí) 標(biāo)記將區(qū)分大小寫 各個(gè)標(biāo)記必須是封閉的 例如 斷行標(biāo)記也應(yīng)該寫成或的形式 因此用XHTML語言寫出的代碼執(zhí)行效率也將更高一些 除此以外沒有其他變化 3 6綜合示例 下面是一個(gè)簡單HTML文本示例 其中 文具 照相 體育 音響 空調(diào) 彩電等 字符串從左向右不斷循環(huán)移動 單擊 東風(fēng)商場 可打開電子郵件客戶端程序 請分別用手工代碼法和可視化方法練習(xí) 1 瀏覽器顯示的界面如圖3 2所示 2 給出參考的HTML代碼 UntitledDocument簡要情況本商場一貫講究信譽(yù) 能為客戶提供多種滿意的商品 計(jì)有 文具 照相 體育 音響 空調(diào) 彩電等本商場保證做到 質(zhì)量優(yōu)秀價(jià)格合理服務(wù)熱情如有意見或建議請發(fā)電子郵件寄東風(fēng)商場 3 6綜合示例 圖3 2綜合示例的網(wǎng)頁界面 3 7小結(jié) 一個(gè)好的網(wǎng)頁中常常包含各種不同的文本 這些文本的大小不同 形式也不相同 是什么方法使它們變得如此豐富多彩呢 是HTML語言 加上下一章將介紹的CSS 在桌面系統(tǒng)中 利用文字編輯軟件 例如Word 編輯文本時(shí) 將文本寫成什么樣將來就顯示成什么樣 但是瀏覽器與此不同 它只認(rèn)識HTML語言 只有用標(biāo)記才能定義顯示的形式 為了顯示不同的形式 系統(tǒng)確定了不同的HTML標(biāo)記 使用時(shí)只需要用這些標(biāo)記把定義的對象包圍起來即可 由于使用方法非常簡單 因此受到廣泛的歡迎 HTML已經(jīng)成為各種類型的瀏覽器的通用語言 標(biāo)記中的屬性如寬度 高度 顏色以及對齊方式等 作為標(biāo)記定義的補(bǔ)充 大大增強(qiáng)了標(biāo)記定義的表現(xiàn)力 文本或圖像超鏈接是HTML語言的靈魂 正是因?yàn)橛辛怂?才可以讓人們在網(wǎng)上沖浪 遨游世界 在HTML語言中超鏈接定義的最簡單的格式是 鏈接文本動態(tài)文本常常能夠起到突出重點(diǎn) 吸引更多網(wǎng)民目光的效果 定義移動字符串的語句是 移動的文本其實(shí)移動圖片的定義語句與此相同 格式如下 移動的圖片即在的標(biāo)記中間放進(jìn)一張或多張圖片 這些圖片即可以移動的方式顯示 在標(biāo)記中還可以增加很多屬性 用來控制移動的方式 如向左 向右 往返等 和移動的速度 3 8習(xí)題 1填空題2選擇題3判斷題4簡答題5操作題 3 8習(xí)題 填空題 1 HTML是 的英文縮寫 它是WWW 英文為 中使用的超文本標(biāo)記語言 它是由 在CERN 在日內(nèi)瓦的歐洲粒子物理實(shí)驗(yàn)室 發(fā)明的 它最早源于SGML StandardGeneralizedMarkupLanguage 標(biāo)準(zhǔn)通用標(biāo)記語言 2 對于HTML語言 任何 編輯器都可以編輯它 它目前已經(jīng)成為各種類型 的通用標(biāo)準(zhǔn) 它能獨(dú)立于各種 平臺 3 所有網(wǎng)頁 都是由 對HTML解釋而形成的 就相當(dāng)于HTML語言的翻譯程序 負(fù)責(zé)解釋HTML文件各種符號的含義 4 列表文本有 和 兩種形式 3 8習(xí)題 選擇題 1 在網(wǎng)站中 路徑通常有 種表示方式 它們分別是 A 3絕對路徑 根目錄相對路徑 文檔目錄相對路徑B 2絕對路徑 根目錄相對路徑C 3絕對路徑 根目錄絕對路徑 文檔目錄相對路徑D 2絕對路徑 根目錄絕對路徑 2 在HTML中 超鏈接由 標(biāo)記定義 A B C D 3 下面關(guān)于絕對路徑的說法 正確的是 A 絕對路徑是被鏈接文檔的完整URL 不包括使用的傳輸協(xié)議B 使用絕對路徑需要考慮源文件的位置C 在絕對路徑中 如果目標(biāo)文件被移動 則鏈接同樣可用D 創(chuàng)建外部鏈接時(shí) 必須使用絕對路徑 4 HTML代碼表示 A 創(chuàng)建一個(gè)超鏈接B 創(chuàng)建一個(gè)自動發(fā)送電子郵件的鏈接C 創(chuàng)建一個(gè)位于文檔內(nèi)部的鏈接點(diǎn)D 創(chuàng)建一個(gè)指向位于文檔內(nèi)部的鏈接點(diǎn) 3 8習(xí)題 判斷題 1 HTML語言是對顯示的描述 而XML語言不僅能描述顯示還能描述語義 2 HTML語言與XML一樣 它們的標(biāo)記都是嚴(yán)格區(qū)分大小寫的 3 8習(xí)題 簡答題 1 HTML頁面的基本結(jié)構(gòu)是怎樣的 2 在HTML頁面中如何實(shí)現(xiàn)左對齊 右對齊和居中對齊 3 如何在頁面中插入錨點(diǎn) 說出好處 4 是否可以在不同的頁面間實(shí)現(xiàn)用錨點(diǎn)鏈接進(jìn)行跳轉(zhuǎn) 如果可以 怎樣實(shí)現(xiàn) 5 簡述HTML與XML之間的區(qū)別 3 8習(xí)題 操作題 在網(wǎng)站中創(chuàng)建多個(gè) htm網(wǎng)頁 要求在網(wǎng)頁中實(shí)現(xiàn)以下技術(shù) 使用各種不同字體 顏色的文本 使用兩種列表 超鏈接 文本超鏈接 錨點(diǎn)超鏈接 電子郵件超鏈接等 結(jié)合移動字符串進(jìn)行超鏈接 Q A Thanks