1、2022/9/271開篇歡迎大家和我一起學習Web基礎學習時間： 2天學習內容： HTML、CSS、JavaScript要點安排：NO.1HTMLNO.2css樣式表NO.3JavaScript和dom基礎2022/9/261開篇歡迎大家和我一起學習Web基礎2022/9/272三多1、多記2、多看3、多練2022/9/262三多1、多記2022/9/273Web介紹Web介紹什么是WebWeb的特點Web的發展2022/9/263Web介紹Web介紹什么是Web2022/9/274什么是Web超文本（hypertext）超媒體（hypermedia）超文本傳輸協議（http）2022/9/2

2、64什么是Web超文本（hypertext）2022/9/275 Web的發展Web 1.0 角色鮮明 發布個人網站 內容管理系統 目錄（分類） Web 2.0 人人參與 參與 博客 維基 標簽Web 3.0 集體智慧 云計算 SaaS 2022/9/265 2022/9/276第一章 HTML簡介第一章 HTML簡介2022/9/266第一章 HTML簡介第一章 HTML2022/9/277本章目標了解Internet和萬維網(www)?了解 Html語言歷史 和 W3C組織學習Html的全局架構標簽什么是標簽及其屬性?如何創建超級鏈接?2022/9/267本章目標了解Internet和萬維

