Bootstrap響應(yīng)式Web開發(fā)（第2版）第2章 移動Web開發(fā)基礎(chǔ)_第1頁
Bootstrap響應(yīng)式Web開發(fā)（第2版）第2章 移動Web開發(fā)基礎(chǔ)_第2頁
Bootstrap響應(yīng)式Web開發(fā)（第2版）第2章 移動Web開發(fā)基礎(chǔ)_第3頁
Bootstrap響應(yīng)式Web開發(fā)（第2版）第2章 移動Web開發(fā)基礎(chǔ)_第4頁
Bootstrap響應(yīng)式Web開發(fā)（第2版）第2章 移動Web開發(fā)基礎(chǔ)_第5頁
已閱讀5頁，還剩183頁未讀， 繼續(xù)免費閱讀

下載本文檔

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

文檔簡介

第2章移動Web開發(fā)基礎(chǔ)《Bootstrap響應(yīng)式Web開發(fā)（第2版）》學(xué)習(xí)目標(biāo)/Target了解屏幕分辨率，能夠說出屏幕分辨率的概念了解設(shè)備像素比，能夠說出設(shè)備像素比的計算方式

了解視口，能夠說出視口的設(shè)置方式

掌握CSS樣式初始化的使用方法，能夠使用Normalize.css初始化默認樣式掌握CSS變量的使用方法，能夠使用CSS變量減少冗余的樣式代碼學(xué)習(xí)目標(biāo)/Target掌握Less常用語法的使用方法，能夠定義Less變量和使用嵌套語法來簡化代碼掌握Sass常用語法的使用方法，能夠定義Sass變量和使用嵌套語法來簡化代碼

掌握WebStorage的使用方法，能夠?qū)?shù)據(jù)進行存儲、獲取、刪除等操作掌握音頻和視頻的使用方法，能夠?qū)崿F(xiàn)對音頻和視頻的播放、暫停、進度和音量

控制等操作掌握移動端touch事件的使用方法，能夠?qū)崿F(xiàn)touch事件章節(jié)概述/Summary隨著移動設(shè)備和互聯(lián)網(wǎng)的快速發(fā)展，移動Web開發(fā)技術(shù)應(yīng)運而生，并成為當(dāng)下非常流行的技術(shù)之一。移動Web開發(fā)的目標(biāo)是構(gòu)建適應(yīng)不同設(shè)備和屏幕尺寸的Web應(yīng)用，以提供更好的用戶體驗。本章將對移動Web開發(fā)基礎(chǔ)進行詳細講解。目錄/Contents2.12.22.3屏幕分辨率和設(shè)備像素比視口CSS樣式初始化2.4CSS變量目錄/Contents2.52.62.7CSS預(yù)處理器WebStorage視頻和音頻2.8移動端touch事件屏幕分辨率和設(shè)備像素比2.12.1.1屏幕分辨率

先定一個小目標(biāo)！了解屏幕分辨率，能夠說出屏幕分辨率的概念2.1.1屏幕分辨率什么是屏幕分辨率？2.1.1屏幕分辨率屏幕分辨率是指一塊屏幕上可以顯示的像素數(shù)量，通常以像素（px）為單位。例如，分辨率1920×1080表示水平方向為1920px、垂直方向為1080px，兩者相乘，可知屏幕上總共有2073600px。2.1.1屏幕分辨率在屏幕尺寸相同的情況下，當(dāng)屏幕分辨率較低時，屏幕上的像素數(shù)量相對較少；當(dāng)屏幕分辨率較高時，屏幕上的像素數(shù)量相對較多。下面演示在屏幕尺寸相同的情況下，高分辨率屏幕和低分辨率屏幕顯示的畫面的區(qū)別，如下圖所示。2.1.1屏幕分辨率隨著屏幕的發(fā)展，屏幕分辨率越來越高，這導(dǎo)致一些早期軟件的相關(guān)界面在高分辨率屏幕上顯示過小的問題。之所以會出現(xiàn)這個問題，是因為一些早期軟件的寬、高、字號都是固定的，這些軟件在低分辨率屏幕上大小適中，但在高分辨率屏幕上顯得非常小。為了解決這個問題，操作系統(tǒng)對屏幕畫面進行了放大，使早期軟件在高分辨率屏幕上也能以合適的大小顯示。由于屏幕畫面被操作系統(tǒng)放大，軟件識別的分辨率和屏幕的實際分辨率出現(xiàn)了差異，為了方便區(qū)分，我們將屏幕實際的分辨率和像素稱為物理分辨率和物理像素，將軟件識別的分辨率和像素稱為邏輯分辨率和邏輯像素。2.1.1屏幕分辨率console.log('邏輯分辨率：'+screen.width+'×'+screen.height);設(shè)備的邏輯分辨率可以使用JavaScript代碼在網(wǎng)頁上進行查詢，示例代碼如下。screen.width表示屏幕寬度的邏輯像素值screen.height表示屏幕高度的邏輯像素值2.1.2設(shè)備像素比

先定一個小目標(biāo)！了解設(shè)備像素比，能夠說出設(shè)備像素比的計算方式2.1.2設(shè)備像素比什么是設(shè)備像素比？2.1.2設(shè)備像素比一個設(shè)備任意一側(cè)的物理像素與邏輯像素之比稱為設(shè)備像素比。例如，當(dāng)一個設(shè)備物理像素寬度為4px，邏輯像素寬度為2px時，則設(shè)備像素比為2；當(dāng)一個設(shè)備物理像素高度為4px，邏輯像素高度為2px時，則設(shè)備像素比為2。2.1.2設(shè)備像素比vardevicePixelRatio=window.devicePixelRatio;console.log('設(shè)備像素比:'+devicePixelRatio);設(shè)備像素比可以使用JavaScript代碼在網(wǎng)頁上進行查詢，示例代碼如下。使用window.devicePixelRatio屬性獲取當(dāng)前設(shè)備像素比視口2.22.2視口

