網(wǎng)站設(shè)計(jì)與Web應(yīng)用開(kāi)發(fā)技術(shù)(第四版)（微課版）ch03 HTTP協(xié)議及其開(kāi)發(fā)與前端開(kāi)發(fā)基礎(chǔ)_第1頁(yè)
網(wǎng)站設(shè)計(jì)與Web應(yīng)用開(kāi)發(fā)技術(shù)(第四版)（微課版）ch03 HTTP協(xié)議及其開(kāi)發(fā)與前端開(kāi)發(fā)基礎(chǔ)_第2頁(yè)
網(wǎng)站設(shè)計(jì)與Web應(yīng)用開(kāi)發(fā)技術(shù)(第四版)（微課版）ch03 HTTP協(xié)議及其開(kāi)發(fā)與前端開(kāi)發(fā)基礎(chǔ)_第3頁(yè)
網(wǎng)站設(shè)計(jì)與Web應(yīng)用開(kāi)發(fā)技術(shù)(第四版)（微課版）ch03 HTTP協(xié)議及其開(kāi)發(fā)與前端開(kāi)發(fā)基礎(chǔ)_第4頁(yè)
網(wǎng)站設(shè)計(jì)與Web應(yīng)用開(kāi)發(fā)技術(shù)(第四版)（微課版）ch03 HTTP協(xié)議及其開(kāi)發(fā)與前端開(kāi)發(fā)基礎(chǔ)_第5頁(yè)
已閱讀5頁(yè)，還剩31頁(yè)未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

版權(quán)說(shuō)明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡(jiǎn)介

第3章HTTP協(xié)議及其開(kāi)發(fā)與前端開(kāi)發(fā)基礎(chǔ)教學(xué)目標(biāo)教學(xué)重點(diǎn)教學(xué)過(guò)程第2頁(yè)教學(xué)目標(biāo)理解HTTP的基本原理及運(yùn)行機(jī)制了解HTTP應(yīng)用開(kāi)發(fā)的基本方法掌握HTML的用法第3頁(yè)教學(xué)重點(diǎn)HTTP的運(yùn)行機(jī)制HTML文檔的編寫第4頁(yè)教學(xué)過(guò)程HTTP協(xié)議HTML基礎(chǔ)HTML的基本語(yǔ)法HTML實(shí)例第5頁(yè)3.1HTTP協(xié)議

