1、第11章 HTML,HTML語言是網絡Web語言的基礎，是制作網頁的基礎，利用它就可設計出一般的靜態(tài)網頁。 HTML（超文本標記語言）是用來制作超文本文檔簡單標記語言，用該語言編寫出的超文本文檔稱為HTML文檔。,HTML的編寫方式： 直接利用文本編輯器來編寫（簡單但不能馬上見效果） 利用專業(yè)的網頁設計軟件來編寫（界面復雜但能馬上見效果）,11.1 HTML簡介 11.1.1 HTML的特點 不是專門的編程語言，只是一種頁面描述性標記語言 描述各種元素在瀏覽器中的顯示效果 11.1.2 HTML的語法結構 1、HTML的基本結構 網頁標題 網頁內容 ,2、HTML的語法規(guī)則 HTML文檔以純文

2、本形式存放，擴展名為. html或.htm HTML文檔中的每個標記以界定，格式如下： 內容 HTML文檔中不區(qū)分大小寫 HTML文檔中標記可以嵌套，但不能交叉 HTML文檔中標記可分多行寫，也可以一行寫多個標記 HTML文檔中換行、回車、空格是不被瀏覽器識別 HTML文檔中內容都應該受限于標記 瀏覽器不能識別的標記將忽略及其內容 3、 HTML標記的類型 不帶屬性的雙標記：強調內容 帶屬性的雙標記：內容 單標記：、,11.2 DW的HTML代碼編輯功能 DW中的三種視圖模式：設計、代碼、拆分 其中代碼模式可直接編輯HTML源代碼 代碼編輯工具 1、代碼視圖 代碼的折疊 選擇父標簽 代碼的注釋

3、 環(huán)繞標簽 代碼的縮進與凸出 顯示/隱藏行號 自動換行 2、快速標簽編輯器 設計視圖中，屬性面板中的“快速標簽編輯器”,3、標簽選擇器與標簽編輯器 標簽選擇器：在網頁代碼中插入新的標簽 代碼視圖中定位插入標簽選擇器 標簽編輯器：對網頁代碼中的標簽屬性添加或修改屬性值 代碼視圖中選擇標簽修改編輯標簽 4、代碼片斷 作用：可以減少代碼編輯的工作量 插入代碼片斷 自定義代碼片斷 5、代碼優(yōu)化 減少冗余（多余、不可識別、錯誤、空）代碼，提高網頁瀏覽速度。 代碼視圖中命令清理HTML/XHTML,11.3 HTML標記 開始和結束標記 功能：讓瀏覽器了解html文檔開始及結束位置。 語法格式： HTML

4、文檔的所在內容 2. 頭部標記 功能：讓瀏覽器了解文檔頭部信息（注釋、Meta、標題上） 語法格式： 頭部內容 3. 標題標記 功能：指定網頁的標題（出現(xiàn)在瀏覽器的標題欄中的內容） 語法格式： 標題內容 ,4. 主體標記 功能：標記網頁主體的開始結束 語法格式： 網頁主體內容 注：該標記中還可以設定網頁背景的相關屬性（如網頁背景色、背景圖、鏈接的顏色、網頁上文字的顏色等等）。 bgcolor：設置背景色 Text：設置網頁內文字的顏色 Link：鏈接顏色 Alink：連接超鏈接對象的顏色 Vlink：已連接超鏈接對象的顏色 Background：網頁的背景圖 語法格式： 其中顏色值可采用英文描

5、述如red、blue等，也可用16進制描述如#FF0000（紅色）等。,例： 歡迎訪問咸寧職院中專部 這里是中專部網站 ,11.3.4 文本格式標記 1.標題標記符（注：n取1-6的值，1最大，6最?。?功能：設定網頁中文本標題和副標題樣式 格式： 標題內容 例： 標題樣式 一號樣式標題 三號樣式標題 五號樣式標題 ,2. 字體控制標識符 功能：控制網頁中文本字符的樣式如大小、顏色、字體等 語法： 文本內容 注：屬性有size表示大小、 color表示顏色、face表示字體 例： 字符樣式 咸寧職院中專部 ,3. 段落標記和換行標記 段落標記是用來標記段落，可用align屬性來設置段落的對齊方

