Java Web 開(kāi)發(fā)從入門(mén)到實(shí)踐課件 第1章 - Web前端基礎(chǔ)_第1頁(yè)
Java Web 開(kāi)發(fā)從入門(mén)到實(shí)踐課件 第1章 - Web前端基礎(chǔ)_第2頁(yè)
Java Web 開(kāi)發(fā)從入門(mén)到實(shí)踐課件 第1章 - Web前端基礎(chǔ)_第3頁(yè)
Java Web 開(kāi)發(fā)從入門(mén)到實(shí)踐課件 第1章 - Web前端基礎(chǔ)_第4頁(yè)
Java Web 開(kāi)發(fā)從入門(mén)到實(shí)踐課件 第1章 - Web前端基礎(chǔ)_第5頁(yè)
已閱讀5頁(yè)，還剩31頁(yè)未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

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

文檔簡(jiǎn)介

第一篇

Web開(kāi)發(fā)基礎(chǔ)篇JavaWeb開(kāi)發(fā)從入門(mén)到實(shí)踐JavaWebDevelopmentFromIntroductiontoPracticeWeb前端基礎(chǔ)Chap01提綱前端基礎(chǔ)介紹Web開(kāi)發(fā)的基礎(chǔ)技術(shù)，包括HTML、CSS和JavaScript。通過(guò)學(xué)習(xí)這些核心技術(shù)，學(xué)生能夠構(gòu)建和美化基本的Web頁(yè)面。1.1Web開(kāi)發(fā)技術(shù)概述1.2HTML和CSS技術(shù)1.3JavaScript語(yǔ)言1.4本章小結(jié)1.1Web開(kāi)發(fā)技術(shù)概述1.1.1網(wǎng)絡(luò)程序開(kāi)發(fā)體系架構(gòu)1.1.2web應(yīng)用技術(shù)1.1.1網(wǎng)絡(luò)程序開(kāi)發(fā)體系架構(gòu)B/S體系架構(gòu)C/S體系架構(gòu)瀏覽器/服務(wù)器客戶(hù)端/服務(wù)器圖1-1

C/S體系架構(gòu)圖1-2

B/S體系架構(gòu)1.1.2web應(yīng)用技術(shù)01客戶(hù)端應(yīng)用技術(shù)02服務(wù)器端技術(shù)HTMLCSSJavaScriptjQueryVueCGIJSPASP.NETJava框架技術(shù)1.2HTML和CSS技術(shù)1.2.1HTML基礎(chǔ)1.2.2CSS技術(shù)1.2.3示例：新浪微博熱搜1.2.1HTML基礎(chǔ)<html>

<head>

<metacharset="utf-8"/>

<title>標(biāo)題</title>

</head>

<body>

主體

</body></html>HTML框架1.2.1HTML基礎(chǔ)標(biāo)簽描述p段落標(biāo)簽a超鏈接h1-h6一級(jí)標(biāo)題至六級(jí)標(biāo)題，例如，h1表示一級(jí)標(biāo)題，h1在6種標(biāo)題中字體最大br換行標(biāo)簽img圖片標(biāo)簽ol有序列表標(biāo)簽ul無(wú)序列表標(biāo)簽li有序列表或無(wú)序列表的列表項(xiàng)標(biāo)簽。語(yǔ)法：<ul><li>列表項(xiàng)1</li><li>列表項(xiàng)2</li></ul>dl、dt、dd定義性列表。這三個(gè)HTML標(biāo)記是一個(gè)組合，語(yǔ)法：<dl><dt>標(biāo)題或術(shù)語(yǔ)</dt><dd>描述</dd></dl>marquee文字滾動(dòng)標(biāo)簽。實(shí)現(xiàn)跑馬燈效果，例如，文字從左向右滾動(dòng)，滾動(dòng)延時(shí)500毫秒：<marqueescrolldelay="500"direction="right">跑馬燈效果</marquee>strong加粗標(biāo)簽。例如，中國(guó)加粗顯示：<strong>中國(guó)</strong>em斜體hr水平線(xiàn)。水平的“horizontal”中的二個(gè)字母font字體標(biāo)簽。通過(guò)屬性color設(shè)置字體顏色，size設(shè)置字體大小表

1-1HTML常用的基本標(biāo)簽1.2.1HTML基礎(chǔ)HTML常用的基本標(biāo)簽<imgsrc="img/icon-3.jpg"title="美女"alt="路徑錯(cuò)誤"width="100px"height="100px"align="center"/><ahref=""target="_blank">百度</a>

