《Bootstrap響應(yīng)式Web開發(fā)（第2版）》全套教學(xué)課件

第1章初識Bootstrap《Bootstrap響應(yīng)式Web開發(fā)（第2版）》第1章初識Bootstrap.pptx第2章移動(dòng)Web開發(fā)基礎(chǔ).pptx第3章移動(dòng)Web屏幕適配.pptx第4章Bootstrap開發(fā)基礎(chǔ).pptx第5章Bootstrap常用樣式.pptx第6章Bootstrap表單.pptx第7章Bootstrap常用組件.pptx第8章項(xiàng)目實(shí)戰(zhàn)——基于Bootstrap的在線學(xué)習(xí)平臺(tái).pptx全套可編輯PPT課件學(xué)習(xí)目標(biāo)/Target了解Bootstrap的概念，能夠說出什么是Bootstrap熟悉Bootstrap的特點(diǎn)，能夠歸納Bootstrap的特點(diǎn)熟悉Bootstrap的組成，能夠歸納Bootstrap的組成部分了解PC端瀏覽器，能夠列舉常見的PC端瀏覽器了解移動(dòng)端瀏覽器，能夠列舉常見的移動(dòng)端瀏覽器學(xué)習(xí)目標(biāo)/Target掌握VisualStudioCode編輯器的下載和安裝方法，能夠獨(dú)立完成VisualStudio

Code編輯器的下載和安裝掌握中文擴(kuò)展包的安裝，能夠在VisualStudioCode編輯器中安裝中文擴(kuò)展包

掌握VisualStudioCode編輯器的使用方法，能夠在項(xiàng)目中創(chuàng)建HTML5文檔了解移動(dòng)Web開發(fā)的主流方案，能夠說出兩種主流的移動(dòng)Web開發(fā)方案章節(jié)概述/Summary近年來，隨著移動(dòng)互聯(lián)網(wǎng)的持續(xù)發(fā)展，不斷涌現(xiàn)出各種移動(dòng)設(shè)備，這些設(shè)備的屏幕尺寸多種多樣，而網(wǎng)頁需要根據(jù)用戶使用的具體設(shè)備進(jìn)行適配，以確保用戶具有最佳的瀏覽體驗(yàn)。為了解決網(wǎng)頁在不同設(shè)備中的適配問題，Bootstrap應(yīng)運(yùn)而生。為了使讀者對Bootstrap有一個(gè)初步的認(rèn)識，本章將對Bootstrap、瀏覽器、Visual

Studio

Code編輯器、移動(dòng)Web開發(fā)的主流方案等內(nèi)容進(jìn)行詳細(xì)講解。目錄/Contents1.11.2Bootstrap瀏覽器1.31.4VisualStudioCode編輯器移動(dòng)Web開發(fā)的主流方案Bootstrap1.11.1.1Bootstrap概述

先定一個(gè)小目標(biāo)！了解Bootstrap的概念，能夠說出什么是Bootstrap1.1.1Bootstrap概述什么是Bootstrap？1.1.1Bootstrap概述Bootstrap是一款開源的前端UI框架，用于構(gòu)建響應(yīng)式、移動(dòng)設(shè)備優(yōu)先的項(xiàng)目，因其具有學(xué)習(xí)成本低、上手容易等優(yōu)勢，深受開發(fā)者的歡迎。Bootstrap提供一套CSS樣式和JavaScript插件，可以幫助開發(fā)者快速搭建具有統(tǒng)一外觀的響應(yīng)式頁面。1.1.1Bootstrap概述1.x版本初始版本，具有基本的CSS樣式，為開發(fā)者提供一些常用的組件和布局工具。2.x版本將響應(yīng)式功能添加到整個(gè)框架中。3.x版本重寫了整個(gè)框架，并將“移動(dòng)設(shè)備優(yōu)先”這一理念深刻地融入整個(gè)框架中。5.x版本通過盡量少的代碼來改進(jìn)4.x版本。此外，5.x版本放棄了對老舊瀏覽器的支持，僅支持較新的瀏覽器，而且不再依賴jQuery。4.x版本再次重寫了框架，其有兩個(gè)架構(gòu)方面的關(guān)鍵改變，一個(gè)是使用Sass編寫代碼，另一個(gè)是采用彈性盒布局。Bootstrap于2011年8月在GitHub上首次發(fā)布，一經(jīng)發(fā)布就頗受歡迎。Bootstrap的發(fā)展經(jīng)歷了如下5個(gè)大版本。1.1.2Bootstrap的特點(diǎn)