先定一個小目標(biāo)！了解視口，能夠說出視口的設(shè)置方式2.2視口為了使用戶在移動設(shè)備上有更好的瀏覽體驗，瀏覽器允許開發(fā)者通過<meta>標(biāo)簽對視口（Viewport）進行配置。其中，視口是指瀏覽器顯示網(wǎng)頁的區(qū)域。通過配置視口可以使瀏覽器按照指定的大小渲染和顯示網(wǎng)頁，并可以控制網(wǎng)頁的縮放程度以及是否允許用戶縮放網(wǎng)頁。2.2視口<metaname="viewport"content="參數(shù)名1=參數(shù)值1,參數(shù)名2=參數(shù)值2">使用<meta>標(biāo)簽配置視口的語法格式如下。name屬性用于設(shè)置網(wǎng)頁的視口content屬性用于設(shè)置視口參數(shù)的具體值2.2視口content屬性的常用參數(shù)如下表所示。參數(shù)說明width視口寬度，可以為正整數(shù)（像素）或device-width（設(shè)備寬度）height視口高度，可以為正整數(shù)（像素）或device-height（設(shè)備高度）initial-scale初始縮放比，取值范圍為0.0~10.0maximum-scale最大縮放比，取值范圍為0.0~10.0minimum-scale最小縮放比，取值范圍為0.0~10.0user-scalable用戶是否可以縮放網(wǎng)頁，其值為yes或no2.2視口<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>Document</title></head><body></body></html>在VSCode編輯器中創(chuàng)建HTML5文檔結(jié)構(gòu)時，會自動生成配置視口的<meta>標(biāo)簽。HTML5文檔結(jié)構(gòu)的示例代碼如下。2.2視口下面通過案例講解如何使用<meta>標(biāo)簽設(shè)置視口，并對比網(wǎng)頁設(shè)置視口前后的區(qū)別。本案例需要使用Chrome瀏覽器的開發(fā)者工具，在移動設(shè)備調(diào)試模式中模擬移動設(shè)備的屏幕，測試視口的配置是否生效。2.2視口步驟1演示如何使用<meta>標(biāo)簽設(shè)置視口創(chuàng)建D:\Bootstrap\chapter02目錄，并使用VSCode編輯器打開該目錄。步驟3步驟22.2視口創(chuàng)建viewport.html文件，在該文件中編寫頁面結(jié)構(gòu)，具體代碼如下。<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Document</title></head><body><h1>設(shè)置視口</h1></body></html>步驟1步驟3步驟2演示如何使用<meta>標(biāo)簽設(shè)置視口2.2視口保存上述代碼，在瀏覽器打開viewport.html文件，PC端瀏覽器的頁面效果如下圖所示。2.2視口按“F12”鍵啟動開發(fā)者工具，頁面效果如下圖所示。2.2視口單擊面板中的“”按鈕，進入到移動設(shè)備調(diào)試功能。將移動設(shè)備的視口寬度設(shè)置為375，并將鼠標(biāo)指針移到Elements選項卡中的<html>標(biāo)簽上，查看瀏覽器顯示的頁面寬度。移動設(shè)備顯示效果如下圖所示。2.2視口步驟1步驟3步驟2通過設(shè)置視口使網(wǎng)頁在移動設(shè)備中顯示合適的寬度。修改viewport.html文件，具體如下。<metaname="viewport"content="width=device-width,initial-scale=1.0">演示如何使用<meta>標(biāo)簽設(shè)置視口2.2視口保存上述代碼，在瀏覽器中查看設(shè)置視口之后的頁面效果，如下圖所示。CSS樣式初始化2.32.3CSS樣式初始化

先定一個小目標(biāo)！掌握CSS樣式初始化的使用方法，能夠使用Normalize.css初始化默認樣式2.3CSS樣式初始化為什么要進行CSS樣式初始化？2.3CSS樣式初始化不同瀏覽器對HTML元素的默認樣式存在差異，這可能導(dǎo)致同一頁面在不同瀏覽器的顯示效果不一致，甚至樣式混亂的情況。為解決這個問題，開發(fā)者可以進行CSS樣式初始化，這個過程會將所有瀏覽器的默認樣式重置為統(tǒng)一的樣式，從而獲得初始狀態(tài)，這樣能夠有效減少瀏覽器默認樣式對頁面的影響，使頁面的樣式更加一致。2.3CSS樣式初始化通常，我們可以借助Normalize.css來重置默認樣式，實現(xiàn)CSS樣式初始化。Normalize.css是一個廣泛使用的CSS樣式庫，它專門針對不同瀏覽器的默認樣式進行統(tǒng)一化處理。Normalize.css的特點如下。保留有用的瀏覽器默認樣式，而不是完全去掉默認樣式。保證各瀏覽器樣式的一致性。為大部分HTML元素提供CSS樣式初始化，消除不同瀏覽器的默認樣式差異。2.3CSS樣式初始化下面講解如何下載和使用Normalize.css。2.3CSS樣式初始化1.下載Normalize.css打開Normalize.css官方網(wǎng)站，如下圖所示。2.3CSS樣式初始化1.下載Normalize.css單擊“Downloadv8.0.1”按鈕，即可獲取Normalize.css源代碼，如下圖所示。在上圖所示網(wǎng)頁中右擊，然后在彈出的菜單中選擇“另存為”選項，即可將Normalize.css保存到本地。2.3CSS樣式初始化2.使用Normalize.cssNormalize.css文件下載完成后，在HTML文件的<head>標(biāo)簽中，使用<link>標(biāo)簽引入Normalize.css文件，即可初始化頁面的默認樣式。2.3CSS樣式初始化步驟1將Normalize.css文件放入chapter02目錄中。步驟3步驟4步驟2演示如何使用Normalize.css2.3CSS樣式初始化創(chuàng)建DefaultStyle.html文件，在該文件中創(chuàng)建基礎(chǔ)HTML5文檔結(jié)構(gòu)，觀察瀏覽器的初始樣式。演示如何使用Normalize.css步驟1步驟3步驟4步驟22.3CSS樣式初始化演示如何使用Normalize.css步驟3步驟4步驟2步驟1編寫頁面結(jié)構(gòu)，具體代碼如下。<body>路漫漫其修遠兮，吾將上下而求索。</body>2.3CSS樣式初始化保存上述代碼，在瀏覽器中打開DefaultStyle.html文件，按“F12”鍵啟動開發(fā)者工具，查看Elements選項卡。DefaultStyle.html的頁面效果如下圖所示。2.3CSS樣式初始化演示如何使用Normalize.css在<head>標(biāo)簽中引入Normalize.css文件進行CSS樣式初始化，具體代碼如下。<linkrel="stylesheet"href="Normalize.css">步驟3步驟4步驟2步驟12.3CSS樣式初始化保存上述代碼，在瀏覽器中查看引入Normalize.css文件后的頁面效果，如下圖所示。CSS變量2.42.4.1定義CSS變量