圖片標(biāo)簽<img>

超鏈接<ul>催人上進(jìn)的經(jīng)典勵(lì)志名言 <li>只有不斷地努力和上進(jìn)，才能成為更好的自己，享受更美好的人生。</li> <li>上進(jìn)心是通向成功的階梯，只有努力才能攀登到頂峰。</li> <li>不要停止前進(jìn)的腳步，只有努力上進(jìn)，才能不斷超越自己，取得更大的成就。</li></ul>

無(wú)序列表1.2.1HTML基礎(chǔ)HTML的表格<tableborder="1"> <tr> <th>表頭第一個(gè)單元格</th><th>表頭第二個(gè)單元格</th> </tr> <tr> <td>內(nèi)容部分第一行，第一個(gè)單元格</td><td>內(nèi)容部分第一行，第二個(gè)單元格</td> </tr></table>

表格的基本框架1.2.1HTML基礎(chǔ)HTML的表格

表格常用的屬性屬性描述屬性描述width表格的寬度align指定水平對(duì)齊方式height表格的高度valign指定垂直對(duì)齊方式border表格邊框的寬度colspan跨列，合并同一行的單元格cellpadding指定邊框與內(nèi)容之間的空白rowspan跨行，合并同一列的單元格cellspacing指定單元格之間的空白

表

1-2表格常用的屬性1.2.1HTML基礎(chǔ)HTML的表單

表單示例<formmethod="post"action="目標(biāo)URL"onsubmit="returncheckForm()"onreset="returnresetForm()"></form>input表單元素<inputtype="text"name="名稱(chēng)"value="值"/>

下拉列表<select> <optionvalue="選項(xiàng)一的值">選項(xiàng)一的文本</option> <optionvalue="選項(xiàng)二的值">選項(xiàng)二的文本</option></select>

多行文本域<textarearows="3"cols="20">多行文本域</textarea>1.2.2CSS技術(shù)CSS選擇器類(lèi)選擇器定義一個(gè)類(lèi)樣式.類(lèi)名稱(chēng){屬性:值}通過(guò)class屬性引用類(lèi)樣式<標(biāo)簽名

class="類(lèi)名稱(chēng)">標(biāo)簽內(nèi)容</標(biāo)簽名>ID選擇器定義一個(gè)ID樣式#id名稱(chēng){屬性:值}通過(guò)id屬性引用ID樣式<標(biāo)簽名id="id名稱(chēng)">標(biāo)簽內(nèi)容</標(biāo)簽名>1.2.2CSS技術(shù)內(nèi)聯(lián)樣式<h1style="color:blue;">Stopstruggling,lifeisstopped.停止奮斗,生命也就停止了。</h1>內(nèi)部樣式表<styletype="text/css">p{

font-size:12px;color:#F00;}</style>外部樣式表<linkhref="css/index.css"rel="stylesheet"type="text/css"/>一二三HTML中引入CSS樣式1.2.2CSS技術(shù)內(nèi)聯(lián)樣式、內(nèi)部樣式表和外部樣式表的優(yōu)先級(jí)內(nèi)聯(lián)樣式>內(nèi)部樣式表>外部樣式表ID選擇器、類(lèi)選擇器和標(biāo)簽選擇器的優(yōu)先級(jí)ID選擇器>類(lèi)選擇器>標(biāo)簽選擇器樣式優(yōu)先級(jí)1.2.2CSS技術(shù)CSS常用樣式屬性描述屬性描述font-family字體類(lèi)型，例如，font-family:“隸書(shū)”;font-weight字體粗細(xì)，例如，font-weight:bold;font-size字體大小，例如，font-size:12px;font-style字體風(fēng)格，例如，font-style:italicfont設(shè)置所有字體屬性，例如，font:italicbold36px"隸書(shū)";

屬性描述示例color設(shè)置文本顏色color:#abc123;text-align設(shè)置元素水平對(duì)齊方式text-align:center;line-height設(shè)置文本的行高line-height:25px;text-decoration設(shè)置文本的裝飾text-decoration:underline;text-indent首行文本的縮進(jìn)text-indent:20px;表1-3字體樣式表

1-4