先定一個(gè)小目標(biāo)！熟悉Bootstrap的特點(diǎn)，能夠歸納Bootstrap的特點(diǎn)1.1.2Bootstrap的特點(diǎn)移動(dòng)設(shè)備優(yōu)先Bootstrap的默認(rèn)樣式針對移動(dòng)設(shè)備進(jìn)行了優(yōu)化。Bootstrap的特點(diǎn)瀏覽器支持Bootstrap支持主流的瀏覽器，包括PC端瀏覽器和移動(dòng)端瀏覽器。學(xué)習(xí)成本低、容易上手只需具備HTML、CSS和JavaScript的基礎(chǔ)知識，即可學(xué)習(xí)Bootstrap。響應(yīng)式設(shè)計(jì)Bootstrap支持響應(yīng)式設(shè)計(jì)?？焖匍_發(fā)Bootstrap提供了大量的樣式和組件，可以快速構(gòu)建出美觀的頁面。方便定制Bootstrap具有高定制性，開發(fā)者可以根據(jù)項(xiàng)目需求和設(shè)計(jì)要求，選擇需要的組件和樣式進(jìn)行自定義。1.1.3Bootstrap的組成

先定一個(gè)小目標(biāo)！熟悉Bootstrap的組成，能夠歸納Bootstrap的組成部分1.1.3Bootstrap的組成Bootstrap提供了包含柵格系統(tǒng)、布局容器等基礎(chǔ)元素的樣式。除此之外，Bootstrap還提供了大量的CSS樣式類。CSS樣式提供了一系列常用的布局組件，例如按鈕、下拉菜單、分頁導(dǎo)航、警告框等組件。布局組件Bootstrap提供了一系列能實(shí)現(xiàn)交互功能的JavaScript插件。JavaScript插件Bootstrap擁有開源的圖標(biāo)庫。圖標(biāo)文件使用SVG格式，幾乎可在任何屏幕尺寸下保持清晰度和質(zhì)量。圖標(biāo)庫Bootstrap的組成瀏覽器1.21.2.1PC端瀏覽器

先定一個(gè)小目標(biāo)！了解PC端瀏覽器，能夠列舉常見的PC端瀏覽器1.2.1PC端瀏覽器什么是PC端瀏覽器？1.2.1PC端瀏覽器PC端瀏覽器是指運(yùn)行在個(gè)人計(jì)算機(jī)（PersonalComputer，簡稱PC）上的瀏覽器，是計(jì)算機(jī)用戶通過互聯(lián)網(wǎng)訪問Web頁面、在線應(yīng)用程序和其他資源的主要方式。1.2.1PC端瀏覽器常見的PC端瀏覽器：谷歌（Google）公司的Chrome瀏覽器。微軟（Microsoft）公司的InternetExplorer（IE）和Edge瀏覽器。謀智（Mozilla）公司的Firefox瀏覽器。蘋果（Apple）公司的Safari瀏覽器。1.2.1PC端瀏覽器不同的PC端瀏覽器具有不同的特點(diǎn)，用戶可以根據(jù)個(gè)人習(xí)慣選擇使用。本書推薦使用Chrome瀏覽器。1.2.1PC端瀏覽器Chrome瀏覽器的主要優(yōu)勢如下。高速瀏覽：Chrome瀏覽器內(nèi)置了強(qiáng)大的JavaScriptV8引擎，使其在網(wǎng)頁加載和執(zhí)行速度方面表現(xiàn)出色。安全性：Chrome瀏覽器具有較高的安全性，提供黑名單和惡意軟件防護(hù)等功能。擴(kuò)展生態(tài)系統(tǒng)：Chrome瀏覽器擁有豐富的擴(kuò)展庫，用戶可以根據(jù)自己的需求選擇并使用各種功能強(qiáng)大的擴(kuò)展程序，添加瀏覽器的功能和完善個(gè)性化體驗(yàn)。跨平臺(tái)同步：Chrome瀏覽器支持跨設(shè)備的同步功能，用戶可以將書簽、歷史記錄、密碼等數(shù)據(jù)在不同設(shè)備間同步。開發(fā)者工具：Chrome瀏覽器提供強(qiáng)大的開發(fā)者工具，方便開發(fā)者完成調(diào)試、性能優(yōu)化和網(wǎng)頁設(shè)計(jì)等工作。1.2.2移動(dòng)端瀏覽器