3、網(w2022/9/278Internet和萬維網(www)什么是Internet?Internet的歷史TCP/IP(傳輸控制協議/Internet協議)，一種能保證計算機之間進行通信的標準規范2022/9/268Internet和萬維網(www)什么是2022/9/279Internet和萬維網(www)萬維網(world wide web)是一個基于超文本（Hypertext ）方式的信息檢索服務工具。萬維網提供這樣一種友好的信息查詢接口：用戶僅需提出查詢要求，而到什么地方查詢及如何查詢則由萬維網自動完成。 超文本開發語言HTML 信息資源的統一定位格式URL 超文本傳送通信協議HTTP

4、 2022/9/269Internet和萬維網(www)萬維網2022/9/2710Internet和萬維網(www)超文本傳輸協議HTTP定義：網絡傳輸協議作用：發布和接收Html頁面統一資源定位符URL定義：網頁地址 格式：協議:/域名:端口號/文件路徑/文件名.文件后綴 http:/www.QQ.:80/tq/index.html2022/9/2610Internet和萬維網(www)超文2022/9/2711HTTP協議示例GET / HTTP/1.1Host: User-Agent: Mozilla/5.0 (Windows; U; Windows NT 6.0; en-US; rv

5、:0) Gecko/2009042316 Firefox/3.0.10Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8Accept-Language: en-us,en;q=0.5Accept-Encoding: gzip,deflateAccept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7Keep-Alive: 300Connection: keep-aliveIf-Modified-Since: Mon, 25 May 2009 03:19:18 GMTHTT

6、P/1.1 200 OKCache-Control: private, max-age=30Content-Type: text/html; charset=utf-8Content-Encoding: gzipExpires: Mon, 25 May 2009 03:20:33 GMTLast-Modified: Mon, 25 May 2009 03:20:03 GMTVary: Accept-EncodingServer: Microsoft-IIS/7.0X-AspNet-Version: 2.0.50727X-Powered-By: ASP.NETDate: Mon, 25 May

7、2009 03:20:02 GMTContent-Length: 12173消息體的內容（略）2022/9/2611HTTP協議示例GET / HTTP/2022/9/2712HTML超文本標記語言Html（超文本標記語言）定義：為網頁創建和其它可在網頁瀏覽器中看到的信息設計的一種標記語言.例子以“”標識標簽的開始，以“”標識標簽的結束成對標簽又稱為容器，一對標簽中還可以嵌套其它標簽單獨標簽不需要與之配對的結束標簽，又稱之為空標簽，例如屬性設置的格式為：屬性名=“屬性值”Hello world!2022/9/2612HTML超文本標記語言Html（超文本2022/9/2713Html 規范與版

8、本不同瀏覽器之間的不兼容問題從軟件開發角度：多個公司開發了瀏覽器軟件，根據網頁中的標簽決定顯示內容,有點瀏覽器根據自己的需要，定義了特有的顯示效果標簽，導致不兼容規范的制定IETF 制定 Html 2.0W3C 組織 3W聯盟 正在使用的Html的版本Html 4.01XHTML1.1HTML 5 最新版2022/9/2613Html 規范與版本不同瀏覽器之間的不2022/9/2714瀏覽器訪問網頁文件的方式http協議網頁文件本地存儲系統（硬盤）www服務器網頁文件2022/9/2614瀏覽器訪問網頁文件的方式http協議本2022/9/2715如何上網?網絡的工作原理 客戶端向服務器發送頁

9、面請求Web 服務器處理請求并返回請求的頁面HTTP 負責請求和響應2022/9/2615如何上網?網絡的工作原理 客戶端向服務2022/9/2716靜態網頁2022/9/2616靜態網頁2022/9/2717動態網頁(1)2022/9/2617動態網頁(1)2022/9/2718動態網頁(2)2022/9/2618動態網頁(2)2022/9/2719網頁 與 網站什么是網頁?定義：構成網站的基本元素 格式：分為靜態網頁和動態網頁靜態網頁文件擴展名為.html或.htm動態網頁文件擴展名為.jsp或.aspx .asp .php等什么是網站? 實例：新浪，網易定義：展示特定內容的相關網頁的集合

10、 2022/9/2619網頁 與 網站什么是網頁?2022/9/2720編輯工具Dw( DreamWeaver)EditPlus記事本(Notepad)2022/9/2620編輯工具Dw( DreamWeaver2022/9/2721第一章 HTML簡介Blog2022/9/2621第一章 HTML簡介Blog2022/9/2722第一章 HTML簡介HTML結構人2022/9/2622第一章 HTML簡介HTML結構人2022/9/2723第一章 HTML簡介標簽：2022/9/2623第一章 HTML簡介標簽：html2022/9/2724Html的全局架構標簽網頁的頭部結構：內容：, ,

11、 CSS, Javascript網頁的主體結構：內容：包含網頁中顯示的文本、圖像和鏈接等歡迎來到中冶賽迪. .歡迎來到中冶賽迪例子2022/9/2624Html的全局架構標簽網頁的頭部ht2022/9/2725第一章 HTML簡介練習： 請做一個html頁面，輸出：“這是我的第一個html頁面”演示2022/9/2625第一章 HTML簡介練習：2022/9/2726好的html編碼習慣文件擴展名為 .html標簽必須正確地嵌套要符合XHTML標準標簽元素必須要關閉 比如、標簽名、屬性名要用小寫字母文檔必須要有根元素 標簽的屬性必須有屬性值,屬性值需要加上引號合理必要的注釋不要使用W3C不推薦

12、使用的標簽2022/9/2626好的html編碼習慣文件擴展名為 .2022/9/2727第二章 HTML標簽第二章 HTML標簽2022/9/2627第二章 HTML標簽第二章 HTML標2022/9/2728第二章 HTML標簽 標簽組成：HTML標簽種類：HTML標簽通常稱對出現，如、等有個別單獨出現的標簽我們叫它：空標簽。 如（強制換行符）2022/9/2628第二章 HTML標簽 標簽組成：HTM2022/9/2729第二章 HTML標簽標簽屬性標簽可以擁有屬性。屬性進一步說明了該元素的顯示或使用特性。如： 屬性的格式 ：屬性名 = “屬性值”屬性的位置： xxx 添加多個屬性： x

13、xx 2022/9/2629第二章 HTML標簽標簽屬性2022/9/2730什么是標記？什么是屬性?什么是標記?定義：Html命令稱為標記(標簽)作用：用于控制Html文檔的內容和外觀分類：單獨標簽:，成對標簽:標記的屬性作用：修飾或進一步制定信息。如顏色，對齊方式，高度，寬度等標簽屬性屬性值 學習 HTML 歡迎來到 HTML 世界 2022/9/2630什么是標記？什么是屬性?什么是標記?2022/9/2731DOCTYPE標簽文檔類型,會使瀏覽器使用相應的方式加載網頁并顯示。示例： 注意： 標簽沒有結束標簽！2022/9/2631DOCTYPE標簽文檔類型,會使瀏覽器2022/9/27

14、32Head - Meta元素META標簽分兩大部分：HTTP標題信息(HTTP-EQUIV)和頁面描述信息(NAME) HTTP-EQUIV 類似于HTTP的頭部協議，它回應給瀏覽器一些有用的信息，以幫助正確和精確地顯示網頁內容 ,響應報頭信息，如頁面編碼、緩存模式等等.NAME 定義頁面基本信息，這些信息是提供給網絡搜索引擎的，搜索引擎通過這些信息可以找到頁面 標簽永遠位于 head 元素內部。元數據總是以名稱/值的形式被成對傳遞的。必備屬性值描述contentsome_text定義與 http-equiv 或 name 屬性相關的元信息2022/9/2632Head - Meta元素ME

15、TA標簽2022/9/27332022/9/26332022/9/2734META標簽屬性值描述http-equivcontent-typeexpires網頁的到期時間refresh自動刷新并指向新頁面set-cookie如果網頁過期，那么存盤的cookie將被刪除。 把 content 屬性關聯到 HTTP 頭部。nameauthordescriptionkeywordsGenerator創建者Revised修改者others把 content 屬性關聯到一個名稱。schemesome_text定義用于翻譯 content 屬性值的格式。2022/9/2634META標簽屬性值描述http-

16、equ2022/9/2735標簽及其屬性示例xxxxxxxxxxxxx 2022/9/2635標簽及其屬性示例2022/9/2736標簽及其屬性標簽 屬性 bgcolor 設置網頁文檔的背景顏色十六進制RGB顏色碼，使用一個#號后跟六位十六進制數據，例如#FF0000Html的顏色常量名，例如red屬性 background 設置網頁文檔的背景圖片屬性 text 設置網頁中文字的顏色屬性 leftmargin 設置網頁中的內容到左邊距之間的距離屬性 topmargin 設置網頁中的內容到上邊距之間的距離2022/9/2636標簽及其屬性標簽 /b2022/9/2737標簽及其屬性標簽 屬性 a

17、lign 設置標題文字的水平對齊方式 取值范圍(left,right,center, justify兩端對齊)標簽 屬性 size 設置水平線的粗細屬性 width 設置寬度2022/9/2637標簽及其屬性標簽 2022/9/2738標簽及其屬性標簽 屬性 align 設置段落文字的水平對齊方式 取值范圍(left,right,center)標簽 標簽 作用:顯示圖片屬性 src 指明圖片位置(相對路徑，絕對路徑)屬性 align 設置圖片周圍內容對齊方式取值范圍( top,middle,bottom )屬性 alt 圖片無法顯示時的替代信息屬性title 提示信息2022/9/2638標簽

18、及其屬性標簽 2022/9/2739第二章 HTML標簽塊標簽: 內容 空格符： 注意：如要加多個空格，只需加多個標志演示：用以上所講的標簽做一個html頁面顯示2022/9/2639第二章 HTML標簽塊標簽:2022/9/2740第二章 HTML鏈接 HTML鏈接2022/9/2640第二章 HTML鏈接 HTML鏈接2022/9/2741超級鏈接標簽 作用:超級鏈接1)實現頁面之間的跳轉 2)頁內跳轉 3）mailto屬性 href=“”屬性 target錨記作用:頁內跳轉利用錨記可以實現頁面內跳轉結合超級鏈接，可以跳到另外頁面指定的位置Html語言注釋2022/9/2641超級鏈接標簽