文本樣式1.2.2CSS技術(shù)CSS常用樣式偽類(lèi)名稱(chēng)描述示例a:link未單擊訪(fǎng)問(wèn)時(shí)超鏈接樣式a:link{color:#123abc;}a:visited單擊訪(fǎng)問(wèn)后超鏈接樣式a:visited{color:#666;}a:hover鼠標(biāo)懸浮其上的超鏈接樣式a:hover{color:#ffff00;a:active鼠標(biāo)單擊未釋放的超鏈接樣式a:active{color:#888;}屬性描述示例background-color背景顏色背景色設(shè)置為透明background-color:transparent;background-image背景圖像background-image:url(images/car.jpg);background-repeat背景重復(fù)方式background-repeat:no-repeat;background-position背景定位background-position:topright;background設(shè)置所有背景屬性background:#F00url(../images/cat.gif)115px20pxno-repeat;表

1-5

超鏈接偽類(lèi)樣式表

1-6

背景樣式1.2.2CSS技術(shù)CSS常用樣式值描述XposYposXpos表示水平位置，Ypos表示垂直位置，單位為pxX%Y%使用百分比表示背景的位置X、Y方向關(guān)鍵詞水平方向的關(guān)鍵詞：left、center、right垂直方向的關(guān)鍵詞：top、center、bottom定義時(shí)垂直方向在前，水平方向在后，例如右下角：bottomright;值描述值描述none無(wú)標(biāo)記符號(hào)，例如，list-style-type:none;square實(shí)心正方形disc實(shí)心圓，默認(rèn)類(lèi)型decimal數(shù)字circle空心圓

表

1-7

屬性background-position的值表1-8列表樣式1.2.3示例：新浪微博熱搜圖

1-3

新浪微博熱搜頁(yè)面1.3JavaScript語(yǔ)言1.3.1JavaScript的引入1.3.2JavaScript基礎(chǔ)1.3.3JavaScript常用事件和對(duì)象模型1.3.4JavaScript對(duì)象1.3.5表單驗(yàn)證1.3.1JavaScript的引入內(nèi)嵌引入JavaScript代碼外鏈?zhǔn)揭隞avaScript代碼<scripttype="text/javascript"> JavaScript代碼</script><scriptsrc="外部JavaScript文件的URL"type="text/javascript"></script>1.3.2JavaScript基礎(chǔ)變量及變量的命名規(guī)則注釋var變量名=值;varname="Charles";//單行注釋/*多行注釋*/運(yùn)算符賦值運(yùn)算符：=、+=、-=算術(shù)運(yùn)算符：+、-、*、/、%、++、--邏輯運(yùn)算符：&&、||、！1.3.2JavaScript基礎(chǔ)數(shù)據(jù)類(lèi)型及數(shù)據(jù)類(lèi)型的轉(zhuǎn)換數(shù)據(jù)類(lèi)型：數(shù)值型、字符型、布爾型、空值和未定義值數(shù)據(jù)類(lèi)型的轉(zhuǎn)換：parseInt(字符串)

：

