1、第1頁第2章 網頁基本元素本章概述 本章的學習目標主要內容第2頁本章概述隨著網絡技術的發展，網頁內容也更加豐富多樣。展示網頁內容的元素包括文本、圖像、列表、表格、鏈接等，本章將具體介紹頁面上常用的各種元素的標簽及其屬性。第3頁本章的學習目標掌握文本控制標簽的功能和使用方法。掌握圖像標簽及其各屬性的功能和使用方法。掌握網頁上常用超鏈接的設置方法。掌握列表標簽及其屬性的功能和使用方法。掌握表格標簽及其屬性的功能和使用方法。掌握頁面交互元表的功能和用法。掌握綜合應用各種頁面元素標簽及其屬性制作頁面的方法。第4頁主要內容2.1 文本控制標簽2.2 圖像標簽2.3 超鏈接標簽2.4 列表2.5 表格2.

2、6 頁面交互標簽2.7 實訓2.8 本章小結第5頁2.1 文本控制標簽本節主要內容：標題標簽段落標簽換行標簽水平線標簽文本格式化標簽范圍標簽注釋標簽特殊符號第6頁2.1.1 案例分析【案例展示】招商加盟-加盟中心局部頁面的設計。使用標題標簽、段落標簽、換行標簽、水平線標簽、文本格式控制標簽等，設計招商加盟-加盟中心局部頁面，【知識要點】標題標簽、段落標簽、換行標簽、水平線標簽、文本格式控制標簽等網頁元素。【學習目標】掌握標題標簽、段落標簽、換行標簽、水平線標簽、文本格式控制標簽的作用并靈活應用。參考代碼：2-1.html第7頁2.1.2 標題標簽語法格式：標題文字說明： n的取值為1到6。 a

3、lign為可選屬性，用來設置標題在頁面的對齊方式，取值 left（左對齊）、center（居中對齊）、right（右對齊），默認取值left。 參考示例：2-1-1.html第8頁2.1.3 段落標簽語法格式：段落文字說明： 參數align的取值和功能參考標題標簽中說明第9頁2.1.4 換行標簽語法格式：文字 或 文字使用換行標簽，可以使頁面內容整齊、美觀。第10頁2.1.5 水平線標簽語法格式：屬性介紹： align：參考標題標簽中align說明。 size：設置水平線的粗細，n取正整數，默認為2像素。 width：設置水平線的長度，n取正整數表示確定的像素值，也可以是瀏覽器窗口的百分比，默

4、認為100%。 color：設置水平線的顏色，默認黑色。可以用顏色名稱、十六進制#RGB或rgb(r,g,b)來表示。 noshade：設置水平線是否要陰影，默認有陰影。例：定義一條水平線，居中顯示、粗5px、寬400px、紅色、無陰影。代碼如下。第11頁2.1.6 文本格式化標簽參考示例：2-1-2.html標簽顯示效果和文字以粗體方式顯示，b定義文本粗體，strong定義強調文本和文字以斜體方式顯示，i定義斜體字，em定義強調文本和文字以加刪除線方式顯示(HTML5不贊成使用s)和文字以加下劃線方式顯示(HTML5不贊成使用u)文字高亮顯示創建一個引用標記，被標記的文字以斜體的方式顯示第1

5、2頁2.1.7 范圍標簽語法格式：區域元素說明：與之間只能包含文本和各種行內標簽，用來定義網頁中某些特殊顯示的文本，配合class屬性使用。它本身沒有固定的格式表現，只有應用樣式時，才會產生視覺上的變化。第13頁2.1.8 注釋標簽語法格式：說明：注釋內容可以為一行，也可以為多行。并且開始標簽和結束標簽可以不在一行上。第14頁2.1.9 特殊符號特殊符號描述字符的代碼 空格符小于號 大于號&和號&￥人民幣版權注冊商標攝氏度正負號乘號除號2.1.10 案例制作制作完成演示案例:加盟中心。參考代碼 2-1.html第15頁第16頁2.2 圖像標簽 本節主要內容：常用圖像格式圖像標簽及其屬性絕對路徑

6、與相對路徑第17頁2.2.1 案例分析【案例展示】新聞動態-資訊詳情局部頁面的設計。使用圖像標簽，標題標簽、段落標簽等，設計完成資訊詳情局部頁面的設計。【知識要點】圖像標簽的定義、圖像屬性設置、圖文混排。【學習目標】掌握圖像格式設置和圖文混排技術。參考代碼：2-2.html第18頁2.2.2 常用圖像格式網頁圖像有三種常用的格式：GIF、JPG和PNG。具體區別如下。（1）GIF格式GIF格式支持動畫，同時GIF格式也是一種無損的圖像格式。再加上GIF格式支持透明(全透明或全不通明)，因此很適合在互聯網上使用。GIF格式文件最多使用256種顏色，適合顯示色調不連續或具有大面積單一顏色的圖像，如