19、 2022/9/2742第三章 HTML鏈接圖片標簽： Src屬性（鏈接本地資源）src = “所要鏈接資源地址” 注意：標簽是一個空標簽圖片作為鏈接：2022/9/2642第三章 HTML鏈接圖片標簽： 2022/9/2743第三章 HTML鏈接相對路徑：資源路徑與你打開頁面有關聯的路徑叫相對路徑絕對路徑：資源路徑與你打開頁面無關的路徑叫絕對路徑如果當前頁面與引用資源在同一文件夾內則直接寫資源名稱如果引用資源在當前文件夾下一級的文件夾內則需：./文件夾名稱/資源名稱如果引用資源在當前文件夾上一級的文件夾內則需：./資源名稱如果引用資源在當前文件夾上兩級的文件夾內則需：././資源名稱演示：2

20、022/9/2643第三章 HTML鏈接相對路徑：資源路2022/9/2744作業（一）個人簡歷：網頁1：1：個人圖片2: 個人基本情況介紹(性別，年齡，姓名等等)網頁2：1：個人學習經歷介紹2: 個人工作經驗介紹要求 用到段落標記進行排版，圖片標記 從網頁1中能鏈接到網頁2的鏈接2022/9/2644作業（一）個人簡歷：2022/9/2745作業（一）個人簡歷姓名：*性別: *年齡：*。其他信息1 自我介紹2 工作簡歷3 家庭成員自我介紹*工作簡歷1*2*3*家庭成員父親：*母親：*2022/9/2645作業（一）個人簡歷自我介紹2022/9/2746作業（二）項目：為新開的餐廳設計網站要求