varnum=parseInt("123abc");parseFloat(字符串)：varnum=parseFloat("123.567abc");Number(字符串）：

varnum=Number("123");eval(字符串表達(dá)式）：varnum=eval("1+2");流程控制語(yǔ)句if語(yǔ)句switch語(yǔ)句for循環(huán)語(yǔ)句while語(yǔ)句do...while語(yǔ)句1.3.3JavaScript常用事件和對(duì)象模型事件描述事件描述onblur元素失去焦點(diǎn)時(shí)觸發(fā)onmousedown按下鼠標(biāo)時(shí)觸發(fā)onfocus元素獲得焦點(diǎn)時(shí)觸發(fā)onmousemove移動(dòng)鼠標(biāo)時(shí)觸發(fā)onload頁(yè)面加載完全后觸發(fā)onmouseout鼠標(biāo)離開(kāi)某對(duì)象范圍時(shí)觸發(fā)onclick單擊某個(gè)對(duì)象時(shí)觸發(fā)onmouseover鼠標(biāo)移到某對(duì)象范圍的上方時(shí)觸發(fā)ondblclick雙擊某個(gè)對(duì)象時(shí)觸發(fā)onmouseup鼠標(biāo)按下后松開(kāi)時(shí)觸發(fā)onchange內(nèi)容改變時(shí)觸發(fā)onkeydown鍵盤(pán)上某個(gè)鍵按下時(shí)觸發(fā)onsubmit單擊提交按鈕時(shí)觸發(fā)onkeypress鍵盤(pán)上某個(gè)鍵按下并釋放時(shí)觸發(fā)onreset單擊重置按鈕時(shí)觸發(fā)onkeyup鍵盤(pán)上某個(gè)鍵被放開(kāi)時(shí)觸發(fā)表

1-12

JavaScript常用事件1.3.3JavaScript常用事件和對(duì)象模型實(shí)現(xiàn)樹(shù)形菜單顯示和隱藏的切換功能實(shí)現(xiàn)圖片自動(dòng)輪播效果圖1-5

加載頁(yè)面時(shí)的效

圖

1-6

點(diǎn)擊父節(jié)點(diǎn)后的效果圖

1-7

圖片輪播效果1.3.3JavaScript常用事件和對(duì)象模型JavaScript對(duì)象模型window對(duì)象1）alert()2）prompt()3）confirm()4）open()history對(duì)象方法描述forward()加載歷史記錄列表中的下一個(gè)URLback()加載歷史記錄列表中的前一個(gè)URLgo()加載歷史列表中的某個(gè)具體的頁(yè)面，帶一個(gè)正/負(fù)整數(shù)或字符串。彈出廣告頁(yè)面:window.open("adv.html","廣告頁(yè)","width=350,height=230,left=100,top=100");圖

1-9

open()方法打開(kāi)廣告頁(yè)表

1-13history對(duì)象的方法1.3.3JavaScript常用事件和對(duì)象模型JavaScript對(duì)象模型location對(duì)象window.location="test.html";location.href="test.html";document對(duì)象常用的方法：getElementById(id)方法：該方法根據(jù)指定的id屬性值得到對(duì)象。getElementsByName(name)方法：該方法根據(jù)指定的name屬性值得到對(duì)象。getElementsByTagName(tagName)方法：該方法根據(jù)指定的標(biāo)簽名得到對(duì)象。獲取表單對(duì)象：document.forms[下標(biāo)]document.forms["表單名稱(chēng)"]document.表單名稱(chēng)1.3.4JavaScript對(duì)象數(shù)組對(duì)象使用Array構(gòu)造函數(shù)vararr=newArray();vararr=newArray(10);vararr=newArray("Charles","Jack","Mia");使用數(shù)組字面量表示法vararr=[];vararr=["Charles","Jack","Mia"];varelement=arr[0];//讀取arr數(shù)組中的第一個(gè)元素1.3.4JavaScript對(duì)象日期對(duì)象創(chuàng)建日期對(duì)象vardate=newDate("June8,2024");//2024年6月8日vardate=newDate();//系統(tǒng)當(dāng)前日期和時(shí)間獲取和設(shè)置日期某部分的方法方法描述方法描述getYear()獲取年份setYear()設(shè)置年份getMonth()獲取月份（從0到11）setMonth()設(shè)置月份getDate()獲取一個(gè)月中的某一天setDate()設(shè)置某日getDay()獲取星期幾（0-6）setHours()設(shè)置小時(shí)getHours()獲取小時(shí)setMinutes()設(shè)置分鐘getMinutes()獲取分鐘setSeconds()設(shè)置秒getSeconds()獲取秒setTime()設(shè)置毫秒getTime()獲取毫秒

表

1-14

獲取和設(shè)置日期某部分的方法1.3.4JavaScript對(duì)象字符串對(duì)象創(chuàng)建字符串對(duì)象varstr=newString("JavaWeb從0到1");varstr="JavaWeb從0到1";字符串的常用方法方法描述trim()去掉左邊和右邊空格substring(start,end)截取字符串，不包含endsubstr(start,length)在字符串中截取從start下標(biāo)開(kāi)始到指定length數(shù)目的字符charAt(index)獲取下標(biāo)為index的字符toUpperCase()轉(zhuǎn)換為大寫(xiě)字母toLowerCase()轉(zhuǎn)換為小寫(xiě)字母indexOf(searchValue)獲取第一次出現(xiàn)子字符串的字符位置lastIndexOf()獲取最后一次出現(xiàn)子字符串的字符位置concat()連接字符串replace(old,new)子字符串old被new替代split(separator,limit)以separator為分隔符切割成多個(gè)子字符串，子字符串以數(shù)組形式返回表

溫馨提示

  • 1. 本站所有資源如無(wú)特殊說(shuō)明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶(hù)所有。
  • 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ì)用戶(hù)上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對(duì)用戶(hù)上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請(qǐng)與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶(hù)因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。

最新文檔

評(píng)論

0/150

提交評(píng)論