6、式 格式： 段落文本 換行標記是用來標記一個換行動作，也可用來調整行間距 格式： 單標記，單獨使用不用配對出現(xiàn)。 4. 水平線標記（見實例演示） 功能：添加水平線 語法： 單標記，可使用相關屬性設置水平線的樣式 Size：設置水平線的粗細 Width：設置水平線的寬度 Noshade：設置水平線以實線顯示 Color：設置水平線的顏色 Align：設置水平線的對齊方式,5. 物理字符標記 功能：這些標記本身就說明了所修飾文字的效果。 常用的物理字符標記有以下幾種： 斜體： 黑體： 下劃線： 選擇打打印機字體： 標記HTML語句： 標記定義的語句： 標記鍵盤字符： 標記某個命令的例子： 標記程序

7、變量：,6. 列表 為多行信息對象建立項目列表樣式 無序列表 功能：建立無序列表樣式 語法格式： 第一項 第二項 第三項 ,有序列表 功能：建立有序的列表 語法格式： 第一項 第二項 第三項 ,例：（無序） 歡迎訪問咸寧職院中專部 注意事項 第一項內容 第二項內容 第三項內容 ,例：（有序） 歡迎訪問咸寧職院中專部 注意事項 第一項內容 第二項內容 第三項內容 ,兩者也可以嵌套使用 例： 注意事項一 第一項內容 第二項內容 第三項內容 注意事項二 第一項內容 第二項內容 第三項內容 ,7. 超級鏈接標記 功能：為定義好的關鍵字和圖像等對象與相對應的網頁文件建立關聯(lián)。 語法格式： 被定義鏈接的對

8、象 參數(shù)說明： Href說明鏈接目標 Name定義“錨”標記名字（內部鏈接使用） Target目標出現(xiàn)視窗方式 （_blank、_parent、_self、_top） 例： 訪問網易 首頁 本頁跳轉地 跳轉至,8. 加入圖像 使用HTML在網頁中加入圖像的格式一般為GIF和JPEG GIF：表現(xiàn)顏色數(shù)少，文件容量大，適合制作動畫 JPEG：表現(xiàn)顏色豐富，文件體積小，適合制作靜態(tài)圖片 語法格式： （注：單個標記） 屬性有如下幾個： Src：圖像文件位置及文件名（注加引號） Alt：當圖像未完全顯示出來時，顯示的文字 Width：圖像寬度（可用像素或百分數(shù)表示） Height：圖像高度（同上） H

9、space：水平方向的空白像素 Vspace：垂直方向的空白像素 Align：圖像在網頁中的對齊方式，或與文字的對齊方式,設定圖像的布局 1、用img標記中的align屬性 2、用center標記 格式： 對象 3、用p標記 格式：對象 或 對象 設置圖像與文本的關系 1、圖像與文本之間有間隔 可用img標記中的hspace和vspace屬性 2、文本與圖像在垂直方向上的對齊 可用img標記中的align屬性 top：文本與圖像頂部對齊 middle：文本與圖像中央對齊 bottom：文本與圖像底部對齊 3、文本環(huán)繞圖像 可用img標記中的align屬性 aleft：圖像居左，文本居右 rig

10、ht：圖像居右，文本居左 注：一旦設定后，將一直有效，除非想取消，就用 其中clear屬性可用left、right、all,例： 插入圖像實例 插入一個圖像 單擊這里可以看到一張圖像 單擊這里可以欣賞一段音樂 ,9. 制作表格 建立一般簡單正規(guī)表格 格式： 標題 表頭1表頭n 表項1表項n 表項1表項n 注：、中也可加入格式屬性 align、valign、background、bgcolor、bordercolor等,例： 表格實例 學生成績表 姓名語文數(shù)學 張三78 67 李四58 86 學生成績表 姓名語文數(shù)學 張三78 67 李四58 86 ,10. 框架結構 建立框架用frameset

