1、LOGO第第7章章 Web技術和技術和HTML孫燾孫燾重點：重點：web技術概述1HTML的格式2HTML的常用標簽3多frame頁面設計4難點：難點：HTML的格式掌握1Table標簽的相關屬性27.1 Web技術概述技術概述v什么是萬維網什么是萬維網 vWeb的表現方式的表現方式 v什么是什么是Web網站網站 vWeb網站的功能網站的功能vWeb的開發技術的開發技術7.1 Web技術概述技術概述v7.1.1 什么是萬維網什么是萬維網 vWorld Wide Web稱為萬維網，簡稱為萬維網，簡稱稱Web。v它的根本構造是采用開放式的客戶它的根本構造是采用開放式的客戶/效效力器構造力器構造(C

2、lient/Server),分效果勞器分效果勞器端、客戶接納機及通訊協議三個部分。端、客戶接納機及通訊協議三個部分。7.1 Web技術概述技術概述v7.1.2 Web的表現方式的表現方式 v(1)超文本超文本hypertextv(2)超媒體超媒體hypermediav(3)超文本傳輸協議超文本傳輸協議7.1 Web技術概述技術概述v7.1.3 什么是什么是Web網站網站vWeb網站就是利用互聯網技術，把企網站就是利用互聯網技術，把企業，機構或個人的信息經過業，機構或個人的信息經過Web頁面和頁面和Internet發布出去，經過懇求域名而成為發布出去，經過懇求域名而成為一個站點。一個站點。7.1

3、 Web技術概述技術概述v7.1.4 Web網站功能網站功能vBBSv社區社區v電子商務電子商務v在線論壇在線論壇v在線考試，在線考試，v遠程教育遠程教育v博客，視頻等等博客，視頻等等7.1 Web技術概述技術概述v7.1.5 Web開發技術開發技術v客戶端技術客戶端技術vHTML言語是信息展現的最有效載言語是信息展現的最有效載體體 v效力端技術效力端技術 v CGI，PHP，ASP，JSPv靜態技術靜態技術v HTMLv動態技術動態技術v DHTML，css，javascript，vbscriptv 7.2 HTML的格式的格式v7.2.1 HMTL簡介簡介v7.2.2 HTML的編輯器的編

4、輯器v7.2.3 HTML開展歷史開展歷史v7.2.4 HTML的根本格式的根本格式v7.2.5 HTML的根本標簽的根本標簽v7.2.6 HTML版的版的Hello World7.2 HTML的格式的格式v7.2.1 HMTL簡介簡介v超文本置標言語超文本置標言語HyperText Markup Language，簡稱為，簡稱為HTML，是為是為“網頁創建和其它可在網頁閱讀器中看網頁創建和其它可在網頁閱讀器中看到的信息設計的一種置標言語。到的信息設計的一種置標言語。vHTML被用來構造化信息被用來構造化信息例如標題例如標題、段落和列表等等，也可用來描畫文檔的、段落和列表等等，也可用來描畫文檔

5、的外觀和語義。包含外觀和語義。包含HTML 內容的文件最常內容的文件最常用的擴展名是用的擴展名是.html7.2 HTML的格式的格式v7.2.2 HTML的編輯器的編輯器vHTML 編輯器是一種用來編輯編輯器是一種用來編輯HTML文本的軟件。其實文本的軟件。其實HTML只是一個文本文只是一個文本文件，就算一個最普通的文字編輯器都可以件，就算一個最普通的文字編輯器都可以勝任。勝任。 v常用的常用的HTML 編輯器有記事本，編輯器有記事本，Dreamweaver, Frontpage等。等。 7.2 HTML的格式的格式v7.2.3 HTML開展歷史開展歷史v超文本置標言語超文本置標言語(第一版

6、第一版) - 在在1993年年6月發為互聯網工程任務小組月發為互聯網工程任務小組 (IETF)任任務草案發布務草案發布(并非規范并非規范)vHTML 2.0 - 2019年年11月作為月作為RFC 1866發布發布,在在RFC 2854于于2000年年6月發布之后被宣布曾經過時月發布之后被宣布曾經過時vHTML 3.2 - 2019年年1月月14日日,W3C引薦規范引薦規范vHTML 4.0 - 2019年年12月月18日日,W3C引薦規范引薦規范vISO/IEC 15445:2000(“ISO HTML)-2000年年5月月15日發布日發布, 是國是國際規范化組織和國際電工委員會的規范際規范