先定一個小目標(biāo)！掌握定義CSS變量的方法，能夠定義全局CSS變量和局部CSS變量2.4.1定義CSS變量在CSS中定義變量時，需要使用以“--”開頭的變量名，“--”后面可以跟字母、數(shù)字、下劃線或連字符，且字母須區(qū)分大小寫。變量值可以是任何有效的CSS值，比如顏色、字號、字體等。定義CSS變量的示例代碼如下。--primary-color:#f00;由于CSS變量與CSS的內(nèi)置樣式（如font-size、color）屬性類似，且CSS變量的變量名是自定義的，所以CSS變量又被稱為自定義樣式屬性。注意2.4.1定義CSS變量CSS變量分為全局CSS變量和局部CSS變量。在:root偽類選擇器的規(guī)則中定義的CSS變量是全局CSS變量。全局CSS變量局部CSS變量在非根元素選擇器的規(guī)則中定義的CSS變量是局部CSS變量。2.4.1定義CSS變量1.全局CSS變量:root{--primary-color:#f00;}定義全局CSS變量的示例代碼如下。定義了一個變量名為--primary-color的全局CSS變量，并將其變量值設(shè)置為#f002.4.1定義CSS變量2.局部CSS變量.box{--primary-color:#f00;}局部CSS變量的作用域取決于它所在的選擇器。以.box選擇器為例，定義局部CSS變量的示例代碼如下。定義了一個變量名為--primary-color的局部CSS變量，并將其變量值設(shè)置為#f002.4.2讀取CSS變量的值

