Web前端技術(shù)PPT完整全套教學(xué)課件_第1頁(yè)
Web前端技術(shù)PPT完整全套教學(xué)課件_第2頁(yè)
Web前端技術(shù)PPT完整全套教學(xué)課件_第3頁(yè)
Web前端技術(shù)PPT完整全套教學(xué)課件_第4頁(yè)
Web前端技術(shù)PPT完整全套教學(xué)課件_第5頁(yè)
已閱讀5頁(yè)，還剩481頁(yè)未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

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

文檔簡(jiǎn)介

Web前端技術(shù)概述學(xué)習(xí)導(dǎo)圖1.1前端技術(shù)發(fā)展歷程前端技術(shù)發(fā)展歷程起源階段(1990-1994)第一次瀏覽器之爭(zhēng)(1995-1999)動(dòng)態(tài)頁(yè)面的興起(2000-2004)第二次瀏覽器之爭(zhēng)(2004-2013)HTML5的發(fā)展(2008-)起源階段(1990-1994)第一次瀏覽器之爭(zhēng)(1995-1999)微軟公司IE瀏覽器vs網(wǎng)景公司Navigator瀏覽器第一次瀏覽器之爭(zhēng)(1995-1999)新技術(shù)的出現(xiàn)和規(guī)范的制訂動(dòng)態(tài)頁(yè)面的崛起(2000-2004)動(dòng)態(tài)頁(yè)面02030401第二次瀏覽器之爭(zhēng)(2004-2013)IE瀏覽器Firefox瀏覽器Chrome瀏覽器Opera瀏覽器HTML5技術(shù)的興起和快速發(fā)展(2008-至今)1.2前端學(xué)習(xí)路線前端學(xué)習(xí)路線1.3前端開發(fā)工具前端開發(fā)工具前端開發(fā)工具前端開發(fā)工具前端開發(fā)工具1.4前端就業(yè)前景Web前端崗位的出現(xiàn)Web前端工程師前端市場(chǎng)需求與就業(yè)前端市場(chǎng)需求與就業(yè)HTML語(yǔ)言基礎(chǔ)學(xué)習(xí)導(dǎo)圖2.1HTML基礎(chǔ)概念2.1.1HTML概述HTML是HypertextMarkupLanguage的縮寫，中文翻譯為超文本標(biāo)記語(yǔ)言。HTML定義了一套標(biāo)記標(biāo)簽，并使用標(biāo)記標(biāo)簽來描述網(wǎng)頁(yè)，由標(biāo)簽及文本內(nèi)容組成的文檔叫HTML文檔，也叫web頁(yè)面。超文本是指信息節(jié)點(diǎn)（即Web頁(yè)面）通過超鏈接構(gòu)成的具有一定邏輯結(jié)構(gòu)和語(yǔ)義的網(wǎng)絡(luò)。2.1.2HTML元素HTML標(biāo)簽又稱為HTML元素HTML元素是由尖括號(hào)包圍的關(guān)鍵詞，例如<html>HTML元素通常成對(duì)出現(xiàn)，例如<body>和</body>HTML元素對(duì)大小寫不敏感，<P>等價(jià)于<p>，推薦使用小寫。2.1.2HTML元素2.1.2HTML元素HTML屬性可以給元素添加附加信息，屬性包括屬性名和屬性值兩部分<pid="desc"class="red"></p><img

src="bg.jpg"></img>屬性值可以用雙引號(hào)、單引號(hào)包含起來，也可以不加引號(hào)2.1.3HTML文檔的基本結(jié)構(gòu)HTML文檔的基本結(jié)構(gòu)2.1.4HTML中顏色的表示顏色值由十六進(jìn)制來表示紅(R)、綠(G)、藍(lán)(B)，每個(gè)顏色的最低值為0(十六進(jìn)制為00)，最高值為255(十六進(jìn)制為FF)。2.2頁(yè)面頭部元素2.2.1標(biāo)題元素頁(yè)面頭部元素由<head></head>所包含的部分，可設(shè)置網(wǎng)頁(yè)的標(biāo)題、字符集、關(guān)鍵字、描述信息等。2.2.2元信息元素元信息元素<meta>：用于定義網(wǎng)頁(yè)的字符集、關(guān)鍵字以及網(wǎng)頁(yè)內(nèi)容的描述。設(shè)定網(wǎng)頁(yè)關(guān)鍵字：<metaname="keywords"content="Web前端技術(shù),網(wǎng)頁(yè)設(shè)計(jì)與制作,HTML">設(shè)定網(wǎng)頁(yè)描述信息：<metaname="description"content="Web前端技術(shù)教程一書主要介紹前端開發(fā)相關(guān)技術(shù)。">2.2.2元信息元素設(shè)定網(wǎng)頁(yè)自動(dòng)刷新：<metahttp-equiv="refresh"content="5">設(shè)定網(wǎng)頁(yè)自動(dòng)跳轉(zhuǎn)：<metahttp-equiv="refresh"content="3;url=http://">設(shè)定網(wǎng)頁(yè)字符集：<metahttp-equiv="content-type"content="text/html;charset=gb18030">2.3頁(yè)面主體元素2.3頁(yè)面主體元素設(shè)置網(wǎng)頁(yè)文字和背景顏色<bodybgcolor="#336699"text="white">添加網(wǎng)頁(yè)背景圖片<bodybackground="images/bg.jpg"bgproperties="fixed">使用body元素，可以設(shè)置頁(yè)面背景、文字顏色、頁(yè)邊距等頁(yè)面屬性。設(shè)置網(wǎng)頁(yè)邊距<bodyleftmargin="10"rightmargin="20"topmargin="15"bottommargin="15">2.4文字與段落元素2.4文字與段落元素網(wǎng)頁(yè)中的文字可分為普通文字、空格、特殊文字和注釋語(yǔ)句。

使用空格鍵并不能輸入多個(gè)空格，為了輸入空格，可以使用空格對(duì)應(yīng)的字符代碼

，一個(gè)

表示一個(gè)半角空格，要輸入多個(gè)空格時(shí)，需要連續(xù)多個(gè)

。

2.4文字與段落元素默認(rèn)情況下，中文網(wǎng)頁(yè)中的文字是以黑色、宋體、3號(hào)字的效果來顯示，如果希望改變默認(rèn)的文字顯示效果，可使用<font>字體屬性。

<fontface="隸書,宋體,黑體"size="4"color="#ffcc00">字體元素</font>使用文字修飾元素，可以設(shè)置字體格式，如粗體、斜體、顯示下劃線等。2.4文字與段落元素標(biāo)題元素根據(jù)字號(hào)大小分為6級(jí)，分別用<h1>-<h6>標(biāo)簽定義

