鯤鵬it教育android課件-36 .基礎(chǔ)web應(yīng)用_第1頁
鯤鵬it教育android課件-36 .基礎(chǔ)web應(yīng)用_第2頁
鯤鵬it教育android課件-36 .基礎(chǔ)web應(yīng)用_第3頁
鯤鵬it教育android課件-36 .基礎(chǔ)web應(yīng)用_第4頁
鯤鵬it教育android課件-36 .基礎(chǔ)web應(yīng)用_第5頁
已閱讀5頁，還剩28頁未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

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

文檔簡介

信賴源于專業(yè)Web應(yīng)用基礎(chǔ)本課要解決的問題B/S架構(gòu)解析前端技術(shù)介紹HTML介紹CSS介紹JavaScript介紹什么是B/S技術(shù)？B/S結(jié)構(gòu)（瀏覽器/服務(wù)器）：程序完全部署在服務(wù)器上，用戶通過瀏覽器訪問應(yīng)用程序，它是基于Internet的產(chǎn)物應(yīng)用服務(wù)器數(shù)據(jù)庫服務(wù)器IENetscapeIEInternet在應(yīng)用服務(wù)器中部署、運(yùn)行程序為什么學(xué)習(xí)B/S技術(shù)？C/S架構(gòu)局限性中心局域網(wǎng)特定用戶群中資源共享B/S架構(gòu)優(yōu)勢數(shù)據(jù)庫服務(wù)器學(xué)生機(jī)1學(xué)生機(jī)2學(xué)生機(jī)n需要安裝客戶端軟件Google服務(wù)器Internet全球用戶群中資源共享美國用戶中國用戶數(shù)據(jù)庫服務(wù)器無需安裝客戶端軟件B/S技術(shù)特點瀏覽器端與服務(wù)器端采用請求/響應(yīng)模式進(jìn)行交互應(yīng)用服務(wù)器數(shù)據(jù)庫服務(wù)器IEIE解釋執(zhí)行HTML文件從服務(wù)器端檢索到的信息返回響應(yīng)客戶端的請求信息發(fā)送請求訪問數(shù)據(jù)庫返回結(jié)果運(yùn)行JSP/PHP等服務(wù)器端程序1用戶輸入234前端技術(shù)介紹HTML 定義網(wǎng)頁結(jié)構(gòu)CSS 修飾網(wǎng)頁(類似于裝修)JavaScript 動態(tài)響應(yīng)各種事件XML 數(shù)據(jù)交換標(biāo)準(zhǔn)

Photoshop/Flash 圖片與動畫信賴源于專業(yè)HTML語言什么是HTML？HTML(HyperTextMarkupLanguage)超文本標(biāo)記語言是一種標(biāo)記語言，用來描述網(wǎng)頁的，而非編程語言標(biāo)記語言是一套標(biāo)記標(biāo)簽(markuptag)HTML使用這套固定的標(biāo)記標(biāo)簽來描述網(wǎng)頁7HTML標(biāo)簽HTML標(biāo)簽HTML標(biāo)簽是由尖括號包圍的關(guān)鍵詞，比如<html>HTML標(biāo)簽通常是成對出現(xiàn)的，比如<b>和</b>標(biāo)簽對中的第一個標(biāo)簽是開始標(biāo)簽，第二個標(biāo)簽是結(jié)束標(biāo)簽。HTML標(biāo)簽不區(qū)分大小寫8HTML網(wǎng)頁結(jié)構(gòu)HTML網(wǎng)頁的結(jié)構(gòu)<HTML><HEAD><TITLE>歡迎來到HTML</TITLE></HEAD><BODY><P>您好，HTML！</P></BODY></HTML>HTML網(wǎng)頁<HEAD>頭部部分<BODY>主體部分<HTML>…</HTML>標(biāo)簽標(biāo)記HTML文檔的開始和結(jié)束網(wǎng)頁標(biāo)題網(wǎng)頁內(nèi)容，可以是文本、圖像等這部分包含文本、圖像和鏈接。它包括在<BODY>…</BODY>標(biāo)簽內(nèi)這部分包括標(biāo)題和其他說明信息。包括在<HEAD>…</HEAD>標(biāo)簽內(nèi)9使用記事本創(chuàng)建網(wǎng)頁使用記事本創(chuàng)建網(wǎng)頁的步驟：1、打開記事本2、輸入HTML代碼3、保存為*.html或*.htm文件，注意格式問題4、打開網(wǎng)頁預(yù)覽效果演示示例10為什么需要樣式表？11加上樣式之后的頁面未使用樣式之前的頁面(HTML標(biāo)簽)華麗變形