先定一個(gè)小目標(biāo)！了解移動(dòng)端瀏覽器，能夠列舉常見的移動(dòng)端瀏覽器什么是移動(dòng)端瀏覽器？1.2.2移動(dòng)端瀏覽器移動(dòng)端瀏覽器是移動(dòng)設(shè)備上用于訪問Web頁面、在線應(yīng)用程序和其他資源的瀏覽器。1.2.2移動(dòng)端瀏覽器常見的移動(dòng)端瀏覽器：Android系統(tǒng)內(nèi)置的Android瀏覽器。iOS系統(tǒng)的Safari瀏覽器。UC瀏覽器。QQ瀏覽器。百度瀏覽器?！?.2.2移動(dòng)端瀏覽器VisualStudioCode編輯器1.31.3.1下載和安裝VisualStudioCode編輯器

先定一個(gè)小目標(biāo)！掌握VisualStudioCode編輯器的下載和安裝，能夠獨(dú)立完成VisualStudioCode編輯器的下載和安裝1.3.1下載和安裝VisualStudioCode編輯器VisualStudioCode（VSCode）編輯器是由微軟公司推出的一款免費(fèi)的、開源的代碼編輯器，一經(jīng)推出便受到開發(fā)者的歡迎。對于前端開發(fā)者來說，一個(gè)強(qiáng)大的編輯器可以使開發(fā)變得簡單、便捷、高效。1.3.1下載和安裝VisualStudioCode編輯器VSCode編輯器具有以下特點(diǎn)。輕巧快速。占用系統(tǒng)資源較少。功能強(qiáng)大。具備智能代碼補(bǔ)全、語法高亮顯示、自定義快捷鍵和代碼匹配等功能。支持跨平臺(tái)。可在Windows、Linux和macOS操作系統(tǒng)上運(yùn)行。界面的設(shè)計(jì)人性化。例如，可以快速查找文件并直接進(jìn)行開發(fā)，可以分屏顯示代碼，可以自定義主題顏色，還可以快速查看打開的項(xiàng)目文件和查看項(xiàng)目文件結(jié)構(gòu)。豐富的擴(kuò)展資源。開發(fā)者可根據(jù)需要自行下載和安裝擴(kuò)展包。多語言支持。支持多種語言和文件格式的代碼編寫，如HTML、CSS、JavaScript、JSON、TypeScript等。1.3.1下載和安裝VisualStudioCode編輯器步驟1打開瀏覽器，登錄VSCode編輯器的官方網(wǎng)站，如下圖所示。步驟3步驟4步驟2講解如何下載和安裝VSCode編輯器1.3.1下載和安裝VisualStudioCode編輯器步驟1步驟3步驟4步驟2講解如何下載和安裝VSCode編輯器在VSCode編輯器的官方網(wǎng)站中，單擊“DownloadforWindows”按鈕，會(huì)跳轉(zhuǎn)到一個(gè)新頁面，該頁面會(huì)自動(dòng)識別當(dāng)前的操作系統(tǒng)并下載相應(yīng)的安裝包。如果需要下載其他操作系統(tǒng)的安裝包，可以單擊“DownloadforWindows”按鈕右側(cè)的箭頭“”打開下拉菜單，即可看到其他操作系統(tǒng)下安裝包的下載選項(xiàng)。1.3.1下載和安裝VisualStudioCode編輯器步驟1步驟3步驟4步驟2講解如何下載和安裝VSCode編輯器1.3.1下載和安裝VisualStudioCode編輯器講解如何下載和安裝VSCode編輯器步驟3步驟4步驟2步驟1下載好VSCode編輯器的安裝包后，在下載目錄中找到該安裝包，如下圖所示。1.3.1下載和安裝VisualStudioCode編輯器講解如何下載和安裝VSCode編輯器步驟3步驟4步驟2步驟1雙擊安裝包的圖標(biāo)，啟動(dòng)安裝程序，然后按照程序的提示進(jìn)行操作，直到安裝完成。1.3.1下載和安裝VisualStudioCode編輯器VSCode編輯器安裝成功后，啟動(dòng)該編輯器，即可進(jìn)入VSCode編輯器的初始界面，如下圖所示。1.3.2安裝中文擴(kuò)展包

