1、第三章,超文本標記語言HTML,第三章 超文本標記語言HTML,學習目標：通過本章的學習，使學生對HTML有一個全面的了解，能夠掌握HTML文件中常用標簽的作用，可以閱讀一般網頁的源文件,并會用HTML中常見的標簽命令編寫簡單的網頁。 學習重點：掌握HTML文件中常用標簽的作用。 學習難點：能夠利用HTML編寫制作網頁 學習方式：講授多媒體演示上機 學習時間：12課時,3.1 HTML基本結構,一、html簡介 HTML (HyperText Markup Language) 超文本標記語言，是一種用來制作超文本文檔的簡單標記語言，用特殊標記(tag)來描述文檔結構和表現形式。使用HTML語言

2、描述的文件，需要通過WWW瀏覽器顯示出效果。 HTML開發(fā)工具：記事本、FrontPage、Dreamweaver等。 HTML文件的擴展名：htm，html。,二、HTML的基本結構, 標題 文檔主題，正文部分 ,三、HTML標簽,1、單標簽 例： 換行標簽,2、雙標簽 內容 例： 一級標題,3、標簽屬性 例：,3.2 常用的HTML標簽命令,一、BODY標簽用來定義文檔主體 語法格式： (其他頁面元素) ,二、頁面布局與文字設計,1、標題 2、換行 3、段落 4、水平線 5、文字的大小設置 6、文字的字體與樣式,7、文字的顏色 8、位置控制 9、預格式化 10、字幕 11、列表 12、Ht

3、ml特殊字符,1、標題,語法格式： 標題內容 其中： x = 1、2、3、4、5、6 Align（對齊）屬性包括left、center、right,實例,2、換行,語法格式： 文字內容 ,實例,3、段落,語法格式： 段落內容 其中： Align（對齊）屬性包括left、center、right,實例,4、水平線,語法格式： ,實例,長度單位,像素(pixel)/百分比(%) 絕對長度： 相對長度：,5、文字的大小設置,語法格式： 文字內容 ,實例,6、文字的字體,實例, ,字體樣式,練習：如何寫出x的平方加y的平方？,x2+y2,7、文字顏色, ,16進制顏色代碼：#RRGGBB 10進制RG

4、B代碼：RGB（RRR，GGG，BBB） 直接顏色名稱：“Red”/“Blue”/“Silver”,實例,8、位置控制,ALIGN屬性可以控制文字或圖片的對齊方式 語法：#leftrightcenter,ALIGN屬性也常常用在其它標簽中，引起其內容位置的變動。 如：H1 ALIGN= center ,實例,9、預格式化標簽,語法格式： 文字內容 ,實例,綜合實例,10、字幕,語法： ,屬性： bgcolor 背景顏色 direction 字幕滾動方向（down/up/left/right） height 字幕高度 width 字幕寬度 vspace 垂直空白 hspace 水平空白 scro

5、lldelay 每次移動的時間間隔 scrollamount 每次移動的距離 behavior (= scroll, alternate, slide) loop 循環(huán)次數 align,11、列表,有序列表,無序列表, , , 小張 語文 數學 小王 ,定義性列表,定義性列表可以用來給每一個列表項再加上一段說明性文字，說明獨立于列表項另起一行顯示。 第一項 敘述第一項的定義第二項 敘述第二項的定義第三項 敘述第三項的定義,實例,12、Html特殊字符,三、表格,表格的基本結構 定義表格定義標題 定義表行 定義表頭 定義表元(表格的具體數據),實例,第一季度,語法格式： ,1、表格的標題,設置標

6、題位于表格上方： . 設置標題位于表格下方： . ,實例,2、表格的尺寸, ,3、邊框尺寸, 定貨單蘋果香蕉葡萄200公斤200公斤100公斤 ,4、格間線寬度, 定貨單蘋果香蕉葡萄200公斤200公斤100公斤 ,5、內容與格線之間的寬度, 定貨單蘋果香蕉葡萄200公斤200公斤100公斤 ,6、表格內文字的對齊/布局,左右排列 居左居中居右 A B C ,6、表格內文字的對齊/布局,上下排列 上齊居中 下齊 A B C D ,7、跨多行、多列的表元,跨多列的表元 , 值班人員 星期一 星期二 星期三 李強張明王平 ,7、跨多行、多列的表元,跨多行的表元 , 值班人員 星期一星期二 星期三

7、李強張明王平 ,8、表格的顏色,可對整個表格填入底色，也可對任何一行、一個表元使用背景色。 表格的背景色彩 行的背景色彩 表元的背景色彩 或 ,綜合實例,表格標題,四、文件間的鏈接,鏈接文字 HREF：定義這個鏈接所指的地方 通過點擊“鏈接文字”可以到達指定的文件 溫州大學,本地鏈接、URL鏈接、目錄鏈接、郵件鏈接,語法格式： ,鏈接標簽的Target屬性, 鏈接文字 ,僅用于框架窗口,1、本地鏈接,本地鏈接:對同一臺機器上的不同文件進行的連接稱為本地鏈接 以絕對路徑表示： 文件的鏈接以相對路徑表示： 文件的鏈接 鏈接上一目錄中的文件： IP地址,2、URL鏈接,URL鏈接是指鏈接的文件在其它