21、：1.共有三個頁面，分別為A 文件名index.html 站點首頁，用來顯示餐廳介紹信息，如餐廳主營品種，餐廳規模，餐廳地理位置，餐廳營業時間，餐廳服務項目等。其中，餐廳主營品種，餐廳地理位置，營業時間為必須選項B 文件名 west.html 介紹西餐的頁面（至少4種） 分別介紹菜名，圖片，價格C 文件名 Chinese.html 介紹中國菜的頁面( 至少4種 ) 分別介紹菜名，圖片，價格2.三個頁面之間要建立超級鏈接A 分別建立超級鏈接到另外兩個頁面B 對于west.html和 Chinese.html要求有目錄分別鏈接到本頁面內的具體菜肴C west.html和Chinese.html之間

22、能夠有互相訪問的超級鏈接2022/9/2646作業（二）項目：為新開的餐廳設計網站2022/9/2747作業（二）2022/9/2647作業（二）2022/9/2748第四章：HTML表格和列表 第四章：HTML表格和列表2022/9/2648第四章：HTML表格和列表 第四章：H2022/9/2749回顧Internet 和 萬維網網頁的工作原理網頁的基本結構標記及其屬性段落標記，圖片標記，超級鏈接標記相對路徑，絕對路徑，物理路徑2022/9/2649回顧Internet 和 萬維網2022/9/2750本章目標網頁設計注意事項什么是表格？為什么需要表格？如何創建表格？表格如何使用？2022

23、/9/2650本章目標網頁設計注意事項2022/9/2751網頁設計注意事項多瀏覽器支持樣式與風格統一網站結構、文件命名頁面尺寸與屏幕分辨率圖片文件命名、大小尺寸限制相對路徑的應用頁面內容（title、meta、alt、tbody等屬性的應用）2022/9/2651網頁設計注意事項多瀏覽器支持2022/9/2752什么是表格？表格是html高級構件之一，它表示數據之間的關系，使對比分析更容易理解。表格由特定數目的行和列組成球員得分 籃板 姚明27 8 麥克格雷迪 31 2 海耶斯 8 15 巴蒂爾 7 5 阿爾斯通 2 3 2022/9/2652什么是表格？表格是html高級構件之一2022/

