1、第二部分 HTML,2.1 HTML文檔基本結構標記,2.1.1 開始與結束標記 HTML文檔的開始標記是，它告訴瀏覽器下面的內容是HTML文檔，結束標記為標記，它告訴瀏覽器HTML文檔結束了。 語法格式: HTML文檔的所有內容 ,2.1.2 頭部標記 HTML文檔的頭部標記是，它表示瀏覽器下面的內容是HTML文檔的頭部，顯示在文本之前，而標記告訴瀏覽器頭部內容結束了。 語法格式： HTML文檔的頭部內容 頭部內容一般包括注釋、META和標題。,META標記,1、name屬性 頁面定時刷新與自動跳轉 Keywords(關鍵字) 說明：keywords用來告訴搜索引擎你網頁的關鍵字是什么。 舉

2、例：meta name =“keywords” content=“science, education,culture,politics,ecnomics，relationships, entertaiment, human” description(網站內容描述) 說明：description用來告訴搜索引擎你的網站主要內容。 舉例：meta name=“description” content=“This page is about the meaning of science, education,culture.” author(作者) 說明：標注網頁的作者 舉例：meta name=

3、author contentroot,2、http-equiv屬性 Refresh(刷新) 說明：自動刷新并指向新頁面。 用法：meta http-equiv=“Refresh” content=“2；URL=” content-Type(顯示字符集的設定) 說明：設定頁面使用的字符集。 用法：meta http-equiv=content-Type content=text/html; charset=gb2312,2.1.3 標題標記 和標記中間所包含的文字將成為這個Web頁的標題，一般寫在頭部標記之中。標題文字會顯示在Web瀏覽器最上面的title（標題）欄上。瀏覽器用戶可以把標題加入收

4、藏夾中，所以標題文字最好使用中文并且有明確的意義。 語法格式： 網頁的標題 【例】first.html文件，頭部標記和標題標記的使用。 網頁基本結構示例 這是我的第一個網頁，非常簡單，但卻是我自己做的。以后我越做越好的。 保存文件,在IE瀏覽器中顯示。,2.1.4 主體標記 標記是HTML文檔主體標記的開始，并對應結束符。HTML文檔的主要內容都出現在和標記之中。HTML文檔中只能有一個body標記，并且它只能跟在head標記后面。 語法格式： 主體內容 ,2.1.5 設置HTML文檔背景 標記還具有一些屬性，可以設置HTML文檔的背景色，可使用圖片/圖像作為背景，確定鏈接的顏色，設置文字的顏

5、色等。 語法格式： 文檔內容 其中： bgcolor，用來指定HTML的背景顏色。 text，用來指定HTML文件中的文字色彩屬性。 link，用來指定HTML文件中待連接的超鏈接對象的色彩屬性。 alink，用來指定HTML文件連接中的超鏈接對象的色彩屬性。 vlink，用來指定HTML文件中已連接的超鏈接對象的色彩屬性。 background，用來指定作為HTML背景的平鋪圖像。,注：在顏色表中，可以采用對應的英文顏色名稱表示，也可以采用16進制數表示。以后在其它地方的顏色表示與此一致。 【例】color.html，改變文字的顏色和背景的顏色。 color show 這是使用HTML語言編

6、寫的Web頁面文件 ,2.2 文本格式標記,2.2.1 標題字體標記 標題字體標記用來顯示不同的黑體字，是通過和標記對實現的。和標記對用來設置HTML文檔的大號標題字體，依次可以標注出6個層級的標題字體。 語法格式: 標題文字 (i=1,6) 【例】titleshow.html，不同的標題字體。 這是h1標題字體！ 這是h3標題字體! 這是h5標題字體! ,2.2.2 字體的大小與顏色標記 字體的大小與顏色標記能夠改變包含的字符、單詞、短語、文本的字體大小和顏色。 語法格式: 文字 文本字體大小從17，默認為3號字體。 【例】fontshow.html ，字體的大小和顏色。 這是7號字體！ 這

7、是5號字體！ 這是3號字體！ 這是1號字體！ ,2.2.3 段落標記與換行標記 在HTML文檔里輸入文字會根據窗口的寬度自動換行。 是HTML語言中特有的段落標記，指出在這兒告一段落，下面的文字換行從頭再開始。 標記用來標識一個換行動作。在HTML文件中可以用它來調整行間距。 語法格式: 文本 文本 【例】paragraph.html，學習如何使用段落和換行標記。 在HTML文檔里不需要在意文章每行的寬度，不必擔心文字是不是太長了而被截掉，它會根據窗口的寬度自動換行。（加段落標記）它會根據窗口的寬度做自動轉折（加換行標記）到下一行的工作。 ,2.2.4 水平線標記 水平線標記，可以在HTML文