7、化組織和國際電工委員會的規范vXHTML 1.0 - 發布于發布于2000年年1月月26日日, W3C引薦規范引薦規范vHTML 2.0 - W3C任務草案任務草案7.2 HTML的格式的格式v7.2.4 HTML的根本格式的根本格式(一一)vHTML是一種標簽嵌套式的言語。是一種標簽嵌套式的言語。v標簽用標簽用來表示，標簽必需成來表示，標簽必需成對出現對出現.如如,那么必需以另一個標那么必需以另一個標簽簽將它封鎖。留意將它封鎖。留意“head前前的斜杠，那就是封鎖標簽與翻開標簽的區的斜杠，那就是封鎖標簽與翻開標簽的區別。別。 v每個標簽內可以放置內容，如每個標簽內可以放置內容，如v 這是一個

8、標題這是一個標題v 表示表示html的標題的標題7.2 HTML的格式的格式v7.2.4 HTML的根本格式的根本格式(二二)v標簽之間可以嵌套標簽之間可以嵌套v例如例如 vv v 標題標題v v 內容內容v7.2 HTML的格式的格式v7.2.4 HTML的根本格式的根本格式(三三)vHTML不區分大小寫不區分大小寫v標題標題v與與v標題標題v的效果是一樣的的效果是一樣的7.2 HTML的格式的格式v7.2.4 HTML的根本格式的根本格式(四四)v標簽內只能嵌套完好的其他標簽標簽內只能嵌套完好的其他標簽v下面是的嵌套方式是不合法的下面是的嵌套方式是不合法的vv vv v在在head標簽內只

9、需標簽內只需title標簽的開場部標簽的開場部分，沒有終了的部分，這是不合法的。分，沒有終了的部分，這是不合法的。7.2 HTML的格式的格式v7.2.5 HTML的根本標簽的根本標簽v一個規范的一個規范的HTML文件普通包含下面文件普通包含下面4個標簽個標簽v：用來標志整個：用來標志整個html文件；文件；v：用來標志：用來標志html的頭信息；的頭信息；v ：用來標志：用來標志html標題信息；應嵌套在標題信息；應嵌套在中；中；v：用來標志：用來標志html的正文；的正文；7.2 HTML的格式的格式v7.2.6 HTML版的版的“hello worldvvvHello WorldvvvH

10、ello World!vv7.2 HTML的格式的格式v7.2.6 HTML版的版的“hello world7.3 HTML常用標簽常用標簽v表單標簽的運用表單標簽的運用v表格的繪制表格的繪制v豐富的表格屬性豐富的表格屬性v圖片與超鏈接圖片與超鏈接v多窗口頁面多窗口頁面7.3 HTML常用標簽常用標簽v7.3.1 表單標簽的運用表單標簽的運用vv用戶名用戶名v密碼密碼 v教教師師v學生學生vvv7.3 HTML常用標簽常用標簽v7.3.1 表單標簽的運用表單標簽的運用v 用來標志一用來標志一組表單。其組表單。其action 屬性表示將此表單提交屬性表示將此表單提交給誰來處置；其給誰來處置；其m

11、ethod屬性用來表示提屬性用來表示提交表單的方式。常用的提交表單的方式為交表單的方式。常用的提交表單的方式為post 和和get 。v 用來標志用來標志一個用戶輸入。其一個用戶輸入。其type屬性表示用戶輸入屬性表示用戶輸入的類型。常用的用戶輸入類型有：的類型。常用的用戶輸入類型有：text, password, submit, button, reset 等。等。name 屬性會連同表單一同被提交，屬性會連同表單一同被提交，接納表單的容器可以經過接納表單的容器可以經過name 來獲取對來獲取對應的值。應的值。7.3 HTML常用標簽常用標簽v7.3.1 表單標簽的運用表單標簽的運用v對對標

12、簽的標簽的type屬性的值的解釋：屬性的值的解釋：v(1)text：段純文本；：段純文本；v(2)password：密碼；：密碼；v(3)radio ：單項選擇按鈕；：單項選擇按鈕；v(4)submit：提交表單的按鈕；：提交表單的按鈕；v(5)button：普通按鈕；：普通按鈕；v(6)reset：清空表單的按鈕；：清空表單的按鈕；v表示換行，這個在表示換行，這個在html中很中很常用常用7.3 HTML常用標簽常用標簽v7.3.1 表單標簽的運用表單標簽的運用7.3 HTML常用標簽常用標簽v7.3.2 表格的繪制表格的繪制vvvv學號學號姓名姓名性別性別v出生日期出生日期院系院系vvvv