24、9/2753表格應用示例2022/9/2653表格應用示例2022/9/2754什么是表格？表格的作用：用于顯示數據，便于理解、分析組織網頁版面信息2022/9/2654什么是表格？表格的作用：2022/9/2755什么是表格？行列列標題在 HTML 文檔中，廣泛使用表格來存放網頁上的文本和圖像單元格表格標題2022/9/2655什么是表格？行列列標題在 HTML 文2022/9/2756第四章：HTML表格和列表HTML表格 表格標簽： 行標簽：列標簽：空 格：演示：一行一列一行三列兩行三列注意：一個完整的表格必須由三個標簽構成，且應該先畫行后畫列2022/9/2656第四章：HTML表格和

25、列表HTML表格2022/9/2757第四章：HTML表格和列表表格頭標簽（表格頭位于表格的內部）：頭內容 標簽相當于一個標簽，用法也相同。只不過格式化字體表格標題標簽（表格標題位于表格的上部）：My Caption 注意： 標簽放在的下邊，第一個的上邊2022/9/2657第四章：HTML表格和列表表格頭標簽（2022/9/2758 標簽及其屬性表格寬度 width 高度 height單位設置像素 (px)百分比 ( %)演示 設置寬度，高度避免出現水平滾動條一般不設置高度(自適應)cellspacing，cellpadding 屬性cellspacing 設置單元格間距cellpaddin

26、g 設置單元格邊沿和其內容之間的距離2022/9/2658 標簽及其屬性表格寬度 2022/9/2759table的常用屬性2022/9/2659table的常用屬性2022/9/2760標簽及其屬性align 屬性屬性值：“left” 、“center”、“right”注意區別的align屬性valign 屬性屬性值：“top”、“middle”、“bottom”bgcolor 屬性背景顏色設置考慮設置優先級的問題2022/9/2660標簽及其屬性align 屬性2022/9/2761標簽及其屬性align 屬性屬性值：”left” “center” “right”注意區別的align屬性v

27、align 屬性屬性值：”top” “middle” “bottom”bgcolor 屬性 background 屬性bgcolor 背景顏色設置 background 背景圖片設置考慮設置優先級的問題2022/9/2661標簽及其屬性align 屬性2022/9/2762標簽及其屬性width屬性 height屬性注意：同行或者同列單元格將受影響rowspan屬性 colspan屬性rowspan屬性 將一個表格單元格擴展為幾行。colspan屬性 將一個表格單元格擴展為幾列演示 項目實戰利用rowspan和colspan屬性合并單元格2022/9/2662標簽及其屬性width屬性 h20

28、22/9/2763用表格進行頁面排版表格進行頁面排版簡單，便捷表格嵌套使用2022/9/2663用表格進行頁面排版表格進行頁面排版2022/9/2764表格排版注意事項：表格嵌套層次不要太多整個頁面的排版不要用一個table，影響瀏覽器對頁面的顯示效率表格的行列排版要整齊td中沒有內容時，以空白（）填充Div+CSS布局（了解）2022/9/2664表格排版注意事項：表格嵌套層次不要太多2022/9/2765總結表格可以格式化數據、管理文件布局表格的基本結構標簽及其基本屬性合并單元格其它表格標簽2022/9/2665總結表格可以格式化數據、管理文件布局2022/9/2766課后練習作業2-1創

29、建一個如下樣式的表格 要求：1.表格寬度760px，邊框寬度為1px，表格水平居中2.單元格之間沒有間距，內容與單元格邊框之間距離為23.在單元格1和2分別插入圖片a1.gif和a2.jpg,并且圖片內容垂直居中4.其他文字依照下表輸入5.要求按照完整的網頁規范編碼單元格1單元格2設為首頁聯系站長加入收藏 首頁 | 基礎知識 | 高級編程第四章：HTML表格和列表2022/9/2666課后練習作業2-1創建一個如下樣式的表2022/9/2767第五章 表單第五章 表單2022/9/2667第五章 表單第五章 表單2022/9/2768本章目標什么是表單？表單如何使用？如何創建表單？了解表單和表