先定一個小目標(biāo)！掌握讀取CSS變量的值的方法，能夠通過var()函數(shù)讀取CSS變量的值2.4.2讀取CSS變量的值var(custom-property-name,value)定義CSS變量后，通過var()函數(shù)可以讀取CSS變量的值。var()函數(shù)的語法格式如下。custom-property-name為必選參數(shù)，表示CSS變量的名稱，必須以“--”開頭value為可選參數(shù)，表示CSS變量不存在時使用的默認值2.4.2讀取CSS變量的值var()函數(shù)在讀取CSS變量時，首先查找當(dāng)前選擇器內(nèi)部是否有相應(yīng)的CSS變量，如果沒有，則會向上級選擇器查找，一直找到根元素選擇器為止。如果var()函數(shù)沒有找到CSS變量，并且沒有提供默認值，那么var()函數(shù)將會返回初始值。初始值取決于CSS屬性的類型和規(guī)范定義。然而，對于某些CSS屬性，如果無法找到指定的CSS變量且沒有提供默認值，這些CSS屬性可能會使用其他規(guī)則來確定初始值。這些規(guī)則通常是根據(jù)具體的CSS規(guī)范定義的。2.4.2讀取CSS變量的值.main{color:var(--primary-color,#ccc);}使用var()函數(shù)讀取CSS變量的值的示例代碼如下。上述示例代碼表示為具有.main類的元素設(shè)置顏色，屬性值為CSS變量--primary-color的值，默認值為#ccc2.4.2讀取CSS變量的值下面通過案例演示如何讀取CSS變量的值。創(chuàng)建CSSVariable.html文件，在該文件中創(chuàng)建基礎(chǔ)HTML5文檔結(jié)構(gòu)。步驟1步驟3步驟2演示如何讀取CSS變量的值2.4.2讀取CSS變量的值編寫頁面結(jié)構(gòu)，具體代碼如下。步驟1步驟3步驟22.4.2讀取CSS變量的值演示如何讀取CSS變量的值<body><p>為中華之崛起而讀書</p></body>編寫頁面樣式，具體代碼如下。步驟1步驟3步驟22.4.2讀取CSS變量的值演示如何讀取CSS變量的值<style>:root{--p-fontsize:30px;}p{--p-fontweight:bold;

font-weight:var(--p-fontweight);font-size:var(--p-fontsize);

border:var(--p-border,1pxsolidblack);}</style>保存上述代碼，在瀏覽器中打開CSSVariable.html文件，頁面效果如下圖所示。2.4.2讀取CSS變量的值2.4.3CSS變量值的類型

先定一個小目標(biāo)！掌握CSS變量值的類型，能夠定義不同類型的CSS變量2.4.3CSS變量值的類型--primary-content:'Hello,world!';--primary-fontSize:30;--primary-color:#ff0000;CSS變量值有多種類型，常見的類型有字符串、數(shù)字、顏色，示例代碼如下。CSS變量--primary-color的值為顏色CSS變量--primary-content的值為字符串CSS變量--primary-fontSize的值為數(shù)字2.4.3CSS變量值的類型<head><style>:root{--greeting:'hello';--a-greeting:var(--greeting)'world';}div:after{content:var(--a-greeting);}</style></head><body><div>打個招呼吧！</div></body>如果CSS變量的值是字符串，則該變量可以與其他字符串進行拼接，示例代碼如下。2.4.3CSS變量值的類型運行上述代碼后，頁面效果如下圖所示。從上圖可以看出，--greeting變量的值'hello'成功與字符串'world'拼接。2.4.3CSS變量值的類型.main{--gap:20;margin-top:var(--gap)px;}如果變量值是數(shù)字，則不能與數(shù)字單位（如px）直接連用，示例代碼如下。margin-top變量值為無效值2.4.3CSS變量值的類型<head><style>.main{--gap:20;margin-top:calc(var(--gap)*1px);}</style></head><body><divclass="main">上外邊距設(shè)置為20px</div></body>如果變量值是數(shù)字且需要和數(shù)字單位連用，則必須使用calc()函數(shù)將它們連接起來。2.4.3CSS變量值的類型運行上述代碼后，通過開發(fā)者工具查看div元素的樣式，變量值與數(shù)字單位連用的頁面效果如下圖所示。2.4.4在JavaScript中設(shè)置CSS變量

先定一個小目標(biāo)！掌握在JavaScript中設(shè)置CSS變量的方法，能夠調(diào)用setProperty()、getPropertyValue()和removeProperty()方法來設(shè)置CSS變量2.4.4在JavaScript中設(shè)置CSS變量setProperty()getPropertyValue()removeProperty()在JavaScript中設(shè)置CSS變量的方法1.setProperty()setProperty(custom-property-name,value,priority)setProperty()方法用于設(shè)置樣式屬性的值，當(dāng)樣式屬性不存在時會添加樣式屬性；當(dāng)樣式屬性已存在時會修改樣式屬性的值，其語法格式如下。custom-property-name為必選參數(shù)，表示樣式屬性名稱；value為可選參數(shù)，表示樣式屬性值；priority為可選參數(shù)，用于設(shè)置樣式屬性的優(yōu)先級2.4.4在JavaScript中設(shè)置CSS變量2.getPropertyValue()getPropertyValue(custom-property-name)getPropertyValue()方法用于訪問樣式屬性的值，其語法格式如下。custom-property-name為必選參數(shù)，表示需要獲取的樣式屬性的名稱2.4.4在JavaScript中設(shè)置CSS變量3.removeProperty()removeProperty(custom-property-name)removeProperty()方法用于刪除樣式屬性，其語法格式如下。custom-property-name為必選參數(shù)，表示需要移除的樣式屬性的名稱2.4.4在JavaScript中設(shè)置CSS變量2.4.4在JavaScript中設(shè)置CSS變量下面通過案例來演示如何在JavaScript中設(shè)置CSS變量。步驟1創(chuàng)建editCSSVariable.html文件，在該文件中創(chuàng)建基礎(chǔ)HTML5文檔結(jié)構(gòu)。步驟3步驟4步驟2演示如何在JavaScript中操作CSS變量2.4.4在JavaScript中設(shè)置CSS變量步驟1步驟3步驟4步驟2編寫頁面結(jié)構(gòu)，具體代碼如下。2.4.4在JavaScript中設(shè)置CSS變量演示如何在JavaScript中操作CSS變量<body><divclass="main">讀書不覺已春深，一寸光陰一寸金。</div><buttononclick="addBorder()">新增邊框</button><buttononclick="editBorder()">修改邊框</button><buttononclick="getBorder()">獲取變量值</button><buttononclick="removeBorder()">移除邊框</button></body>步驟3步驟4步驟2步驟1編寫頁面樣式，具體代碼如下。2.4.4在JavaScript中設(shè)置CSS變量演示如何在JavaScript中操作CSS變量<style>.main{border:var(--border);}</style>步驟3步驟4步驟2步驟1編寫頁面邏輯，具體代碼如下。2.4.4在JavaScript中設(shè)置CSS變量演示如何在JavaScript中操作CSS變量<script>functionaddBorder(){varmain=document.querySelector('.main');main.style.setProperty('--border','1pxsolidblack');}functioneditBorder(){varmain=document.querySelector('.main');main.style.setProperty('--border','2pxsolidblack');}步驟3步驟4步驟2步驟1>>接上頁代碼2.4.4在JavaScript中設(shè)置CSS變量演示如何在JavaScript中操作CSS變量functiongetBorder(){varmain=document.querySelector('.main');varborderValue=main.style.getPropertyValue('--border');console.log(borderValue);}functionremoveBorder(){varmain=document.querySelector('.main');main.style.removeProperty('--border');}</script>2.4.4在JavaScript中設(shè)置CSS變量保存上述代碼后，在瀏覽器中打開editCSSVariable.html文件，初始頁面效果如下圖所示。2.4.4在JavaScript中設(shè)置CSS變量單擊“新增邊框”按鈕的頁面效果如下圖所示。2.4.4在JavaScript中設(shè)置CSS變量單擊“修改邊框”按鈕的頁面效果如下圖所示。2.4.4在JavaScript中設(shè)置CSS變量單擊“獲取變量值”按鈕的頁面效果和控制臺如下圖所示。2.4.4在JavaScript中設(shè)置CSS變量單擊“移除邊框”按鈕的頁面效果如下圖所示。CSS預(yù)處理器2.52.5.1Less

先定一個小目標(biāo)！掌握Less常用語法的使用方法，能夠定義Less變量和使用嵌套語法來簡化代碼2.5.1LessLess是常用的CSS預(yù)處理器之一，它提供Less語法，并通過Less語法增強CSS的語法。2.5.1Less與CSS相比，Less具有以下特點。①Less不僅支持變量，其變量語法也比CSS變量更靈活，這樣可以更方便地管理樣式屬性。②Less支持嵌套規(guī)則，這樣可以通過減少重復(fù)的選擇器名稱來簡化樣式表的書寫。③Less支持混入（Mixins）功能，可以定義一組樣式屬性，并在需要時通過引用混入來重用這些屬性。這樣可以減少冗余代碼，使得樣式的修改更加方便。2.5.1Less為了與CSS文件區(qū)分，通常將使用Less語法編寫的代碼（簡稱Less代碼）保存在擴展名為.less的文件中。由于瀏覽器無法直接解析Less代碼，因此需要將Less代碼先編譯成CSS代碼，然后將編譯后的CSS代碼引入到網(wǎng)頁。2.5.1Less在VSCode編輯器中，借助EasyLESS擴展可以編譯Less代碼。安裝該擴展后，每當(dāng)保存Less文件時，EasyLESS擴展會自動將Less代碼編譯成對應(yīng)的CSS代碼。在VSCode編輯器中搜索“EasyLESS”即可找到EasyLESS擴展，如下圖所示。2.5.1Less1.Less變量@變量名:變量值;Less變量的作用與CSS變量類似，但不需要定義在選擇器的規(guī)則塊中。定義Less變量的語法格式如下。Less的常用語法包括Less變量和Less嵌套規(guī)則。在定義Less變量時，需要以@開頭，后跟變量名，變量名可以包含字母、數(shù)字、下劃線和連字符，但不能以數(shù)字開頭。變量值可以是任意的CSS屬性值，如顏色、尺寸、字符串等。2.5.1Less下面通過案例來演示如何定義Less變量。步驟1演示如何定義Less變量創(chuàng)建myLess.less文件，定義Less變量，具體代碼如下。步驟22.5.1Less@color:pink;@font14:14px;body{background-color:@color;}div{color:@color;font-size:@font14;}保存myLess.less文件，VSCode編輯器會自動生成myless.css文件。myless.css文件的代碼如下。body{background-color:pink;}div{color:pink;font-size:14px;}步驟1步驟22.5.1Less演示如何定義Less變量2.5.1Less2.Less嵌套規(guī)則在一個選擇器的規(guī)則內(nèi)部嵌套另一個規(guī)則，稱為嵌套規(guī)則。使用嵌套規(guī)則，可以顯著減少代碼量，并使代碼結(jié)構(gòu)更加清晰和易讀。2.5.1Less#content{article{h1{color:blue;}p{padding:10px;}}aside{background-color:#ccc;}}Less嵌套規(guī)則的示例代碼如下。2.Less嵌套規(guī)則2.5.1Less#contentarticleh1{color:blue;}#contentarticlep{padding:10px;}#contentaside{background-color:#ccc;}編譯后的代碼如下。2.Less嵌套規(guī)則2.5.2Sass

先定一個小目標(biāo)！掌握Sass常用語法的使用方法，能夠定義Sass變量和使用嵌套語法來簡化代碼Sass也是一款常用的CSS預(yù)處理器。Sass與Less的主要區(qū)別如下。①Sass變量以$開頭，Less變量以@開頭。②Sass支持輸出設(shè)置，并提供4種輸出選項，分別是nested（嵌套）、compact（緊湊）、compressed（壓縮）和expanded（展開），而Less不支持輸出設(shè)置。③Sass支持流程控制語法，可以使用if{}else{}、for{}等流程控制語法，而Less不支持流程控制語法。2.5.2SassSass有兩種語法，一種是最早的Sass語法，被稱為縮進Sass（IndentedSass），以“.sass”作為擴展名；另一種語法是SCSS（SassyCSS）。本書將使用SCSS語法編寫的代碼（簡稱Sass代碼）保存在擴展名為“.scss”的文件中。由于瀏覽器無法直接解析Sass代碼，因此需要將Sass代碼先編譯成CSS代碼，然后將編譯后的CSS代碼引入網(wǎng)頁。2.5.2Sass在VSCode編輯器中，借助EasySass擴展可以編譯Sass代碼。安裝該擴展后，每當(dāng)保存Sass文件時，EasySass擴展會自動將Sass代碼編譯成對應(yīng)的CSS文件。在VSCode編輯器中搜索“EasySass”即可找到EasySass擴展，如下圖所示。2.5.2Sass1.Sass變量$變量名:變量值;Sass變量的作用與Less變量類似，定義Sass變量的語法格式如下。Sass的常用語法包括Sass變量和Sass嵌套規(guī)則。定義變量時需要以“$”開頭，后跟變量名，變量名可以包含字母、數(shù)字、下劃線和連字符，但不能以數(shù)字開頭。2.5.2Sass2.5.2Sass下面通過案例來演示如何定義Sass變量。步驟1演示如何定義Sass變量創(chuàng)建mysass.scss文件，定義Sass變量，具體代碼如下。步驟2$basic-border:1pxsolidblack;$primary-color:#ccc;div{border:$basic-border;color:$primary-color;}2.5.2Sass保存mysass.scss文件，VSCode編輯器會自動生成mysass.css文件。mysass.css文件的代碼如下。div{border:1pxsolidblack;color:#ccc;}步驟1步驟22.5.2Sass演示如何定義Sass變量$nav-color:#333;.navbar{background-color:$nav-color;.nav-menu{list-style:none;li{display:inline-block;margin-right:10px;a{color:#fff;text-decoration:none;&:hover{text-decoration:underline;}}}}}Sass也有嵌套規(guī)則的功能，使用Sass規(guī)則嵌套的示例代碼如下。2.5.2Sass2.Sass嵌套規(guī)則.navbar{background-color:#333;}.navbar.nav-menu{list-style:none;}.navbar.nav-menuli{display:inline-block;margin-right:10px;}編譯后的代碼如下。2.5.2Sass2.Sass嵌套規(guī)則.navbar.nav-menulia{color:#fff;text-decoration:none;}.navbar.nav-menulia:hover{text-decoration:underline;}>>接上頁代碼2.5.2Sass2.Sass嵌套規(guī)則WebStorage2.62.6.1WebStorage概述

先定一個小目標(biāo)！熟悉WebStorage的概念，能夠說出WebStorage的作用及特點2.6.1WebStorage概述WebStorage是HTML5引入的一個重要功能，它可以將數(shù)據(jù)存儲在本地。WebStorage類似于Cookie，但相比之下，它可以減少網(wǎng)絡(luò)流量。2.6.1WebStorage概述localStorage用于本地存儲。localStorageWebStorage中包含兩個關(guān)鍵的對象，分別是localStorage和sessionStorage。sessionStorage用于會話存儲。sessionStorage2.6.1WebStorage概述WebStorage具有以下特點。①數(shù)據(jù)的設(shè)置和讀取比較方便。②容量較大，可以存儲大約5MB數(shù)據(jù)。③性能高。因為從本地讀數(shù)據(jù)比通過網(wǎng)絡(luò)從服務(wù)器獲得數(shù)據(jù)的速度快很多，所以可以即時獲得本地數(shù)據(jù)；又因為網(wǎng)頁本身也可以有緩存，如果整個頁面和數(shù)據(jù)都存儲在本地，則可以立即顯示頁面和數(shù)據(jù)。④數(shù)據(jù)可以臨時存儲。在很多時候，數(shù)據(jù)只需要在用戶瀏覽單個頁面期間使用，而關(guān)閉窗口后數(shù)據(jù)就可以丟棄。這種情況使用sessionStorage非常方便。2.6.2localStorage

先定一個小目標(biāo)！掌握localStorage的使用方法，能夠使用localStorage中的常見方法對數(shù)據(jù)進行存儲、獲取、刪除等操作2.6.2localStoragelocalStorage主要用于本地存儲，它以鍵值對的形式將數(shù)據(jù)保存在瀏覽器中。這些數(shù)據(jù)在用戶或腳本（例如JavaScript代碼段）主動清除之前會一直存在。換句話說，使用localStorage存儲的數(shù)據(jù)能夠持久保存，并且可以在同一網(wǎng)站的多個頁面中進行數(shù)據(jù)共享。2.6.2localStoragelocalStorage中常見的方法，如下表所示。方法描述setItem(key,

value)該方法接收一個鍵名和值作為參數(shù)，將會把鍵值對添加到存儲中，如果鍵名存在，則更新其對應(yīng)的值getItem(key)該方法接收一個鍵名作為參數(shù)，返回鍵名對應(yīng)的值removeItem(key)該方法刪除鍵名為key的存儲內(nèi)容clear()該方法清空所有存儲內(nèi)容2.6.2localStorage設(shè)置數(shù)據(jù)分為以下兩種情況：當(dāng)要存儲的數(shù)據(jù)為簡單數(shù)據(jù)類型時，可以使用setItem()方法直接設(shè)置數(shù)據(jù)。當(dāng)要存儲的數(shù)據(jù)為復(fù)雜數(shù)據(jù)類型時，需要將復(fù)雜數(shù)據(jù)類型轉(zhuǎn)換成JSON字符串，再使用setItem()方法來設(shè)置數(shù)據(jù)。2.6.2localStorage使用JSON.stringify()方法和JSON.parse()方法可以實現(xiàn)JSON字符串的轉(zhuǎn)換。JSON.stringify(value[,replacer][,space])（1）JSON.stringify()方法JSON.stringify()方法用于將數(shù)據(jù)轉(zhuǎn)換為JSON字符串，其語法格式如下。value表示將要轉(zhuǎn)換成JSON字符串的值；replacer是可選參數(shù)，用于決定value中哪部分被轉(zhuǎn)換為JSON字符串；space是可選參數(shù)，用于指定縮進用的空白字符串，從而美化輸出格式。2.6.2localStorageJSON.parse(text[,reviver])（2）JSON.parse()方法JSON.parse()方法用于解析JSON字符串，返回原始值，其語法格式如下。text表示JSON字符串，reviver為可選參數(shù)，用于傳入一個函數(shù)來修改解析生成的原始值2.6.2localStoragelocalStorage.setItem('username','小明');localStorage.setItem('age',1);下面演示如何使用localStorage存儲簡單數(shù)據(jù)類型的數(shù)據(jù)，示例代碼如下。使用localStorage的setItem()方法設(shè)置數(shù)據(jù)2.6.2localStorage運行上述代碼后，按“F12”鍵啟動開發(fā)者工具，查看Application選項卡，如下圖所示。2.6.2localStorage<script>letobj={username:'小明',age:17,address:'北京市'};localStorage.setItem('obj',JSON.stringify(obj));console.log(JSON.parse(localStorage.getItem('obj')));</script>下面演示如何使用localStorage存儲復(fù)雜數(shù)據(jù)類型的數(shù)據(jù)，示例代碼如下。2.6.2localStorage運行上述代碼后，按“F12”鍵啟動開發(fā)者工具，查看Application選項卡，如下圖所示。2.6.2localStorage查看Console選項卡，如下圖所示。2.6.3sessionStorage

先定一個小目標(biāo)！掌握sessionStorage的使用方法，能夠使用sessionStorage中的常見方法對數(shù)據(jù)進行存儲、獲取、刪除等操作2.6.3sessionStoragesessionStorage主要用于會話存儲，即存儲的數(shù)據(jù)只在當(dāng)前瀏覽器標(biāo)簽頁內(nèi)有效。其中，會話是指從瀏覽器標(biāo)簽頁打開到關(guān)閉的過程。一旦關(guān)閉瀏覽器標(biāo)簽頁，會話就結(jié)束，sessionStorage中的數(shù)據(jù)將自動清除。2.6.3sessionStoragesessionStorage也提供了一些方法，它們與localStorage的方法類似。localStorage與sessionStorage唯一的區(qū)別就是存儲數(shù)據(jù)的生命周期不同。localStorage

是永久性存儲，而sessionStorage的生命周期與會話保持一致，會話結(jié)束時數(shù)據(jù)消失。2.6.3sessionStorage下面通過案例講解如何使用sessionStorage。步驟1演示如何使用sessionStorage創(chuàng)建sessionStorage.html文件，在該文件中創(chuàng)建基礎(chǔ)HTML5文檔結(jié)構(gòu)。步驟3步驟22.6.3sessionStorage編寫頁面結(jié)構(gòu)，具體代碼如下。<body><inputtype="text"id="username"><buttonid="setData">設(shè)置數(shù)據(jù)</button><buttonid="getData">獲取數(shù)據(jù)</button><buttonid="delData">刪除數(shù)據(jù)</button></body>步驟1步驟3步驟22.6.3sessionStorage演示如何使用sessionStorage步驟1步驟3步驟2編寫邏輯代碼，實現(xiàn)對數(shù)據(jù)的處理，具體代碼如下。<script>varusername=document.querySelector('#username');

document.querySelector('#setData').onclick=function(){varval=username.value;

sessionStorage.setItem('username',val);};document.querySelector('#getData').onclick=function(){alert(sessionStorage.getItem('username'));

};2.6.3sessionStorage演示如何使用sessionStorage步驟1步驟3步驟2>>接上頁代碼

document.querySelector('#delData').onclick=function(){sessionStorage.removeItem('username');};</script>2.6.3sessionStorage演示如何使用sessionStorage2.6.3sessionStorage保存上述代碼后，在瀏覽器中打開sessionStorage.html文件，初始頁面效果如下圖所示。2.6.3sessionStorage在文本框中輸入“admin”，然后單擊“設(shè)置數(shù)據(jù)”按鈕，這時數(shù)據(jù)將被存儲到sessionStorage中，按“F12”鍵啟動開發(fā)者工具，查看Application選項卡，如下圖所示。2.6.3sessionStorage單擊“獲取數(shù)據(jù)”按鈕，可以查看數(shù)據(jù)是否設(shè)置成功。如果成功會顯示在彈出框中，如下圖所示。2.6.3sessionStorage單擊“刪除數(shù)據(jù)”按鈕，可以刪除該數(shù)據(jù)。刪除后再次單擊“獲取數(shù)據(jù)”按鈕，彈出框中顯示為null，表示刪除成功，如下圖所示。視頻和音頻2.72.7.1<video>標(biāo)簽

先定一個小目標(biāo)！掌握<video>標(biāo)簽的使用方法，能夠使用<video>標(biāo)簽定義網(wǎng)頁中的視頻2.7.1<video>標(biāo)簽<video>標(biāo)簽用于定義網(wǎng)頁中的視頻，它不僅可以播放視頻，還提供控制欄，用于實現(xiàn)播放、暫停、進度控制、音量控制、全屏切換等功能。2.7.1<video>標(biāo)簽<videosrc="視頻文件路徑"controls>

瀏覽器不支持video標(biāo)簽</video><video>標(biāo)簽的基本語法如下。src屬性用于設(shè)置視頻文件的路徑controls屬性用于為視頻提供播放控件<video>標(biāo)簽也可以通過width和height屬性設(shè)置視頻寬度和高度。<video>和</video>之間可以插入文字，用于在瀏覽器不能支持<video>標(biāo)簽時顯示。2.7.1<video>標(biāo)簽當(dāng)使用<video>標(biāo)簽時，需要注意視頻文件的格式問題。<video>標(biāo)簽支持以下3種視頻格式。帶有H.264視頻編碼和AAC音頻編碼的MPEG4格式。帶有Theora視頻編碼和Vorbis音頻編碼的Ogg格式。帶有VP8視頻編碼和Vorbis音頻編碼的WebM格式。2.7.1<video>標(biāo)簽<videocontrols><sourcesrc="視頻文件地址"type="video/格式"><sourcesrc="視頻文件地址"type="video/格式"></video>為了避免遇到瀏覽器不支持的格式導(dǎo)致視頻無法播放的情況，HTML5提供了<source>標(biāo)簽，用于指定多個備用的不同格式的文件路徑，基本語法格式如下。type屬性用于指定視頻文件的格式MPEG4格式對應(yīng)的type屬性值為video/mp4，Ogg格式對應(yīng)的type屬性值為video/ogg，WebM格式對應(yīng)的type屬性值為video/webm。2.7.1<video>標(biāo)簽下面通過案例講解如何使用<video>標(biāo)簽。步驟1演示如何使用<video>標(biāo)簽創(chuàng)建video.html文件，在該文件中創(chuàng)建基礎(chǔ)HTML5文檔結(jié)構(gòu)。步驟3步驟22.7.1<video>標(biāo)簽復(fù)制本章配套源代碼中的video文件夾并放在chapter02目錄下，該文件夾保存了本章所有的視頻素材。步驟1步驟3步驟22.7.1<video>標(biāo)簽演示如何使用<video>標(biāo)簽步驟1步驟3步驟2編寫頁面結(jié)構(gòu)，具體代碼如下。<body><videocontrolswidth="300"src="./video/01.mp4"></video></body>2.7.1<video>標(biāo)簽演示如何使用<video>標(biāo)簽保存上述代碼后，在瀏覽器中打開video.html文件，頁面效果如下圖所示。2.7.1<video>標(biāo)簽2.7.2<audio>標(biāo)簽

先定一個小目標(biāo)！掌握<audio>標(biāo)簽的使用方法，能夠使用<audio>標(biāo)簽定義網(wǎng)頁中的音頻<audiosrc="音頻文件路徑"controls>

您的瀏覽器不支持audio標(biāo)簽</audio><audio>標(biāo)簽用于定義網(wǎng)頁中的音頻，其使用方法與<video>標(biāo)簽基本相同，基本語法如下。2.7.2<audio>標(biāo)簽<audio>標(biāo)簽支持以下3種格式。MP3格式：一種數(shù)字音頻壓縮格式，其全稱是動態(tài)影像專家壓縮標(biāo)準(zhǔn)音頻層面3（MovingPictureExpertsGroupAudioLayerIII，MP3），被用來大幅度地降低音頻數(shù)據(jù)量。Ogg格式：Ogg格式類似MP3格式。同等條件下，Ogg格式音頻文件的音質(zhì)、體積大小優(yōu)于MP3格式的。WAV格式：錄音時用的標(biāo)準(zhǔn)的Windows文件格式，其文件的擴展名為.wav，數(shù)據(jù)本身的格式為PCM或壓縮型，屬于無損格式。2.7.2<audio>標(biāo)簽<audiocontrols><sourcesrc="音頻文件地址"type="audio/格式"><sourcesrc="音頻文件地址"type="audio/格式"></audio><audio>標(biāo)簽同樣支持引入多個音頻源，其語法格式如下。type屬性用于指定音頻文件的格式MP3格式對應(yīng)的type屬性值為audio/mp3，Ogg格式對應(yīng)的type屬性值為audio/ogg，WAV格式對應(yīng)的type屬性值為audio/wav。2.7.2<audio>標(biāo)簽2.7.2<audio>標(biāo)簽下面通過案例來講解如何使用<audio>標(biāo)簽。步驟1演示如何使用<audio>標(biāo)簽創(chuàng)建audio.html文件，在該文件中創(chuàng)建基礎(chǔ)HTML5文檔結(jié)構(gòu)。步驟3步驟22.7.2<audio>標(biāo)簽復(fù)制本章配套源代碼中的audio文件夾并放入chapter02目錄下，該文件夾保存了本章所有的音頻素材。步驟1步驟3步驟22.7.2<audio>標(biāo)簽演示如何使用<audio>標(biāo)簽步驟1步驟3步驟2編寫頁面結(jié)構(gòu)，具體代碼如下。<body><audiosrc="./audio/1.mp3"controls></audio></body>2.7.2<audio>標(biāo)簽演示如何使用<audio>標(biāo)簽保存上述代碼后，在瀏覽器中打開audio.html文件，頁面效果如下圖所示。2.7.2<audio>標(biāo)簽2.7.3video對象和audio對象

先定一個小目標(biāo)！掌握video對象和audio對象的使用方法，能夠?qū)崿F(xiàn)對音頻和視頻的播放、暫停、靜音等操作在實際開發(fā)中，有時需要通過JavaScript控制視頻或音頻的播放、暫停或者更改播放進度。因此，HTML5提供了video對象和audio對象，這兩個對象的方法和屬性基本相同。2.7.3video對象和audio對象video對象和audio對象的常用屬性如下表所示。屬性說明currentSrc返回當(dāng)前視頻或音頻的URLcurrentTime設(shè)置或返回視頻或音頻中的當(dāng)前播放位置（以秒為單位）duration返回當(dāng)前視頻或音頻的長度（以秒為單位）ended返回視頻或音頻是否已結(jié)束播放error返回表示視頻或音頻錯誤狀態(tài)的MediaError對象paused設(shè)置或返回視頻或音頻是否暫停muted設(shè)置或返回視頻或音頻是否靜音loop設(shè)置或返回視頻或音頻是否應(yīng)在結(jié)束時重新播放volume設(shè)置或返回視頻或音頻的音量2.7.3video對象和audio對象video對象和audio對象的常用方法如下表所示。方法說明play()開始播放視頻或音頻pause()暫停當(dāng)前播放的視頻或音頻load()重新加載視頻或音頻2.7.3video對象和audio對象2.7.3video對象和audio對象下面通過案例來演示如何通過JavaScript對視頻進行播放、暫停和靜音控制。步驟1演示如何通過JavaScript對視頻進行播放、暫停和靜音控制創(chuàng)建videoControls.html文件，在該文件中創(chuàng)建基礎(chǔ)HTML5文檔結(jié)構(gòu)。步驟3步驟22.7.3video對象和audio對象編寫頁面結(jié)構(gòu)，具體代碼如下。步驟1步驟3步驟22.7.3video對象和audio對象演示如何通過JavaScript對視頻進行播放、暫停和靜音控制<body><videocontrolswidth="300"src="./video/02.mp4"></video><button>播放</button><button>暫停</button><button>靜音</button></body>步驟1步驟3步驟2編寫邏輯代碼，實現(xiàn)對視頻的控制，具體代碼如下。<script>varvideo=document.getElementsByTagName('video')[0];varbtn=document.getElementsByTagName('button');btn[0].onclick=function(){video.play();};btn[1].onclick=function(){video.pause();};btn[2].onclick=function(){video.muted=!video.muted;};</script>2.7.3video對象和audio對象演示如何通過JavaScript對視頻進行播放、暫停和靜音控制保存上述代碼后，在瀏覽器中打開videoControls.html文件，頁面效果如下圖所示。2.7.3video對象和audio對象頁面中顯示了1個視頻播放器和3個按鈕。單擊“播放”按鈕后視頻就會開始播放，單擊“暫?！卑粹o可以使視頻暫停，單擊“靜音”按鈕可以使視頻靜音，再次單擊“靜音”按鈕可以取消靜音。移動端touch事件2.82.8.1touch事件概述