8、服務器上。 語法：協(xié)議名：/主機.域名路徑文件名 如： 溫州大學,3、目錄鏈接,目錄鏈接直接指到某文件上部、下部或是中央部分 制作方法是： （1）把某段落設置為鏈接位置，格式是： （2）在調用此鏈接部分的文件定義鏈接： 鏈接文字如果是在一個文件內跳轉，文件名可以省略不寫。,實例,4、郵件鏈接, 聯(lián)系我們 ,五、多媒體效果,1、插入圖片 2、插入音樂 3、插入視頻,1、插入圖片,如：,語法格式： ,圖像標簽的Align屬性,實例,圖形按鈕, 如： ,2、插入音樂,（1）點播音樂做鏈接 樂曲名,（2）自動載入音樂 ,實例,1、SRC=“FILENAME“：設定音樂文件的路徑 2、AUTOSTART

9、=TRUE/FALSE：是否要音樂文件傳送完就自動播放，TRUE或1是要，FALSE或0是不要，默認為TRUE 3、LOOP=TRUE/FALSE：設定播放重復次數，LOOP=6表示重復6次，TRUE表示無限次播放，FALSE播放一次即停止。 4、STARTIME=“分:秒”：設定樂曲的開始播放時間，如20秒后播放寫為STARTIME=00:20,5、VOLUME=0-100：設定音量的大小。如果沒設定的話，就用系統(tǒng)的音量。 6、WIDTH HEIGHT：設定控制面板的大小 7、HIDDEN=TRUE：隱藏控制面板 8、CONTROLS=CONSOLE/SMALLCONSOLE：設定控制面板的

10、樣子,（3）IE中的背景音樂 #=循環(huán)數 例：,3、插入視頻,（1）鏈接一個視頻文件 視頻名稱,（2）自動載入視頻 ,實例,1、SRC=FILENAME“：設定文件的路徑 2、AUTOSTART=TRUE/FALSE：是否要文件傳送完就自動播放，TRUE是要，FALSE是不要，默認為FALSE 3、LOOP=TRUE/FALSE：設定播放重復次數，LOOP=6表示重復6次，TRUE表示無限次播放，FALSE播放一次即停止。 4、STARTIME=“分:秒”：設定開始播放時間，如20秒后播放寫為STARTIME=00:20 5、VOLUME=0-100：設定音量的大小。如果沒設定的話，就用系統(tǒng)的

11、音量。 6、WIDTH HEIGHT：設定控制面板的大小,六、框架,Frames結構能將整個窗口分成幾個獨立的小窗口 每一個窗口可分別載入不同的文件 每個窗口可以相互溝通,框架語法, , ,框架的嵌套,FrameSet標簽,語法格式： ,FrameSet標簽的屬性,Rows、Cols屬性,例： ,Rows、Cols屬性,Rows=“ 100 , * ”,100,668,1024,Rows、Cols屬性, 將100像素以外的窗口平均分配 將窗口分為三等份,Frame標簽,語法格式： ,Frame標簽的屬性,各窗口間的相互操作,由Frames分出來的幾個窗口的內容并不是靜止不變的，往往一個窗口的內

12、容隨著另一個窗口的要求而不斷變化。 為了完成各窗口之間的相互操作，我們必須為每一個窗口起一個名字, 例：,各窗口間的相互操作,定義了窗口名稱，還應該有Target來配合使用，Target屬性指定了所鏈接的文件出現在哪一窗口。Target的值可以是name定義的名稱 也可以是以下四類值： 顯示一個新窗口 _self 顯示在同一個窗口_parent 顯示在Frameset的前一份文件的窗口_top 顯示在整個瀏覽器窗口,例如, ,七、表單,交互式表單的作用就是收集用戶信息，將其提交到服務器，從而實現與客戶的交互。,一個完整的表單包含兩個部分： 在網頁中進行描述的表單對象 應用程序，用于對客戶輸入的

13、信息進行分析處理,表單體標簽, ,例： ,表單體屬性,1、名稱 2、動作：輸入一個URL地址或mailto地址，指明處理該表單數據的程序 3、方法：Post允許傳送數據量大的的信息, Get只接收低于1K（約215個漢字）的信息。 post傳輸信息內容，get傳輸url值。,各種表單對象,文本框, 初始值 ,單行,單選按鈕, 音樂 旅游 ,復選框, 語文 數學 ,按鈕, ,列表框, ?？?本科 碩士 博士 ,跳轉菜單, 第一單元 第二單元 第三單元 ,文件域, ,3.3 綜合制作實例,使用表格進行頁面布局,本章習題,根據下列要求在記事本中用HTML代碼設計 一網頁，并把后綴名改為.htm或.html結尾的網頁。 1.htm 新建一個網頁，網頁標題保存為“主頁” 1）文本超連接 連接到“表格”頁面 2）圖片超連接 插入一副圖片連接到“圖片”頁面 3）郵件超連接 輸入自己的郵箱進行連接,2.htm 新建一個網頁，網頁標題保存為“表格”。 1)在網頁中插入6行2列的表格，背景顏色設為淡藍色 2)把第1行的兩列合并，然后再把第6行的兩列合并，在合并后