HTML實例源碼

實例一

1.要求：

知識要點：?html?文檔的基本結構，html?標簽的書寫格式、作用、用法?實訓目的：?掌握?html?文檔的基本結構，掌握?html?代碼網頁編輯的基本方法實訓內容：? ?標簽等,?在網頁中插入文字　　　　　　?標簽及其屬性：bgcolor、?background、?text、?link、?alink、?vlink、leftmargin、?topmargin?特別提醒：?當有而丟掉或書寫錯誤時，文檔不能正確瀏覽在html文檔中，、、?被完全省略、部分省略或嵌套不嚴格，是允許的，但這卻不是一個好習慣用記事本編輯網頁文件，在保存文件時，一定要注意文件擴展名寫為.html?或?.htm?問題導學：?請聽本頁有優美的背景音樂“貝多芬第五交響樂”，如果想刪除背景，如何改寫代碼？

實例二

1.要求：

知識要點：?以默認格式顯示文字，用FONT標簽設置顯示文字的格式實訓目的：?掌握設置網頁中文字的大小、字體、字型、字號、顏色等實訓內容：? 標簽及其屬性：face、size、color、?、、 標簽等知識擴展：?控制文字的大小、字體、字型、字號、顏色，還可以使用?CSS 樣式

操作提示：?按下?"新窗口瀏覽" 按鈕可在新窗口中瀏覽所編輯的網頁本網頁下部有圖片素材和音樂素材, 可用作背景圖片或背景音樂插入網頁中, 路徑在其下方可復制引用

實例三

1.要求：

知識要點：?設置文章及章節的標題實訓目的：?掌握在網頁中設標題文字的方法，包括標題文字的大小、對齊方式等。實訓內容：?

…

標簽及其屬性：align?

提高練習：?練習設置標題文字的字體、顏色、字型等

操作提示：?編輯左框中的代碼,按下 "查看結果" 按鈕, 網頁的瀏覽效果會顯示在右框中在新窗口中瀏覽網頁,可改變窗口大小以詳細觀察效果

實例4

1.要求：

實訓目的：?掌握網頁中文字的排版控制等實訓內容：?

等標簽及其屬性：style，注意 與 的區別?設計技巧：?hmtl 代碼中的空格及回車換行符，在瀏覽器釋讀時會被略，網頁中需用空格時，可用字符實體 "?"或全角空格代替；　回車換行符可用標記?或代替知識擴展：?< > &" 這幾個重要符號及回車換行符也不能被瀏覽器正確釋讀，通常也需要用字符實體替代?< ：<> ：>& ：&" ："

操作提示：?在新窗口中瀏覽網頁，并改變窗口大小，可以詳細觀察　

所控制的段落的排版規律

實例5

1.要求：

實訓目的：?掌握在網頁中插入圖片并設置圖片的大小、對齊方式、替代文字、是否有邊框及邊框的寬度等實訓內容：?標簽及其屬性：src、 align、 border、 alt、 hspace、 vspace、 width、 height 等?注意：　　?src 是 標簽的最關鍵屬性，用來描述圖片的來源(url)，可用絕對路徑或相對路徑，絕對路徑是包括網站域名在內的完全路徑，一般用于實現外部鏈接；相對路徑又分為根相對路徑和文檔相對路徑，不能使用本地絕對路徑。?文件路徑描述的更多知識，請參考有關資料

