《網(wǎng)頁(yè)設(shè)計(jì)與制作（活頁(yè)式）》 課件 項(xiàng)目2 HTML5簡(jiǎn)介_(kāi)第1頁(yè)
《網(wǎng)頁(yè)設(shè)計(jì)與制作（活頁(yè)式）》 課件 項(xiàng)目2 HTML5簡(jiǎn)介_(kāi)第2頁(yè)
《網(wǎng)頁(yè)設(shè)計(jì)與制作（活頁(yè)式）》 課件 項(xiàng)目2 HTML5簡(jiǎn)介_(kāi)第3頁(yè)
《網(wǎng)頁(yè)設(shè)計(jì)與制作（活頁(yè)式）》 課件 項(xiàng)目2 HTML5簡(jiǎn)介_(kāi)第4頁(yè)
《網(wǎng)頁(yè)設(shè)計(jì)與制作（活頁(yè)式）》 課件 項(xiàng)目2 HTML5簡(jiǎn)介_(kāi)第5頁(yè)
已閱讀5頁(yè)，還剩44頁(yè)未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

版權(quán)說(shuō)明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡(jiǎn)介

網(wǎng)頁(yè)設(shè)計(jì)與制作項(xiàng)目二

HTML5簡(jiǎn)介N

知識(shí)目標(biāo)了解HTML5的優(yōu)勢(shì)掌握標(biāo)簽的使用掌握文本控制標(biāo)簽和圖像標(biāo)簽的使用方法HTML5的優(yōu)勢(shì)任務(wù)2.1〓HTML5的優(yōu)勢(shì)優(yōu)勢(shì)含義兼容HTML5保持與過(guò)去技術(shù)完美銜接合理根據(jù)實(shí)際開(kāi)發(fā)中已經(jīng)存在的各類網(wǎng)頁(yè)標(biāo)簽進(jìn)行提煉和歸納易用遵循“簡(jiǎn)單至上”的原則，主要體現(xiàn)在簡(jiǎn)化的字符集聲明、簡(jiǎn)化的DOCTYPE、簡(jiǎn)單而強(qiáng)大的API和以瀏覽器原生能力新增標(biāo)簽語(yǔ)義標(biāo)簽、新的表單控件、強(qiáng)大的圖像支持等HTML5的優(yōu)勢(shì)任務(wù)2.1〓HTML5的優(yōu)勢(shì)HTML5部分新增標(biāo)簽HTML5的優(yōu)勢(shì)任務(wù)2.1〓HTML5的優(yōu)勢(shì)實(shí)例1缺少</p>標(biāo)簽代碼：運(yùn)行結(jié)果：HTML5的優(yōu)勢(shì)任務(wù)2.1〓HTML5的優(yōu)勢(shì)解釋實(shí)例1的代碼中缺少結(jié)束標(biāo)簽</p>，在HTML5中并沒(méi)有把這種情況作為錯(cuò)誤來(lái)處理，而是在允許這種寫法的同時(shí)，定義了一些可以省略結(jié)束標(biāo)簽</p>的標(biāo)簽。在其他版本的HTML中，語(yǔ)法非常寬松，標(biāo)簽是不區(qū)分大小寫的，但在HTML5版本中，明確規(guī)定標(biāo)簽必須用小寫格式。在其他版本的HTML中，各瀏覽器對(duì)HTML的支持不統(tǒng)一，這就造成同一個(gè)頁(yè)面在不同瀏覽器中可能顯示不同的樣式。HTML5通過(guò)詳細(xì)分析各個(gè)瀏覽器所具有的功能，制定了一個(gè)通用的標(biāo)準(zhǔn)，并要求瀏覽器支持這個(gè)標(biāo)準(zhǔn)。任務(wù)2.2〓HTML5的結(jié)構(gòu)實(shí)例2新建XHTML文檔代碼：解釋標(biāo)簽含義<!DOCTYPE…><!DOCTYPE…>位于文檔的最前面，用于向?yàn)g覽器說(shuō)明當(dāng)前文檔使用的標(biāo)準(zhǔn)規(guī)范。只有在開(kāi)頭處使用<!DOCTYPE…>聲明，瀏覽器才能將該文檔作為有效的HTML文檔，并按指定的文檔類型進(jìn)行解析。<html><html>位于<!DOCTYPE…>之后，也被稱為根標(biāo)簽。根標(biāo)簽主要用于告知瀏覽器其自身是一個(gè)HTML文檔，其中<html>標(biāo)志著HTML文檔的開(kāi)始，</html>則標(biāo)志著HTML文檔的結(jié)束，在它們之間是文檔的頭部和主體內(nèi)容。<head><head>用于定義HTML文檔的頭部信息，也被稱為頭部標(biāo)簽。頭部標(biāo)簽主要用于封裝其他位于文檔頭部的標(biāo)簽，用于描述文檔的標(biāo)題、作者以及與其他文檔的關(guān)系。例如，<title><meta><link>和<style>等。<body><body>用于定義HTML文檔所要顯示的內(nèi)容，也被稱為主體標(biāo)簽。瀏覽器中顯示的所有文本、圖像、音頻和視頻等信息都必須位于<body>內(nèi)才能展示給用戶。任務(wù)2.2〓HTML5的結(jié)構(gòu)任務(wù)2.2〓HTML5的結(jié)構(gòu)實(shí)例3新建HTML5文檔代碼：對(duì)比通過(guò)對(duì)比可以看出，HTML5的結(jié)構(gòu)相較于XHTML的結(jié)構(gòu)簡(jiǎn)潔明了。除上述的文檔結(jié)構(gòu)標(biāo)簽外，HTML5還簡(jiǎn)化了<meta>標(biāo)簽，讓定義字符編碼的格式變得更加簡(jiǎn)單。