30、單元素之間的關系掌握 表單元素 的使用2022/9/2668本章目標什么是表單？2022/9/2769表單的應用表單在商務上的應用網上預定商品 網上商品拍賣表單在各種社會機構中的應用網上調查網絡咨詢表單在網絡上其它應用網絡人才招聘網絡社區注冊2022/9/2669表單的應用表單在商務上的應用2022/9/2770表單應用2022/9/2670表單應用2022/9/2771第五章 表單HTML表單 （表單是一個能夠包含表單元素的區域 ）表單標簽：表單元素2022/9/2671第五章 表單HTML表單 （表單是一個2022/9/2772表單元素-文本框、密碼框文本框標簽： 屬性：type，name

31、，size，maxlength，value，readonly密碼框標簽：屬性： type，name，size，maxlength，value，readonly2022/9/2672表單元素-文本框、密碼框文本框2022/9/2773第五章 表單單選按鈕標簽：MaleFemale復選框： I have a bike I have a car注意：復選框與單選框很大的不同就是name屬性不同，且復選框不要求有value屬性Checked屬性的特殊性文件輸入框標簽： 屬性：type，name， size，maxlength，readonly注意：單選按鈕的名稱必須相同，否則不能控制單選特性2022/

32、9/2673第五章 表單單選按鈕標簽：2022/9/2774表單元素下拉列表下拉列表標簽： 屬性：name，size，multiple屬性：value，selected補充：標簽: 為主菜單中的每個子項標簽都再生成子菜單下拉列表：VolvoSaab Fiat Audi 2022/9/2674表單元素下拉列表下拉列表2022/9/2775表單元素下拉列表你所在國家：中國日本韓國法國德國意大利2022/9/2675表單元素下拉列表2022/9/2776表單元素復選框、單選框你最喜歡什么動物？狗 貓 鳥 魚 你喜歡什么動物？狗 貓 鳥 魚 2022/9/2676表單元素復選框、單選框2022/9/2

33、777表單元素動作按鈕標簽標簽：屬性：type2022/9/2677表單元素動作按鈕標簽2022/9/2778給表單元素標記和分組標簽使用label 標簽來定義表單元素間的關系標簽 標簽將一群相關表單控件形成一個組，并用和標簽來標記這個組個人資料姓名：個人簡介：2022/9/2678給表單元素標記和分組標簽2022/9/2779第五章 表單文本域：The cat was playing in the garden.按鈕： 兩個特殊的按鈕 提交按鈕 重置按鈕 注意：提交按鈕必須配合form的action屬性使用2022/9/2679第五章 表單文本域：2022/9/2780Tab 鍵索引順序 t

34、abindex 屬性用來設定按下tab鍵時焦點的移動順序tabindex 屬性值為正整數規則：數值越小越先訪問，沒有tabindex屬性或屬性為0的元素后被訪問2022/9/2680Tab 鍵索引順序 tabindex 2022/9/2781其它相關屬性id 屬性id屬性賦值的名稱不會傳遞給服務器(證明)id屬性和name屬性的區別title 屬性作用：用彈出式幫助來給用戶提示style, class, lang, dir 屬性accesskey屬性作用：設定頁面快捷鍵IE 為alt+accesskey屬性值，FireFox 為alt+shift+accesskey屬性值 2022/9/268

