網(wǎng)頁(yè)設(shè)計(jì)與制作 課件 項(xiàng)目2 認(rèn)識(shí)網(wǎng)頁(yè)中常用的元素_第1頁(yè)
網(wǎng)頁(yè)設(shè)計(jì)與制作 課件 項(xiàng)目2 認(rèn)識(shí)網(wǎng)頁(yè)中常用的元素_第2頁(yè)
網(wǎng)頁(yè)設(shè)計(jì)與制作 課件 項(xiàng)目2 認(rèn)識(shí)網(wǎng)頁(yè)中常用的元素_第3頁(yè)
網(wǎng)頁(yè)設(shè)計(jì)與制作 課件 項(xiàng)目2 認(rèn)識(shí)網(wǎng)頁(yè)中常用的元素_第4頁(yè)
網(wǎng)頁(yè)設(shè)計(jì)與制作 課件 項(xiàng)目2 認(rèn)識(shí)網(wǎng)頁(yè)中常用的元素_第5頁(yè)
已閱讀5頁(yè)，還剩23頁(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ù)2-1認(rèn)識(shí)HTML標(biāo)簽

任務(wù)2-2使用文本控制標(biāo)簽

任務(wù)2-3使用圖像標(biāo)簽

任務(wù)2-4使用列表標(biāo)簽

