1、2022/9/271開篇?dú)g迎大家和我一起學(xué)習(xí)Web基礎(chǔ)學(xué)習(xí)時間： 2天學(xué)習(xí)內(nèi)容： HTML、CSS、JavaScript要點(diǎn)安排：NO.1HTMLNO.2css樣式表NO.3JavaScript和dom基礎(chǔ)2022/9/261開篇?dú)g迎大家和我一起學(xué)習(xí)Web基礎(chǔ)2022/9/272三多1、多記2、多看3、多練2022/9/262三多1、多記2022/9/273Web介紹Web介紹什么是WebWeb的特點(diǎn)Web的發(fā)展2022/9/263Web介紹Web介紹什么是Web2022/9/274什么是Web超文本（hypertext）超媒體（hypermedia）超文本傳輸協(xié)議（http）2022/9/2

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

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

4、 2022/9/269Internet和萬維網(wǎng)(www)萬維網(wǎng)2022/9/2710Internet和萬維網(wǎng)(www)超文本傳輸協(xié)議HTTP定義：網(wǎng)絡(luò)傳輸協(xié)議作用：發(fā)布和接收Html頁面統(tǒng)一資源定位符URL定義：網(wǎng)頁地址 格式：協(xié)議:/域名:端口號/文件路徑/文件名.文件后綴 http:/www.QQ.:80/tq/index.html2022/9/2610Internet和萬維網(wǎng)(www)超文2022/9/2711HTTP協(xié)議示例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消息體的內(nèi)容（略）2022/9/2611HTTP協(xié)議示例GET / HTTP/2022/9/2712HTML超文本標(biāo)記語言Html（超文本標(biāo)記語言）定義：為網(wǎng)頁創(chuàng)建和其它可在網(wǎng)頁瀏覽器中看到的信息設(shè)計(jì)的一種標(biāo)記語言.例子以“”標(biāo)識標(biāo)簽的開始，以“”標(biāo)識標(biāo)簽的結(jié)束成對標(biāo)簽又稱為容器，一對標(biāo)簽中還可以嵌套其它標(biāo)簽單獨(dú)標(biāo)簽不需要與之配對的結(jié)束標(biāo)簽，又稱之為空標(biāo)簽，例如屬性設(shè)置的格式為：屬性名=“屬性值”Hello world!2022/9/2612HTML超文本標(biāo)記語言Html（超文本2022/9/2713Html 規(guī)范與版

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

36、action屬性2022/9/2784get 還是post(補(bǔ)充) 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 注： 根據(jù) HTTP 規(guī)范，GET 用于信息獲取，而且應(yīng)該是 安全的和冪等的。所謂安全的意味著該操作用于獲取信息而非修改信息。換句話說，GET 請求一般不應(yīng)產(chǎn)生副作用。冪等的意味著對同一 URL 的多個請求應(yīng)該返回同樣的結(jié)果。 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(補(bǔ)充)form2022/9/2785總結(jié)表單是由表單容器和其中的表單元素組成表單中的各種表單元素及其屬性表單的結(jié)構(gòu)和表單屬性2022/9/2685總結(jié)表單是由表單容器和其中的表單元素組2022/9/2786課后練習(xí)作業(yè)模擬美食網(wǎng)站的注冊頁面（結(jié)合table做頁面布局）要求：姓名密碼性別 所在城市（省、市）個人喜好：各類美食個人介紹2022/9/2686課后練習(xí)作業(yè)模擬美食網(wǎng)站的注冊頁面（結(jié)20

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

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

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

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

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

45、創(chuàng)建一個多級嵌套框架，具體樣式見示意圖，要求實(shí)現(xiàn)導(dǎo)航頁面2022/9/26101作業(yè)2-1創(chuàng)建一個多級嵌套框架，具體2022/9/27102作業(yè)2-2采用iframe方式創(chuàng)建以下界面，并根據(jù)鏈接的提示實(shí)現(xiàn)界面不同target的跳轉(zhuǎn)2022/9/26102作業(yè)2-2采用iframe方式創(chuàng)建以2022/9/27103第六章 其它標(biāo)簽2022/9/26103第六章 其它標(biāo)簽2022/9/27104回顧框架的意義 框架結(jié)構(gòu)的典型代碼 多框架的窗口中超鏈接的導(dǎo)航目標(biāo) 框架嵌套的實(shí)現(xiàn)模板的應(yīng)用2022/9/26104回顧框架的意義 2022/9/27105目標(biāo)段落標(biāo)記字符標(biāo)記特殊字符表示方法圖片及圖片標(biāo)記

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

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