11、來取代body標記 語法格式： 10.1 窗口的劃分及尺寸設置 主要是利用Frameset標記中的rows和cols兩個屬性 Rows 設定橫向分割的框架數(shù)目所占寬度或比例 Cols 設定縱向分割的框架數(shù)目所占寬度或比例 例： 注：*代表自動均分 例： ,10.2 框架的嵌套 框架中不是單純地橫向或縱向排列，而是兩者的嵌套 則體現(xiàn)在標記書寫的技巧上 例： ,10.3 框架窗口的互操作 框架中一個窗口可以隨著另一個窗口的要求而不斷變化，為了實現(xiàn)窗口之間的互操作，必須為每一個窗口取一個名字，它由標記中的name屬性來決定。 格式： 然后通過一個窗口中的鏈接來實現(xiàn)對另一個窗口的操作，即用標記中的ta

12、rget屬性來控制顯示。 語法格式： 熱點文本 注： 框架名有四個特殊值，如下： _blank 用一個新的瀏覽器窗口打開目標文件。 _self 在當前框架窗口內打開目標文件。 _top 在當前窗口內打開目標文件。 _parent 在當前框架的父框架中打開目標文件。,10.4 框架的其他屬性 Border 設定邊框的寬度 Bordercolor 設定邊框的顏色 Frameborder 設定有無邊框 Framespacing 設置各窗口間的空白 Marginwidth 設置框架內容與左右邊框的空白 Marginheight 設置框架內容與上下邊框的空白 Scrolling 設置滾動條 Noresi

13、ze 不允許各窗口改變大小,11. 制作表單 網頁中加入表單是使網頁具有可輸入表項及項目選擇等欄目，以此在網頁中可進行交流和反饋信息。 11.1 表單標記 功能：建立表單，主要處理表單結果的處理和傳送 語法格式： 屬性如下： Action 表單處理的方式（往往是郵箱或網址） Method 表單數(shù)據的傳送方向（送出還是獲得）,11.2 文本框標記 功能：主要用來設計表單中提供用戶的輸入形式 語法格式： 屬性說明： 屬性如下： Type 指定加入表單項目的類型 Name 該表項的控制名 Size 單行文本區(qū)域的寬度 Maxlength 允許輸入的最大字符的數(shù)目 Value 表單項目的顯示內容 注：

14、type屬性值text和password的區(qū)別 如果type=text則正常顯示用戶輸入的文本 如果type=password則以*來顯示用戶輸入的文本,例： 表單實例 電話號碼： 姓名： 用戶名： 密碼： ,11.3 下拉菜單標記和選項標記 用戶需選擇的項目較多時，如果用復選框或單選框方法，則占用頁面的區(qū)域會較多，此時可用選擇欄來則方便。選擇欄分為彈出式和字段式，用和標記來設置 語法格式： 選項1 選項2 屬性說明： Size 表示在帶滾動條的選擇欄中一次可見的列表項數(shù) Name 給選擇欄取名 Multiple 決定用戶能否選多個選項 彈出式與字段式的區(qū)別就是size中的值是否大于1，siz

15、e=1則是彈出式，大于1的就是字段式,例：彈出式 表單實例2 在下面選擇城市名： 北京 上海 武漢 長沙 ,例：字段式 表單實例2 在下面選擇城市名： 北京 上海 武漢 長沙 ,11.4 復選框和單選框 主要利用中的type屬性值checkbox和radio來區(qū)別 如果type=checkbox則作為復選框（可同時供用戶選擇多項） 如果type=radio則作為單選框（只供用戶選擇一項） 例： 請選擇性別： 男 女 ,11.5 重置和提交按鈕 主要利用中的type屬性值reset和submit來區(qū)別 如果type=reset則自動清空表單中已輸入的全部信息 如果type=submit則將用戶填入表單中的信息發(fā)往網址或郵箱 注： 表單網頁通過提交按鈕提交的表單數(shù)據將與后臺動態(tài)程序進行處理，這將利用動態(tài)網頁技術、數(shù)據庫技術相結合。,12. 動態(tài)字幕效果標記 語法格式： 流動文字 屬性有如下： Align 設置字幕和垂直文本對齊 Bgcolor 設置字幕顏色 Width 設置字幕的寬度 Height 設置字幕的高度 Loop 設置字幕的循環(huán)次數(shù)，如果為-1或infinite無限循環(huán) Behavior 字幕的滾動方式 scroll 設置文字單向流動 side 設置流動文字到達邊界停止 alternate 設置流動文字到達邊界后反向流動 Hsp