段落元素使用<p>標(biāo)簽，換行元素使用<br>標(biāo)簽，水平線元素通過<hr>標(biāo)簽2.4文字與段落元素預(yù)格式化元素<pre>，保留HTML文檔中的Enter鍵和空格鍵，使瀏覽器不解析<pre>中定義的文本。2.4文字與段落元素2.5列表與表格元素2.5列表與表格元素使用列表元素可以使相關(guān)內(nèi)容以一種整齊的方式排列顯示，HTML支持有序列表和無序列表。有序列表用<ol>表示，無序列表用<ul>表示，列表項(xiàng)用<li>表示默認(rèn)情況下，有序列表是以阿拉伯?dāng)?shù)字作為列表項(xiàng)的前導(dǎo)符，使用屬性type可以改變有序列表的前導(dǎo)符，可分別取1、A、a、I、i等取值。還可以設(shè)置start屬性，定義有序列表前導(dǎo)符的起始項(xiàng)。2.5列表與表格元素表格由<table>元素定義，每個(gè)表格均有若干行（<tr>標(biāo)簽定義），每行被分割為若干單元格（<td>標(biāo)簽定義），表格表頭使用<th>標(biāo)簽定義。2.5列表與表格元素2.6圖片與多媒體元素2.6圖片與多媒體元素圖片元素通過<img>標(biāo)簽定義。src屬性定義圖像的URL地址，alt屬性定義圖像不可見時(shí)的替換文本，width、height屬性分別定義圖像的寬和高。2.7圖片與多媒體元素2.7超鏈接元素超鏈接元素<a>。href為必設(shè)屬性，用來設(shè)置需要鏈接到的目標(biāo)文件；target屬性用來鏈接目標(biāo)窗口。<ahref="welcome.html"target="_blank">這是一個(gè)鏈接</a>鏈接路徑就是在超鏈接中用于標(biāo)識(shí)目標(biāo)文件的位置標(biāo)識(shí)，常見的鏈接路徑有以下兩種類型：絕對(duì)路徑：文件的完整路徑，如/index.html相對(duì)路徑：相對(duì)于當(dāng)前文件的路徑。根據(jù)鏈接目標(biāo)內(nèi)容的不同，可以將鏈接分為以下幾種類型：內(nèi)部鏈接：是指同一個(gè)網(wǎng)站內(nèi)部，不同網(wǎng)頁(yè)之間的鏈接關(guān)系，一般使用相對(duì)路徑鏈接文件。外部鏈接：是指跳轉(zhuǎn)到當(dāng)前網(wǎng)站外部，和其他網(wǎng)站中的頁(yè)面或其他元素之間的鏈接，一般使用絕對(duì)路徑。書簽鏈接：指的是鏈接目標(biāo)位置是網(wǎng)頁(yè)中的指定位置（書簽）的鏈接。要使用書簽鏈接，首先需要在待鏈接的目標(biāo)網(wǎng)頁(yè)中定義書簽，使用<aname="書簽名">[文字/圖片]</a>進(jìn)行定義，然后再創(chuàng)建指向書簽的鏈接。2.7超鏈接元素腳本鏈接：指的是使用JavaScript腳本作為鏈接的目標(biāo)。<ahref="javascript:alert('您好，歡迎訪問我的站點(diǎn)')">歡迎訪問</a>電子郵件鏈接：指自動(dòng)啟動(dòng)郵件系統(tǒng)，如outlook的鏈接類型。<ahref="mailto:abcde@163.com?subject=意見或建議&cc=12345@">意見或建議（郵件鏈接）</a>文件下載鏈接：指鏈接類型為.doc，.rar，.zip等文件類型。2.7超鏈接元素2.8表單元素2.8表單元素表單對(duì)象元素由表單標(biāo)簽<form>和表單域兩部分組成，用于搜集不同類型的用戶輸入，比如：文本域、下拉列表、單選框、復(fù)選框等。表單使用<form>標(biāo)簽定義，多數(shù)情況下被用到的表單標(biāo)簽是輸入標(biāo)簽<input>，輸入類型由類型屬性type進(jìn)行定義。當(dāng)用戶要在表單中鍵入字母、數(shù)字等內(nèi)容時(shí)，就會(huì)用到文本域。文本域通過<inputtype="text">標(biāo)簽來設(shè)定。隱藏域hidden，隱藏域不會(huì)被瀏覽者看到，主要用于在不同頁(yè)面中傳遞隱藏域中設(shè)定的值。<inputtype="hidden"name="username"value="admin">2.8表單元素<inputtype="radio">標(biāo)簽定義了單選框選項(xiàng)<inputtype="checkbox">標(biāo)簽定義了復(fù)選框選項(xiàng)<inputtype="radio"name="gender"value="female"checked="checked"/>女<inputtype="radio"name="gender"value="male"/>男<inputtype="checkbox"name="m1"value="music"checked="checked"/>音樂<inputtype="checkbox"name="m2"value="trip"/>旅游<inputtype="checkbox"name="m3"value="reading"checked="checked"/>閱讀2.8表單元素提交按鈕：<inputtype="submit">重置按鈕：<inputtype="reset">普通按鈕：<inputtype="button">圖像按鈕：<inputtype="image"name="btnImage"src="images/btnImg.jpg"width="60"height="30">2.8表單元素文件域file，用于將本地文件上傳到服務(wù)器端，使用文件域上傳文件到服務(wù)器，需要在<form>中修改表單的編碼，即設(shè)置<formenctype="multipart/form-data"><inputtype="file"name="photo">2.8表單元素<select>,<option>標(biāo)簽定義下拉列表2.8表單元素文本域元素<textarea>，支持輸入多行文本，常用于備注、留言。<textareaname="note"rows="10"cols="30">備注信息</textarea>rows屬性設(shè)置可見行數(shù)，當(dāng)文本超出這個(gè)值時(shí)將顯示垂直滾動(dòng)條，cols屬性設(shè)置一行可輸入的字符個(gè)數(shù)。2.8表單元素<fieldset>元素用于分組，<legend>元素為每個(gè)分組定義標(biāo)題2.8表單元素CSS層疊樣式表基礎(chǔ)學(xué)習(xí)導(dǎo)圖3.1CSS基本概念3.1.1CSS概述CSS層疊樣式表是一種可控制網(wǎng)頁(yè)樣式并允許樣式與內(nèi)容相分離的一種技術(shù)CSS能夠?qū)W(wǎng)頁(yè)的布局、字體、顏色、背景等圖文實(shí)現(xiàn)更精確的控制CSS使得網(wǎng)頁(yè)的體積更小、下載速度更快，且可以實(shí)現(xiàn)多個(gè)頁(yè)面的自動(dòng)更新3.1.2CSS基本語(yǔ)法CSS代碼主要由對(duì)象、屬性、屬性值三個(gè)基本部分組成。對(duì)象很重要，它指定了對(duì)哪些網(wǎng)頁(yè)元素進(jìn)行樣式設(shè)置，在CSS中對(duì)象也稱為選擇器(selector)。屬性是CSS語(yǔ)法中的關(guān)鍵字，它規(guī)定了格式修飾的一個(gè)方面。3.1.3在頁(yè)面中使用CSS內(nèi)聯(lián)樣式表：直接在HTML標(biāo)簽內(nèi)使用style屬性內(nèi)部樣式表：使用<style>標(biāo)簽在HTML文檔頭部定義在頁(yè)面中使用CSS外部樣式表：將CSS代碼寫入一個(gè)或多個(gè)文件后綴名為.css的文件中。當(dāng)樣式需要應(yīng)用于多個(gè)頁(yè)面時(shí)，使用<link>標(biāo)簽鏈接到樣式表（1）定義獨(dú)立的外部樣式文件（2）在頁(yè)面中通過<link>鏈接外部樣式文件3.2CSS選擇器3.2.1元素選擇器*是通配符選擇器，可以與任何元素匹配。選擇指定HTML元素(標(biāo)簽)，給選擇的元素設(shè)置樣式2.2.2類選擇器類(class)選擇器：選擇并設(shè)置一組元素的樣式3.2.3ID選擇器ID選擇器：為標(biāo)有特定id的HTML元素設(shè)置樣式3.2.4后代選擇器后代選擇器：選擇并設(shè)置元素后代的元素3.2.5子元素選擇器子元素選擇器：只選擇元素的子元素，不會(huì)擴(kuò)大到任意的后代元素3.2.6相鄰兄弟元素選擇器相鄰兄弟元素選擇器：選擇緊接在另一個(gè)元素后的元素，且二者有相同的父元素3.2.7兄弟元素選擇器兄弟元素選擇器：選擇一個(gè)元素后的元素，且二者有相同的父元素3.2.8復(fù)合選擇器復(fù)合選擇器包括交集選擇器和并集選擇器兩種類型。交集選擇器是由兩個(gè)選擇器直接連接構(gòu)成，結(jié)果是兩者各自元素范圍的交集，其中第一個(gè)選擇器必須是元素選擇器，第二個(gè)選擇器是類選擇器或ID選擇器，兩個(gè)選擇器之間必須連續(xù)寫，不能有空格。3.2.9屬性選擇器可以為擁有指定屬性的HTML元素設(shè)置樣式3.2.8復(fù)合選擇器并集選擇器：對(duì)各個(gè)基本選擇器所選擇的范圍同時(shí)選中，任何形式的基本選擇器都可以作為并集選擇器的一個(gè)組成部分，各個(gè)元素之間用逗號(hào)分隔。3.2.9屬性選擇器[title]{color:red;}

給具有title屬性的所有元素設(shè)置樣式；[title=test]{color:red;}

給具有title屬性且屬性值為test的元素設(shè)置樣式；[title~=hello]{color:red;}給包含指定值的title屬性的所有元素設(shè)置樣式，一般適用于由空格分隔的屬性值，如<h2title="helloworld">Helloworld</h2>[lang|=en]{color:red;}