13、v201901001張張三三男男v1989-01-01電信學院電信學院vvv201901002李李四四男男v1989-02-01電信學院電信學院vvvv7.3 HTML常用標簽常用標簽v7.3.2 表格的繪制表格的繪制v(1)：標志一個：標志一個表格；表格；v(2)：標志表：標志表格頭；格頭；v(3)：標志表：標志表格體；格體；v(4)：標志表格中的一行：標志表格中的一行，可以嵌套在，可以嵌套在中，中，也可以嵌套在也可以嵌套在中；中；v(5)：標志表格中一行：標志表格中一行的一列，應嵌套在的一列，應嵌套在中。中。7.3 HTML常用標簽常用標簽v7.3.2 表格的繪制表格的繪制7.3 HTML

14、常用標簽常用標簽v7.3.3 豐富表格屬性豐富表格屬性vvv學號學號v201901001v姓名姓名v張三張三vvv性別性別v男男v民族民族v漢漢vvv生日生日v1989-01-01v考考生來源生來源v應屆畢業應屆畢業vvv院系院系v電子與信息工程學院電子與信息工程學院v專專業業v計算機運用技術計算機運用技術vv7.3 HTML常用標簽常用標簽v7.3.3 豐富表格屬性豐富表格屬性v和和標簽都標簽都具有具有bgColor 屬性，用來標志一行或一個屬性，用來標志一行或一個單元格的背景顏色。單元格的背景顏色。vwidth 和和height 屬性用來標志表格屬性用來標志表格的寬和高，可以以百分數為單位

15、如的寬和高，可以以百分數為單位如20%，也可以以像素數為單位如，也可以以像素數為單位如200px。valign 屬性用來標志表格的對齊方式，屬性用來標志表格的對齊方式，可是是可是是left左對齊左對齊, right右對齊右對齊, 或或center居中顯示；居中顯示；vborder屬性用來設置表格邊框的寬度屬性用來設置表格邊框的寬度。7.3 HTML常用標簽常用標簽v7.3.3 豐富表格屬性豐富表格屬性7.3 HTML常用標簽常用標簽v7.3.4 圖片與超鏈接v (1)顯示圖片URL為/img/logo-yy.gif的圖片v(2)顯示與c:008001.jpg 的圖片v(3)顯示一個超鏈接，鏈接

16、到examplev(4)顯示一個超鏈接，鏈接到example要求在新窗口中翻開新的鏈接7.3 HTML常用標簽常用標簽v7.3.4 圖片與超鏈接v(1)v(2)v(3)googlev(4)google7.3 HTML常用標簽常用標簽v7.3.4 圖片與超鏈接v(1)：在html中顯示圖片。圖片可以是網上的圖片，也可以是本地硬盤中圖片。其URL用src屬性來標志v(2)alt 屬性： 標簽的alt 屬性屬性標志了圖片的提示文字。with 和height 屬性分別標志了圖片的寬度和高度。v(3) ：標志一個超鏈接，用其href屬性來標志超鏈接的URL。v(4)target屬性： 標簽的target

17、屬性用來表示用哪個頁面顯示新的頁面。例如_blank表示翻開一個新的閱讀器窗口，并在新的閱讀器窗口中顯示新的頁面7.3 HTML常用標簽常用標簽v 7.3.4 圖片與超鏈接 7.3 HTML常用標簽常用標簽v7.3.5 多窗口頁面 vvvframesvvvvvvvvvleftvvvleft framevHelloWorldvformvv7.3 HTML常用標簽常用標簽v7.3.5 多窗口頁面 v框架可以將閱讀器窗口劃分為假設干個窗格，在每個窗格中都可以顯示一個網頁，從而可以獲得在同一個閱讀器窗口中同時顯示不同網頁的效果。框架網頁經過一個frameset標志和多個frame標志來定義。在框架網頁中，可將frameset標志置于head之后，以取代body的位置，還可以運用noframes標志框架不能被閱讀器顯示時的交換內容。v 為多窗口標志。其col 屬性用來標志多窗口個列的寬度，可以以百分數表示如20%，也可以以像素表示如200px ；frameset 標簽還有rows 屬性，用來表示此frameset 由多個行窗口