第7章Web技術(shù)和HTML=創(chuàng)新教育基礎(chǔ)與實(shí)踐課件

上傳人：我*** IP屬地：貴州上傳時(shí)間：2022-12-16 格式：PPTX 頁(yè)數(shù)：80 大小：1.40MB 積分：25 舉報(bào) 版權(quán)申訴

第7章Web技術(shù)和HTML=創(chuàng)新教育基礎(chǔ)與實(shí)踐課件_第2頁(yè)

第7章Web技術(shù)和HTML=創(chuàng)新教育基礎(chǔ)與實(shí)踐課件_第3頁(yè)

第7章Web技術(shù)和HTML=創(chuàng)新教育基礎(chǔ)與實(shí)踐課件_第4頁(yè)

第7章Web技術(shù)和HTML=創(chuàng)新教育基礎(chǔ)與實(shí)踐課件_第5頁(yè)

已閱讀5頁(yè)，還剩75頁(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)介

第7章Web技術(shù)和HTML孫燾第7章Web技術(shù)和HTML孫燾重點(diǎn)：web技術(shù)概述1HTML的格式2HTML的常用標(biāo)簽3多frame頁(yè)面設(shè)計(jì)4重點(diǎn)：web技術(shù)概述1HTML的格式2HTML的常用標(biāo)簽3多難點(diǎn)：HTML的格式掌握1Table標(biāo)簽的相關(guān)屬性2難點(diǎn)：HTML的格式掌握1Table標(biāo)簽的相關(guān)屬性27.1

Web技術(shù)概述什么是萬(wàn)維網(wǎng)

Web的表現(xiàn)形式什么是Web網(wǎng)站W(wǎng)eb網(wǎng)站的功能Web的開(kāi)發(fā)技術(shù)7.1Web技術(shù)概述什么是萬(wàn)維網(wǎng)7.1

Web技術(shù)概述7.1.1什么是萬(wàn)維網(wǎng)World

Wide

Web稱(chēng)為萬(wàn)維網(wǎng)，簡(jiǎn)稱(chēng)Web。它的基本結(jié)構(gòu)是采用開(kāi)放式的客戶/服務(wù)器結(jié)構(gòu)(Client/Server),分成服務(wù)器端、客戶接收機(jī)及通訊協(xié)議三個(gè)部分。7.1Web技術(shù)概述7.1.1什么是萬(wàn)維網(wǎng)7.1

Web技術(shù)概述7.1.2Web的表現(xiàn)形式(1)超文本（hypertext）(2)超媒體（hypermedia）(3)超文本傳輸協(xié)議（HTTP）7.1Web技術(shù)概述7.1.2Web的表現(xiàn)形式7.1Web技術(shù)概述7.1.3什么是Web網(wǎng)站W(wǎng)eb網(wǎng)站就是利用互聯(lián)網(wǎng)技術(shù)，把企業(yè)，機(jī)構(gòu)或個(gè)人的信息通過(guò)Web頁(yè)面和Internet發(fā)布出去，通過(guò)申請(qǐng)域名而成為一個(gè)站點(diǎn)。7.1Web技術(shù)概述7.1.3什么是Web網(wǎng)站7.1Web技術(shù)概述7.1.4Web網(wǎng)站功能BBS社區(qū)電子商務(wù)在線論壇在線考試，遠(yuǎn)程教育博客，視頻等等7.1Web技術(shù)概述7.1.4Web網(wǎng)站功能7.1Web技術(shù)概述7.1.5Web開(kāi)發(fā)技術(shù)客戶端技術(shù)

HTML語(yǔ)言是信息展現(xiàn)的最有效載體服務(wù)端技術(shù)

CGI，PHP，ASP，JSP靜態(tài)技術(shù)

HTML動(dòng)態(tài)技術(shù)

DHTML，css，javascript，vbscript