8、檔中插入一條水平線，線的寬度和高度可以設置。這個標記對于美化頁面很有幫助。 語法格式: size 表示水平線寬度。 align 表示水平線位置。 width 表示水平線長度可以用滿屏寬度的百分數表示，默認時為100%。,【例】hr.html，插入水平線。 插入水平線 ,2.2.5 字符格式化標記 個別的字或句子可以使用不同的字型，斜體使用標記強調，黑體使用或下劃線使用標記。 更多的格式標記還有： ：標記給文本加上刪除線； ：創(chuàng)建下標； ：創(chuàng)建上標； 【例】format.html文件，使用字符格式化標記。 下劃線 斜體(斜體) 黑體(黑體) y2 z3 刪除線 ,2.3 列表標記,2.3.1 無

9、序列表 unordered list 無序列表由3個標記組成： 說明是無序列表，標記于各列表項之前，最后加上列表結束符。 語法格式： 列表項1 列表項2 列表項3 可以在中加入類型標識符，類型名有： disc在瀏覽器中顯示； circle 在瀏覽器顯示為； square 在瀏覽器中顯示為。,2.3.2 有序列表 方法與無序列表相似，先說明種類，再加上標記于各項之前，最后加上列表結束符。在每一行列表的前面顯示的是數字符號。 語法格式: 列表項1 列表項2 列表項3 類型有： 1 顯示阿拉伯數字1、2、3、 a 顯示小寫英文字母a、b、c、 A 顯示大寫英文字母A、B、C、 i 顯示小寫羅馬字母i

10、、ii、iii、 I 顯示大寫羅馬字母I、II、III、 Start= 顯示起始的編號,2.4 超鏈接標記,超鏈接是WWW的重要基礎，通過超鏈接，用戶可以在萬維網中自由地從一個網站到另一個網站，或者從一個網頁到另一個網頁。 語法格式: 提示文字或其它媒體 URL 超鏈接指向的地址，地址不同可以表示不同的鏈接。 title 鼠標指向超鏈接時顯示的提示文字。 target 在窗口中打開，系統默認提供了四種，也可以自行指定窗口名稱。,2.4.1 超鏈接的構成 一 以文字作超鏈接 二 用圖像作超鏈接 三 圖像的不同部分作超鏈接 四 Flash動畫中的超鏈接,2.4.2 超鏈接的幾種形式 一 指向另一個