目標地址(URL)，可用絕對路徑或相對路徑來描述。 絕對路徑是包括網站域名在內的完全路徑，一般用于實現外部鏈接。 相對路徑又分為根相對路徑和文檔相對路徑。 在編輯網頁時，要在本地磁盤上選定一個文件夾，作為站點的本地文件夾，站點內鏈接用到的所有本地文件，都應該放在該文件夾內，以確保將這個文件夾上傳到服務器后，所有的鏈接仍能保持有效。這個模擬服務器上的站點的文件夾，就是站點的根文件夾，系統就是根據這個文件夾確定本地文件的位置。 根相對路徑以“/”開頭，路徑從當前站點的根文件夾開始計算，但使用根相對路徑在本地瀏覽時，必須設置本地站點，否則本地瀏覽時鏈接失效，這是因為Windows不支持把站點文件夾作為根目錄。 建議不要使用本地絕對路徑來描述目標文件的位置，如：d:\myweb2\html\web1.htm。因為本地絕對路徑在本地瀏覽時鏈接正常，但上傳到服務器后，鏈接失效。 文檔相對路徑是以當前網頁文檔的位置為基礎開始計算路徑。相對路徑多用于鏈接保存在同一文件夾(如站點根文件夾)中若干子文件夾中的文檔，這種路徑在本地和服務器上都是可靠的，是使用最多的一種。 當超鏈接的目標是HTML文檔，或能用瀏覽器打開的非HTML文檔時，點擊這個超鏈接將自動用瀏覽器打開目標，但當超鏈接的目標是不能用瀏覽器打開的文檔時，點擊這個超鏈接將打開“文件下載”對話框。

操作提示：?插入圖片，可使用本網頁下部的素材，其路徑描述位于對應圖片的下面，可以直接“復制－粘貼”

實例6

1.要求：

知識要點：?在網頁中插入?flash?動畫使用??標簽在網頁中加入視頻剪輯使用?IMG?標簽的dynsrc?屬性實訓目的：?掌握在網頁中插入?flash?動畫并設置其位置、大小等屬性掌握在網頁中插入視頻剪輯并設置其位置、大小、循環播放次數等屬性，了解常用的多媒體文件類型實訓內容：?在網頁中插入一段視頻剪輯和一個?flash?動畫

實例7

1.要求：

實訓目的：?掌握在網頁中插入水平線，并設置線長、線寬、對齊方式、顏色、是否有陰影等實訓內容：??標簽及其屬性：align、width、color、size、noshade?等思考題：　?在網頁中是否能方便地插入一條豎直線？　要插入豎直有什么辦法？操作提示：?在新窗口中瀏覽網頁，并改變窗口大小，以詳細觀察?線長、對齊方式?的變化

實例8

1.要求：

實訓目的：?掌握在網頁中設置滾動字幕的方法，包括字幕的對齊方式、滾動方向、寬度、高度、背景顏色、循環次數、移動速度等實訓內容：?標簽及其屬性：align、bgcolor、width、height、loop、behavior、hspace、vspace、scrollamount、scrolleday等?注意：　?請不要設置滾動字幕的滾動方向為“向右”和“向下”，因為這不符合中文的閱讀習慣

思考題：　?有些網頁中的字幕，在鼠標指上時即停止滾動，鼠標移開時又開始滾動，這種效果如何實現？

實例9

1.要求：

知識要點：?超鏈接(Hyperlink)是 html 的精華，它為快速查找所需的信息提供了方便錨點鏈接適用于網頁內容較多，并有多個標題的情況實訓目的：?掌握網頁內的錨點鏈接，包括錨記的設置，鏈接的設置等。錨點鏈接是實現同一網頁一處到另一處的鏈接實訓內容：? 標簽及其屬性：href、name、target、style等

操作提示：?當網頁內容較少且瀏覽窗口較大時，使用錨點鏈接無法看到效果注意觀察：?在本系統的每一個頁面上有一個　鏈接，這就是一個錨點鏈接的實例，可模仿應用

實例10

1.要求：

知識要點：?各個網頁鏈接在一起后才能構成一個網站，按鏈接目的可分為錨點鏈接、內部鏈接、外部鏈接、E-mail鏈接等?內部超鏈接是實現同一站點內一個網頁到另一個網頁的鏈接知識溫故：?內部鏈接目標網頁的路徑(url)表達形式，可使用?根相對路徑?或?文檔相對路徑實訓目的：?掌握超鏈接的設置方法實訓內容：?<a> 標簽及其屬性：href、name、target、style 等

注意觀察：?在本系統的每一個頁面上的　?和?鏈接，就是內部鏈接的實例，可模仿應用

3.效果：

××××課程復習指導