7.1Web技術(shù)概述7.1.5Web開(kāi)發(fā)技術(shù)7.2HTML的格式7.2.1HMTL簡(jiǎn)介7.2.2HTML的編輯器7.2.3HTML發(fā)展歷史7.2.4HTML的基本格式7.2.5HTML的基本標(biāo)簽7.2.6HTML版的HelloWorld7.2HTML的格式7.2.1HMTL簡(jiǎn)介7.2HTML的格式7.2.1HMTL簡(jiǎn)介超文本置標(biāo)語(yǔ)言HyperTextMarkupLanguage，簡(jiǎn)稱(chēng)為HTML，是為“網(wǎng)頁(yè)創(chuàng)建和其它可在網(wǎng)頁(yè)瀏覽器中看到的信息”設(shè)計(jì)的一種置標(biāo)語(yǔ)言。HTML被用來(lái)結(jié)構(gòu)化信息——例如標(biāo)題、段落和列表等等，也可用來(lái)描述文檔的外觀和語(yǔ)義。包含HTML內(nèi)容的文件最常用的擴(kuò)展名是.html7.2HTML的格式7.2.1HMTL簡(jiǎn)介7.2HTML的格式7.2.2HTML的編輯器HTML編輯器是一種用來(lái)編輯HTML文本的軟件。其實(shí)HTML只是一個(gè)文本文件，就算一個(gè)最普通的文字編輯器都可以勝任。常用的HTML編輯器有記事本，Dreamweaver,Frontpage等。7.2HTML的格式7.2.2HTML的編輯器7.2HTML的格式7.2.3HTML發(fā)展歷史超文本置標(biāo)語(yǔ)言(第一版)--在1993年6月發(fā)為互聯(lián)網(wǎng)工程工作小組(IETF)工作草案發(fā)布(并非標(biāo)準(zhǔn))HTML2.0--1995年11月作為RFC1866發(fā)布,在RFC2854于2000年6月發(fā)布之后被宣布已經(jīng)過(guò)時(shí)HTML3.2--1996年1月14日,W3C推薦標(biāo)準(zhǔn)HTML4.0--1997年12月18日,W3C推薦標(biāo)準(zhǔn)ISO/IEC15445:2000(“ISOHTML”)--2000年5月15日發(fā)布,是國(guó)際標(biāo)準(zhǔn)化組織和國(guó)際電工委員會(huì)的標(biāo)準(zhǔn)XHTML1.0--發(fā)布于2000年1月26日,W3C推薦標(biāo)準(zhǔn)HTML2.0--W3C工作草案

7.2HTML的格式7.2.3HTML發(fā)展歷史7.2HTML的格式7.2.4HTML的基本格式(一)HTML是一種標(biāo)簽嵌套式的語(yǔ)言。標(biāo)簽用<></>來(lái)表示，標(biāo)簽必須成對(duì)出現(xiàn).如<head>,則必須以另一個(gè)標(biāo)簽</head>將它關(guān)閉。注意“head”前的斜杠，那就是關(guān)閉標(biāo)簽與打開(kāi)標(biāo)簽的區(qū)別。每個(gè)標(biāo)簽內(nèi)可以放置內(nèi)容，如