11、網頁的超鏈接 海憶教育在線 注：如果要新窗口打開鏈接，需要在標記中加入target=_blank。 二 指向一個文件的超鏈接 點擊下載XP鏡像 三 指向電子郵件的超鏈接 與我聯系 四 指向某網頁某部分的超鏈接 第2章 *需要事先加入錨標記，才能實現正確的跳轉。 五 指向空鏈接的超鏈接(javascript或#) 單擊沒有反應 或 指向自身 六 腳本鏈接(javascript) 單擊彈出對話框,2.5 圖像標記,2.5.1 嵌入圖像對象標記 在HTML文檔中嵌入一些漂亮的圖像，可使頁面圖文并茂。嵌入圖像要使用img標記。 語法格式： 參數src指出圖像文件的URL地址，在設計中要事先將圖片放到網

12、頁目錄中，以防止絕對路徑式的引用。 2.5.2 以圖像對象作超鏈接 2.5.3 以圖像的局部區(qū)域作為超鏈接（熱區(qū)） （本部分不要記憶代碼，掌握操作即可）,* 網站頭部的制作 1.純靜態(tài)圖片 2. 自行制作Flash動畫 3.靜態(tài)圖片為背景,上面遮罩透明Flash. 操作實現,2.6 表格標記,2.6.1 表格標記 表示下面是一個表格內容的開始，表示表格結束。 2.6.2 表格的行標記 表示表格一行的開始和結束。 2.6.3 表格的列標記 數據 在和中間加入該列數據，一般有幾個列名就要加入幾個列標記。 2.6.4 表格的列名標記 列名 在和中間加入列（字段）名，有幾個列名就加入幾個和標記。,相關

13、屬性： border=表示表的邊框，取像素值，默認時表格沒有邊框。 cellspacing=表示表格間的距離，取像素值，默認值為2。 cellpadding=表示邊框和內容間的距離，取像素值，默認值為1。 colspan=表示占用列數，默認值為1。 rowspan=表示占用行數，默認值為1。 width=表示表格寬度。 在網頁中，對寬度高度的表示一般有兩種方式：絕對像素值和百分比。 align= 水平方向的對齊，有三個值可?。簂eft, center 和right. valign= 垂直方向上的對齊，有三個值可取,bottom, middle和top.,【例】table.html，在頁面加入一

14、個不帶框的表格，一個帶框的表格。 常用網站收藏 網站名URL內容 網易綜合 海憶計算機教育 常用網站收藏 網站名URL內容 網易綜合 海憶計算機教育 ,表格的作用,1. 規(guī)范頁面中的數據 目前，在網站的設計中，許多數據來源于數據庫，若干條數據具有相同的格式，可以用表格來進行規(guī)范。 2. 做頁面的框架結構 在網站制作中，頁面的結構可以用表格來制作。,2.7 框架標記,2.7.1 框架 框架標記可通過HTML文檔將顯示屏幕分隔成幾個窗口，每個窗口可獨立顯示頁面文件。各窗口的鏈接與瀏覽都可獨立進行。框架標記為。 語法格式： 框架標記還有一些參數如下。 scorling：確定窗口是否設滾動條，參數值為

15、no（無）、yes（有）、默認或auto（根據窗口內容自動添加）。 name：定義分隔出的窗口的名稱，用來區(qū)分不同的窗口。 nosize：不可用鼠標調整窗口的大小。 target：確定該窗口頁面中超鏈接的頁面文件顯示的窗口名稱。,【例】frameset.html，框架標記的使用。 說明:放在框架內的其它HTML文檔需另行制作.,2.7.2 內聯框架 作用是在網頁中間生成一個窗口來顯示另外一個頁面，它是由標記定義，目前只能由IE瀏覽器支持，語法如下： 不支持框架時顯示的文本 Src指定在內聯框架中顯示的頁面。 例:在自己的頁面中嵌入QQ天氣預報: ,2.8 表單標記,表單標記為。 語法格式： m

16、ethod參數說明和服務器交換信息時所使用的方式，參數值為post或get。 input標記用來定義表單控件，其中，type參數用來定義表單控件的類型，可以選擇Text（文本框）、Password（密碼框）、Textarea（文本區(qū)域）、Checkbox（復選框）、Radio（單選按鈕）、Submit（提交按鈕）、Reset（重置按鈕）等控件。size參數定義表單控件的寬度。,2.8.1 添加文本框控件 文本框控件是頁面提供給瀏覽者輸入簡短文字的控件。其HTML語句為在標記后加入，并以結束即可。 【例】textbox.html，顯示初始值的多個文本框。 電話號碼： 輸入姓名： 輸入口令： ,2

17、.8.2 添加編輯框控件 如果希望瀏覽者在頁面上多輸入一些內容回答問題或進行討論，可在頁面上添加編輯框控件。 【例】editbox.html，添加一個多行多列的編輯框控件。 一個多行多列的文本框 ,2.8.3 添加提交及重置按鈕控件 提交（Submit）按鈕可將瀏覽者輸入的內容提交給相關應用程序，讓服務器或應用程序進行處理。 重置（Reset）按鈕可將瀏覽者輸入的內容清除掉，重新輸入。 【例】submit.html，在頁面上添加提交及重置按鈕。 一個多行多列的文本框 ,2.8.4 添加單選按鈕與復選框控件,添加單選按鈕（Radio）控件只需在標記后加上，再以結束即可。 添加復選框控件只要在標記

18、后加上，并以標記結束即可。 【例】radio.html，創(chuàng)建單選按鈕和復選框。 添加單選按鈕控件 音樂 電影 電視 添加復選框控件北京 上海 天津 重慶（已被選擇） ,2.8.5 添加下拉菜單及滾動菜單控件 下拉菜單控件用來給定一個下拉菜單選項范圍，下拉菜單以標記開始，再添加標記，使用標記列出每一個選項內容。 下拉菜單的寬度由最長的選項確定。 滾動菜單控件用來給定一個固定的菜單選項范圍，允許用戶一次選擇多個選項，類似復選框。 滾動菜單是在標記中加入multiple參數，使用size參數設置顯示的菜單選項（或選擇行）數。,【例】select.html ，添加下拉菜單與滾動菜單控件。 下拉菜單中任選一個 北京汽車站 上海汽車站 重慶汽車站 滾動菜單可多選 蘋果 香蕉 葡萄 草莓 ,2.9 其他標記,2.9.1 會滾動的字標記 語法格式： 滾動的字 marquee標記有如下屬性參數。 方向： #=left，right。 方式： #=scroll表示一圈一圈繞著走，slide表示走一次就停，alternate表示來回走。 循環(huán)： #=次數，若未指定則循環(huán)不止。 速度：，值越大速度越快。 延時：，值越大延時越長。 如果滾動的對象是圖像,可以嵌套使用圖像標記. ,2.9.2 分區(qū)標記 語法格式： 一個分區(qū)的內容 可以利用分區(qū)標記將一頁分成獨立的幾個部分，使每一部分具有自己的樣式