精]信息與網(wǎng)絡(luò)管理中心辦公室-第三章html標(biāo)記功能詳述(編輯修改稿)
2025-02-17 13:41 本頁面
【文章內(nèi)容簡介】 如 圖像標(biāo)記 img / ?圖像標(biāo)記 ： img src=“圖像文件名” / 將圖形文件嵌入到網(wǎng)頁文檔中的當(dāng)前位置 ?說明：網(wǎng)頁中插入圖像有兩種方法，一是插入一個 img元素，二是將圖像作為背景嵌入到網(wǎng)頁中 ?由于 CSS的背景屬性的功能很強(qiáng)大，現(xiàn)在更推薦將所有的圖像都作為背景嵌入。如果圖像是通過 img元素插入，則可以在瀏覽器上通過按住鼠標(biāo)左鍵拖動選中圖片，或者將它拖動到地址欄里，如果作為背景嵌入，則無法選中圖片 圖像標(biāo)記 img 網(wǎng)頁中支持的圖像文件格式 ?網(wǎng)頁中可以插入的圖像文件的類型有 jpg格式，gif格式和 png格式。這些文件都是壓縮格式的圖像格式，其中 jpg格式適合用于網(wǎng)頁中較大尺寸的 真彩色圖片 ，是一種有損壓縮的格式； gif格式一般用于較小尺寸的圖片，是一種無損壓縮的格式，只支持 256色， GIF在存儲非連續(xù)色調(diào)的圖像或具有大面積單一色彩的圖像方面比較出色， gif格式的特點(diǎn)是可以實現(xiàn) gif動畫 ，和gif全透明的圖像 ； png格式可以用于 alpha透明效果 ，但 IE6不能夠支持。 img標(biāo)記的常見屬性 ?img是一個行內(nèi)元素，插入 img元素不會導(dǎo)致任何換行。下面是 img標(biāo)記的常見屬性： img的屬性 含義 src 圖片文件的 url地址 alt 當(dāng)圖片無法顯示時顯示的替換文字 title 鼠標(biāo)停留在圖片上時顯示的說明文字 align 圖片的對齊方式，默認(rèn)為基線對齊，即 圖片的下邊緣和文字的下邊緣對齊 width、 height 圖片在網(wǎng)頁中的寬和高 在單元格中插入圖像的方法 對于表格布局的網(wǎng)頁，所有的元素都是放置在單元格中的，圖像也不例外，要在單元格中插入圖像，且單元格的邊框和圖像之間沒有間隙。那么必須將該單元格的寬和高設(shè)置為圖片的寬和高，且表格中其它單元格的大小也必須固定，然后確保 td與 /td之間只有 img標(biāo)記， 沒有空格和換行符 ，否則單元格會被空格撐開。如： td width=768 height=132img src=images/ //td ! /td不能換行 img插入圖像的對齊方式 ?img標(biāo)記的對齊方式仍然通過 align屬性實現(xiàn)，但其取值多達(dá) 9種，其中要實現(xiàn)圖片和文本混排可使用“左對齊”或“右對齊”，要實現(xiàn)文本和圖片頂部對齊可使用“文本上方”。 ?img src=images/ width=158 height=41 align=left/，但通常是將圖片放在表格里，通過表格定位來實現(xiàn)文本和圖像的混排。 媒體元素插入標(biāo)記 embed / object /object 插入 flash的兩種方法 ?方法一：執(zhí)行菜單命令 ：“插入－媒體－flash”，在代碼視圖中可看到插入 flash元素是通過同時插入 object標(biāo)記和 embed標(biāo)記實現(xiàn)的，以確保在 IE5和 Firefox中都獲得應(yīng)有的效果 ?方法二：執(zhí)行菜單命令：“ 插入－媒體－插件 ”，此方法在代碼視圖中僅插入了embed元素。由于 IE6和 Firefox都能正常顯示效果，而代碼更簡潔，所以推薦用這種方式 在圖像上添加透明 flash ?首先可以將一張需要放置透明 flash的圖片作為單元格的背景導(dǎo)入，然后在此單元格內(nèi)插入一個透明 flash文件，可以調(diào)整此 flash元素的大小與單元格相一致，選中該 flash文件，點(diǎn)擊屬性面板里的“參數(shù)”按鈕，新建一個參數(shù)“ wmode” 值設(shè)置為“ transparent”。 插入視頻或音頻文件 插入視頻可分別使用 ActiveX按鈕或插件按鈕實現(xiàn) object width=280 height=216 param name=autostart value=false / embed src= width=280 height=216 autostart=false/embed /object ActiveX 方式 embed src=“” width=“276” height=“218” autostart=“false”/embed 插件方式 流媒體簡介 ?流媒體實際指的是一種新的 媒體傳送方式 ，而非一種新的媒體 ,流式傳輸方式將整個多媒體文件經(jīng)過特殊的壓縮方式分成一個個 壓縮包 ，由視頻服務(wù)器向用戶計算機(jī)連續(xù)、實時傳送。在采用流式傳輸方式的系統(tǒng)中，用戶不必像采用下載方式那樣等到整個文件全部下載完畢 ?常見的流媒體文件格式 ?real公司： rm\rmvb\ra ?apple公司： quicktime\mov ?microsoft公司： asf\wmv\wma 插入流媒體元素的方法 ?網(wǎng)頁中插入流媒體也能向插入一般媒體一樣使用 embed標(biāo)記，只是要在 classId框中設(shè)置流媒體的類型 插入 Real Player流格式的視頻文件 屬性面板中設(shè)置 : ClassID為 RealPlayer…… 。 選中 Embed復(fù)選框。 Src為 。 單擊“參數(shù) …” 按鈕，設(shè)置屬性。 parm參數(shù)示例 ?參數(shù)： console 屬性：可以將各種不同的RealPlayer控制聚集在網(wǎng)頁上，這樣它們可以交互使用或是保持獨(dú)立，而且互相不影響 演示 ? 假如圖形文件放在網(wǎng)頁文檔所在目錄的上層目錄 (如 home)下 ， 則相對路徑就必須是準(zhǔn)網(wǎng)址 ， 即用 “ ../”表示網(wǎng)站 ， 后邊緊跟文件在網(wǎng)站中的路徑 。 例如 ， home是網(wǎng)站下的一個目錄 ， 則代碼應(yīng)為： img src=../home/。 例如 ， home是網(wǎng)站下的目錄 king下邊的一個子目錄 ， 則代碼應(yīng)為： img src=../king/home/。 HTML基礎(chǔ) [例 26] 圖像標(biāo)記舉例 html head title圖像標(biāo)記示例 /title /head body p align=“center”img src=“../” alt=“網(wǎng)頁制作 ” width=468 height=60/p /body /html HTML基礎(chǔ) 若事先在網(wǎng)站根目錄中存放一幅圖像 ，則可以在網(wǎng)頁中顯示它。 alt=網(wǎng)頁制作 屬性表示在網(wǎng)頁中可以用文字 網(wǎng)頁制作 代替該圖像先行顯示出來。 （ 2）多媒體標(biāo)記 在 Windows中 ， 可播放的音樂文件格式常有 au、 mid及 wav三種 。 若要提供音樂文件讓瀏覽者播放 ， 則可建立指向音樂文件的超鏈接 。 例如： A HREF=甜美音樂 /A 常見的影像文件有 mov、 mpg和 avi。 可建立超鏈接到影像文件 。 當(dāng)瀏覽者單擊超鏈接時 ，將會調(diào)用 Windows Media Player， 進(jìn)行影像文件播放 。 例如： A HREF=本市交通 /A HTML基礎(chǔ)
教學(xué)課件相關(guān)推薦
鄂ICP備17016276號-1