任務(wù)1.3〓網(wǎng)頁(yè)制作工具任務(wù)2.3〓標(biāo)簽概述2.3.1標(biāo)簽的分類標(biāo)簽名語(yǔ)法格式雙標(biāo)簽<標(biāo)簽名>內(nèi)容<標(biāo)簽名>單標(biāo)簽<標(biāo)簽名/> 注釋標(biāo)簽<!--注釋語(yǔ)句-->任務(wù)1.3〓網(wǎng)頁(yè)制作工具任務(wù)2.3〓標(biāo)簽概述嵌套關(guān)系也稱為包含關(guān)系，可以簡(jiǎn)單地理解為一個(gè)雙標(biāo)簽里面包含其他的標(biāo)簽。例如，在HTML5的結(jié)構(gòu)代碼中，<html>標(biāo)簽和<head>標(biāo)簽（或<body>標(biāo)簽）就是嵌套關(guān)系。2.3.2標(biāo)簽的關(guān)系1.嵌套關(guān)系實(shí)例4嵌套關(guān)系任務(wù)1.3〓網(wǎng)頁(yè)制作工具任務(wù)2.3〓標(biāo)簽概述并列關(guān)系也稱為兄弟關(guān)系，是指兩個(gè)標(biāo)簽處于同一級(jí)別，并且沒(méi)有包含關(guān)系，例如，在HTML5的結(jié)構(gòu)代碼中，<head>標(biāo)簽和<body>標(biāo)簽就是并列關(guān)系。在HTML標(biāo)簽中，無(wú)論是單標(biāo)簽還是雙標(biāo)簽，都可以擁有并列關(guān)系。2.3.2標(biāo)簽的關(guān)系2.并列關(guān)系任務(wù)1.3〓網(wǎng)頁(yè)制作工具任務(wù)2.3〓標(biāo)簽概述<標(biāo)簽名屬性1=“屬性值1”屬性2=“屬性值2”…>內(nèi)容</標(biāo)簽名>

