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

下載本文檔

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

文檔簡介

第一篇

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

C/S體系架構圖1-2

B/S體系架構1.1.2web應用技術01客戶端應用技術02服務器端技術HTMLCSSJavaScriptjQueryVueCGIJSPASP.NETJava框架技術1.2HTML和CSS技術1.2.1HTML基礎1.2.2CSS技術1.2.3示例：新浪微博熱搜1.2.1HTML基礎<html>

<head>

<metacharset="utf-8"/>

<title>標題</title>

</head>

<body>

主體

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

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

圖片標簽<img>

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

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

表格的基本框架1.2.1HTML基礎HTML的表格

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

表

1-2表格常用的屬性1.2.1HTML基礎HTML的表單

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

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

多行文本域<textarearows="3"cols="20">多行文本域</textarea>1.2.2CSS技術CSS選擇器類選擇器定義一個類樣式.類名稱{屬性:值}通過class屬性引用類樣式<標簽名

class="類名稱">標簽內(nèi)容</標簽名>ID選擇器定義一個ID樣式#id名稱{屬性:值}通過id屬性引用ID樣式<標簽名id="id名稱">標簽內(nèi)容</標簽名>1.2.2CSS技術內(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技術內(nèi)聯(lián)樣式、內(nèi)部樣式表和外部樣式表的優(yōu)先級內(nèi)聯(lián)樣式>內(nèi)部樣式表>外部樣式表ID選擇器、類選擇器和標簽選擇器的優(yōu)先級ID選擇器>類選擇器>標簽選擇器樣式優(yōu)先級1.2.2CSS技術CSS常用樣式屬性描述屬性描述font-family字體類型，例如，font-family:“隸書”;font-weight字體粗細，例如，font-weight:bold;font-size字體大小，例如，font-size:12px;font-style字體風格，例如，font-style:italicfont設置所有字體屬性，例如，font:italicbold36px"隸書";

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

1-4

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

1-5

超鏈接偽類樣式表

1-6

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

表

1-7

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

1-3

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

：

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

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

1-12

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

加載頁面時的效

圖

1-6

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

1-7

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

1-9

open()方法打開廣告頁表

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

表

1-14

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

溫馨提示

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

評論

0/150

提交評論