先定一個(gè)小目標(biāo)！掌握中文擴(kuò)展包的安裝方法，能夠在VisualStudioCode編輯器中安裝中文擴(kuò)展包1.3.2安裝中文擴(kuò)展包VSCode編輯器安裝完成后，默認(rèn)的界面語言是英文。如果要切換為中文，首先單擊編輯器左側(cè)邊欄中的””圖標(biāo)按鈕進(jìn)入擴(kuò)展界面，然后在搜索框中輸入關(guān)鍵詞“Chinese”找到中文擴(kuò)展包，單擊“Install”按鈕進(jìn)行安裝，如下圖所示。1.3.2安裝中文擴(kuò)展包安裝成功后，需要重新啟動(dòng)VSCode編輯器，中文擴(kuò)展包才會(huì)生效。重新啟動(dòng)VSCode編輯器后，VSCode編輯器的中文界面如下圖所示。1.3.3使用VisualStudioCode編輯器

先定一個(gè)小目標(biāo)！掌握VisualStudioCode編輯器的使用，能夠在項(xiàng)目中創(chuàng)建HTML5文檔1.3.3使用VisualStudioCode編輯器在D:\Bootstrap目錄下創(chuàng)建一個(gè)項(xiàng)目文件夾chapter01，該文件夾用于保存項(xiàng)目中的文件。步驟1步驟3步驟2使用VSCode編輯器開發(fā)項(xiàng)目1.3.3使用VisualStudioCode編輯器使用VSCode編輯器開發(fā)項(xiàng)目在VSCode編輯器的菜單欄中選擇“文件”→“打開文件夾”命令，然后選擇chapter01文件夾。打開文件夾后的界面效果如下圖所示。步驟1步驟3步驟21.3.3使用VisualStudioCode編輯器使用VSCode編輯器開發(fā)項(xiàng)目單擊按鈕①，輸入要?jiǎng)?chuàng)建的文件名稱index.html，即可創(chuàng)建文件。此時(shí)創(chuàng)建的index.html文件是空白的，在該文件中輸入“html:5”，VSCode會(huì)給出智能提示，然后按“Enter”鍵會(huì)自動(dòng)生成一個(gè)HTML5文檔結(jié)構(gòu)。步驟1步驟3步驟21.3.3使用VisualStudioCode編輯器使用VSCode編輯器開發(fā)項(xiàng)目在<body>標(biāo)簽中填寫內(nèi)容“HelloWorld”。步驟1步驟3步驟2<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>Document</title></head><body>

HelloWorld</body></html>移動(dòng)Web開發(fā)的主流方案1.41.4.1單獨(dú)制作移動(dòng)端頁面

先定一個(gè)小目標(biāo)！了解單獨(dú)制作移動(dòng)端頁面，能夠說出單獨(dú)制作移動(dòng)端頁面的優(yōu)缺點(diǎn)1.4.1單獨(dú)制作移動(dòng)端頁面在單獨(dú)制作移動(dòng)端頁面時(shí)，通常的做法是保持原有的PC端頁面不變，然后單獨(dú)為移動(dòng)端開發(fā)一套特定的版本。在網(wǎng)站的域名中，常使用“m”（mobile）來表示移動(dòng)端網(wǎng)站。有些網(wǎng)站還會(huì)根據(jù)當(dāng)前訪問設(shè)備智能地進(jìn)行頁面跳轉(zhuǎn)：如果是移動(dòng)設(shè)備，則跳轉(zhuǎn)到移動(dòng)端頁面，如果是PC設(shè)備，則跳轉(zhuǎn)到PC端頁面。1.4.1單獨(dú)制作移動(dòng)端頁面常見的單獨(dú)制作移動(dòng)端頁面的網(wǎng)站，如下圖所示。1.4.1單獨(dú)制作移動(dòng)端頁面單獨(dú)制作移動(dòng)端頁面的方案有如下優(yōu)點(diǎn)。充分考慮平臺(tái)的優(yōu)勢和局限性，為移動(dòng)設(shè)備用戶提供良好的用戶體驗(yàn)。在移動(dòng)設(shè)備上加載速度更快，提升用戶體驗(yàn)。然而，這種方案也存在一些缺點(diǎn)，具體如下。由于需要維護(hù)多個(gè)URL，重定向移動(dòng)端網(wǎng)站可能需要額外的時(shí)間和復(fù)雜的處理。需要對搜索引擎進(jìn)行特殊處理，維護(hù)成本增加。需要針對不同的屏幕尺寸制作不同的頁面，增加了工作量和復(fù)雜性。1.4.2制作響應(yīng)式頁面