2.3.3標(biāo)簽屬性HTML標(biāo)簽設(shè)置屬性的基本語(yǔ)法格式如下實(shí)例5文本居中顯示在上面的語(yǔ)法中，標(biāo)簽可以擁有多個(gè)屬性，屬性必須寫在開(kāi)始標(biāo)簽中，位于標(biāo)簽名后面。屬性之間不分先后順序，標(biāo)簽名與屬性、屬性與屬性之間均以空格分開(kāi)。任務(wù)1.3〓網(wǎng)頁(yè)制作工具任務(wù)2.3〓標(biāo)簽概述網(wǎng)頁(yè)制作時(shí)，經(jīng)常需要設(shè)置頁(yè)面的基本信息，如頁(yè)面的標(biāo)題、作者、與其他文檔的關(guān)系等。為此HTML5提供了一系列的標(biāo)簽，這些標(biāo)簽通常都寫在<head>標(biāo)簽中，被稱為頭部相關(guān)標(biāo)簽。2.3.4頭部相關(guān)標(biāo)簽實(shí)例6HTML5文檔頭部相關(guān)標(biāo)簽任務(wù)1.3〓網(wǎng)頁(yè)制作工具任務(wù)2.3〓標(biāo)簽概述設(shè)置頁(yè)面標(biāo)題標(biāo)簽<title>2.3.4頭部相關(guān)標(biāo)簽<title>標(biāo)簽用于定義HTML5頁(yè)面的標(biāo)題，即給網(wǎng)頁(yè)取一個(gè)名字，該標(biāo)簽必須位于<head>標(biāo)簽之中。一個(gè)HTML5文檔只能包含一對(duì)<title></title>標(biāo)簽，<title></title>之間的內(nèi)容將顯示在瀏覽器窗口的標(biāo)題欄中，如“蘇軾全集”。定義頁(yè)面元信息標(biāo)簽<meta/><meta/>標(biāo)簽用于定義頁(yè)面的元信息（元信息不會(huì)顯示在頁(yè)面中），可重復(fù)出現(xiàn)在<head>頭部標(biāo)簽中。在HTML5中，<meta/>標(biāo)簽是一個(gè)單標(biāo)簽，本身不包含任何內(nèi)容，僅僅表示網(wǎng)頁(yè)的相關(guān)信息。通過(guò)<meta/>標(biāo)簽的兩組屬性，可以定義頁(yè)面的相關(guān)參數(shù)。<meta/>標(biāo)簽的基本語(yǔ)法格式如下：<metaname="名稱"content="值"/><metahttp-equiv="名稱"content="值"/>任務(wù)1.3〓網(wǎng)頁(yè)制作工具任務(wù)2.3〓標(biāo)簽概述2.3.4頭部相關(guān)標(biāo)簽定義頁(yè)面元信息標(biāo)簽<meta/>使用name和content屬性可以為搜索引擎提供信息，其中name屬性用于提供搜索內(nèi)容的名稱，content屬性提供對(duì)應(yīng)的搜索內(nèi)容值。使用http-equiv和content屬性可以設(shè)置服務(wù)器發(fā)送給瀏覽器的HTTP頭部信息，為瀏覽器顯示該頁(yè)面提供相關(guān)的參數(shù)標(biāo)準(zhǔn)。http-equiv屬性提供參數(shù)類型，content屬性提供對(duì)應(yīng)的參數(shù)值。默認(rèn)會(huì)發(fā)送<metahttp-equiv="Content-Type"content="text/html"/>，通知瀏覽器發(fā)送的文件類型是HTML。任務(wù)1.3〓網(wǎng)頁(yè)制作工具任務(wù)2.3〓標(biāo)簽概述2.3.4頭部相關(guān)標(biāo)簽設(shè)置網(wǎng)頁(yè)關(guān)鍵字，name屬性的值為keywords，用于定義搜索內(nèi)容名稱為網(wǎng)頁(yè)關(guān)鍵字，content屬性的值用于定義關(guān)鍵字的具體內(nèi)容，多個(gè)關(guān)鍵字內(nèi)容之間可以用逗號(hào)分隔，如“蘇軾,蘇東坡,蘇軾全集,蘇東坡全集,蘇軾詞,宋詞,水調(diào)歌頭,東坡居士”。設(shè)置網(wǎng)頁(yè)描述，name屬性的值為description，用于定義搜索內(nèi)容名稱為網(wǎng)頁(yè)描述，content屬性的值用于定義描述的具體內(nèi)容，如“蘇軾（1037年1月8日—1101年8月24日）,字子瞻,又字和仲,號(hào)東坡居士，世稱蘇東坡,漢族,眉州眉山（今屬四川省眉山市）人,祖籍河北欒城,北宋文學(xué)家,書法家,畫家?！痹O(shè)置網(wǎng)頁(yè)作者，name屬性的值為author，用于定義搜索內(nèi)容名稱為網(wǎng)頁(yè)作者，content屬性的值用于定義具體的作者信息，如“蘇軾”。設(shè)置字符集，http-equiv屬性的值為Content-Type，content屬性的值為text/html和charset=gbk，兩個(gè)屬性值中間用分號(hào)隔開(kāi)，用于說(shuō)明當(dāng)前文檔類型為HTML，字符集為gbk（中文編碼）。常用的國(guó)際化字符集編碼格式是utf-8，常用的國(guó)內(nèi)中文字符集編碼格式是gbk和gb2312。當(dāng)用戶使用的字符集編碼與當(dāng)前瀏覽器不匹配時(shí)，網(wǎng)頁(yè)內(nèi)容就會(huì)出現(xiàn)亂碼。設(shè)置頁(yè)面自動(dòng)刷新與跳轉(zhuǎn)，http-equiv屬性的值為refresh，content屬性的值為數(shù)值和url，用分號(hào)隔開(kāi)，用于指定在特定的時(shí)間后跳轉(zhuǎn)至目標(biāo)頁(yè)面，該時(shí)間默認(rèn)以秒為單位。任務(wù)1.3〓網(wǎng)頁(yè)制作工具任務(wù)2.4〓文本控制標(biāo)簽2.4.1頁(yè)面格式化標(biāo)簽1.標(biāo)題標(biāo)簽實(shí)例7設(shè)置標(biāo)題標(biāo)簽標(biāo)題標(biāo)簽的基本語(yǔ)法格式如下：<hnalign="對(duì)齊方式">標(biāo)題文本</hn> 任務(wù)1.3〓網(wǎng)頁(yè)制作工具任務(wù)2.4〓文本控制標(biāo)簽2.4.1頁(yè)面格式化標(biāo)簽1.標(biāo)題標(biāo)簽解釋默認(rèn)情況下標(biāo)題文字是加粗左對(duì)齊顯示的，并且從<h1>到<h6>標(biāo)題字號(hào)依次遞減。如果想讓標(biāo)題文字右對(duì)齊或居中對(duì)齊，就需要使用align屬性設(shè)置對(duì)齊方式。屬性值含義left設(shè)置標(biāo)題文字左對(duì)齊（默認(rèn)值）center設(shè)置標(biāo)題文字居中對(duì)齊right設(shè)置標(biāo)題文字右對(duì)齊任務(wù)1.3〓網(wǎng)頁(yè)制作工具任務(wù)2.4〓文本控制標(biāo)簽2.4.1頁(yè)面格式化標(biāo)簽1.標(biāo)題標(biāo)簽實(shí)例8align屬性的使用任務(wù)1.3〓網(wǎng)頁(yè)制作工具任務(wù)2.4〓文本控制標(biāo)簽2.4.1頁(yè)面格式化標(biāo)簽2.段落標(biāo)簽實(shí)例9使用<p>標(biāo)簽第8行、第9行代碼分別為<h2>標(biāo)簽和<p>標(biāo)簽添加align的“center”屬性值，設(shè)置居中對(duì)齊。第10行代碼中的<p>標(biāo)簽為段落標(biāo)簽的默認(rèn)對(duì)齊方式。任務(wù)1.3〓網(wǎng)頁(yè)制作工具任務(wù)2.4〓文本控制標(biāo)簽2.4.1頁(yè)面格式化標(biāo)簽3.水平線標(biāo)簽水平線可以通過(guò)<hr/>標(biāo)簽來(lái)定義，基本語(yǔ)法格式如下：