第一課復習指導? ? 第二課復習指導? ? 第三課復習指導? ? ??知識要點掃描? ? ??知識網絡? ? ??重點難點研究? ? ??金題解析延伸? ? ??能力遷移訓練? ? ??助學資料第四課復習指導第五課復習指導

實例11

1.要求：

知識要點：?超鏈接的功能很強，可以在WWW上隨意鏈接到其它站點，沒有類別之分，沒有國界限制實訓目的：?掌握外部鏈接的設置方法，掌握目標網頁地址(URL)的表示方法實訓內容：? 標簽及其屬性：href、name、target、style等知識擴展：?絕對路徑是包括網站域名在內的完全路徑,用于實現外部鏈接；鏈接到外部站點的首頁,可只寫域名省略文件名

注意觀察：?當超鏈接的目標是不能用瀏覽器打開的文檔時，點擊這個超鏈接將打開“文件下載”對話框超鏈接“HTML參考資料”所鏈接的目標是一個 .rar 類型的文件，點擊該超鏈接，觀察其運行效果操作提示：?外部超鏈接可能因目的網站停止服務而鏈接失效

3.效果：

網易

海王科技

域名知識

html參考資料

實例12

1.要求：

實訓目的：?掌握電子郵件鏈接的格式，了解常用的電子郵件收發器，如：Foxmail OutlookExpress?實訓內容：?電子郵件鏈接格式?操作提示：?瀏覽器端單擊電子郵件鏈接，將打開默認郵件收發管理軟件，如Foxmail、Outlook Express等，為發送一個電子郵件做好準備

3.效果：

為您服務

實例13

1.要求：

知識要點：?按照使用對象的不同，網頁中的鏈接又可以分為：文本超鏈接，圖像超鏈接，多媒體文件鏈接，空鏈接等實訓目的：?掌握在圖片上作超鏈接的方法實訓內容：?圖片上作超鏈接的格式　 ?知識擴展：?在Dreamweaver中還可以將一幅圖片劃分為多個熱區，作多個超鏈接注意區別：?描述鏈接目標?url?使用??標簽的?href?屬性， 描述插入圖片來源的?url?使用??標簽的?src?屬性

實例14

1.要求：

知識要點：?表格由表行組成，表行由表項(單元格)組成。表格由 TABLE 定義，表行由 TR 定義，單元格由 TD 或 TH 定義實訓目的：?掌握表格的定義格式(表格、表行、單元格)，表格的對齊方式、表項的對齊方式、表格中文字的設置等。實訓內容：?

標簽及其屬性 align、bgcolor、 border、 bordorcolor、 height、 cellspacing、width、 cellpadding ，

標簽及其屬性 align 、 valign表格內文字的字體、字型、大小、顏色、對齊方式等

操作提示：?在網頁設計中表格的主要用途是網頁排版布局，所以熟練掌握和運用表格這一排版布局工具，是非常重要的

3.效果：

學號	姓名	語文	數學	均分
0301	張大山	78	97	87.5
0302	李海燕	89	87	88
0303	王華清	89	98	93.5

實例15

1.要求：

實訓目的：?掌握表格中單元格的合并、表格標題格式的設置、對齊方式等。實訓內容：?同一行內若干單元格的合并　格式：

表項 或：表項 同一列內若干單元格的合并　格式：表項 或：表項 同時合并多行多列　格式：表項 表格標題　　　　　　　　　格式：表格標題

注意觀察：?合并單元格后，填寫表項時很容易造成錯位，可以參考下面的例題，總結合并單元格后表項的填寫規則分析思考：?注意觀察?

與 所描述的單元格有什么區別 ，分別適用于什么場合 ？

3.效果：

學生基本情況表
姓名	王美麗	性別	女	年齡	15	E-mail	URL
照片		稱謂		姓名		職業	電話
		父親		王正		醫生	88888888
		母親		李英		教師	99999999
		地址		北京市雨兒胡同

實例16

1.要求：