35、1其它相關屬性id 屬性2022/9/2782readonly和disabled屬性readonly屬性用戶不能修改表單控件控件值將被傳送到服務器控件可以被鼠標和通過tab鍵選定disabled屬性用戶不能修改表單控件控件值將不會被傳送到服務器控件不能被鼠標和通過tab鍵選定2022/9/2682readonly和disabled屬性2022/9/2783Form標簽的三大屬性action屬性(必須)說明了接收和處理表單數據的應用程序URLmethod 屬性(必須)為瀏覽器設置表單中的數據傳送到服務器的方法屬性值：get 和 postName 屬性.2022/9/2683Form標簽的三大屬性

36、action屬性2022/9/2784get 還是post(補充) GET /cgi-bin/method.cgi?userName=zhangsan HTTP/1.1Accept: image/gif, image/x-xbitmap, image/jpeg, image/pjpeg, application/vnd.ms-powerpoint, application/vnd.ms-excel, application/msword, */*Referer: http:/localhost/other.htmlAccept-Language: zh-cnAccept-Encoding: g

37、zip, deflateUser-Agent: Mozilla/4.0 (compatible; MSIE 5.01; Windows NT 5.0)Host: localhost:8080Connection: Keep-Alive 注： 根據 HTTP 規范，GET 用于信息獲取，而且應該是 安全的和冪等的。所謂安全的意味著該操作用于獲取信息而非修改信息。換句話說，GET 請求一般不應產生副作用。冪等的意味著對同一 URL 的多個請求應該返回同樣的結果。 POST /cgi-bin/tech/method.cgi HTTP/1.1Accept: image/gif, image/x-xbi

38、tmap, image/jpeg, image/pjpeg, application/vnd.ms-powerpoint, application/vnd.ms-excel, application/msword, */*Referer: http:/localhost/other.htmlAccept-Language: zh-cnContent-Type: application/x-www-form-urlencodedAccept-Encoding: gzip, deflateUser-Agent: Mozilla/4.0 (compatible; MSIE 5.01; Windows

39、 NT 5.0)Host: localhost:8080Content-Length: 9Connection: Keep-AliveuserName=lisi2022/9/2684get 還是post(補充)form2022/9/2785總結表單是由表單容器和其中的表單元素組成表單中的各種表單元素及其屬性表單的結構和表單屬性2022/9/2685總結表單是由表單容器和其中的表單元素組2022/9/2786課后練習作業模擬美食網站的注冊頁面（結合table做頁面布局）要求：姓名密碼性別 所在城市（省、市）個人喜好：各類美食個人介紹2022/9/2686課后練習作業模擬美食網站的注冊頁面（結20

40、22/9/2787第五章 框架2022/9/2687第五章 框架2022/9/2788目 標 框架的意義 框架結構的典型代碼 多框架的窗口中超鏈接的導航目標 框架嵌套的實現2022/9/2688目 標 框架的意義 2022/9/2789框架的應用2022/9/2689框架的應用2022/9/2790框架的作用框架結構的優點內容組織有條理方便導航框架結構的缺點瀏覽器被劃分為太多子窗口影響整體美觀通常能通過表格布局取代打印整個頁面變得困難。 2022/9/2690框架的作用框架結構的優點2022/9/2791框架結構標簽作用：定義框架屬性：cols 設置框架分為幾列rows設置框架分為幾行bord

41、er 用來設置框架的邊框寬度bordercolor 邊框顏色Frameborder 設置是否顯示框架邊框其它屬性：class，style，title，id2022/9/2691框架結構標簽/f2022/9/2792框架結構標簽作用：定義每個框架中放入什么文件。屬性：src: 制定在框架窗口中顯示什么文件name:制定框架窗口的名字noresize:禁止 訪問用戶改變框架大小scrolling:為框架窗口設置滾動條其它屬性：title，style，class，id2022/9/2692框架結構標簽/fram2022/9/2793框架結構標簽作用：為不能顯示框架的瀏覽器(mosaic)提供了一種解