<hr屬性="屬性值"/>屬性含義屬性值align設(shè)置水平線的對(duì)齊方式left，right，center，默認(rèn)為center，居中對(duì)齊顯示size設(shè)置水平線的粗細(xì)以px為單位，默認(rèn)為2pxcolor設(shè)置水平線的顏色可用顏色名稱，十六進(jìn)制#RGB，rgb(r，g，b)表示width設(shè)置水平線的寬度可以是確定的像素值，也可以是瀏覽器窗口的百分比，默認(rèn)為100%<hr/>標(biāo)簽的常用屬性任務(wù)1.3〓網(wǎng)頁(yè)制作工具任務(wù)2.4〓文本控制標(biāo)簽2.4.1頁(yè)面格式化標(biāo)簽3.水平線標(biāo)簽實(shí)例10<hr/>標(biāo)簽的用法第9行代碼將<hr/>標(biāo)簽設(shè)置了不同的顏色、對(duì)齊方式、粗細(xì)和寬度值。第14行代碼修改了<hr/>標(biāo)簽的顏色。其效果如圖2-15所示。任務(wù)1.3〓網(wǎng)頁(yè)制作工具任務(wù)2.4〓文本控制標(biāo)簽2.4.1頁(yè)面格式化標(biāo)簽4.換行標(biāo)簽實(shí)例11使用<br/>標(biāo)簽第8行代碼在文本里面顯示是在同一行，但是使用了<br/>標(biāo)簽，而第9行、第10行代碼在文本中是換行顯示的，采用了按Enter鍵的方式換行。任務(wù)1.3〓網(wǎng)頁(yè)制作工具任務(wù)2.4〓文本控制標(biāo)簽2.4.2文本樣式標(biāo)簽文本樣式標(biāo)簽可以設(shè)置一些文字效果（如字體、加粗、顏色），讓網(wǎng)頁(yè)中的文字樣式變得更加豐富，其基本語(yǔ)法格式如下：