表示html的標(biāo)題7.2HTML的格式7.2.4HTML的基本格式(一)7.2HTML的格式7.2.4HTML的基本格式(二)標(biāo)簽之間可以嵌套例如<html><head><title>標(biāo)題</title></head><body>內(nèi)容</body></html>7.2HTML的格式7.2.4HTML的基本格式(二)7.2HTML的格式7.2.4HTML的基本格式(三)HTML不區(qū)分大小寫(xiě)<title>標(biāo)題</title>與<TITLE>標(biāo)題</TITLE>的效果是一樣的7.2HTML的格式7.2.4HTML的基本格式(三)7.2HTML的格式7.2.4HTML的基本格式(四)標(biāo)簽內(nèi)只能嵌套完整的其他標(biāo)簽下面是的嵌套方式是不合法的<head><title></head></title>在head標(biāo)簽內(nèi)只有title標(biāo)簽的開(kāi)始部分，沒(méi)有結(jié)束的部分，這是不合法的。7.2HTML的格式7.2.4HTML的基本格式(四)7.2HTML的格式7.2.5HTML的基本標(biāo)簽一個(gè)標(biāo)準(zhǔn)的HTML文件一般包含下面4個(gè)標(biāo)簽<html></html>：用來(lái)標(biāo)記整個(gè)html文件；<head></head>：用來(lái)標(biāo)記html的頭信息；<title></title>：用來(lái)標(biāo)記html標(biāo)題信息；應(yīng)嵌套在<head></head>中；<body></body>：用來(lái)標(biāo)記html的正文；7.2HTML的格式7.2.5HTML的基本標(biāo)簽7.2HTML的格式7.2.6HTML版的“helloworld”<html> <head> <title>HelloWorld</title> </head> <body> HelloWorld! </body></html>7.2HTML的格式7.2.6HTML版的“hello7.2HTML的格式7.2.6HTML版的“helloworld”7.2HTML的格式7.2.6HTML版的“hello7.3HTML常用標(biāo)簽表單標(biāo)簽的使用表格的繪制豐富的表格屬性圖片與超鏈接多窗口頁(yè)面7.3HTML常用標(biāo)簽表單標(biāo)簽的使用7.3HTML常用標(biāo)簽7.3.1表單標(biāo)簽的使用<formaction="HelloWorld.html"method="post">用戶名<inputtype="text"name="username"/>密碼<inputtype="password"name="pwd"/><br/><inputtype="radio"name=zoomvalue=2checked>教師<inputtype="radio"name=zoomvalue=4>學(xué)生<br/><inputtype="submit"name="submit"value="提交"/><inputtype="reset"name="reset"value="重置"/></form>7.3HTML常用標(biāo)簽7.3.1表單標(biāo)簽的使用7.3HTML常用標(biāo)簽7.3.1表單標(biāo)簽的使用<form></form>——用來(lái)標(biāo)記一組表單。其action屬性表示將此表單提交給誰(shuí)來(lái)處理；其method屬性用來(lái)表示提交表單的方式。常用的提交表單的方式為post和get。<input></input>——用來(lái)標(biāo)記一個(gè)用戶輸入。其type屬性表示用戶輸入的類(lèi)型。常用的用戶輸入類(lèi)型有：text,password,submit,button,reset等。name屬性會(huì)連同表單一起被提交，接收表單的容器可以通過(guò)name來(lái)獲取對(duì)應(yīng)的值。7.3HTML常用標(biāo)簽7.3.1表單標(biāo)簽的使用7.3HTML常用標(biāo)簽7.3.1表單標(biāo)簽的使用對(duì)<input></input>標(biāo)簽的type屬性的值的解釋?zhuān)?1)text：段純文本；(2)password：密碼；(3)radio：?jiǎn)芜x按鈕；(4)submit：提交表單的按鈕；(5)button：普通按鈕；(6)reset：清空表單的按鈕；<br/>表示換行，這個(gè)在html中很常用7.3HTML常用標(biāo)簽7.3.1表單標(biāo)簽的使用7.3HTML常用標(biāo)簽7.3.1表單標(biāo)簽的使用7.3HTML常用標(biāo)簽7.3.1表單標(biāo)簽的使用7.3HTML常用標(biāo)簽7.3.2表格的繪制<body><table> <thead> <tr> <td>學(xué)號(hào)</td><td>姓名</td><td>性別</td> <td>出生日期</td><td>院系</td> </tr> </thead> <tbodyid="tableBody"> <tr> <td>200801001</td><td>張三</td><td>男</td> <td>1989-01-01</td><td>電信學(xué)院</td> </tr> <tr> <td>200801002</td><td>李四</td><td>男</td> <td>1989-02-01</td><td>電信學(xué)院</td> </tr> </tbody> </table></body>7.3HTML常用標(biāo)簽7.3.2表格的繪制7.3HTML常用標(biāo)簽7.3.2表格的繪制(1)<table></table>：標(biāo)記一個(gè)表格；(2)<thead></thead>：標(biāo)記表格頭；(3)<tbody></tbody>：標(biāo)記表格體；(4)<tr></tr>：標(biāo)記表格中的一行，可以嵌套在<thead></thead>中，也可以嵌套在<tbody></tbody>中；(5)<td></td>：標(biāo)記表格中一行的一列，應(yīng)嵌套在<tr></tr>中。7.3HTML常用標(biāo)簽7.3.2表格的繪制7.3HTML常用標(biāo)簽7.3.2表格的繪制7.3HTML常用標(biāo)簽7.3.2表格的繪制7.3HTML常用標(biāo)簽7.3.3豐富表格屬性<tableid="Table5"cellSpacing="1"cellPadding="1"width="90%"align="center"bgColor="graytext"border="0"> <trbgColor="#ffffff"> <tdwidth="20%"bgColor="#cecfff"height="13">學(xué)號(hào)</td> <tdwidth="30%"colSpan="-13"height="13">200801001</td> <tdwidth="20%"bgColor="#cecfff"colSpan="-11"height="13">姓名</td> <tdwidth="30%"colSpan="-11"height="13">張三</td> </tr> <trbgColor="#ffffff"> <tdwidth="20%"bgColor="#cecfff"height="14">性別</td> <tdwidth="30%"colSpan="-13"height="14">男</td> <tdwidth="20%"bgColor="#cecfff"colSpan="-11"height="14">民族</td> <tdwidth="30%"colSpan="-11"height="14">漢</td> </tr> <trbgColor="#ffffff"> <tdwidth="20%"bgColor="#cecfff">生日</td> <tdwidth="30%"colSpan="-13">1989-01-01</td> <tdwidth="20%"bgColor="#cecfff"colSpan="-11">考生來(lái)源</td> <tdwidth="30%"colSpan="-11">應(yīng)屆畢業(yè)</td> </tr> <trbgColor="#ffffff"> <tdwidth="20%"bgColor="#cecfff">院系</td> <tdwidth="30%"colSpan="-13">電子與信息工程學(xué)院</td> <tdwidth="20%"bgColor="#cecfff"colSpan="-11">專(zhuān)業(yè)</td> <tdwidth="30%"colSpan="-11">計(jì)算機(jī)應(yīng)用技術(shù)</td> </tr></table>7.3HTML常用標(biāo)簽7.3.3豐富表格屬性7.3HTML常用標(biāo)簽7.3.3豐富表格屬性<tr></tr>和<td></td>標(biāo)簽都具有bgColor屬性，用來(lái)標(biāo)記一行或一個(gè)單元格的背景顏色。width和height屬性用來(lái)標(biāo)記表格的寬和高，可以以百分?jǐn)?shù)為單位（如20%），也可以以像素?cái)?shù)為單位（如200px）。align屬性用來(lái)標(biāo)記表格的對(duì)齊方式，可是是left（左對(duì)齊）,right（右對(duì)齊）,或center（居中顯示）；border屬性用來(lái)設(shè)置表格邊框的寬度。7.3HTML常用標(biāo)簽7.3.3豐富表格屬性7.3HTML常用標(biāo)簽7.3.3豐富表格屬性7.3HTML常用標(biāo)簽7.3.3豐富表格屬性7.3HTML常用標(biāo)簽7.3HTML常用標(biāo)簽7.3HTML常用標(biāo)簽7.3HTML常用標(biāo)簽7.3HTML常用標(biāo)簽7.3.4圖片與超鏈接(1)<img>：在html中顯示圖片。圖片可以是網(wǎng)上的圖片，也可以是本地硬盤(pán)中圖片。其URL用src屬性來(lái)標(biāo)記(2)alt屬性：<img>標(biāo)簽的alt屬性屬性標(biāo)記了圖片的提示文字。with和height屬性分別標(biāo)記了圖片的寬度和高度。(3)<a></a>：標(biāo)記一個(gè)超鏈接，用其href屬性來(lái)標(biāo)記超鏈接的URL。(4)target屬性：<a></a>標(biāo)簽的target屬性用來(lái)表示用哪個(gè)頁(yè)面顯示新的頁(yè)面。例如”_blank”表示打開(kāi)一個(gè)新的瀏覽器窗口，并在新的瀏覽器窗口中顯示新的頁(yè)面7.3HTML常用標(biāo)簽7.3.4圖片與超鏈接7.3HTML常用標(biāo)簽