任務(wù)2-5使用超鏈接標(biāo)簽任務(wù)2-1認(rèn)識(shí)HTML標(biāo)簽1.認(rèn)識(shí)HTML文件的基本結(jié)構(gòu)HTML文件的語(yǔ)法結(jié)構(gòu)十分簡(jiǎn)單，其基本結(jié)構(gòu)如下：從上面給出的HTML結(jié)構(gòu)可以看出，HTML文檔包括以下3個(gè)主要標(biāo)記：(1)文檔標(biāo)記<html>…</html>：標(biāo)示HTML文檔的開(kāi)頭和結(jié)尾。它是一個(gè)根標(biāo)記，告知瀏覽器其自身是一個(gè)HTML文檔。(2)頭部標(biāo)記<head>…</head>：用來(lái)定義整個(gè)文檔的屬性和文檔的標(biāo)題，這部分的標(biāo)題信息在瀏覽器的窗口中顯示出來(lái)，可以包括標(biāo)題(<title>)、頭元素(<meta>)、代碼(<script>)等。(3)主體標(biāo)記<body>…</body>：<body>與</body>之間的部分，是文檔的主要部分，在瀏覽器中顯示的內(nèi)容和顯示內(nèi)容的格式標(biāo)記都放在這里，如文字、圖像、動(dòng)畫(huà)、表格等。在編寫(xiě)HTML代碼時(shí)，必須遵守以下規(guī)范：(1)所有標(biāo)記都必須有一個(gè)相應(yīng)的結(jié)束標(biāo)記。(2)所有標(biāo)記和屬性的名稱(chēng)都必須小寫(xiě)。(3)所有標(biāo)記都必須合理嵌套。(4)所有屬性值必須用雙引號(hào)括起來(lái)。(5)把<、>和&等符號(hào)用編碼表示。(6)所有屬性都要賦一個(gè)值。(7)注釋標(biāo)記<!--注釋內(nèi)容-->2.認(rèn)識(shí)標(biāo)簽在HTML頁(yè)面中，帶有“<>”符號(hào)的元素被稱(chēng)為HTML標(biāo)簽，如上面<body>、<title>都是HTML標(biāo)簽，也稱(chēng)HTML標(biāo)記或HTML元素，本書(shū)稱(chēng)為標(biāo)簽。1)標(biāo)簽的分類(lèi)根據(jù)標(biāo)簽組成的特點(diǎn)，HTML標(biāo)簽可分為雙標(biāo)簽和單標(biāo)簽兩類(lèi)。(1)雙標(biāo)簽。雙標(biāo)簽由開(kāi)始和結(jié)束兩個(gè)標(biāo)簽組成，其基本語(yǔ)法格式如下：<標(biāo)簽名>內(nèi)容</標(biāo)簽名>(2)單標(biāo)簽。單標(biāo)簽是指用一個(gè)標(biāo)簽符號(hào)就能完整地描述某個(gè)功能的標(biāo)簽。其基本語(yǔ)法格式如下：<標(biāo)簽名/>2)標(biāo)簽的關(guān)系一個(gè)網(wǎng)頁(yè)中會(huì)存在多種標(biāo)簽，各標(biāo)簽之間具有一定的關(guān)系。根據(jù)標(biāo)簽的位置，標(biāo)簽的關(guān)系主要有嵌套關(guān)系和并列關(guān)系兩種。圖2-1所示是HTML的結(jié)構(gòu)，其中就包含了這兩種關(guān)系。(1)嵌套關(guān)系。嵌套關(guān)系就是平常所說(shuō)的包含關(guān)系，即在一個(gè)雙標(biāo)簽里包含其他的標(biāo)簽。(2)并列關(guān)系。并列關(guān)系也稱(chēng)兄弟關(guān)系，就是兩個(gè)標(biāo)簽處于同一級(jí)別，并且沒(méi)有包含關(guān)系。3)注釋HTML中有兩種注釋方法：(1)?<!--注釋內(nèi)容-->：常用于注釋一段內(nèi)容。(2)?<!注釋內(nèi)容>：常用于說(shuō)明標(biāo)簽里的內(nèi)容。注釋內(nèi)容只為閱讀者提供閱讀代碼的方便，在瀏覽器窗口中不顯示。通常，標(biāo)簽包括以下5種：(1)聲明文檔類(lèi)型標(biāo)簽。!doctype聲明位于HTML文檔的最前面，在<html>標(biāo)簽之前，用于告知瀏覽器文檔使用哪種HTML或XHTML規(guī)范。(2)?html標(biāo)簽。html標(biāo)簽用于表示HTML文件的開(kāi)始與結(jié)束。Web頁(yè)面所有內(nèi)容都位于這兩個(gè)標(biāo)簽之間。(3)?head標(biāo)簽。<head>標(biāo)簽又稱(chēng)首部標(biāo)簽符，位于Web頁(yè)的開(kāi)頭。Head標(biāo)簽用于描述HTML文檔本身的信息，如網(wǎng)頁(yè)標(biāo)題、關(guān)鍵字等，但不包括Web頁(yè)的任何實(shí)際內(nèi)容。除了網(wǎng)頁(yè)標(biāo)題在瀏覽器的標(biāo)題欄顯示外，其他一般不會(huì)顯示在瀏覽器中。(4)?title標(biāo)簽。<title>標(biāo)簽用來(lái)說(shuō)明網(wǎng)頁(yè)的主題或用途，顯示在瀏覽器的標(biāo)題欄。(5)?meta標(biāo)簽。meta標(biāo)簽不顯示在頁(yè)面中，一般用來(lái)定義頁(yè)面信息、關(guān)鍵字、刷新等。meta不需設(shè)置結(jié)束標(biāo)記。通常使用<metacharset="utf-8">格式，表示meta標(biāo)簽定義網(wǎng)頁(yè)中所使用的字符集為utf-8。任務(wù)2-2使用文本控制標(biāo)簽1.頁(yè)面格式化標(biāo)簽1)標(biāo)題標(biāo)簽HTML提供了6個(gè)等級(jí)的標(biāo)題標(biāo)簽，即<h1>、<h2>、<h3>、<h4>、<h5>和<h6>，從<h1>到<h6>標(biāo)題的重要性依次遞減。其格式如下：<hn>標(biāo)題文本</hn>n取1～6間的值。若想讓標(biāo)題文字呈對(duì)齊(左對(duì)齊、居中對(duì)齊、右對(duì)齊)方式，可在標(biāo)簽里設(shè)置align屬性來(lái)實(shí)現(xiàn)，其格式如下：<hnalign="對(duì)齊方式">標(biāo)題文本</hn>說(shuō)明：“對(duì)齊方式”的取值如下：(1)?left：設(shè)置標(biāo)題文字左對(duì)齊(默認(rèn)值)。(2)?right：設(shè)置標(biāo)題文字右對(duì)齊。(3)?center：設(shè)置標(biāo)題文字居中對(duì)齊。2)段落標(biāo)簽在網(wǎng)頁(yè)中使用<p>標(biāo)簽來(lái)定義段落。<p>標(biāo)簽是HTML文檔中最常見(jiàn)的標(biāo)簽，默認(rèn)情況下，文本在一個(gè)段落中會(huì)根據(jù)瀏覽器窗口的大小自動(dòng)換行。<p>標(biāo)簽的格式如下：<palign="對(duì)齊方式">段落文本</p>3)水平線標(biāo)簽在網(wǎng)頁(yè)中常?？吹揭恍┧骄€將段落與段落之間隔開(kāi)，使得文檔結(jié)構(gòu)清晰，層次分明。這些水平線可以通過(guò)<hr/>標(biāo)簽來(lái)定義。<hr/>是一個(gè)單標(biāo)簽，其定義格式如下：<hr屬性="屬性值"/><hr/>常用的屬性如表2-1所示。4)換行標(biāo)簽在Word中，按“Enter”鍵可以將一段文字換行顯示，但在網(wǎng)頁(yè)中，如果想要將某段文本強(qiáng)制換行顯示，就需要使用換行標(biāo)簽<br/>。在Dw設(shè)計(jì)窗口，可按“shift+Enter”鍵換行。2.文本樣式標(biāo)簽文本樣式標(biāo)簽<font>用來(lái)控制網(wǎng)頁(yè)中文本的效果(如字體、字號(hào)和顏色等)，讓網(wǎng)頁(yè)中的文字樣式變得更加豐富。文本樣式標(biāo)簽的基本語(yǔ)法格式如下：<font屬性="屬性值">文本內(nèi)容</font><font>標(biāo)簽中常用的屬性如表2-2所示。3.文本格式化標(biāo)簽網(wǎng)頁(yè)中經(jīng)常需要為文字設(shè)置粗體、斜體或下畫(huà)線等一些特殊的文本效果，此時(shí)可以使用HTML提供的文本格式化標(biāo)簽實(shí)現(xiàn)文字的特殊顯示。常用的文本格式化標(biāo)簽如表2-3所示。4.文本語(yǔ)義標(biāo)簽在HTML中，文本語(yǔ)義標(biāo)簽有很多，這里列舉mark和cite標(biāo)簽，并簡(jiǎn)要介紹其應(yīng)用。1)?mark標(biāo)簽mark標(biāo)簽的主要功能是在文本中讓某些字符高亮顯示，該元素的用法與em標(biāo)簽和strong標(biāo)簽有相似之處，但mark標(biāo)簽在突出顯示樣式時(shí)更隨意、靈活。2)?cite標(biāo)簽cite標(biāo)簽可以創(chuàng)建一個(gè)引用，用于對(duì)文檔引用參考文獻(xiàn)的說(shuō)明，一旦在文檔中使用了該標(biāo)簽，被標(biāo)注的文檔內(nèi)容將以斜體的樣式展示在頁(yè)面中，以區(qū)別于段落中的其他字符。5.特殊字符標(biāo)簽網(wǎng)頁(yè)中有些字符是不能直接輸入的，為此HTML為這些字符提供了專(zhuān)門(mén)的替代代碼，如表2-4所示。任務(wù)2-3使用圖像標(biāo)簽1.認(rèn)識(shí)常見(jiàn)的圖像格式網(wǎng)頁(yè)中通常使用以下幾種文件格式。1)?JPEG文件格式JPEG(JointPhotographicExpertsGroup)圖像格式常用于全彩圖像，在Web中常見(jiàn)。它是將原始的圖像壓縮后的格式，其壓縮比較大，在圖像打開(kāi)時(shí)自動(dòng)解壓縮。JPEG格式支持CMYK、RGB和灰度顏色模式，但不支持Alpha通道。與GIF格式不同，JPEG保留RGB圖像中的所有顏色信息，只是有選擇地扔掉數(shù)據(jù)來(lái)壓縮文件大小。2)?GIF文件格式GIF(GraphicsInterchangeFormat)圖像格式是一種圖像交換格式，僅支持256色，常用于Web圖像。GIF又細(xì)分為兩種格式即87a和89a，其中89a可存儲(chǔ)動(dòng)畫(huà)和透明背景效果。3)?PNG文件格式PNG(PortableNetworkGraphics)圖像格式使用的是無(wú)丟失壓縮方式，支持24位圖像，能生成透明的背景，是網(wǎng)絡(luò)上的一種新生文件格式。它的最大特點(diǎn)是將JPEG和GIF兩種格式的優(yōu)點(diǎn)很好地結(jié)合在一起使用。4)?TIFF文件格式TIFF(Tagged-imageFileFormat)是掃描儀常用的格式，支持跨平臺(tái)的軟件應(yīng)用。TIFF文檔的文件最大可達(dá)4?GB。TIFF格式支持具有Alpha通道的CMYK、RGB、Lab、索引顏色和灰度圖像，并支持無(wú)Alpha通道的位圖模式圖像。5)?SWF文件格式SWF(ShockWaveFlash)文件格式是基于矢量圖像的文件格式，它用于創(chuàng)建適合Web的可縮放的小型圖像。因?yàn)槲募袷交谑噶?，所以在任何分辨率下圖像都可以保持圖像品質(zhì)，特別適用于動(dòng)畫(huà)幀的創(chuàng)建。6)?SVG文件格式SVG(ScalableVectorGraphics)是將圖像描述為形狀、路徑、文本和濾鏡效果的矢量格式。生成的文件很緊湊，在Web上可以設(shè)計(jì)激動(dòng)人心的、高分辨率的Web圖像頁(yè)面，甚至在資源十分有限的手持設(shè)備中都可提供高品質(zhì)的圖像。2.圖像的路徑若網(wǎng)頁(yè)中有圖像，則瀏覽器在渲染時(shí)需要知道圖像的位置即圖像的路徑。如果不知道路徑，就不能夠正確顯示圖像。因此，在網(wǎng)頁(yè)中插入圖像，就需要采用“路徑”的方式來(lái)指定圖像文件的位置。通過(guò)設(shè)置“路徑”來(lái)幫助瀏覽器找到圖像文件。路徑有絕對(duì)路徑和相對(duì)路徑。1)絕對(duì)路徑絕對(duì)路徑一般是指帶有盤(pán)符的路徑，或完整的網(wǎng)絡(luò)地址。2)相對(duì)路徑相對(duì)路徑不帶有盤(pán)符，通常是以HTML網(wǎng)頁(yè)文件為起點(diǎn)，通過(guò)層級(jí)關(guān)系描述目標(biāo)圖像的位置。相對(duì)路徑的設(shè)置通常有以下3種形式：(1)圖像文件和html文件位于同一文件夾。只需輸入圖像文件的名稱(chēng)即可。(2)圖像文件位于HTML文件的下一級(jí)文件夾。輸入文件夾名和文件名，之間用“/”隔開(kāi)。(3)圖像文件位于HTML文件的上一級(jí)文件夾。在文件名之前加入“../”，如果是上兩級(jí)，則需要使用“../../”，以此類(lèi)推。3.圖像標(biāo)簽<img/>在網(wǎng)頁(yè)中使用<img>標(biāo)簽顯示圖像。圖像標(biāo)簽的基本語(yǔ)法格式如下：<imgsrc="圖像URL"/><img/>標(biāo)簽的屬性如表2-5所示。下面介紹<img>標(biāo)簽的屬性。1)圖像的替換文本屬性alt當(dāng)頁(yè)面中的圖像無(wú)法正常顯示時(shí)，我們可以使用alt屬性告知用戶原因。2)鼠標(biāo)懸停在圖像上時(shí)顯示的內(nèi)容屬性title<img/>標(biāo)簽的title屬性用來(lái)設(shè)置當(dāng)鼠標(biāo)懸停在圖像上時(shí)顯示文本信息。3)圖像的寬度width和高度height屬性通過(guò)width和height屬性可以設(shè)置圖像的寬度和高度。若只設(shè)一個(gè)屬性，則另一個(gè)按等比縮放。如果不設(shè)置圖像的width和height屬性，則圖像按照原始尺寸顯示。4)圖像的邊框?qū)傩詁order默認(rèn)情況下圖像是沒(méi)有邊框的，可以使用border屬性為圖像加邊框，猶如給真實(shí)的畫(huà)裝裱。5)圖像的邊距屬性vspace和hspaceHTML中通過(guò)vspace和hspace屬性分別調(diào)整圖像的垂直邊距和水平邊距。6)圖像的對(duì)齊屬性align圖文混排是網(wǎng)頁(yè)中常見(jiàn)的排版方式，默認(rèn)情況下圖文按上下關(guān)系。要實(shí)現(xiàn)圖文混排，可使用對(duì)齊屬性align。align的取值分別為left(左對(duì)齊)和right(右對(duì)齊)。任務(wù)2-4使用列表標(biāo)簽列表的主要用途是簡(jiǎn)單明了地羅列各項(xiàng)內(nèi)容之間的層次關(guān)系，為訪問(wèn)者閱讀網(wǎng)頁(yè)提供方便。HTML為用戶提供了無(wú)序列表、有序列表和定義列表3種形式。1.無(wú)序列表無(wú)序列表是網(wǎng)頁(yè)中最常用的列表，其各個(gè)列表項(xiàng)之間沒(méi)有順序級(jí)別之分，通常是并列的。定義無(wú)序列表的基本語(yǔ)法格式如下：其中：(1)?<ul></ul>標(biāo)簽用于定義無(wú)序列表。(2)每對(duì)<ul></ul>中至少應(yīng)包含一對(duì)<li></li>。(3)?<ul>和<li>都擁有type屬性，用于指定列表項(xiàng)目符號(hào)。無(wú)序列表的type屬性值如表2-6所示。不贊成使用無(wú)序列表的type屬性，一般通過(guò)CSS樣式屬性替代。<li>與</li>之間相當(dāng)于一個(gè)容器，可以容納所有的元素。但是<ul></ul>中只能嵌套<li></li>，不允許直接在<ul></ul>標(biāo)簽中輸入文字。2.有序列表有序列表即為有排列順序的列表，其各個(gè)列表項(xiàng)按照一定的順序排列。網(wǎng)頁(yè)中常見(jiàn)的歌曲排行榜、游戲排行榜等都可以通過(guò)有序列表來(lái)定義。定義有序列表的基本語(yǔ)法格式如下：其中：(1)?<ol></ol>標(biāo)簽用于定義有序列表。(2)?<li></li>標(biāo)簽用于描述具體的列表項(xiàng)。(3)每對(duì)<ol></ol>中至少應(yīng)包含一對(duì)<li></li>。有序列表中，除了type屬性之外，還可以為<ol>定義start屬性、為<li>定義value屬性。有序列表的相關(guān)屬性如表2-7所示。注意：(1)各瀏覽器對(duì)有序列表的type和value屬性的解析不同。(2)不贊成使用<ol>、<li>的type、start和value屬性，一般通過(guò)CSS樣式屬性替代。3.定義列表定義列表用于對(duì)術(shù)語(yǔ)或名詞進(jìn)行解釋和描述。與無(wú)序和有序列表不同，定義列表的列表項(xiàng)前沒(méi)有任何項(xiàng)目符號(hào)。下面介紹列表的嵌套應(yīng)用。在使用列表時(shí)，列表項(xiàng)中也有可能包含若干子列表項(xiàng)。這種在列表項(xiàng)中定義子列表項(xiàng)的方法被稱(chēng)為列表的嵌套。列表嵌套的方法十分簡(jiǎn)單，我們只需將子列表嵌套在上一級(jí)列表項(xiàng)中即可。下面給出一個(gè)有序列表嵌套一個(gè)無(wú)序列表的格式。任務(wù)2-5使用超鏈接標(biāo)簽1.超鏈接在HTML中創(chuàng)建超鏈接非常簡(jiǎn)單，只需用<a></a>標(biāo)簽環(huán)繞需要被鏈接的對(duì)象即可。其語(yǔ)法格式如下：<ahref="跳轉(zhuǎn)目標(biāo)"target="目標(biāo)窗口的彈出方式">文本或圖像</a>其中：(1)?href：用于指定鏈接目標(biāo)的URL地址，當(dāng)為<a>標(biāo)簽應(yīng)用href屬性時(shí)，它就具有了超鏈接的功能。(2)?target：用于指定鏈接頁(yè)面的打開(kāi)方式，其取值有_self和_blank兩種，其中_self為默認(rèn)值，意為在原窗口中打開(kāi)，_blank為在新窗口中打開(kāi)。需要注意的是：(1)暫時(shí)沒(méi)有確定鏈接目標(biāo)時(shí)，通常將<a>標(biāo)簽的href屬性值定義為“#”(即hr

溫馨提示

  • 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)論