42、決方案2022/9/2693框架結構標簽/n2022/9/2794框架的嵌套典型的左右框架演示嵌套框架的實現演示2層嵌套3層嵌套（作業）實際應用：聊天室2022/9/2694框架的嵌套典型的左右框架2022/9/2795框架示例無標題文檔 您當前瀏覽器不支持框架Rows屬性進行窗口上下劃分Frameset嵌套，再左右劃分Frame的name，做頁面導航時，超鏈接的target指向此name2022/9/2695框架示例!DOCTYPE html 2022/9/2796超鏈接導航的特殊屬性targetTarget 作用：指定標簽中href指向的頁面在target指定的框架或者窗口中打開。如果ta

43、rget指定的框架或者窗口不存在。瀏覽器將在新窗口中打開。實現框架的導航效果2022/9/2696超鏈接導航的特殊屬性target2022/9/2797導航鏈接目標標簽作用：為沒有包含顯示的target屬性的當前文檔中的每一個超鏈接設置一個默認目標。屬性：Target注意：該標簽位于之內2022/9/2697導航鏈接目標標簽2022/9/2798特殊的目標_blank瀏覽器總是在一個新打開、未命名的窗口中載入鏈接的文檔_self超鏈接的默認值，它使得目標文檔載入并顯示在相同的框架或者窗口中。_parent文檔載入父窗口或者包含了超鏈接引用的框架_top將文檔載入取代當前窗口中的框架。2022/

44、9/2698特殊的目標_blank2022/9/2799內聯框架標簽屬性：Src 用來指定內聯框架中顯示的網頁Align 設置內聯框架在相鄰文檔中的位置Width，height 設置內聯框架區域的寬度和高度Frameborder 設置是否有3維邊框(“yes”或”no”)Scrolling 設置是否有滾動條(同)其它標簽 class，style，id，name瀏覽器中的瀏覽器2022/9/2699內聯框架標簽2022/9/27100總結框架結構的應用框架的標簽及其屬性 多層框架嵌套的實現多框架的窗口中超鏈接的導航目標 2022/9/26100總結框架結構的應用2022/9/27101作業2-1

45、創建一個多級嵌套框架，具體樣式見示意圖，要求實現導航頁面2022/9/26101作業2-1創建一個多級嵌套框架，具體2022/9/27102作業2-2采用iframe方式創建以下界面，并根據鏈接的提示實現界面不同target的跳轉2022/9/26102作業2-2采用iframe方式創建以2022/9/27103第六章 其它標簽2022/9/26103第六章 其它標簽2022/9/27104回顧框架的意義 框架結構的典型代碼 多框架的窗口中超鏈接的導航目標 框架嵌套的實現模板的應用2022/9/26104回顧框架的意義 2022/9/27105目標段落標記字符標記特殊字符表示方法圖片及圖片標記

46、多媒體（動畫，音樂）2022/9/26105目標段落標記2022/9/27106段落相關標記作用：定義段落屬性：align作用：換行標題標簽.Align屬性改變對齊方式2022/9/26106段落相關標記2022/9/27107段落相關標記標簽作用：起修飾作用的水平分割線屬性：align 設置對齊方式size設置分割線的厚度（像素為單位）noshade 顯示扁平2D分割線，沒有屬性值width 設置分割線的長度(百分比，像素)color 設置顏色，一旦設置顏色將失去3D效果分割線的使用：頁首頁尾使用分割線2022/9/26107段落相關標記標簽2022/9/27108段落相關標記.作用：滾動字

47、幕屬性：behavior 設置文字滾動樣式(scroll，slide，alternate)direction 設置文字滾動的方向 (left,right,up,down)loop 設置文字的滾動次數bgcolor 設置滾動區域背景色scrollamount 設置每次滾動之間的間隔像素scrolldelay 設置每次滾動之間的時間間隔(毫秒)height,width設置整個字幕區域的大小事件：onmouseover=“this.stop()” onmouseout=“this.start()”2022/9/26108段落相關標記.2022/9/27109段落相關標記有序列表屬性：start 設置有序列表的起始數字type設置編號的樣