7.3.4圖片與超鏈接

7.3HTML常用標(biāo)簽7.3.4圖片與超鏈接

7.3HTML常用標(biāo)簽7.3.5多窗口頁(yè)面

<html><head><title>frames</title></head><framesetcols="20%,80%"> <framesrc=""name="left"/> <framesrc=""name="right"/></frameset></html><html><head><title>left</title></head><body>leftframe<br/> <ahref=""target="right">HelloWorld</a><br/> <ahref=""target="right">form</a><br/></body></html>7.3HTML常用標(biāo)簽7.3.5多窗口頁(yè)面

7.3HTML常用標(biāo)簽7.3.5多窗口頁(yè)面

框架可以將瀏覽器窗口劃分為若干個(gè)窗格，在每個(gè)窗格中都可以顯示一個(gè)網(wǎng)頁(yè)，從而可以取得在同一個(gè)瀏覽器窗口中同時(shí)顯示不同網(wǎng)頁(yè)的效果?？蚣芫W(wǎng)頁(yè)通過(guò)一個(gè)frameset標(biāo)記和多個(gè)frame標(biāo)記來(lái)定義。在框架網(wǎng)頁(yè)中，可將frameset標(biāo)記置于head之后，以取代body的位置，還可以使用noframes標(biāo)記框架不能被瀏覽器顯示時(shí)的替換內(nèi)容。