<font屬性="屬性值">文本內(nèi)容</font>屬性含義face設(shè)置文字的字體，例如，微軟雅黑、黑體、宋體等size設(shè)置文字的大小，可以取1~7號(hào)之間的整數(shù)值color設(shè)置文字的顏色<font>標(biāo)簽的常用屬性任務(wù)1.3〓網(wǎng)頁(yè)制作工具任務(wù)2.4〓文本控制標(biāo)簽2.4.2文本樣式標(biāo)簽實(shí)例12使用<font>標(biāo)簽第1個(gè)段落中的文本設(shè)置為默認(rèn)段落樣式，第2~4個(gè)段落文本分別使用<font>標(biāo)簽設(shè)置了不同的文本樣式。其效果如圖2-19所示。任務(wù)1.3〓網(wǎng)頁(yè)制作工具任務(wù)2.4〓文本控制標(biāo)簽2.4.3文本格式化標(biāo)簽為文字設(shè)置粗體、斜體或下畫線等一些特殊顯示的文本效果標(biāo)簽顯示效果<b></b>和<strong></strong>文字以粗體方式顯示<u></u>和<ins></ins>文字以加下畫線方式顯示<i></i>和<em></em>文字以斜體方式顯示常用的文本格式化標(biāo)簽任務(wù)1.3〓網(wǎng)頁(yè)制作工具任務(wù)2.4〓文本控制標(biāo)簽2.4.3文本格式化標(biāo)簽實(shí)例13使用文本格式化標(biāo)簽第8行代碼設(shè)置段落文本正常顯示，第9~13行代碼分別給段落文本應(yīng)用不同的文本格式化標(biāo)簽，使文字產(chǎn)生特殊的顯示效果。任務(wù)1.3〓網(wǎng)頁(yè)制作工具任務(wù)2.4〓文本控制標(biāo)簽2.4.4文本語(yǔ)義標(biāo)簽1.<time>標(biāo)簽<time>標(biāo)簽用于定義時(shí)間或日期，可以代表24小時(shí)中的某一時(shí)間。<time>標(biāo)簽不會(huì)在瀏覽器中呈現(xiàn)任何特殊效果，但是該元素能夠以機(jī)器可讀的方式對(duì)日期和時(shí)間進(jìn)行編碼，用戶能夠?qū)⑸仗嵝鸦蚱渌录砑拥饺粘瘫碇?，搜索引擎也能夠生成更智能的搜索結(jié)果。<time>標(biāo)簽有以下兩個(gè)屬性。datetime屬性，用于定義相應(yīng)的時(shí)間或日期。取值為具體時(shí)間（如9:00）或具體日期（如2020-09-01），不定義該屬性時(shí)，由文本的內(nèi)容給定日期或時(shí)間。pubdate屬性，用于定義<time>標(biāo)簽中的文檔（或article元素）發(fā)布日期。取值一般為“pubdate”。任務(wù)1.3〓網(wǎng)頁(yè)制作工具任務(wù)2.4〓文本控制標(biāo)簽2.4.4文本語(yǔ)義標(biāo)簽實(shí)例14使用<time>標(biāo)簽如果不使用<time>標(biāo)簽，也是可以正常顯示文本內(nèi)容的，因此<time>標(biāo)簽的作用主要是增強(qiáng)文本的語(yǔ)義，方便機(jī)器解析。任務(wù)1.3〓網(wǎng)頁(yè)制作工具任務(wù)2.4〓文本控制標(biāo)簽2.4.4文本語(yǔ)義標(biāo)簽2.<mark>標(biāo)簽<mark>標(biāo)簽的主要功能是在文本中高亮顯示某些字符，該標(biāo)簽的用法與<em>標(biāo)簽和<strong>標(biāo)簽有相似之處，但是使用<mark>標(biāo)簽在突出顯示樣式時(shí)更隨意靈活。任務(wù)1.3〓網(wǎng)頁(yè)制作工具任務(wù)2.4〓文本控制標(biāo)簽2.4.4文本語(yǔ)義標(biāo)簽實(shí)例15使用<mark>標(biāo)簽使用<mark>標(biāo)簽包裹需要突出顯示樣式的內(nèi)容，高亮顯示的文字就是通過(guò)<mark>標(biāo)簽實(shí)現(xiàn)的。任務(wù)1.3〓網(wǎng)頁(yè)制作工具任務(wù)2.4〓文本控制標(biāo)簽2.4.4文本語(yǔ)義標(biāo)簽3.<cite>標(biāo)簽<cite>標(biāo)簽可以創(chuàng)建一個(gè)引用，用于對(duì)文檔引用參考文獻(xiàn)的說(shuō)明，一旦在文檔中使用了該標(biāo)簽，被標(biāo)注的文檔內(nèi)容將以斜體的樣式展示在頁(yè)面中，以區(qū)別于段落中的其他字符。任務(wù)1.3〓網(wǎng)頁(yè)制作工具任務(wù)2.4〓文本控制標(biāo)簽2.4.4文本語(yǔ)義標(biāo)簽實(shí)例16使用<cite>標(biāo)簽被<cite>標(biāo)注的文字，以斜體的樣式顯示在網(wǎng)頁(yè)中。任務(wù)1.3〓網(wǎng)頁(yè)制作工具任務(wù)2.4〓文本控制標(biāo)簽2.4.5特殊字符標(biāo)簽在瀏覽網(wǎng)頁(yè)時(shí)常常會(huì)看到一些包含特殊字符的文本，如數(shù)學(xué)公式、版權(quán)信息等。在網(wǎng)頁(yè)上顯示這些包含特殊字符的文本時(shí)，需要特殊字符標(biāo)簽。常用的特殊字符標(biāo)簽任務(wù)1.3〓網(wǎng)頁(yè)制作工具任務(wù)2.5〓圖像標(biāo)簽2.5.1常見(jiàn)的圖像格式格式特點(diǎn)GIF格式支持動(dòng)畫，同時(shí)GIF也是一種無(wú)損的圖像格式PNG格式體積小，支持透明（全透明、半透明、全不透明），并且顏色過(guò)渡更平滑，但PNG不支持動(dòng)畫JPG格式可以用于保存超過(guò)256種顏色的圖像，但是JPG是一種有損壓縮的圖像格式，這就意味著每修改一次圖片都會(huì)造成一些圖像數(shù)據(jù)的丟失。任務(wù)1.3〓網(wǎng)頁(yè)制作工具任務(wù)2.5〓圖像標(biāo)簽2.5.2圖像標(biāo)簽及常用屬性在網(wǎng)頁(yè)中顯示圖像就需要使用圖像標(biāo)簽，接下來(lái)將詳細(xì)介紹圖像標(biāo)簽<img/>和與它相關(guān)的屬性。圖像標(biāo)簽的基本語(yǔ)法格式如下：<imgsrc="圖像url"/>任務(wù)1.3〓網(wǎng)頁(yè)制作工具任務(wù)2.5〓圖像標(biāo)簽2.5.2圖像標(biāo)簽及常用屬性屬性屬性值描述srcurl圖像的路徑alt文本圖像不能顯示時(shí)的替換文本title文本鼠標(biāo)指針懸停時(shí)顯示的內(nèi)容width像素設(shè)置圖像的寬度height像素設(shè)置圖像的高度border數(shù)字設(shè)置圖像邊框的寬度vspace像素設(shè)置圖像頂部和底部的空白（垂直邊距）任務(wù)1.3〓網(wǎng)頁(yè)制作工具任務(wù)2.5〓圖像標(biāo)簽2.5.2圖像標(biāo)簽及常用屬性屬性屬性值描述hspace像素設(shè)置圖像左側(cè)和右側(cè)的空白（水平邊距）alignleft將圖像對(duì)齊到左邊right將圖像對(duì)齊到右邊top將圖像的頂端和文本的第一行文字對(duì)齊，其他文字居圖像下方middle將圖像的水平中線和文本的第一行文字對(duì)齊，其他文字居圖像下方bottom將圖像的底部和文本的第一行文字對(duì)齊，其他文字居圖像下方任務(wù)1.3〓網(wǎng)頁(yè)制作工具任務(wù)2.5〓圖像標(biāo)簽2.5.2圖像標(biāo)簽及常用屬性1.alt屬性有時(shí)頁(yè)面中的圖像可能無(wú)法正常顯示，如圖片加載錯(cuò)誤，瀏覽器版本過(guò)低等。因此，為頁(yè)面上的圖像添加替換文本是個(gè)很好的方式，在圖像無(wú)法顯示時(shí)告訴用戶該圖片的信息，這就需要使用圖像的alt屬性。實(shí)例17使用alt屬性任務(wù)1.3〓網(wǎng)頁(yè)制作工具任務(wù)2.5〓圖像標(biāo)簽2.5.2圖像標(biāo)簽及常用屬性2.width和height屬性