7、Logo、小圖標及其他色彩相對單一的圖像。（2）PNG格式PNG格式是一種替代GIF格式的無專利權限制的格式。PNG格式最大的優勢是體積更小，支持alpha透明（全透明、半透明、全不透明），并且顏色過渡更平滑，但PNG格式不支持動畫。它包括對索引色、灰度、真彩色圖像以及Alpha通道透明的支持。（3）JPG格式JPG格式所能顯示的顏色比GIF格式和PNG格式要多得多，可以用來保存超過256種顏色的圖像。JPG格式主要用于攝影或者連續色調圖像。2.2.3 圖像標簽及其屬性語法格式： 第19頁2.2.3 圖像標簽及其屬性屬性介紹： src：用于指定圖像文件的路徑和文件名，是標簽的必需屬性。 wid

8、th：設置圖像的顯示寬度，單位是像素或百分比。 height：設置圖像的顯示高度，單位是像素或百分比。 alt：圖像不能顯示時，代替圖像的說明文字。 border：設置圖像邊框的寬度，單位是像素。 align：設置圖像的對齊方式，取值left、center、right。 title：鼠標指向圖片時，顯示的提示文字。 hspace：定義圖像左側和右側的空白。 vspace：定義圖像頂部和底部的空白。第20頁2.2.3 圖像標簽及其屬性指定圖像大小： 用width和height屬性用來定義圖片的寬度和高度，其目的是通過指定圖像的高度和寬度加快圖像的下載速度。參考示例：2-2-1.html第21頁2

9、.2.3 圖像標簽及其屬性指定圖像的替換文本： alt屬性指定的替換文本參考示例：2-2-2.html第22頁2.2.3 圖像標簽及其屬性指定圖像的邊框： 通過border屬性可以為圖像添加邊框，設置邊框的寬度，添加邊框后的圖像顯得更醒目、美觀。邊框的顏色默認黑色，不可調整。參考示例：2-2-3.html第23頁2.2.3 圖像標簽及其屬性指定圖像的對齊方式： 圖文混排技術是指設置圖像與同一行中的文本、圖像、插件或其它元素的對齊方式。默認情況下圖像的底部會相對于于文本的第一行文字對齊。但是在制作網頁的過程中，有時需要實現圖像和文字的環繞效果，這就需要使用圖像的對齊屬性align。參考示例：2-

10、2-4.html第24頁2.2.4 絕對路徑與相對路徑網頁中路徑分兩種：絕對路徑和相對路徑。1. 絕對路徑 絕對路徑是包括通信協議名、服務器名、路徑及文件名的完整路徑，是網頁上的文件或目錄在硬盤上的真正路徑。2. 相對路徑 相對路徑就是相對于當前文件的路徑，相對路徑不帶有盤符，通常是以HTML網頁文件為起點，通過層級關系描述目標文件的位置。第25頁2.2.5 案例制作制作完成演示案例:資訊詳情局部頁面。參考代碼 2-2.html第26頁第27頁2.3 超鏈接標簽 本節主要內容：超鏈接簡介超鏈接的應用第28頁2.3.1 案例分析【案例展示】鏈接案例網站信息頁面。使用頁面間鏈接、網站間鏈接、可下載

11、文件鏈接等知識，制作網站信息頁面。【知識要點】超鏈接的定義、頁面間鏈接、網站間鏈接、下載文件鏈接等。【學習目標】掌握各種超鏈接 的應用場合和實現技術。參考代碼：2-3.html2.3.2 超鏈接簡介語法格式：超文本說明： 在上面的語法中，標簽用于定義超鏈接，href和 target為其常用屬性。 href：用于指定鏈接目標的url地址。需要創建空鏈接時，用“#”代替URL。 target：用于指定鏈接頁面的打開方式，常用的取值有_self和_blank兩種， _self為默認值，意為在原窗口中打開，_ blank為在新窗口中打開。第29頁2.3.3 超鏈接的應用1. 站內頁面之間的鏈接 同一網

12、站域名下的各頁面之間可以用超鏈接實現互相鏈接訪問。 例如，在首頁以外的其他頁面上，點擊超鏈接“首頁”返回網站首頁。代碼如下。 首頁 4. 下載鏈接5. 圖像做超鏈接6. 錨記鏈接第30頁2.3.3 超鏈接的應用2. 網站之間的鏈接不同網站之間通過超鏈接實現信息和資源共享。例如，在網頁上，點擊超鏈接“163郵箱”打開163網易郵箱首頁。代碼如下。 163郵箱 例如，點擊超鏈接“百度百科超鏈接”打開百度百科網站上關于超鏈接介紹的頁面。代碼如下。百度百科-超鏈接 第31頁2.3.3 超鏈接的應用3. 媒體鏈接 超鏈接除了可鏈接文本外，也可鏈接各種媒體，如聲音、圖像和動畫等，通過它們可以將網站建設成一

13、個豐富多彩的多媒體世界。 例如，點擊超鏈接“MP4視頻”打開視頻文件并開始播放。代碼如下。 MP4視頻 第32頁2.3.3 超鏈接的應用4. 下載鏈接如果超鏈接指向不是一個網頁文件，而是其他文件，如doc、xls、zip、rar文件等，單擊鏈接時就會下載相應的文件。例如，點擊超鏈接“合作協議下載”，開始下載文件。代碼如下。合作協議下載 注意：在項目文件夾的datum目錄里，有“合作協議.zip”文件，才能點擊下載。第33頁2.3.3 超鏈接的應用5. 圖像做超鏈接 為了增加頁面的美觀性，有時用圖像代替文字做超鏈接。例如，超鏈接中的“首頁”超文本，用圖片替換。代碼如下。 鏈接圖像在低版本的IE瀏