瀏覽網(wǎng)頁(yè)時(shí)在瀏覽器的地址欄里輸入的網(wǎng)站地址叫做URL(UniformResourceLocator，統(tǒng)一資源定位符）在瀏覽器的地址框中輸入一個(gè)URL或是單擊一個(gè)超級(jí)鏈接時(shí)，URL就確定了要瀏覽的地址。瀏覽器通過(guò)超文本傳輸協(xié)議(HTTP)，將Web服務(wù)器上站點(diǎn)的網(wǎng)頁(yè)代碼提取出來(lái)，并翻譯成漂亮的網(wǎng)頁(yè)第6頁(yè)3.1HTTP協(xié)議

http://www.njupt./china/index.htm1.http://：代表超文本傳輸協(xié)議，通知某臺(tái)服務(wù)器顯示W(wǎng)eb頁(yè)，通常不用輸入2.www：代表一個(gè)Web(萬(wàn)維網(wǎng))服務(wù)器3.njupt.：這是裝有Web服務(wù)器的域名，或站點(diǎn)服務(wù)器的名稱4.China/：為該服務(wù)器上的子目錄，就好像個(gè)人電腦上的文件夾5.Index.htm：index.htm是上述文件夾中的一個(gè)HTML文件(網(wǎng)頁(yè))第7頁(yè)3.1HTTP協(xié)議

HTTP0.9：最初版本，只支持純文本HTTP1.0：無(wú)狀態(tài)，可交互，效率較低HTTP1.1：允許保持連接，更高效HTTP1.2：適合于移動(dòng)環(huán)境，支持負(fù)載均衡等HTTP2.0：支持多路復(fù)用、頭部壓縮、隨時(shí)復(fù)位、服務(wù)器端推送等功能HTTP3.0：主要改進(jìn)包括，基于QUIC（UDP）、多路復(fù)用升級(jí)、錯(cuò)誤恢復(fù)和安全性第8頁(yè)3.1HTTP協(xié)議HTTP協(xié)議(HypertextTransferProtocol)，即超文本傳輸協(xié)議它用于從WWW服務(wù)器傳輸超文本到本地瀏覽器的傳送協(xié)議。它可以使瀏覽器更加高效，使網(wǎng)絡(luò)傳輸減少它不僅保證計(jì)算機(jī)正確快速地傳輸超文本文檔，還確定傳輸文檔中的哪一部分，以及哪部分內(nèi)容首先顯示(如文本先于圖形)等第9頁(yè)3.1.2

HTTP的宏觀工作原理

客戶機(jī)（IE）服務(wù)器【server】請(qǐng)求響應(yīng)統(tǒng)一資源標(biāo)識(shí)符(URL)協(xié)議版本號(hào)MIME信息（請(qǐng)求修飾符、客戶機(jī)信息和可能的內(nèi)容）狀態(tài)行（信息的協(xié)議版本號(hào)、一個(gè)成功或錯(cuò)誤的代碼）MIME信息（服務(wù)器信息、實(shí)體信息和可能的內(nèi)容）第10頁(yè)客戶機(jī)【IE】服務(wù)器【server】代理網(wǎng)關(guān)隧道響應(yīng)請(qǐng)求請(qǐng)求響應(yīng)3.1.2

HTTP的宏觀工作原理

第11頁(yè)1.建立連接2.發(fā)送請(qǐng)求3.發(fā)送響應(yīng)4.關(guān)閉連接客戶機(jī)【IE】服務(wù)器【server】請(qǐng)求建立連接發(fā)送響應(yīng)發(fā)送請(qǐng)求關(guān)閉連接如果，采用是帶有代理的交互過(guò)程，則在此過(guò)程中需要增加一個(gè)中介，完成請(qǐng)求和響應(yīng)時(shí)的中轉(zhuǎn)工作3.1.3

HTTP協(xié)議基礎(chǔ)3.1.3

HTTP協(xié)議基礎(chǔ)第13頁(yè)3.1.4HTTP應(yīng)用開(kāi)發(fā)方法HTML的基本用法HTTP協(xié)議從通信的角度貫穿了應(yīng)用開(kāi)發(fā)的多個(gè)層次，包括了：HTTP客戶程序、HTTP服務(wù)器程序、服務(wù)器端應(yīng)用程序第14頁(yè)3.1.5HTTP應(yīng)用的開(kāi)發(fā)使用網(wǎng)絡(luò)層的編程接口，如SocketAPI等使用應(yīng)用層API，如InternetTransfer控件第15頁(yè)3.1.6

S-HTTP、SSL及TLS安全超文本轉(zhuǎn)移協(xié)議(S-HTTP)結(jié)合HTTP而設(shè)計(jì)的消息的安全通信協(xié)議，特征是瀏覽器里面顯示的地址開(kāi)頭為：https://安全套接層(SSL)為網(wǎng)絡(luò)通信提供安全及數(shù)據(jù)完整性的一種安全協(xié)議SSL記錄協(xié)議(SSLRecordProtocol)和SSL握手協(xié)議(SSLHandshakeProtocol)第16頁(yè)3.1.6

S-HTTP、SSL及TLS傳輸層協(xié)議(TLS)兩個(gè)通信應(yīng)用程序之間提供保密性和數(shù)據(jù)完整性包括TLS記錄協(xié)議和TLS握手協(xié)議最新版本的TLS是SSL的后續(xù)版本，HTTPS=HTTP+TLS第17頁(yè)3.2前端開(kāi)發(fā)基礎(chǔ)HTML簡(jiǎn)介超文本超文本是一種信息管理方式，它的本質(zhì)含義是非線性的文檔組織形式；是采用了符合人腦思維模式的聯(lián)想機(jī)制對(duì)龐大的信息資源進(jìn)行索引的一種非線性結(jié)構(gòu)超媒體＝超文本＋多媒體HTML一種國(guó)際化標(biāo)準(zhǔn)語(yǔ)言，它用于在Web上發(fā)布超文本信息，是一種基于SGML，公開(kāi)的資源描述格式第18頁(yè)3.2前端開(kāi)發(fā)基礎(chǔ)第19頁(yè)3.2

前端開(kāi)發(fā)基礎(chǔ)HTML標(biāo)記語(yǔ)法及文檔結(jié)構(gòu)HTML只是一個(gè)純文本文件，由“顯示內(nèi)容”及“控制語(yǔ)句”兩部分組成規(guī)范的標(biāo)記方法為： <標(biāo)簽屬性1=屬性值屬性2=屬性值…>受影響內(nèi)容</標(biāo)簽>字符引用為了解決與標(biāo)簽字符沖突的問(wèn)題，分為：數(shù)值字符引用和字符實(shí)體引用

注釋方法<!--注釋內(nèi)容-->第20頁(yè)HTML文件的總體結(jié)構(gòu)

<!DOCTYPEhtml><html><head><title>文件標(biāo)題</title>:</head><body>::</body></html>表頭區(qū)主體區(qū)以<html>開(kāi)頭以</html>結(jié)尾3.2

前端開(kāi)發(fā)基礎(chǔ)第21頁(yè)3.2

前端開(kāi)發(fā)基礎(chǔ)HTML網(wǎng)頁(yè)的編寫和測(cè)試方法編寫HTML文件，保存為后綴為html的文件雙擊打開(kāi)該文件，即可在瀏覽器中查看<!DOCTYPEhtml><html><head><title>myfirstpage</title></head><body>我的第一個(gè)網(wǎng)頁(yè)</body></html>第22頁(yè)3.2

前端開(kāi)發(fā)基礎(chǔ)<!DOCTYPE>聲明位于文檔中的最前面的位置，處于<html>標(biāo)簽之前。此標(biāo)簽可通知瀏覽器文檔使用了什么HTML或XHTML規(guī)范HTML4：Strict，Transitional，F(xiàn)ramesetXML

：Strict、Transitional，F(xiàn)rameset為了兼容，很多網(wǎng)站都采用了： <!doctypehtml>

方式

第23頁(yè)3.2

前端開(kāi)發(fā)基礎(chǔ)編輯網(wǎng)頁(yè)通常有兩種方式文本編輯方式，如：VSCode，SublimeText，甚至于Windows的記事本等所見(jiàn)即所得方式，如：FrontPage，Dreamweaver

等建議：讀者學(xué)習(xí)HTML編寫時(shí)，初學(xué)時(shí)使用文本編輯方式，這樣能加快熟悉HTML標(biāo)簽和相關(guān)用法；之后轉(zhuǎn)入使用高級(jí)工具，加快編寫效率第24頁(yè)3.3HTML的基本應(yīng)用標(biāo)題和段落標(biāo)題文字標(biāo)簽段落標(biāo)簽強(qiáng)行換行標(biāo)簽<BR>、設(shè)置段落標(biāo)簽<P>、顯示預(yù)排格式標(biāo)簽<PRE>、分區(qū)顯示標(biāo)簽<DIV>文字標(biāo)簽<FONT>文字的大小、字體、字型、顏色

列表無(wú)序列表、有序列表、定義列表、列表嵌套

第25頁(yè)3.3HTML的基本應(yīng)用超鏈接錨點(diǎn)標(biāo)簽<A> <Ahref="鏈接的目標(biāo)地址"name="鏈接名稱字符串"target="打開(kāi)窗口方式">瀏覽器中顯示的熱點(diǎn)</A>指向其他頁(yè)面的鏈接 <Ahref="目標(biāo)地址的路徑/目標(biāo)文件名.html">熱點(diǎn)文本</A>

創(chuàng)建指向本頁(yè)中的鏈接

<Ahref=“#書簽名”>熱點(diǎn)文本</A>

創(chuàng)建指向其它類型文件的鏈接 <Ahref="下載文件名">熱點(diǎn)文本</A>

創(chuàng)建發(fā)送電子郵件的鏈接 <Ahref="mailto:E-mail地址">發(fā)送郵件的熱點(diǎn)文本</A>第26頁(yè)3.3HTML的基本應(yīng)用表格表格的標(biāo)簽為<table>，行的標(biāo)簽<tr>，表項(xiàng)標(biāo)簽<td>、表頭<th>跨多行、多列的表項(xiàng)使用<tr>、<td>、<th>標(biāo)簽的colspan和rowspan屬性，制作跨多行(合并行)和跨多列(合并列)的表格表格在頁(yè)面中的屬性在頁(yè)面中的位置、顏色和圖片背景表格的分組顯示及對(duì)齊

第27頁(yè)3.3HTML的基本應(yīng)用圖像設(shè)置網(wǎng)頁(yè)的背景選擇背景色、指定背景圖片、

插入圖像 <imgsrc="圖片文件名"alt="簡(jiǎn)單說(shuō)明"width="圖片的寬度"height="圖片的高度"border="邊框?qū)挾?hspace="水平方向空白"vspace="垂直方向空白"align="對(duì)齊方式">設(shè)置圖片的布局用圖片作為超鏈接

<ahref="鏈接到的文件名"><imgsrc="圖片文件名"></a>在圖像上定義熱區(qū)第28頁(yè)3.3HTML的基本應(yīng)用音頻和視頻通過(guò)<BGSOUND>標(biāo)簽實(shí)現(xiàn)背景音樂(lè)

<BGSOUNDsrc="聲音文件"loop="播放次數(shù)">通過(guò)<IMG>標(biāo)簽的dynsrc屬性可以向網(wǎng)頁(yè)中加入視頻或者<video>標(biāo)簽

<IMGsrc="圖像文件"dynsrc="視頻文件.avi"loop="次數(shù)"loopdelay="時(shí)間"start="值"controls><videosrc="視頻文件.mp4"width="320"height="240"controls="controls">自動(dòng)刷新頁(yè)面：在頁(yè)面打開(kāi)停留幾秒鐘后，自動(dòng)轉(zhuǎn)向其它網(wǎng)頁(yè)<METAhttp-equiv="Refresh"content="秒數(shù);url=新頁(yè)面">第29頁(yè)3.3

HTML的基本應(yīng)用框架應(yīng)用(frame以及iframe標(biāo)簽）通過(guò)使用<A>的target屬性，可實(shí)現(xiàn)框架間的鏈接

<ahref="目標(biāo)文件名.html"target="框架名">熱點(diǎn)文本</a>_blank沒(méi)有名字的瀏覽器窗口打開(kāi)_self在當(dāng)前的框架打開(kāi)_top在整個(gè)瀏覽器窗口打開(kāi)_parent在父窗口打開(kāi)第30頁(yè)3.3

HTML的基本應(yīng)用使用DIV標(biāo)簽+CSS技術(shù)的框架方案<style>body{font-family:Verdana;font-size:14px;margin:0;}#container{margin:0auto;width:100%;}#header{height:100px;background:#9c6;margin-bottom:5px;}#mainContent{height:500px;margin-bottom:5px;}#sidebar{float:left;width:200px;height:500px;background:#cf9;}#content{margin-left:205px!important;margin-left:202px;height:500px;background:#ffa;}</style><divid="container"><divid="header">這是上部區(qū)域</div><divid="mainContent"><divid="sidebar">這是左側(cè)區(qū)域</div><divid="content">2列左側(cè)固定，右側(cè)自適應(yīng)寬度+頭部。可改變?yōu)g覽器的寬度來(lái)進(jìn)行測(cè)試。

</div></div></div>第31頁(yè)3.3

HTML的基本應(yīng)用表單：網(wǎng)頁(yè)上具有可輸入表項(xiàng)及項(xiàng)目選擇等控制所組成的欄目稱為表單可實(shí)現(xiàn)網(wǎng)頁(yè)的交互操作<FORMaction="mailto:mail地址或網(wǎng)址"method=get|post><INPUTtype="表項(xiàng)名"name="名"size=xmaxlength=y>…</FORM>其中的“表項(xiàng)名”可以是：text，password，checkbox，radio，image，hidden，submit，reset；它們對(duì)應(yīng)不同的表單控件第32頁(yè)3.3

HTML的基本應(yīng)用表單實(shí)例：文字和密碼的輸入<HTML><HEAD><TITLE>輸入文本和密碼</TITLE><HEAD><BODYtext=blue><CENTER><H2><FONTcolor=red>個(gè)人資料</FONT></H2></CENTER><FORMaction="mailto:YourMailAdd@YourM"memethod=POST>

姓名:<INPUTtype=textname=姓名><BR>

主頁(yè)的網(wǎng)址:<INPUTtype=textname=網(wǎng)址value=http://><BR>

密碼:<INPUTtype=passwordname=密碼><BR>

<INPUTtype=submitvalue="發(fā)送"><INPUTtype=resetvalue="重設(shè)"></FORM></BODY></HTML>第33頁(yè)3.3

HTML的基本應(yīng)用Canvas應(yīng)用H5移除了包括：<acronym>、<applet>、

溫馨提示

  • 1. 本站所有資源如無(wú)特殊說(shuō)明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁(yè)內(nèi)容里面會(huì)有圖紙預(yù)覽，若沒(méi)有圖紙預(yù)覽就沒(méi)有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫(kù)網(wǎng)僅提供信息存儲(chǔ)空間，僅對(duì)用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對(duì)用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請(qǐng)與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。

最新文檔

評(píng)論

0/150

提交評(píng)論