先定一個小目標(biāo)！掌握移動端touch事件的使用方法，能夠?qū)崿F(xiàn)touch事件touch事件又稱為觸摸事件，是一組事件的統(tǒng)稱，這組事件會在用戶手指觸摸屏幕的時候、手指在屏幕上滑動的時候或者當(dāng)手指從屏幕上離開的時候觸發(fā)。2.8.1touch事件概述下面列舉主流的移動端瀏覽器支持的4種最基本的touch觸摸事件，如下表所示。事件事件描述touchstart當(dāng)手指觸摸屏幕時觸發(fā)touchmove當(dāng)手指在屏幕上滑動時觸發(fā)touchend當(dāng)手指離開屏幕時觸發(fā)touchcancel當(dāng)系統(tǒng)取消touch事件時觸發(fā)（如來電、彈出信息等）2.8.1touch事件概述2.8.1touch事件概述<head><style>.box{width:50px;height:50px;background-color:red;}</style></head>使用touch事件時，需要通過addEventListener()方法為指定元素添加監(jiān)聽事件。2.8.1touch事件概述<body><divclass="box"></div><script>varbox=document.querySelector('.box');box.addEventListener('touchstart',function(){console.log('touchstart');});

box.addEventListener('touchmove',function(){console.log('touchmove');});

box.addEventListener('touchend',function(){console.log('touchend');});</script></body>>>接上頁代碼運行上述代碼后，按“F12”鍵啟動開發(fā)者工具，進入移動設(shè)備調(diào)試界面，查看Console選項卡，初始頁面效果如下圖所示。2.8.1touch事件概述接下來通過鼠標(biāo)指針對div元素的操作，來模擬用戶手指在屏幕上對div元素的操作。首先將鼠標(biāo)指針移到div元素上方，然后按住鼠標(biāo)左鍵進行移動，最后松開鼠標(biāo)左鍵，查看Console選項卡，如下圖所示。2.8.1touch事件概述2.8.2TouchEvent對象

先定一個小目標(biāo)！熟悉TouchEvent對象

溫馨提示

  • 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)方式做保護處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論