14、覽器中會添加邊框效果，去掉鏈接圖像的邊框只需將邊框定義為0即可。第34頁2.3.3 超鏈接的應用6. 錨記鏈接 創建錨記鏈接，需要兩個步驟。 (1) 首先定義錨記名稱。 格式1：目標附近的文本 格式2：網頁內容，E代表html標簽，如p、hn、div等。 (2) 然后，定義錨記鏈接。點擊超文本時，跳轉到錨記名或id名開始的位置。 格式：超文本第35頁2.3.4 案例制作制作完成演示案例:網站信息頁面。參考代碼 2-3.html第36頁第37頁2.4 列表 本節主要內容：無序列表有序列表定義列表嵌套列表第38頁2.4.1 案例分析【案例展示】招商加盟-合作方式局部頁面。使用多種列表技術設計招商加

15、盟-合作方式頁面。【知識要點】無序列表、有序列表、定義列表和嵌套列表【學習目標】掌握各種列表的使用方法和列表嵌套技術。參考代碼：2-4.html2.4.2 無序列表語法格式： 列表項1列表項2 屬性type定義無序列表的前導符號。取值circle（圓圈）、disc（圓點）和square（方塊），默認disc。參考示例：2-4-1.html第39頁2.4.3 有序列表語法格式： 列表項1列表項2 屬性介紹： type：列表項的符號類型，取值1（阿拉伯數字）、a（小寫英文字母）、A（大寫英文字母）、i（小寫羅馬數字）、I（大寫羅馬數字），默認符號是阿拉伯數字。 start：列表項編號的起始值，取值

16、正整數。默認取值1，即編號從1開始。 reversed：是否對列表項反向排序，當取值為“reversed”時，反向排序。參考示例：2-4-2.html第40頁2.4.4 定義列表語法格式： 標題1 標題1的描述1 標題1的描述2 標題2 標題2的描述1 標題2的描述2 說明：標簽指定定義列表，標簽指定列表項的標題，標簽對標題進行描述。參考示例：2-4-3.html第41頁2.4.5 嵌套列表所謂嵌套列表就是無序列表與有序列表嵌套混合使用。嵌套列表可以把頁面分為多個層次，給人以很強的層次感。參考示例：2-4-4.html第42頁2.4.6 案例制作制作完成演示案例:合作方式局部頁面。參考代碼 2

17、-4.html第43頁2.5 表格 第44頁本節主要內容： 表格的結構 表格的基本語法 表格的修飾 不規范表格2.5.1 案例分析【案例展示】LED射燈介紹局部頁面。使用表格技術，制作LED射燈介紹局部頁面。【知識要點】表格元素、語法、表格修飾的設置。【學習目標】掌握設置表格屬性的方法。第45頁2.5.2 表格的結構表格是由行和列組成的二維表，而每行又由一個或多個單元格組成，用于放置數據或其他內容。表格中的內容按照相應的行或列進行分類和顯示。第46頁2.5.3 表格的基本語法 表格標題 表頭1表頭2表頭n 表頭2-1表頭2-2表頭2-n 表頭m-1表頭m-2表頭m-n第47頁2.5.3 表格的

18、基本語法表格的整體外觀由標簽的屬性決定。border：定義表格邊框的寬度，單位是像素。默認值“0”，顯示為沒有邊框的表格。width：定義表格的寬度，單位是像素或百分比。height：定義表格的高度，單位是像素或百分比。cellspacing：定義單元格之間的空白，單位是像素，默認2px。cellpadding：定義單元格邊框與內容之間的空白, 單位是像素，默認1px。參考示例：2-5-1.html第48頁2.5.4 表格的修飾表格是網頁布局中的重要元素，可以對其設置進而美化表格。設置表格大小設置表格背景設置表格的對齊方式設置表格中數據的對齊方式參考示例：2-5-3.html第49頁2.5.5

19、 不規范表格1跨行跨行是指單元格在垂直方向上合并，語法如下： 單元格內容2跨列跨列是指單元格在水平方向上合并，語法如下： 單元格內容3跨行、跨列參考示例：2-5-4.html第50頁2.5.6 案例制作制作完成演示案例:LED射燈介紹局部頁面。參考代碼 2-5.html第51頁2.6 頁面交互標簽 第52頁本節主要內容： details和summary元素表格的基本語法 progress元素 meter元素2.6.1 details和summary元素details元素用于顯示或隱藏文檔的細節信息用details和summary實現信息顯示/隱藏功能的代碼格式如下： 標題 文檔詳細信息 屬性open:取值open，定義details是否顯示。默認不顯示。參考示例：2-6-1.html第53頁2.6.2 progress元素progress元素用于顯示某個特定任務的時間進度語法格式：屬性介紹： value：定