先定一個(gè)小目標(biāo)！了解如何制作響應(yīng)式頁面，能夠說出響應(yīng)式頁面的特點(diǎn)1.4.2制作響應(yīng)式頁面響應(yīng)式頁面是指遵循響應(yīng)式設(shè)計(jì)原則開發(fā)的一種網(wǎng)頁，它可以兼容不同的設(shè)備（如PC設(shè)備、移動(dòng)設(shè)備等），使同一個(gè)網(wǎng)頁在不同設(shè)備上都能提供良好的瀏覽體驗(yàn)，而不必單獨(dú)制作移動(dòng)端頁面。Bootstrap遵循響應(yīng)式設(shè)計(jì)的原則，使用它可以很方便地開發(fā)響應(yīng)式頁面。1.4.2制作響應(yīng)式頁面華為官方網(wǎng)站，如下圖所示。1.4.2制作響應(yīng)式頁面當(dāng)調(diào)整了瀏覽器的窗口寬度后，頁面的布局和樣式會(huì)發(fā)生相應(yīng)的變化，如下圖所示。1.4.2制作響應(yīng)式頁面下面介紹響應(yīng)式頁面的特點(diǎn)。（1）可以跨平臺(tái)響應(yīng)式頁面具有跨平臺(tái)的優(yōu)勢，能夠快捷地解決多個(gè)設(shè)備的顯示問題，即只需開發(fā)一套網(wǎng)頁就可以在多個(gè)設(shè)備中使用，給用戶帶來風(fēng)格一致的視覺體驗(yàn)。（2）便于搜索引擎收錄響應(yīng)式頁面制作完成之后，無論是在移動(dòng)設(shè)備上，還是在PC設(shè)備上，搜索引擎訪問的都是同一個(gè)地址，這樣就減少了權(quán)重的分散，使網(wǎng)站對搜索引擎更加友好。（3）節(jié)約成本響應(yīng)式頁面可以兼容多個(gè)設(shè)備，開發(fā)者不需要為各個(gè)設(shè)備編寫不同的代碼，并且響應(yīng)式頁面可以實(shí)現(xiàn)只用一個(gè)后臺(tái)來進(jìn)行管理，多個(gè)設(shè)備的數(shù)據(jù)保持同步的管理方式，這樣在開發(fā)的時(shí)候就可以減少專職程序開發(fā)者的配備數(shù)量。本章小結(jié)本章首先講解了Bootstrap簡介，包括Bootstrap的概述、特點(diǎn)以及組成；接著講解了瀏覽器，包括PC端瀏覽器和移動(dòng)端瀏覽器；然后講解了VSCode編輯器，包括下載并安裝VSCode編輯器、安裝中文擴(kuò)展包和使用VSCode編輯器；最后講解了移動(dòng)Web開發(fā)的兩種主流方案，一種是單獨(dú)制作移動(dòng)端頁面，另一種是制作響應(yīng)式頁面。通過對本章的學(xué)習(xí)，讀者能夠?qū)ootstrap有一個(gè)整體的認(rèn)識。本章小結(jié)第2章移動(dòng)Web開發(fā)基礎(chǔ)《Bootstrap響應(yīng)式Web開發(fā)（第2版）》學(xué)習(xí)目標(biāo)/Target了解屏幕分辨率，能夠說出屏幕分辨率的概念了解設(shè)備像素比，能夠說出設(shè)備像素比的計(jì)算方式

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

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

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

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

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

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