為什么需要CSS樣式表？演示示例1：演示能換皮膚的頁面HTML標(biāo)簽的外觀樣式比較單一頁面色彩不生動樣式修改不方便樣式表的作用相當(dāng)于華麗的衣服內(nèi)容相同外觀不同12樣式表能實現(xiàn)內(nèi)容與樣式的分離，方便團(tuán)隊開發(fā)程序員寫代碼美工做樣式內(nèi)容與樣式和諧統(tǒng)一的完整網(wǎng)頁為什么需要樣式表？13樣式表的基本結(jié)構(gòu)<STYLEtype="text/css"> P{color:black;font-size:30px;font-family:隸書;} ……</STYLE>聲明文檔樣式表結(jié)束文檔樣式表開始，類型為CSS樣式樣式規(guī)則選擇器樣式規(guī)則

P{color:black;font-size:30px;font-family:隸書;}屬性屬性的值什么是樣式表？14樣式表的基本語法<head><styletype=“text/css”>選擇器{

屬性1:值1; 屬性2:值2;……}</style>……</head>什么是樣式表？注意：<style>標(biāo)簽必須放在<head>和</head>標(biāo)記之間。

選擇器的分類：1、HTML標(biāo)簽選擇器2、Class類選擇器3、ID選擇器15HTML選擇器body,p,td,th,div{ font-family:"隸書"; font-size:24px; color:black;}HTML選擇器HTML選擇器必須使用HTML可識別的標(biāo)簽作標(biāo)識。故又被稱為標(biāo)簽選擇器16Class選擇器Class選擇器：用于選擇一個特殊的標(biāo)簽而不是一組標(biāo)簽。所選擇的標(biāo)簽會被一個class屬性按如下形式標(biāo)識：<pclass=“classname”>文本內(nèi)容</p>.classname{font-family:"隸書";font-size:24px;color:black;}Class選擇器的定義：樣式規(guī)則不變，只是聲明選擇器的方式有些不同。以“.”開始17Class選擇器<HTML><HEAD><STYLEtype="text/css">P{color:gray;font-family:"隸書";font-size:24px;}.title {color:red;font-family:"華文彩云";font-size:36px;}</STYLE></HEAD><BODY><pclass="title">靜夜思</p><P>床前明月光，</P><P>疑是地上霜。</P><P>我是郭德崗，</P><P>低頭思故鄉(xiāng)。</P><P>  --2011年4月1日字</P></BODY></HTML>18ID選擇器ID選擇器：功能類似于Class選擇器。大多數(shù)被用于<div>標(biāo)簽中。定義ID選擇器<pid=“idname”>文本內(nèi)容</p>#idname{font-family:"隸書";font-size:24px;color:black;}ID選擇器的使用：19ID選擇器<HTML><HEAD><STYLEtype="text/css">P{color:gray;font-family:"隸書";font-size:24px;}.title {color:red;font-family:"華文彩云";font-size:36px;}#bottom {font-size:12px;font-family:"宋體";}</STYLE></HEAD><BODY><pclass="title">靜夜思</p><P>床前明月光，</P><P>疑是地上霜。</P><P>我是郭德崗，</P><P>低頭思故鄉(xiāng)。</P><Pid="bottom”>  --2011年4月1日字</P></BODY></HTML>ID選擇器的定義ID選擇器的應(yīng)用20應(yīng)用樣式到網(wǎng)頁中內(nèi)嵌樣式表：行內(nèi)樣式表外部樣式表<HEAD>