知識要點：?在網頁應用各種樣式的“列表”， “列表”與MricroSoft Offic Word中的“項目符號和編號”相似實訓目的：?掌握無序號列表、?選單列表、?有序列表、?定義列表的標簽格式及各種列表形式嵌套的用法實訓內容：?

、 、 、 、 、 、 、 等標簽及其常用屬性：type

擴充提高：?本例排版使用了表格，網頁設計中表格是最常用的排版工具，需要熟練掌握

3.效果：

·?邊學邊練，學以致用 ·?學習進度，盡在掌握 ·?洪恩本色，人性設計	主要內容 ·?Internet應用 ·?網頁設計 ·?網站建設	1.?精通Windows 2.?精通Office 3.?常用工具軟件 4.?Photo實例
精通Windows 學習時間10～12小時，從簡單的啟動程序，拷貝文件，到優化系統，設置網絡，相信不同層次的用戶都可以獲得自己需要的知識。 精通Office 充分利用多媒體技術，以實例講Word、Excel、access、PowerPoint、Outlook，讓你迅速成為Office專家。 Photo實例 感受功能強大的圖形圖像處理軟件，結合實際10個綜合例子，讓你迅速成為美術大師。

實例17

1.要求：

知識要點：　框架也是布局網頁的一種方法，但它與表格布局方法不同。實訓目的：　掌握框架集的概念、框架集中各網頁間的關系、框架集中超鏈接的實現等。實訓內容：?標簽及其常用屬性：　rows、cols、frameborder、framespacing?標簽及其常用屬性：?src、name、marginwidth、marginheight、scrolling、noresize操作步驟：　創建5個html文檔并將其存放在同一個文件夾中，其中，框架網頁文件名為“web17.htm”，　　　　　　另外4個文件名分別為“web17a.htm”、“web17b.htm”、“web17c.htm”、“web17d.htm”。注意觀察：　注意觀察在瀏覽器中的初始顯示的效果　與點擊“球星風采”超鏈接后的顯示效果，思考框架網頁中實現超鏈接的方法

框架集文檔，設計用意：　定義一個瀏覽器窗口的分割形式，并指定在每一個子窗口中顯示?html?網頁文檔的名稱

實例18

1.要求：

知識要點：?表單可實現用戶的信息輸入，?使網頁具有了交互功能實訓目的：?掌握表單中各種控件的用法、功能、及格式，理解表單的交互功能，學會制作表單

實訓內容：?表單及其中按鈕、復選框、單選按鈕、文本輸入框、圖像、文件、隱藏項、文本區域、列表框等各種表單控件的定義格式及用法用途兩個特殊按鈕：?“提交”、“重置”的定義和用法用途， 一個特殊文本框“密碼框”的用法用途

知識擴展：?表單中的數據處理須要應用程序的支持，本課程中?“ASP”部分將會介紹

3.效果：

窗體頂端

請您填寫詳細資料并提出寶貴意見
登錄名：
輸入登錄密碼：
性別：	男　　 女
所在省份：
個人愛好	音樂　 運動
請提供附加文件

窗體底端

實例19

1.要求：

實訓目的：?提高?html語言 的綜合運用能力，初步掌握站點的概念，掌握多個網頁間較復雜的鏈接關系實訓內容：?通過創建一個簡單的個人主頁，了解一個簡單網站制作過程操作步驟：?本網站非常簡單，包括“首頁”、“我的愛好”、“我的影集”、“意見建議”，共4個頁面，兩張圖片“意見建議”網頁中的核心是一個表單，用于收集用戶信息，“與我聯系”是一個電子郵件鏈接，用戶可通過電子郵件與網站管理員聯系操作提示：?①首先創建站點文件夾，然后再創建每一個網頁?②站點中用的所有文件，包括網頁、圖像、音樂、動畫等都必須放置在站點文件中，?③網站的首頁文件名應保存為“index.html”或“index.htm”，這是一般服務器默認搜索的站點首頁文件名說明：?本網站中每個頁面的內容還需要完善，表單的功能還不能實現，還沒有服務器端程序支持，后續章節將進一步學習

總結

以上是生活随笔為你收集整理的html中超链接使用_HTML实例源码的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。