先定一個(gè)小目標(biāo)！了解視口，能夠說出視口的設(shè)置方式2.2視口為了使用戶在移動(dòng)設(shè)備上有更好的瀏覽體驗(yàn)，瀏覽器允許開發(fā)者通過<meta>標(biāo)簽對視口（Viewport）進(jìn)行配置。其中，視口是指瀏覽器顯示網(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)時(shí)，會(huì)自動(dòng)生成配置視口的<meta>標(biāo)簽。HTML5文檔結(jié)構(gòu)的示例代碼如下。2.2視口下面通過案例講解如何使用<meta>標(biāo)簽設(shè)置視口，并對比網(wǎng)頁設(shè)置視口前后的區(qū)別。本案例需要使用Chrome瀏覽器的開發(fā)者工具，在移動(dòng)設(shè)備調(diào)試模式中模擬移動(dòng)設(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”鍵啟動(dòng)開發(fā)者工具，頁面效果如下圖所示。2.2視口單擊面板中的“”按鈕，進(jìn)入到移動(dòng)設(shè)備調(diào)試功能。將移動(dòng)設(shè)備的視口寬度設(shè)置為375，并將鼠標(biāo)指針移到Elements選項(xiàng)卡中的<html>標(biāo)簽上，查看瀏覽器顯示的頁面寬度。移動(dòng)設(shè)備顯示效果如下圖所示。2.2視口步驟1步驟3步驟2通過設(shè)置視口使網(wǎng)頁在移動(dò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樣式初始化

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

先定一個(gè)小目標(biāo)！掌握定義CSS變量的方法，能夠定義全局CSS變量和局部CSS變量2.4.1定義CSS變量在CSS中定義變量時(shí)，需要使用以“--”開頭的變量名，“--”后面可以跟字母、數(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變量的示例代碼如下。定義了一個(gè)變量名為--primary-color的全局CSS變量，并將其變量值設(shè)置為#f002.4.1定義CSS變量2.局部CSS變量.box{--primary-color:#f00;}局部CSS變量的作用域取決于它所在的選擇器。以.box選擇器為例，定義局部CSS變量的示例代碼如下。定義了一個(gè)變量名為--primary-color的局部CSS變量，并將其變量值設(shè)置為#f002.4.2讀取CSS變量的值

先定一個(gè)小目標(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變量不存在時(shí)使用的默認(rèn)值2.4.2讀取CSS變量的值var()函數(shù)在讀取CSS變量時(shí)，首先查找當(dāng)前選擇器內(nèi)部是否有相應(yīng)的CSS變量，如果沒有，則會(huì)向上級選擇器查找，一直找到根元素選擇器為止。如果var()函數(shù)沒有找到CSS變量，并且沒有提供默認(rèn)值，那么var()函數(shù)將會(huì)返回初始值。初始值取決于CSS屬性的類型和規(guī)范定義。然而，對于某些CSS屬性，如果無法找到指定的CSS變量且沒有提供默認(rèn)值，這些CSS屬性可能會(huì)使用其他規(guī)則來確定初始值。這些規(guī)則通常是根據(jù)具體的CSS規(guī)范定義的。2.4.2讀取CSS變量的值.main{color:var(--primary-color,#ccc);}使用var()函數(shù)讀取CSS變量的值的示例代碼如下。上述示例代碼表示為具有.main類的元素設(shè)置顏色，屬性值為CSS變量--primary-color的值，默認(rèn)值為#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變量值的類型

先定一個(gè)小目標(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>打個(gè)招呼吧！</div></body>如果CSS變量的值是字符串，則該變量可以與其他字符串進(jìn)行拼接，示例代碼如下。2.4.3CSS變量值的類型運(yùn)行上述代碼后，頁面效果如下圖所示。從上圖可以看出，--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變量值的類型運(yùn)行上述代碼后，通過開發(fā)者工具查看div元素的樣式，變量值與數(shù)字單位連用的頁面效果如下圖所示。2.4.4在JavaScript中設(shè)置CSS變量

先定一個(gè)小目標(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)樣式屬性不存在時(shí)會(huì)添加樣式屬性；當(dāng)樣式屬性已存在時(shí)會(huì)修改樣式屬性的值，其語法格式如下。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變量單擊“獲取變量值”按鈕的頁面效果和控制臺(tái)如下圖所示。2.4.4在JavaScript中設(shè)置CSS變量單擊“移除邊框”按鈕的頁面效果如下圖所示。CSS預(yù)處理器2.52.5.1Less

先定一個(gè)小目標(biāo)！掌握Less常用語法的使用方法，能夠定義Less變量和使用嵌套語法來簡化代碼2.5.1LessLess是常用的CSS預(yù)處理器之一，它提供Less語法，并通過Less語法增強(qiáng)CSS的語法。2.5.1Less與CSS相比，Less具有以下特點(diǎn)。①Less不僅支持變量，其變量語法也比CSS變量更靈活，這樣可以更方便地管理樣式屬性。②Less支持嵌套規(guī)則，這樣可以通過減少重復(fù)的選擇器名稱來簡化樣式表的書寫。③Less支持混入（Mixins）功能，可以定義一組樣式屬性，并在需要時(shí)通過引用混入來重用這些屬性。這樣可以減少冗余代碼，使得樣式的修改更加方便。2.5.1Less為了與CSS文件區(qū)分，通常將使用Less語法編寫的代碼（簡稱Less代碼）保存在擴(kuò)展名為.less的文件中。由于瀏覽器無法直接解析Less代碼，因此需要將Less代碼先編譯成CSS代碼，然后將編譯后的CSS代碼引入到網(wǎng)頁。2.5.1Less在VSCode編輯器中，借助EasyLESS擴(kuò)展可以編譯Less代碼。安裝該擴(kuò)展后，每當(dāng)保存Less文件時(shí)，EasyLESS擴(kuò)展會(huì)自動(dòng)將Less代碼編譯成對應(yīng)的CSS代碼。在VSCode編輯器中搜索“EasyLESS”即可找到EasyLESS擴(kuò)展，如下圖所示。2.5.1Less1.Less變量@變量名:變量值;Less變量的作用與CSS變量類似，但不需要定義在選擇器的規(guī)則塊中。定義Less變量的語法格式如下。Less的常用語法包括Less變量和Less嵌套規(guī)則。在定義Less變量時(shí)，需要以@開頭，后跟變量名，變量名可以包含字母、數(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編輯器會(huì)自動(dòng)生成myless.css文件。myless.css文件的代碼如下。body{background-color:pink;}div{color:pink;font-size:14px;}步驟1步驟22.5.1Less演示如何定義Less變量2.5.1Less2.Less嵌套規(guī)則在一個(gè)選擇器的規(guī)則內(nèi)部嵌套另一個(gè)規(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

先定一個(gè)小目標(biāo)！掌握Sass常用語法的使用方法，能夠定義Sass變量和使用嵌套語法來簡化代碼Sass也是一款常用的CSS預(yù)處理器。Sass與Less的主要區(qū)別如下。①Sass變量以$開頭，Less變量以@開頭。②Sass支持輸出設(shè)置，并提供4種輸出選項(xiàng)，分別是nested（嵌套）、compact（緊湊）、compressed（壓縮）和expanded（展開），而Less不支持輸出設(shè)置。③Sass支持流程控制語法，可以使用if{}else{}、for{}等流程控制語法，而Less不支持流程控制語法。2.5.2SassSass有兩種語法，一種是最早的Sass語法，被稱為縮進(jìn)Sass（IndentedSass），以“.sass”作為擴(kuò)展名；另一種語法是SCSS（SassyCSS）。本書將使用SCSS語法編寫的代碼（簡稱Sass代碼）保存在擴(kuò)展名為“.scss”的文件中。由于瀏覽器無法直接解析Sass代碼，因此需要將Sass代碼先編譯成CSS代碼，然后將編譯后的CSS代碼引入網(wǎng)頁。2.5.2Sass在VSCode編輯器中，借助EasySass擴(kuò)展可以編譯Sass代碼。安裝該擴(kuò)展后，每當(dāng)保存Sass文件時(shí)，EasySass擴(kuò)展會(huì)自動(dòng)將Sass代碼編譯成對應(yīng)的CSS文件。在VSCode編輯器中搜索“EasySass”即可找到EasySass擴(kuò)展，如下圖所示。2.5.2Sass1.Sass變量$變量名:變量值;Sass變量的作用與Less變量類似，定義Sass變量的語法格式如下。Sass的常用語法包括Sass變量和Sass嵌套規(guī)則。定義變量時(shí)需要以“$”開頭，后跟變量名，變量名可以包含字母、數(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編輯器會(huì)自動(dòng)生成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概述

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

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

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

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

是永久性存儲(chǔ)，而sessionStorage的生命周期與會(huì)話保持一致，會(huì)話結(jié)束時(shí)數(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編寫邏輯代碼，實(shí)現(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í)數(shù)據(jù)將被存儲(chǔ)到sessionStorage中，按“F12”鍵啟動(dòng)開發(fā)者工具，查看Application選項(xiàng)卡，如下圖所示。2.6.3sessionStorage單擊“獲取數(shù)據(jù)”按鈕，可以查看數(shù)據(jù)是否設(shè)置成功。如果成功會(huì)顯示在彈出框中，如下圖所示。2.6.3sessionStorage單擊“刪除數(shù)據(jù)”按鈕，可以刪除該數(shù)據(jù)。刪除后再次單擊“獲取數(shù)據(jù)”按鈕，彈出框中顯示為null，表示刪除成功，如下