<STYLEtype="text/css">

樣式規(guī)則

</STYLE></HEAD>前面所講的就是內(nèi)嵌樣式表樣式表的三大應(yīng)用方式：21內(nèi)嵌樣式表<head><STYLEtype="text/css">h2{color:blue;font-weight:500;font-size:16px;font-family:"黑體";}.red{font-family:"隸書";font-size:18px;color:#FF0000;}</STYLE></head><body><h2>改變別人不如改變自己</h2><p>改變別人很難</p><pclass="red">其實改變你自己更難</p><p>你固有的觀點</p><p>你刻意堅持的理念</p><p>對于你也許很適用</p><p>但這不等于別人也同樣適用</p></body>22行內(nèi)樣式表……<body>……<pstyle="text-decoration:underline;color:pink;font-size:18px;font-family:隸書;">但這不等于別人也同樣適用</p></body>23樣式描述的語法相同只是樣式的作用范圍不同而已外部樣式表文件樣式表文件是一個獨立于網(wǎng)頁.html的文件。以.css為后綴。通常命名為style.css。style.css能實現(xiàn)樣式文件與網(wǎng)頁文件的分離，方便團(tuán)隊開發(fā)。且使整個網(wǎng)站的風(fēng)格統(tǒng)一。便于風(fēng)格的修改與維護(hù)操作步驟：第一步：創(chuàng)建樣式表文件style.css第二步：把樣式文件和網(wǎng)頁綁定第三步：瀏覽查看各網(wǎng)頁

外部樣式表—鏈接(LINK)使用LINK鏈接，語法:<HEAD> <LINKhref=“mystyle.css"rel="stylesheet"type="text/css"></HEAD>演示示例4：LINK鏈接引入的外部樣式文件

外部樣式表—導(dǎo)入(@import)使用@import導(dǎo)入，語法：<HEAD><STYLETYPE="text/css"> @importmystyle.css;</STYLE></HEAD>引入的外部樣式文件演示示例4：@import導(dǎo)入JavaScript概述什么是JavaScript

JavaScript是Web頁面中的一種腳本編程語言，也是一種通用的、跨平臺的、基于對象和事件驅(qū)動并具有安全性的腳本語言。它不需要進(jìn)行編譯，而是直接嵌入在HTML頁面中，把靜態(tài)頁面轉(zhuǎn)變成支持用戶交互并響應(yīng)相應(yīng)事件的動態(tài)頁面。

信賴源于專業(yè)JavaScript概述JavaScript的主要特點解釋性基于對象事件驅(qū)動跨平臺安全性信賴源于專業(yè)JavaScript概述信賴源于專業(yè)JavaScript常見的應(yīng)用（1）驗證用戶輸入的內(nèi)容（2）動畫效果（3）窗口的應(yīng)用（4）文字特效JavaScript概述編寫第一個JavaScript程序信賴源于專業(yè)<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN"""><htmlxmlns=""><head><metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/><title>編寫第一個JavaScript程序</title></head><br/><center><scriptlanguage="javascript">document.write("HelloWorld");</script></center><body></body></html>說明：JavaScript代碼必須置于<script></script>標(biāo)簽之間JavaScript概述JavaScript腳本在HTML文件中的位置1、在HTML的<body>標(biāo)記中的任何位置編寫的JavaScript程序用于輸出網(wǎng)頁的內(nèi)容。2、在HTML的<head>標(biāo)記中編寫的JavaScript程序需要在某一個HTML文件中多次使用。3、在一個js的單獨文件中編寫的JavaScript程序需要在多個HTML文件中使用，或者所編寫的JavaScript程序內(nèi)容很長，這時，就應(yīng)該將這段JavaScript程序置于單獨的js文件中，然后在所需要的HTML文件中通過<

溫馨提示

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

最新文檔

評論

0/150

提交評論