給帶有包含指定值的lang屬性的所有元素設(shè)置樣式，一般適用于由連字符分隔的屬性值，如<plang="en-us">Hi!</p>。3.2.10偽類選擇器偽類：同一個(gè)標(biāo)簽，根據(jù)其不同的狀態(tài)，有不同的樣式,用冒號(hào)表示。靜態(tài)偽類:僅用于超鏈接的樣式，如:link，:visited動(dòng)態(tài)偽類，是所有元素都適用的樣式，如:hover,:active,:focus等a:link{color:red;}/*超鏈接點(diǎn)擊之前是紅色*/a:visited{color:green;}/*超鏈接點(diǎn)擊之后是綠色*/a:hover{color:green;}/*鼠標(biāo)懸停，放到標(biāo)簽上的時(shí)候*/a:active{color:black;}/*鼠標(biāo)點(diǎn)擊鏈接，但是不松手的時(shí)候*/偽類選擇器分為兩類：靜態(tài)偽類、動(dòng)態(tài)偽類3.2.10偽類選擇器/*輸入元素獲取焦點(diǎn)時(shí)：*/input:focus{color:white;background-color:#6a6a6a;}/*鼠標(biāo)放在元素上時(shí)顯示藍(lán)色*/label:hover{color:blue;}/*點(diǎn)擊元素鼠標(biāo)沒有松開時(shí)顯示紅色*/label:active{color:red;}3.2.11偽元素選擇器h1:before可以在元素內(nèi)容前面插入新內(nèi)容h1:after可以在元素內(nèi)容之后插入新內(nèi)容偽元素是原本不在DOM中的元素，這個(gè)元素是新創(chuàng)建的元素。3.3CSS常用屬性3.3.1字體屬性字體屬性用來定義文本所使用的字體系列、大小、粗細(xì)、樣式等3.3.2文本屬性文本屬性可定義文本的外觀、進(jìn)行段落排版。通過文本屬性，可以改變文本的字符間距、對(duì)齊方式、修飾方式、文本縮進(jìn)等。3.3.2文本屬性3.3.3顏色和背景屬性3.3.3顏色和背景屬性background-repeat屬性用來設(shè)置是否及如何重復(fù)背景圖像，默認(rèn)屬性值為repeat。3.3.3顏色和背景屬性background-position屬性設(shè)置背景圖像的起始位置，其取值有三種形式：background-position:xposypos|x%y%|xy第一種取值形式為xposypos，表示使用預(yù)定義關(guān)鍵字定位，其中水平方向可取值left|center|right，垂直方向可選top|center|bottom。第二種取值形式為x%y%，分別表示水平位置和垂直位置的百分比，其中左上角是0%0%，右下角是100%100%。第三種取值形式為xy，分別表示水平位置和垂直位置的像素值，其中左上角是00。3.3.3顏色和背景屬性background-attachment:設(shè)置背景圖像是否固定或隨頁(yè)面的其余部分滾動(dòng)3.3.4列表屬性在CSS中，使用list-style設(shè)置列表樣式?？梢栽O(shè)置的屬性包括：3.3.4列表屬性3.3.5表格屬性可以設(shè)置的屬性包括：3.3.5表格屬性3.4CSS盒子模型3.4.1盒子組成所有頁(yè)面元素都可以看成是一個(gè)盒子，占據(jù)著一定的頁(yè)面空間盒子模型由內(nèi)容(content)、邊框(border)、內(nèi)邊距(padding)、外邊距(margin)4個(gè)部分組成盒子的寬度=左邊界+左邊框+左填充+內(nèi)容寬度+右填充+右邊框+右邊界3.4.1盒子組成3.4.2盒子邊框?qū)傩詁order是盒子邊框，形成盒子的邊界，一般用于分離元素border的屬性主要有三個(gè)：顏色(color)、寬度(width)、樣式(style)3.4.2盒子邊框?qū)傩越o不同邊框設(shè)置不同的屬性值只設(shè)置一條邊框的某一屬性3.4.3盒子內(nèi)邊距屬性padding是盒子的內(nèi)邊距，即邊框和內(nèi)容之間的空白區(qū)域設(shè)置1個(gè)屬性值表示上下左右4個(gè)內(nèi)邊距的值；設(shè)置2個(gè)屬性值表示上下內(nèi)邊距和左右內(nèi)邊距的值；設(shè)置3個(gè)屬性值，前者表示上邊距屬性值，中間表示左右內(nèi)邊距屬性值，后者表示下內(nèi)邊距值；設(shè)置4個(gè)屬性值，表示上、右、下、左內(nèi)邊距的值，呈順時(shí)針方向3.4.3盒子內(nèi)邊距屬性可以使用padding-top,padding-right,padding-bottom,padding-left單獨(dú)設(shè)置某一方向的內(nèi)邊距3.4.4盒子外邊距屬性margin是盒子的外邊距，即頁(yè)面上元素和元素之間的距離3.5CSS元素布局與定位3.5.1標(biāo)準(zhǔn)文檔流標(biāo)準(zhǔn)文檔流是指不使用與布局和定位相關(guān)CSS規(guī)則時(shí)，頁(yè)面元素默認(rèn)的排列規(guī)則。頁(yè)面元素分為兩類：塊級(jí)元素(block)：左右撐滿占據(jù)一行，和同級(jí)兄弟元素依次垂直排列，如div,li元素等行內(nèi)元素(inline)：相鄰元素之間橫向排列，到文檔右端自動(dòng)換行，如span,a元素等3.5.2元素在標(biāo)準(zhǔn)流中的定位span1span2margin-rightmargin-left行內(nèi)元素的水平間距是由這兩個(gè)元素所在盒子的外邊距之和決定的。3.5.2元素在標(biāo)準(zhǔn)流中的定位div1div2Max(margin-bottom,margin-top)兩個(gè)塊級(jí)元素之間的垂直距離不是第1個(gè)元素的margin-bottom加第2個(gè)元素的margin-top，而是兩者之中較大者3.5.2元素在標(biāo)準(zhǔn)流中的定位當(dāng)一個(gè)元素包含另一個(gè)元素時(shí)，就形成父子關(guān)系，其中子元素的margin將以父塊的內(nèi)容為參考。外層的虛線邊框是父div的內(nèi)容區(qū)域，可以看出，子元素的margin以及其它部分都是從父元素的內(nèi)容區(qū)域開始計(jì)算的。3.5.2元素在標(biāo)準(zhǔn)流中的定位3.5.2元素在標(biāo)準(zhǔn)流中的定位margin為負(fù)值時(shí)，元素之間的定位。當(dāng)元素的margin設(shè)為負(fù)值時(shí)，會(huì)使元素所在的盒子向反方向移動(dòng)，可能導(dǎo)致兩個(gè)元素的重疊，產(chǎn)生一個(gè)元素覆蓋在另一個(gè)元素上面的效果。3.5.3元素的定位屬性元素通過position屬性實(shí)現(xiàn)定位，分為靜態(tài)定位（static）、相對(duì)定位（relative）、絕對(duì)定位（absolute）和固定定位（fixed）四種定位方式。relative:元素的位置將相對(duì)其原本的標(biāo)準(zhǔn)位置偏移指定的距離3.5.3元素的定位屬性absolute：元素可以放在頁(yè)面上的任意位置，位置相對(duì)于最近已定位的父元素，如果元素沒有已定位的父元素，那么它的位置相對(duì)于<html>3.5.3元素的定位屬性fixed：元素位置相對(duì)于瀏覽器窗口是固定位置，拖動(dòng)滾動(dòng)條時(shí)，元素位置不會(huì)發(fā)生變化3.5.4元素的浮動(dòng)屬性在標(biāo)準(zhǔn)流中，一個(gè)塊級(jí)元素在水平方向會(huì)自動(dòng)伸展，直到包含它的父級(jí)元素的邊界；在垂直方向上與兄弟元素依次排列，不能并排。3.5.4元素的浮動(dòng)屬性如果將float屬性設(shè)置為left或right，那么元素就會(huì)向其父級(jí)元素的左側(cè)或右側(cè)靠緊，同時(shí)盒子的寬度不再伸展，將根據(jù)盒子中內(nèi)容寬度決定其寬度。標(biāo)準(zhǔn)流div1float:leftdiv2float:leftdiv3float:left3.5.4元素的浮動(dòng)屬性右浮動(dòng)效果標(biāo)準(zhǔn)流div1float:rightdiv2float:right3.5.4元素的浮動(dòng)屬性清除浮動(dòng)效果clear:left|right|both|nonenone為默認(rèn)值，允許元素兩邊都可以有浮動(dòng)對(duì)象，left不允許左邊有浮動(dòng)對(duì)象，right不允許右邊有浮動(dòng)對(duì)象，both不允許有浮動(dòng)對(duì)象。頁(yè)面中有兩個(gè)元素div1、div2，它們都設(shè)置為左浮動(dòng)。如果希望div2能排列在div1下邊，就像div1沒有浮動(dòng)，div2左浮動(dòng)那樣，只要在div2中使用clear:left;指定div2元素左邊不允許出現(xiàn)浮動(dòng)元素，這樣div2就會(huì)移到下一行。3.5.5元素的顯示屬性元素的顯示可以通過display屬性進(jìn)行設(shè)置，利用display屬性可以實(shí)現(xiàn)塊級(jí)元素和行內(nèi)元素的相互轉(zhuǎn)換。3.5.5元素的顯示屬性設(shè)置display:inline可以將任意的塊級(jí)元素轉(zhuǎn)換為行內(nèi)元素，設(shè)置該屬性值后，元素將擁有行內(nèi)元素的特性?？梢耘c其他行內(nèi)元素共享一行，不會(huì)獨(dú)占一行；不能更改元素的height和width屬性值，大小由內(nèi)容撐開；可以使用padding屬性，設(shè)置上下左右值都有效，而使用margin屬性時(shí)，僅left和right屬性會(huì)產(chǎn)生邊距效果，設(shè)置top和bottom屬性沒有任何效果。3.5.5元素的顯示屬性設(shè)置display:block可以將任意的行內(nèi)元素轉(zhuǎn)換為塊級(jí)元素，元素將擁有塊級(jí)元素的特性。即元素將獨(dú)占一行，在不設(shè)置自己的寬度的情況下，塊級(jí)元素會(huì)默認(rèn)填滿父級(jí)元素的寬度；能夠改變?cè)氐膆eight和width值；可以設(shè)置padding、margin的各個(gè)屬性值，top、left、bottom、right都能夠產(chǎn)生邊距效果。3.5.5元素的顯示屬性在設(shè)計(jì)水平導(dǎo)航欄效果時(shí)，通常希望多個(gè)導(dǎo)航鏈接項(xiàng)處于同一行，即呈現(xiàn)行內(nèi)元素的特征。同時(shí)，還希望設(shè)置各個(gè)導(dǎo)航鏈接項(xiàng)的寬度和高度，即同時(shí)兼有塊級(jí)元素的特征。此時(shí)，可以設(shè)置display屬性值為inline-block，該屬性值結(jié)合了inline與block的一些特點(diǎn)，使得塊級(jí)元素不再獨(dú)占一行。在元素的顯示上，inline-block與浮動(dòng)效果相似，但是兩者又有著本質(zhì)的區(qū)別3.5.6元素的可見性屬性visibility屬性用來指定一個(gè)元素是否可見。默認(rèn)屬性值為visible，表示元素可見；當(dāng)屬性值為hidden時(shí)，元素不可見，注意：元素雖然被隱藏，但仍占據(jù)原來所在位置，仍然會(huì)影響布局；display:none;設(shè)置元素不可見，元素隱藏后，不會(huì)影響布局。3.5.7元素的溢出處理屬性overflow屬性規(guī)定當(dāng)內(nèi)容溢出元素框時(shí)的處理。overflow:visible|hidden|scroll|auto;CSS3層疊樣式表進(jìn)階學(xué)習(xí)導(dǎo)圖4.1CSS3新增選擇器4.1CSS3新增選擇器新增偽類選擇器4.1CSS3新增選擇器E:not()用于匹配除not()中選擇的元素外的所有元素。4.1CSS3新增選擇器E:target用來匹配錨點(diǎn)#指向的文檔中的具體元素，即URL后面跟錨點(diǎn)#，指向文檔內(nèi)某個(gè)具體的元素，那么該元素就會(huì)觸發(fā)target。4.1CSS3新增選擇器E:first-child表示選擇父元素下的第一個(gè)子元素，E:last-child表示選擇父元素下最后一個(gè)子元素。4.1CSS3新增選擇器E:nth-child(n)表示選擇父元素下面的第n個(gè)子元素，注意在CSS中n從1開始，且n可以是表達(dá)式。E:nth-last-child(n)表示從父元素最后一個(gè)元素開始計(jì)數(shù)，反向選擇。4.1CSS3新增選擇器E:only-child表示如果父元素下僅有一個(gè)元素，那么該元素被選中。4.1CSS3新增選擇器E:first-of-type,E:last-of-type,E:only-of-type,E:nth-of-type(n),E:nth-of-last-type(n)，只考慮樣式中定義的子元素類型，不會(huì)受到其他元素的影響。4.1CSS3新增選擇器E:empty表示選擇沒有任何子元素的父元素。4.1CSS3新增選擇器E:checked匹配用戶界面上處于選中狀態(tài)的元素E，該選擇器主要用于檢測(cè)表單中單選框或復(fù)選框是否為選中狀態(tài)。4.2CSS3新增盒子屬性4.2.1圓角邊框?qū)傩詧A角邊框?qū)傩詁order-radius<style>#rcorner{border-radius:25px;border:2pxsolid#333333;padding:20px;width:200px;height:150px;}</style><body><pid="rcorner">圓角</p></body>僅設(shè)置一個(gè)屬性值當(dāng)僅設(shè)置一個(gè)屬性值時(shí)，邊框的四個(gè)角具有相同的大小，如果希望單獨(dú)設(shè)置四個(gè)角的圓角效果，可以使用border-top-left-radius、border-top-right-radius、border-bottom-right-radius、border-bottom-left-radius屬性設(shè)置圓角值。設(shè)置不同個(gè)數(shù)的屬性值4.2.1圓角邊框?qū)傩栽O(shè)置橢圓邊框效果第一個(gè)數(shù)值表示水平半徑，第二個(gè)數(shù)值表示垂直半徑4.2.1圓角邊框?qū)傩詧D片的圓角效果4.2.1圓角邊框?qū)傩?.2.2邊框圖片屬性CSS3中提供了border-image屬性，該屬性使用圖像填充盒子的邊框。第一個(gè)參數(shù)是border-image-source，表示背景圖像的url地址；第二個(gè)參數(shù)是border-image-slice，表示圖片剪裁位置；圖片裁剪九宮格表示距離圖片上部30%、距離右邊35%、距離底部40%、左邊30%的地方各剪裁一下，形成了九個(gè)分離的區(qū)域。border-image:url(border.png)30%35%40%30%repeatborder-image:url(border.png)27repeat第三個(gè)參數(shù)是border-image-repeat，即邊框圖片的重復(fù)性，可取值repeat（重復(fù)）、round（平鋪）、Stretch（拉伸），其中Stretch是默認(rèn)值。border-image:url(border.png)27border-image:url(border.png)27repeatborder-image:url(border.png)27roundrepeat4.2.2邊框圖片屬性原始圖像81*81border-image:url(border.png)27stretchborder-image:url(border.png)27round4.2.2邊框圖片屬性4.2.3盒子陰影屬性box-shadow屬性用來定義盒子陰影效果box-shadow:

offset-xoffset-yblurspreadcolor

inset4.2.3盒子陰影屬性紙質(zhì)樣式卡片效果4.2.3盒子陰影屬性圖片卡片陰影效果4.2.3盒子陰影屬性4.2.4盒子背景屬性background-image屬性，將多張圖片同時(shí)設(shè)置為背景，不同背景圖片用逗號(hào)隔開background-size指定背景圖像的大小。CSS3以前，背景圖像大小是由圖像的實(shí)際大小決定。background-size:auto|<長(zhǎng)度值>|<百分比>|cover|containauto，默認(rèn)值，不改變背景圖片的原始高度和寬度<長(zhǎng)度值>，成對(duì)出現(xiàn)，例如80px60px<百分比>，例如100%100%Cover，覆蓋，背景圖片等比縮放以填滿整個(gè)容器Contain，容納，背景圖片等比縮放至某一邊緊貼容器邊緣4.2.4盒子背景屬性background-origin屬性指定了背景圖像的起始區(qū)域。background-origin:border-box|padding-box|content-box當(dāng)background-attachment屬性設(shè)置為fixed時(shí)，background-origin屬性會(huì)失效。4.2.4盒子背景屬性4.2.4盒子背景屬性4.3CSS3漸變屬性4.3CSS3漸變屬性漸變（Gradients）效果提供了在兩個(gè)或多個(gè)指定的顏色之間顯示平穩(wěn)的過渡。CSS3定義了三種類型的漸變：一種是線性漸變（LinearGradients），根據(jù)漸變方向的不同，又分為向下、向上、向左、向右、對(duì)角等不同方向的線性漸變；第二種漸變是徑向漸變（RadialGradients），由具有不同半徑的圓的中心進(jìn)行定義；第三種類型為重復(fù)漸變，是由單個(gè)漸變重復(fù)而成。由于不同瀏覽器廠商在實(shí)現(xiàn)漸變標(biāo)準(zhǔn)時(shí)，對(duì)于漸變方向的定義、角度的定義以及順時(shí)針還是逆時(shí)針有所不同，所以在使用漸變時(shí)需要添加瀏覽器前綴。例如，對(duì)于Chrome、Safari瀏覽器，前綴為-webkit-，而火狐瀏覽器Firefox的前綴為-moz-，Opera瀏覽器的前綴為-o-。4.3.1線性漸變線性漸變background:linear-gradient(direction,color-stop1,color-stop2,...);指定線性漸變的方向（左右，對(duì)角線）4.3.1線性漸變指定線性漸變的方向（指定角度）4.3.1線性漸變多個(gè)顏色過渡節(jié)點(diǎn)的線性漸變4.3.1線性漸變精確控制顏色過渡的位置4.3.1線性漸變帶透明度顏色過渡的線性漸變4.3.1線性漸變重復(fù)線性漸變（repeating-linear-gradient）background:repeating-linear-gradient(black,gray10%,white15%);黑色漸變到灰色從高度的0%至10%，灰色漸變到白色從高度的10%至15%，然后重復(fù)這一漸變4.3.2重復(fù)線性漸變徑向漸變background:radial-gradient(shape[size]atpostion,start-color,...,last-color);shape漸變形狀，取值circle（圓形）或ellipse（橢圓形），形狀可以搭配attop，atcenter或atbottom等位置使用，例如radial-gradient(circleatcenter,#f00,#ff0,#080);，也可以使用%或px指定中心點(diǎn)位置，例如radial-gradient(circleat50%,#f00,#ff0,#080);。4.3.3徑向漸變徑向漸變background:radial-gradient(shape[size]atpostion,start-color,...,last-color);size是可選值，表示邊緣輪廓的位置，可取值分別為closest-side，表示漸變的半徑長(zhǎng)度為從圓心到離圓心最近的邊；closest-corner，表示漸變的半徑長(zhǎng)度為從圓心到離圓心最近的角；farthest-side，表示漸變的半徑長(zhǎng)度為從圓心到離圓心最遠(yuǎn)的邊；farthest-corner，表示漸變的半徑長(zhǎng)度為從圓心到離圓心最遠(yuǎn)的角。例如radial-gradient(circlefarthest-corner,#f00,#ff0,#080);也可以配合at使用，例如radial-gradient(circlefarthest-cornerat30px30px,#f00,#ff0);。4.3.3徑向漸變顏色結(jié)點(diǎn)均勻分布的徑向漸變顏色結(jié)點(diǎn)不均勻分布的徑向漸變4.3.3徑向漸變重復(fù)徑向漸變用于創(chuàng)建重復(fù)的徑向漸變圖像background:repeating-radial-gradient(shape[size]atposition,start-color,...,last-color);background:repeating-radial-gradient(black,white10%,gray15%);4.3.4重復(fù)徑向漸變4.4字體與文本屬性4.4.1使用字體使用@font-face加載特定的字體，@font-face語(yǔ)句是CSS中的一個(gè)功能模塊，是為了解決由于瀏覽者系統(tǒng)中沒有安裝字體導(dǎo)致不能顯示的問題，用于實(shí)現(xiàn)網(wǎng)頁(yè)字體多樣性。font-family的作用是聲明字體變量;src屬性定義字體的下載地址，local表示本機(jī)地址，url表示網(wǎng)址，當(dāng)網(wǎng)頁(yè)加載時(shí)會(huì)自動(dòng)從服務(wù)器上下載字體文件再顯示出來。4.4.2本文陰影文本陰影text-shadow:h-shadowv-shadowblurcolorh-shadow和v-shadow是必填項(xiàng)，分別表示垂直和水平陰影，允許為負(fù)值；blur為選填項(xiàng)，表示模糊的距離；color為選填項(xiàng)，表示陰影顏色。4.4.3文本溢出處理文本溢出處理text-overflow指定應(yīng)向用戶如何顯示溢出內(nèi)容text-overflow:clip|ellipsis|string4.5CSS32D/3D變換4.5.1平移變換translate(x,y)方法，從當(dāng)前元素位置沿X軸和Y軸移動(dòng)相應(yīng)的位移量transform:translateX(x)transform:translateY(y)translate3d(x,y,z)，實(shí)現(xiàn)元素在三維空間的平移變換。translateZ(z)4.5.1平移變換rotate(angle)用來在二維空間中將元素對(duì)象相對(duì)中心原點(diǎn)進(jìn)行旋轉(zhuǎn)，給定度數(shù)為正值為順時(shí)針旋轉(zhuǎn)，負(fù)值為逆時(shí)針旋轉(zhuǎn)4.5.2旋轉(zhuǎn)變換默認(rèn)是圍繞元素的中心點(diǎn)旋轉(zhuǎn)，也可以使用transform-origin屬性設(shè)置旋轉(zhuǎn)中心點(diǎn)，例如transform-origin:00，使元素的旋轉(zhuǎn)中心點(diǎn)為左上角。4.5.2旋轉(zhuǎn)變換scale(x,y),scaleX(x),scaleY(y)方法，將元素根據(jù)中心原點(diǎn)進(jìn)行縮放，參數(shù)可以是正數(shù)、負(fù)數(shù)或小數(shù)，默認(rèn)值為1，取正數(shù)表示放大相應(yīng)的倍數(shù)，取小于1的小數(shù)值表示縮小相應(yīng)的倍數(shù)，取負(fù)數(shù)值不會(huì)縮小元素，而是翻轉(zhuǎn)元素。4.5.3縮放變換skew(angle[,angle])方法用來實(shí)現(xiàn)元素對(duì)象的傾斜顯示。兩個(gè)參數(shù)值分別表示元素在X軸和Y軸方向上傾斜的角度，如果第二個(gè)參數(shù)為空，則默認(rèn)為0；參數(shù)取正值，表示元素沿水平或垂直方向，按順時(shí)針傾斜，否則如果取負(fù)值，表示元素按逆時(shí)針方向傾斜。4.5.4傾斜變換CSS32D/3D變換

skewX效果perspective屬性：定義元素距離視圖（人眼）的距離，以像素為單位。當(dāng)元素定義perspective屬性時(shí)，其子元素會(huì)獲得透視效果，而不是元素本身。Z=0，所以此時(shí)投影在屏幕上的圖像尺寸和原始圖片大小一樣過translateZ增大Z的值，即圖片向視點(diǎn)靠近，此時(shí)視距減小，投影到屏幕上的圖像變大了。4.5.5perspective屬性帶perspective屬性的旋轉(zhuǎn)效果4.5.5perspective屬性圖片旋轉(zhuǎn)應(yīng)用案例4.5.6變換應(yīng)用案例4.6CSS3過渡與動(dòng)畫效果4.6.1過渡效果過渡transition是元素從一種樣式逐漸改變?yōu)榱硪环N的效果transition:propertydurationtiming-functiondelay過渡效果應(yīng)用案例4.6.1過渡效果4.6.2動(dòng)畫效果動(dòng)畫和過渡一樣，是使元素從一種樣式變化為另一種樣式的效果。CSS3中使用@keyframes規(guī)則創(chuàng)建動(dòng)畫4.6.2動(dòng)畫效果動(dòng)畫效果應(yīng)用案例4.6.3圖片過濾效果filter屬性為元素添加可視效果(例如：模糊與飽和度)4.7CSS3應(yīng)用案例水平導(dǎo)航條4.7.1導(dǎo)航條垂直導(dǎo)航條4.7.2下拉菜單4.7.3響應(yīng)式圖片與媒體查詢響應(yīng)式圖片媒體查詢@media可用于檢測(cè)viewport(視窗)的寬度與高度，設(shè)備的寬度與高度，朝向(智能手機(jī)橫屏，豎屏)，分辨率等4.7.3響應(yīng)式圖片與媒體查詢媒體查詢由多種媒體組成，可以包含一個(gè)或多個(gè)表達(dá)式，表達(dá)式根據(jù)條件是否成立返回true或false。

在屏幕可視窗口尺寸大于480像素的設(shè)備上修改背景顏色響應(yīng)式圖片相冊(cè)4.7.3響應(yīng)式圖片與媒體查詢4.7.4關(guān)鍵幀動(dòng)畫4.7.4關(guān)鍵幀動(dòng)畫4.7.5旋轉(zhuǎn)照片墻把照片疊在一起，然后rotateY旋轉(zhuǎn)，給每張圖片旋轉(zhuǎn)不一樣的角度；設(shè)置perspective和preserve-3d，使瀏覽器以3D方式渲染；設(shè)置translateZ；設(shè)置旋轉(zhuǎn)動(dòng)畫。4.7.6輪播圖效果JavaScript語(yǔ)言學(xué)習(xí)導(dǎo)圖5.1JavaScript簡(jiǎn)介5.1JavaScript簡(jiǎn)介JS是一種在瀏覽器中運(yùn)行的解釋性腳本語(yǔ)言。在html基礎(chǔ)上，JS可以開發(fā)交互式Web網(wǎng)頁(yè)。TIOBE編程語(yǔ)言排行榜5.1JavaScript簡(jiǎn)介JS是由ES(ECMAScript)、DOM(文檔對(duì)象模型)、BOM(瀏覽器對(duì)象模型)組成。ECMAScript6.0（簡(jiǎn)稱ES6）是JavaScript語(yǔ)言的下一代標(biāo)準(zhǔn)，已經(jīng)在2015年6月發(fā)布。它的目標(biāo)是使得JavaScript語(yǔ)言可以用來編寫復(fù)雜的大型應(yīng)用程序，成為企業(yè)級(jí)開發(fā)語(yǔ)言。Node.js是一個(gè)基于ChromeV8引擎的JavaScript運(yùn)行環(huán)境，是讓JS運(yùn)行在服務(wù)端的開發(fā)平臺(tái)，它使得JS成為與PHP、Python等服務(wù)端語(yǔ)言相似的語(yǔ)言。Node.js就只有ES，目前瀏覽器比較流行的版本就是ES6(ES2015)。5.2基本語(yǔ)法5.2.1代碼書寫規(guī)范區(qū)分大小寫JavaScript語(yǔ)言是嚴(yán)格區(qū)分大小寫的。一般來說，對(duì)于變量、函數(shù)以及事件的命名建議采用小寫和大寫組合的形式，例如studentId、getNumber、onClick等。代碼格式每條功能執(zhí)行語(yǔ)句的最后必須以分號(hào)結(jié)束，一個(gè)單獨(dú)的分號(hào)也可以表示一條語(yǔ)句，叫做空語(yǔ)句。一行可以寫一條語(yǔ)句，也可以寫多條語(yǔ)句。代碼注釋單行注釋，以兩個(gè)斜杠//開頭，后面跟上注釋文字；另一種是多行注釋，以符號(hào)/*作為起始，以*/作為結(jié)束，中間是待注釋的內(nèi)容，注釋內(nèi)容可以跨越多行。5.2.2標(biāo)識(shí)符和保留字標(biāo)識(shí)符標(biāo)識(shí)符就是一個(gè)名稱，主要用來命名程序中的常量、變量和函數(shù)等。在JS中，要求一個(gè)合法的標(biāo)識(shí)符可以由字母、數(shù)字、下劃線（_）和美元符號(hào)（$）組成，但不能以數(shù)字開頭，并且不能使用JavaScript中定義的保留字。。保留字保留字是指在程序中有特定含義，已成為編程語(yǔ)言語(yǔ)法體系的一部分字符，這些字符只能在JavaScript語(yǔ)法規(guī)定的場(chǎng)合下使用，而不能用作變量名、函數(shù)名等標(biāo)識(shí)符。5.2.3常量與變量程序運(yùn)行時(shí)，值可以改變的量為變量，值不變的量為常量常量聲明：constname='Bill';變量聲明：使用var關(guān)鍵詞聲明變量，可以同時(shí)聲明多個(gè)變量vari,j,k;在聲明變量的同時(shí)對(duì)其賦值vari=1,j=2,k=3;如果只是聲明了變量，并未對(duì)其賦值，則其值默認(rèn)為undefinedJS擁有動(dòng)態(tài)類型,相同的變量名可用作不同的類型var現(xiàn)在已經(jīng)不推薦使用了，因?yàn)闀?huì)有變量提升等問題5.2.3常量與變量ES6新增了let命令，用來聲明局部變量，它的用法類似于var，但是所聲明的變量，只在let命令所在的代碼塊內(nèi)有效。let聲明變量letname='Bill';5.2.4數(shù)據(jù)類型JS采用了弱類型的方式，所以在聲明變量時(shí)無需事先指定數(shù)據(jù)類型，可在使用或賦值時(shí)再確定其數(shù)據(jù)類型。在JS中數(shù)據(jù)類型主要分為值類型（基本類型）和引用類型兩類，其中值類型又包括數(shù)字型、字符串型、布爾類型、空類型、未定義類型等；引用類型包括數(shù)組、函數(shù)、對(duì)象等類型。字符串是由Unicode字符、數(shù)字、標(biāo)點(diǎn)符號(hào)等組成的序列，用單引號(hào)或雙引號(hào)進(jìn)行包含。字符串?dāng)?shù)據(jù)也可看成是一個(gè)String對(duì)象，可以通過String對(duì)象的屬性和方法對(duì)字符串進(jìn)行操作。數(shù)字型（Number）是最基本的數(shù)據(jù)類型，JS中不區(qū)分整數(shù)和浮點(diǎn)數(shù)，所有數(shù)字都是由浮點(diǎn)型來表示。5.2.4數(shù)據(jù)類型布爾數(shù)據(jù)類型只有兩個(gè)取值：true或false。JavaScript中還有一些特殊的數(shù)據(jù)類型，包括轉(zhuǎn)義字符、未定義值、空值等。處于未賦值狀態(tài)的變量是undefined類型，表示未知狀態(tài)，而null類型則表示變量被賦予空值，用于定義空或不存在的引用，如果引用一個(gè)沒有定義的變量，同樣也會(huì)返回null值。JS中還有一種特殊類型的數(shù)字常量NaN，表示非數(shù)字。5.3流程控制語(yǔ)句5.3流程控制語(yǔ)句JavaScript中提供了if條件判斷、switch多分支、for循環(huán)、while循環(huán)、do…while循環(huán)、break、continue等7種流程控制語(yǔ)句。條件判斷語(yǔ)句5.3流程控制語(yǔ)句循環(huán)語(yǔ)句5.4函數(shù)5.4.1函數(shù)的定義JavaScript使用關(guān)鍵字function定義函數(shù)，函數(shù)可以通過聲明定義，也可以是一個(gè)表達(dá)式。函數(shù)一般定義在HTML文檔的<head>部分，在<script>元素內(nèi)部；函數(shù)也可以單獨(dú)定義在外部的腳本文件中。函數(shù)定義語(yǔ)法格式5.4.2函數(shù)的調(diào)用JavaScript中，函數(shù)調(diào)用有三種方式：函數(shù)的直接調(diào)用、在事件響應(yīng)中調(diào)用、通過鏈接調(diào)用。函數(shù)的直接調(diào)用是指直接使用函數(shù)名，使用具體的實(shí)際參數(shù)替換形式參數(shù)。在事件響應(yīng)中調(diào)用，通過將函數(shù)與事件相關(guān)聯(lián)完成事件響應(yīng)的過程。在超鏈接標(biāo)簽中的href屬性中使用“javascript:關(guān)鍵字”格式，通過鏈接調(diào)用函數(shù)。5.4.2函數(shù)的調(diào)用在事件響應(yīng)中調(diào)用函數(shù)直接調(diào)用函數(shù)JS程序按照在HTML中出現(xiàn)的順序逐行執(zhí)行。但是函數(shù)體內(nèi)的代碼，不會(huì)立即執(zhí)行，只有當(dāng)所在函數(shù)被其它程序調(diào)用時(shí)，代碼才會(huì)執(zhí)行5.4.3常用內(nèi)置函數(shù)JavaScript還提供了一些常用的內(nèi)置函數(shù)5.5自定義對(duì)象5.5.1自定義對(duì)象的創(chuàng)建JavaScript提供了兩種創(chuàng)建自定義對(duì)象的方法。一種稱為字面量表示法，即手動(dòng)的寫出對(duì)象的內(nèi)容來創(chuàng)建一個(gè)對(duì)象。5.5.1自定義對(duì)象的創(chuàng)建另外一種方法是使用new關(guān)鍵字創(chuàng)建對(duì)象?；蛘?.5.2對(duì)象成員的訪問與操作當(dāng)需要訪問對(duì)象屬性或方法，可以使用點(diǎn)(.)，后面跟要訪問的屬性或方法即可。也可以用一個(gè)對(duì)象來做另一個(gè)對(duì)象成員的值，例如可以將person對(duì)象中的name屬性值定義為一個(gè)對(duì)象。5.5.2對(duì)象成員的訪問與操作還可以使用中括號(hào)訪問對(duì)象的屬性，例如person['age']，person['name']['first']，這種方式看起來更像是訪問一個(gè)數(shù)組元素。有時(shí)需要判斷一個(gè)對(duì)象有無屬性，此時(shí)可以使用關(guān)鍵字in。5.6內(nèi)置對(duì)象5.6.1Array對(duì)象Array對(duì)象是使用單獨(dú)的變量名存儲(chǔ)一連串相同或不同類型的數(shù)據(jù)。創(chuàng)建Array數(shù)組對(duì)象有兩種方式創(chuàng)建數(shù)組訪問數(shù)組：通過指定數(shù)組名以及索引號(hào)，可以訪問某個(gè)特定的元素5.6.2String對(duì)象String對(duì)象用來保存和處理字符串變量。創(chuàng)建String對(duì)象很簡(jiǎn)單，直接使用newString即可，例如varstr1=newString("Thisisastring");5.6.3Math對(duì)象Math對(duì)象包含用來進(jìn)行數(shù)學(xué)計(jì)算的各類屬性和方法。Math和其他對(duì)象不同，它不是一個(gè)構(gòu)造函數(shù)，它屬于一個(gè)工具類不用創(chuàng)建對(duì)象。5.6.4Date對(duì)象Date對(duì)象用來獲取日期和時(shí)間。創(chuàng)建Date對(duì)象的基本語(yǔ)法為：vardate=newDate(日期參數(shù))。日期參數(shù)有幾種情況：一是省略不寫，此時(shí)獲取系統(tǒng)當(dāng)前日期和時(shí)間。二是采用格式為“月日，公元年時(shí)：分：秒”或“月日，公元年”的日期字符串，例如vardate=newDate("Apil1,202011:40:20")。第三種是一律以數(shù)值表示，格式為“公元年，月，日，時(shí)，分，秒”或“公元年，月，日”的形式，例如vardate=newDate(2020,4,1,11,40,20)。5.6.4Date對(duì)象5.7JavaScript腳本的編寫5.7.1腳本直接嵌入在script元素中這種方式首先將<script>元素插入到<head></head>之間或者<body></body>之間，然后在<script></script>之間根據(jù)需要編寫JavaScript腳本。該方式比較簡(jiǎn)單，在頁(yè)面加載時(shí)，腳本即可運(yùn)行。5.7.2在事件響應(yīng)中嵌入和執(zhí)行腳本為了避免在頁(yè)面加載時(shí)直接執(zhí)行腳本，可以將腳本編寫為函數(shù)，在事件響應(yīng)中觸發(fā)執(zhí)行。5.7.3腳本直接嵌入在script元素中將JavaScript代碼編寫為一個(gè)獨(dú)立的以.js為擴(kuò)展名的腳本文件，然后在頁(yè)面中用script元素鏈接外部腳本文件。5.8JavaScript腳本的調(diào)試5.8.1使用alert方法調(diào)試腳本使用alert方法進(jìn)行調(diào)試比較簡(jiǎn)單，直接在需要調(diào)試輸出的地方輸出字符串或變量即可，例如varname=”abc”;alert(name);。5.8.2使用console.log調(diào)試腳本新一代的瀏覽器，如Firefox、Chrome，包括IE，都相繼推出了JS調(diào)試控制臺(tái)，支持使用類似"console.log(xxxx)"的形式，在控制臺(tái)打印調(diào)試信息，而不直接影響頁(yè)面顯示。5.8.3使用斷點(diǎn)調(diào)試腳本所謂斷點(diǎn)，是指可以讓程序暫時(shí)停止執(zhí)行的某個(gè)位置。JavaScript斷點(diǎn)調(diào)試，即是在瀏覽器開發(fā)者工具中為JavaScript代碼添加斷點(diǎn)，讓代碼執(zhí)行到某一特定位置暫停，方便開發(fā)者對(duì)該處代碼段的分析與邏輯處理。DOM與BOM編程學(xué)習(xí)導(dǎo)圖6.1DOM概念與基礎(chǔ)操作6.1.1DOM概述DOM全稱文檔對(duì)象模型(DocumentObjectModel)，其作用是將網(wǎng)頁(yè)轉(zhuǎn)為一個(gè)JS對(duì)象，從而使用JS對(duì)網(wǎng)頁(yè)元素進(jìn)行各種操作。瀏覽器會(huì)根據(jù)DOM模型，將HTML文檔解析成一系列節(jié)點(diǎn)，再由這些節(jié)點(diǎn)組成一個(gè)樹狀結(jié)構(gòu)。6.1.2獲取節(jié)點(diǎn)獲取節(jié)點(diǎn)主要有兩種方式：一種是從document頂層對(duì)象出發(fā)，調(diào)用相應(yīng)方法訪問各節(jié)點(diǎn)，另一種方式是從節(jié)點(diǎn)指針出發(fā)獲取該節(jié)點(diǎn)所在的父節(jié)點(diǎn)、兄弟節(jié)點(diǎn)和子節(jié)點(diǎn)。6.1.2獲取節(jié)點(diǎn)getElementById方法，即通過ID訪問HTML元素節(jié)點(diǎn)。6.1.2獲取節(jié)點(diǎn)getElementsByName方法，即通過元素的name屬性查找HTML元素節(jié)點(diǎn)。6.1.3創(chuàng)建與插入節(jié)點(diǎn)創(chuàng)建節(jié)點(diǎn)包括創(chuàng)建元素節(jié)點(diǎn)、創(chuàng)建屬性節(jié)點(diǎn)、創(chuàng)建文本節(jié)點(diǎn)三類，對(duì)應(yīng)的方法名分別為createElement、createAttribute、createTextNode；插入節(jié)點(diǎn)有appendChild方法，表示向節(jié)點(diǎn)的子節(jié)點(diǎn)列表末尾添加新的子節(jié)點(diǎn)，insertBefore方法表示在已知的子節(jié)點(diǎn)前面插入一個(gè)新的子節(jié)點(diǎn)。6.1.3創(chuàng)建與插入節(jié)點(diǎn)創(chuàng)建與插入節(jié)點(diǎn)6.1.4復(fù)制、刪除和替換節(jié)點(diǎn)復(fù)制節(jié)點(diǎn)使用cloneNode方法，其功能是創(chuàng)建指定節(jié)點(diǎn)的副本，該方法接收一個(gè)布爾值參數(shù)，當(dāng)參數(shù)為true時(shí)，表示復(fù)制當(dāng)前節(jié)點(diǎn)及其所有子節(jié)點(diǎn)，當(dāng)參數(shù)為false時(shí)，表示僅復(fù)制當(dāng)前節(jié)點(diǎn)。刪除節(jié)點(diǎn)使用removeChild方法，用來刪除指定的節(jié)點(diǎn)。替換節(jié)點(diǎn)使用replaceChild方法，表示將某個(gè)子節(jié)點(diǎn)替換為另一個(gè)節(jié)點(diǎn)。6.1.4復(fù)制、刪除和替換節(jié)點(diǎn)使用removeChild方法刪除節(jié)點(diǎn)使用replaceChild方法替換節(jié)點(diǎn)6.1.5獲取、設(shè)置和刪除屬性getAttribute方法用來獲取節(jié)點(diǎn)屬性，該方法以屬性名為參數(shù)，返回屬性名對(duì)應(yīng)的屬性值。設(shè)置屬性使用setAttribute方法，對(duì)應(yīng)的參數(shù)為屬性名和屬性值，如果指定的屬性名不存在，調(diào)用該方法還可以創(chuàng)建相關(guān)屬性。刪除屬性使用removeAttribute方法。6.1.5獲取、設(shè)置和刪除屬性在DOM中，如果需要修改元素的屬性，除了使用元素節(jié)點(diǎn).setAttribute(屬性名,屬性值)外，也可以直接設(shè)置document.getElementById(id).屬性="新值"。如果需要修改元素的CSS樣式，可以使用document.getElementById(id).style.樣式名="新值"。6.2DOM級(jí)別與DOM事件6.2DOM級(jí)別與DOM事件DOM級(jí)別一共可以分為4個(gè)級(jí)別：DOM0級(jí)，DOM1級(jí)，DOM2級(jí)和DOM3級(jí)，而DOM事件分為3個(gè)級(jí)別：DOM0級(jí)事件處理，DOM2級(jí)事件處理和DOM3級(jí)事件處理。DOM0級(jí)DOM1級(jí)DOM2級(jí)DOM3級(jí)DOM0級(jí)事件無DOM2級(jí)事件DOM3級(jí)事件

6.2.1DOM0級(jí)事件DOM0級(jí)事件就是將一個(gè)函數(shù)賦值給一個(gè)事件處理屬性。代碼給button定義了一個(gè)id，通過獲取id的按鈕，并將一個(gè)函數(shù)賦值給一個(gè)事件處理屬性onclick，這樣的方法便是DOM0級(jí)處理事件的體現(xiàn)，也可以通過給事件處理屬性賦值null來解綁事件。DOM0級(jí)事件處理程序的缺點(diǎn)在于一個(gè)處理程序無法同時(shí)綁定多個(gè)處理函數(shù)。6.2.2DOM2級(jí)事件DOM2級(jí)事件在DOM0級(jí)事件的基礎(chǔ)上彌補(bǔ)了一個(gè)處理程序無法同時(shí)綁定多個(gè)處理函數(shù)的缺點(diǎn)，允許給一個(gè)處理程序添加多個(gè)處理函數(shù)。DOM2級(jí)事件定義了addEventListener和removeEventListener兩個(gè)方法，分別用來綁定和解綁事件，方法中包含3個(gè)參數(shù)，表示綁定的事件處理屬性名稱（不包含on）、處理函數(shù)和是否在捕獲時(shí)執(zhí)行事件處理函數(shù)。6.2.3DOM3級(jí)事件DOM3級(jí)事件在DOM2級(jí)事件的基礎(chǔ)上添加了更多的事件類型，同時(shí)DOM3級(jí)事件也允許用戶自定義一些事件。6.2.4DOM事件流DOM結(jié)構(gòu)是一個(gè)樹型結(jié)構(gòu)，當(dāng)一個(gè)HTML元素產(chǎn)生一個(gè)事件時(shí)，該事件會(huì)在元素節(jié)點(diǎn)與根結(jié)點(diǎn)之間的路徑傳播，路徑所經(jīng)過的結(jié)點(diǎn)都會(huì)收到該事件，這個(gè)傳播過程可稱為DOM事件流。DOM支持兩種事件模型：捕獲型事件（eventcapture）和冒泡型事件（eventbubbling）6.2.4DOM事件流圖中當(dāng)用戶點(diǎn)擊超鏈接時(shí)，a元素為事件目標(biāo)，點(diǎn)擊a元素后同時(shí)也會(huì)觸發(fā)p、li上的點(diǎn)擊事件，一層一層向上直至最外層的html或document。在JavaScript中，可以通過設(shè)置addEventListener的第三個(gè)參數(shù)決定是事件冒泡還是事件捕獲，設(shè)置為true表示事件在捕獲階段執(zhí)行，而設(shè)置為false表示事件在冒泡階段執(zhí)行。事件冒泡，即事件開始是由最具體的元素接收，然后逐級(jí)向上傳播到較為不具體的節(jié)點(diǎn)。6.2.4DOM事件流當(dāng)點(diǎn)擊超鏈接時(shí)，首先會(huì)彈出“我是目標(biāo)事件”提示，然后又彈出“事件冒泡至div”的提示，這一結(jié)果表明事件是自內(nèi)而外向上冒泡。在冒泡過程中通過調(diào)用事件對(duì)象上的stopPropagation()方法可以終止事件的冒泡。6.3BOM編程6.3BOM編程BOM是BrowserObjectModel的縮寫，簡(jiǎn)稱瀏覽器對(duì)象模型。BOM實(shí)際上是一系列能夠?qū)g覽器信息進(jìn)行操作的對(duì)象集合，包括window對(duì)象、document對(duì)象、navigator對(duì)象、screen對(duì)象、history對(duì)象、location對(duì)象等，其中window對(duì)象是BOM的核心。6.3.1window對(duì)象window對(duì)象是瀏覽器窗口對(duì)文檔提供的一個(gè)容器，代表打開的瀏覽器窗口，是每一個(gè)加載文檔的父對(duì)象。window對(duì)象是全局對(duì)象，所有在全局作用域中聲明的變量、對(duì)象、函數(shù)都會(huì)變成window對(duì)象的屬性和方法。因此，在調(diào)用window對(duì)象的屬性和方法時(shí)，可以省略window對(duì)象的引用。6.3.1window對(duì)象window對(duì)象常用方法6.3.1window對(duì)象對(duì)話框類方法：alert方法僅接收一個(gè)字符串參數(shù)，用來彈出相應(yīng)的警告信息框；confirm方法用來顯示帶有確認(rèn)和取消按鈕的對(duì)話框；prompt方法則用來顯示可提示用戶輸入的對(duì)話框。6.3.1window對(duì)象窗體控制方法：包括打開新窗口（open）和關(guān)閉窗口（close）。6.3.1window對(duì)象定時(shí)器方法：window對(duì)象提供了兩組和定時(shí)有關(guān)的方法，其中setInterval用于創(chuàng)建一個(gè)定時(shí)器，表示間隔指定的毫秒數(shù)重復(fù)執(zhí)行指定的代碼，而clearInterval則用于清除setInterval創(chuàng)建的定時(shí)器。6.3.1window對(duì)象利用setInterval還可以創(chuàng)建簡(jiǎn)單的動(dòng)畫效果。6.3.2hiostory對(duì)象history對(duì)象包含用戶（在瀏覽器窗口中）訪問過的URL，它是window對(duì)象的一部分，可通過window.history屬性對(duì)其進(jìn)行訪問。history對(duì)象有一個(gè)屬性length，返回用戶瀏覽器歷史列表中訪問的網(wǎng)頁(yè)個(gè)數(shù)。history對(duì)象有三個(gè)方法：back()方法表示加載history列表中的前一個(gè)URL，即跳轉(zhuǎn)到當(dāng)前頁(yè)的上一頁(yè)；forward()表示加載history列表中的下一個(gè)URL，即跳轉(zhuǎn)到當(dāng)前頁(yè)的下一頁(yè)；go()方法則表示加載history列表中的某個(gè)具體頁(yè)面。6.3.3location對(duì)象location對(duì)象包含有關(guān)當(dāng)前URL的信息。http:///news/2020/0227/c8158a261461/page.htm#1hash:設(shè)置或返回從井號(hào)(#)開始的URLhost：設(shè)置或返回主機(jī)名和當(dāng)前URL的端口hostname:設(shè)置或返回當(dāng)前URL的主機(jī)名href:設(shè)置或返回完整的URLpathname:設(shè)置或返回當(dāng)前URL的路徑部分protocol:設(shè)置或返回當(dāng)前URL的協(xié)議search:設(shè)置或返回從問號(hào)(?)開始的URL(查詢部分)6.3.4screen對(duì)象screen對(duì)象包含有關(guān)客戶端顯示屏幕的信息。6.3.5navigator對(duì)象navigator對(duì)象包含有關(guān)瀏覽器的信息。6.4表單編程6.4表單編程一個(gè)表單有三個(gè)基本組成部分：表單標(biāo)簽<form>，包含了處理表單數(shù)據(jù)所用程序的URL以及數(shù)據(jù)提交到服務(wù)器的方法；表單域，包含了文本框、密碼框、隱藏域、多行文本框、復(fù)選框、單選框、下拉選擇框和文件上傳框等；表單按鈕，包括提交按鈕、復(fù)位按鈕和一般按鈕，用于將數(shù)據(jù)傳送到服務(wù)器上的處理程序或者取消輸入。6.4.1表單元素及其相關(guān)操作在獲取表單對(duì)象之前，首先需要定義表單，例如：<formid="form1"name="myForm"></form>。獲取表單對(duì)象四種方法：根據(jù)id獲取表單對(duì)象，document.getElementById('form1')獲取form元素集合里的第一個(gè)元素，document.getElementsByTagName('form')[0]直接使用數(shù)字下標(biāo)，可寫成document.forms[0]使用forms名稱下標(biāo)，即document.forms['myForm']6.4.1表單元素及其相關(guān)操作表單的提交和重置通過定義提交按鈕可以實(shí)現(xiàn)表單的提交，例如：<inputtype="submit"value="提交表單">，以這種方式提交表單時(shí)，瀏覽器會(huì)在將請(qǐng)求發(fā)送給服務(wù)器之前觸發(fā)submit事件，這樣就可以對(duì)表單域中的內(nèi)容進(jìn)行驗(yàn)證，以決定是否允許表單提交。也可以用編程方式調(diào)用submit方法提交表單。varform=document.getElementById("form1");form.submit();6.4.1表單元素及其相關(guān)操作在表單內(nèi)容驗(yàn)證無效而不能發(fā)送給服務(wù)器時(shí)，可以通過阻止默認(rèn)的提交事件來阻止表單提交。6.4.2文本框編程表單中有兩種類型的文本框：一種是用<inputtype="text">定義的單行文本框，另一種是用<textarea>定義的多行文本框。獲取文本框內(nèi)容6.4.3列表框編程創(chuàng)建select元素添加選項(xiàng)6.4.3列表框編程刪除所有選項(xiàng)刪除選定選項(xiàng)6.4.3列表框編程獲取選定選項(xiàng)的值及文本修改選項(xiàng)6.4.3列表框編程刪除select元素6.4.4選擇框編程選擇框編程是指利用DOM和JavaScript實(shí)現(xiàn)對(duì)表單中單選框（radio）和復(fù)選框（checkbox）的操作，其中主要任務(wù)是判斷單選框或復(fù)選框中選項(xiàng)的選擇狀態(tài)，在程序中需要使用循環(huán)遍歷整個(gè)選擇框，逐個(gè)檢查選擇項(xiàng)的checked屬性。6.5正則表達(dá)式6.5.1基本符號(hào)正則表達(dá)式(regularexpression)是用于匹配字符串中字符組合的模式，其模式規(guī)則是由一個(gè)字符序列組成，包括所有字母和數(shù)字在內(nèi)，可以用來檢查一個(gè)字符串是否含有某種子串、將匹配的子串替換或者從某個(gè)串中取出符合某個(gè)條件的子串等。正則表達(dá)式的創(chuàng)建按字面量方式進(jìn)行創(chuàng)建，基本語(yǔ)法為：varpattern=/正則表達(dá)式主體/修飾符，其中斜杠稱為定界符，用來表示正則表達(dá)式開始和結(jié)束的地方；正則表達(dá)式主體由原子和元字符組成；修飾符是可選的，是對(duì)正則表達(dá)式的擴(kuò)充，常用取值有g(shù)、i、m，分別表示全局匹配、不區(qū)分大小寫的匹配、多行匹配。6.5.1基本符號(hào)正則表達(dá)式的創(chuàng)建通過對(duì)象方式進(jìn)行創(chuàng)建

varpattern=newRegExp("正則表達(dá)式","修飾符");正則表達(dá)式中所有字母和數(shù)字都是按照字面含義進(jìn)行匹配的，其他非字母的字符需要通過反斜杠（\）作為前綴進(jìn)行轉(zhuǎn)義，如\n匹配換行符。按照字面含義定義的字母和數(shù)字又叫做原子，這些字符都是精確匹配。如果需要匹配某一類字符，則需要使用元字符，也稱為字符組或字符類，通過將直接量字符放入方括號(hào)內(nèi)，可以組成元字符。一個(gè)元字符可以匹配它所包含任意一

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝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ù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
  • 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)論