通常情況下，如果不為<img/>標(biāo)簽設(shè)置寬度和高度屬性，圖片會(huì)按照它的原始尺寸顯示。通過(guò)width和height屬性可以自定義圖片的寬度和高度。通常我們只設(shè)置其中的一個(gè)屬性，另一個(gè)屬性則會(huì)依據(jù)前一個(gè)屬性將原圖等比例縮放顯示。如果同時(shí)設(shè)置兩個(gè)屬性，且其比例和原圖大小的比例不一致，顯示的圖像就會(huì)變形或失真。任務(wù)1.3〓網(wǎng)頁(yè)制作工具任務(wù)2.5〓圖像標(biāo)簽2.5.2圖像標(biāo)簽及常用屬性3.border屬性網(wǎng)頁(yè)默認(rèn)情況下圖像是沒(méi)有邊框的，通過(guò)border屬性可以為圖像添加邊框，設(shè)置邊框的寬度。通過(guò)實(shí)例18來(lái)演示使用border、width和height屬性同時(shí)對(duì)圖像進(jìn)行修飾。實(shí)例18使用border、width和height屬性任務(wù)1.3〓網(wǎng)頁(yè)制作工具任務(wù)2.5〓圖像標(biāo)簽2.5.2圖像標(biāo)簽及常用屬性4.vspace和hspace屬性在網(wǎng)頁(yè)中，由于排版需要，有時(shí)候還需要調(diào)整圖像的邊距。HTML5中通過(guò)vspace和hspace屬性可以分別調(diào)整圖像的垂直邊距和水平邊距。任務(wù)1.3〓網(wǎng)頁(yè)制作工具任務(wù)2.5〓圖像標(biāo)簽2.5.2

溫馨提示

  • 1. 本站所有資源如無(wú)特殊說(shuō)明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁(yè)內(nèi)容里面會(huì)有圖紙預(yù)覽，若沒(méi)有圖紙預(yù)覽就沒(méi)有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫(kù)網(wǎng)僅提供信息存儲(chǔ)空間，僅對(duì)用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對(duì)用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請(qǐng)與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。

評(píng)論

0/150

提交評(píng)論