<frameset></frameset>為多窗口標(biāo)記。其col屬性用來(lái)標(biāo)記多窗口個(gè)列的寬度，可以以百分?jǐn)?shù)表示（如20%），也可以以像素表示（如200px）；frameset標(biāo)簽還有rows屬性，用來(lái)表示此frameset由多個(gè)行窗口組成。frameset標(biāo)簽可以嵌套。

<frame></frame>為窗口標(biāo)記，應(yīng)嵌套在frameset標(biāo)簽中。其src屬性用來(lái)標(biāo)記這個(gè)frame的路徑。本案例包含兩段HTML代碼，第一段是標(biāo)記了框架結(jié)構(gòu)，即頁(yè)面有左右兩個(gè)frame組成，左側(cè)frame占整個(gè)瀏覽器窗口20%的寬度，右側(cè)frame占80%的寬度。每個(gè)frame的name屬性標(biāo)記了這個(gè)frame的名字。在第二段HTML代碼中，顯示了左側(cè)frame的內(nèi)容。其中target屬性標(biāo)記了在哪個(gè)frame中顯示新的頁(yè)面。7.3HTML常用標(biāo)簽7.3.5多窗口頁(yè)面

7.3HTML常用標(biāo)簽7.3.5多窗口頁(yè)面

結(jié)束結(jié)束演講完畢，謝謝觀看！演講完畢，謝謝觀看！第7章Web技術(shù)和HTML孫燾第7章Web技術(shù)和HTML孫燾重點(diǎn)：web技術(shù)概述1HTML的格式2HTML的常用標(biāo)簽3多frame頁(yè)面設(shè)計(jì)4重點(diǎn)：web技術(shù)概述1HTML的格式2HTML的常用標(biāo)簽3多難點(diǎn)：HTML的格式掌握1Table標(biāo)簽的相關(guān)屬性2難點(diǎn)：HTML的格式掌握1Table標(biāo)簽的相關(guān)屬性27.1

Web技術(shù)概述什么是萬(wàn)維網(wǎng)

Web的表現(xiàn)形式什么是Web網(wǎng)站W(wǎng)eb網(wǎng)站的功能Web的開(kāi)發(fā)技術(shù)7.1Web技術(shù)概述什么是萬(wàn)維網(wǎng)7.1

Web技術(shù)概述7.1.1什么是萬(wàn)維網(wǎng)World

Wide

HTML語(yǔ)言是信息展現(xiàn)的最有效載體服務(wù)端技術(shù)

CGI，PHP，ASP，JSP靜態(tài)技術(shù)

HTML動(dòng)態(tài)技術(shù)

DHTML，css，javascript，vbscript

人人文庫(kù)> 全部分類(lèi)> 教育資料 > 輔導(dǎo)培訓(xùn)

溫馨提示

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ì)自己和他人造成任何形式的傷害或損失。

第7章Web技術(shù)和HTML=創(chuàng)新教育基礎(chǔ)與實(shí)踐課件

文檔簡(jiǎn)介

溫馨提示

最新文檔

評(píng)論

第7章Web技術(shù)和HTML=創(chuàng)新教育基礎(chǔ)與實(shí)踐課件

文檔簡(jiǎn)介

溫馨提示

最新文檔

評(píng)論

相關(guān)文檔