Bootstrap響應(yīng)式Web開(kāi)發(fā)PPT完整全套教學(xué)課件

第1章初識(shí)Bootstrap《Bootstrap響應(yīng)式Web開(kāi)發(fā)》第1章初識(shí)Bootstrap第2章移動(dòng)Web開(kāi)發(fā)基礎(chǔ)（上）第3章移動(dòng)Web開(kāi)發(fā)基礎(chǔ)（下）第4章移動(dòng)端頁(yè)面布局第5章Bootstrap柵格系統(tǒng)第6章Bootstrap框架常用組件第7章Bootstrap常用布局樣式第8章綜合項(xiàng)目——潮流穿搭網(wǎng)站學(xué)習(xí)目標(biāo)/Target掌握Bootstrap的概念、特點(diǎn)及組成了解PC端瀏覽器和移動(dòng)端瀏覽器的區(qū)別熟悉VisualStudioCode編輯器的使用熟悉移動(dòng)Web開(kāi)發(fā)的主流方案章節(jié)概述/SummaryBootstrap是一款非常優(yōu)秀的Web前端框架，其靈活性和可擴(kuò)展性加速了響應(yīng)式頁(yè)面開(kāi)發(fā)的進(jìn)程。Bootstrap遵循移動(dòng)優(yōu)先的原則，在開(kāi)源之后迅速受到開(kāi)發(fā)人員的追捧，推動(dòng)了響應(yīng)式技術(shù)的發(fā)展。為了讓讀者對(duì)Bootstrap有一個(gè)初步的認(rèn)識(shí)，本章將會(huì)對(duì)Boostrap的基本概念、瀏覽器、VisualStudioCode編輯器，以及移動(dòng)Web開(kāi)發(fā)主流方案進(jìn)行詳細(xì)地講解。目錄/Contents01020304Bootstrap概述瀏覽器VisualStudioCode編輯器移動(dòng)端Web開(kāi)發(fā)主流方案Bootstrap概述1.11.1.1什么是Bootstrap

先定一個(gè)小目標(biāo)！了解什么是Bootstrap1.1.1什么是BootstrapBootstrap是一個(gè)基于HTML、CSS和JavaScript語(yǔ)言編寫(xiě)的框架，具有簡(jiǎn)單、靈活的特性，擁有樣式庫(kù)、組件和插件。Bootstrap常用來(lái)開(kāi)發(fā)響應(yīng)式布局和移動(dòng)設(shè)備優(yōu)先的Web項(xiàng)目，能夠幫助開(kāi)發(fā)者快速搭建前端頁(yè)面。Bootstrap框架1.1.2Bootstrap的特點(diǎn)

先定一個(gè)小目標(biāo)！掌握Bootstrap的特點(diǎn)1.1.2Bootstrap的特點(diǎn)Bootstrap框架的特點(diǎn)：低成本，易上手CSS預(yù)編譯框架成熟豐富的組件庫(kù)響應(yīng)式設(shè)計(jì)移動(dòng)設(shè)備優(yōu)先瀏覽器支持1.1.3Bootstrap的組成

先定一個(gè)小目標(biāo)！掌握Bootstrap的組成1.1.3Bootstrap的組成Bootstrap提供了一個(gè)帶有網(wǎng)格系統(tǒng)、鏈接樣式、背景的基本結(jié)構(gòu)。基本結(jié)構(gòu)Bootstrap包含了豐富的組件庫(kù)，提供了十幾個(gè)可重用的組件。布局組件Bootstrap自帶了全局的CSS樣式，并預(yù)先定義了基本的HTML元素樣式、可擴(kuò)展的class。CSS樣式庫(kù)Bootstrap提供了一些基于jQuery（一個(gè)用于簡(jiǎn)化JavaScript編程的庫(kù)）構(gòu)建的可選插件。插件Bootstrap的組成Bootstrap框架的組成：瀏覽器1.21.2.1PC端的瀏覽器

先定一個(gè)小目標(biāo)！了解瀏覽器1.2.1PC端的瀏覽器瀏覽器按照設(shè)備類型來(lái)劃分，主要包括PC端瀏覽器和移動(dòng)端瀏覽器。瀏覽器內(nèi)核主要包括Blink、WebKit和Trident等。PC端的瀏覽器主要包括Google（谷歌）公司的Chrome瀏覽器、Mozilla公司的Firefox瀏覽器、和Edge瀏覽器等。Chrome瀏覽器1.2.1PC端的瀏覽器213市場(chǎng)占有率高，兼容性好，界面簡(jiǎn)潔、簡(jiǎn)單易用?；趶?qiáng)大的JavaScript

V8引擎，速度很快?？赏ㄟ^(guò)擴(kuò)展插件增強(qiáng)功能，便于開(kāi)發(fā)人員使用。內(nèi)置防止網(wǎng)絡(luò)釣魚(yú)及惡意軟件功能，更加安全?？缙脚_(tái)，支持PC端的Windows、Linux和Mac系統(tǒng)，以及移動(dòng)端的Android和iOS系統(tǒng)。Chrome瀏覽器的優(yōu)勢(shì)：1.2.2移動(dòng)端設(shè)備移動(dòng)端設(shè)備主要包括Android、iOS等手機(jī)設(shè)備。屏幕尺寸非常多，手機(jī)分辨率和大小也不盡相同，碎片化嚴(yán)重。常見(jiàn)移動(dòng)端設(shè)備1.2.2移動(dòng)端設(shè)備移動(dòng)端設(shè)備屏幕尺寸（英寸）分辨率（px）iPhone6/6S/7/84.7750×1334iPhone6/7/8plus5.51080×1920iPhoneX/XS5.81125×2436iPhoneXR6.1828×1792iPhoneXSMax6.51242×2688常見(jiàn)的移動(dòng)端設(shè)備的屏幕尺寸：1.2.2移動(dòng)端設(shè)備移動(dòng)端設(shè)備屏幕尺寸（英寸）分辨率（px）iPadMini4/27.91536×2048SamsungGalaxyS10+6.41440×3040SamsungGalaxyS206.2（直角）1440×3200SamsungGalaxyS20+6.71440×3200SamsungGalaxyS20Ultra6.91440×3200SamsungGalaxyNote45.71440×2560常見(jiàn)的移動(dòng)端設(shè)備的屏幕尺寸：1.2.3移動(dòng)端的瀏覽器移動(dòng)端的瀏覽器主要包括AndroidBrowser和MobileSafari，以及國(guó)產(chǎn)瀏覽器。瀏覽器的內(nèi)核主要是Webkit內(nèi)核，對(duì)HTML5提供了很好的支持。國(guó)產(chǎn)瀏覽器主要包括UC瀏覽器、QQ瀏覽器和百度瀏覽器等。QQ瀏覽器1.2.3移動(dòng)端的瀏覽器移動(dòng)Web開(kāi)發(fā)使用HTML、CSS和JavaScript等基本語(yǔ)言。移動(dòng)端Web項(xiàng)目的呈現(xiàn)依賴于移動(dòng)端瀏覽器。移動(dòng)Web開(kāi)發(fā)1.2.3移動(dòng)端的瀏覽器移動(dòng)Web開(kāi)發(fā)需要注意的兩點(diǎn)：移動(dòng)端設(shè)備受屏幕尺寸限制，操作的局限性比較大，所以要注意頁(yè)面的結(jié)構(gòu)不能過(guò)于復(fù)雜，要提煉出該網(wǎng)站最核心的功能，并簡(jiǎn)潔清晰地呈現(xiàn)出來(lái)。移動(dòng)端設(shè)備受屏幕尺寸限制移動(dòng)端的操作方式的改變移動(dòng)端的操作方式的改變。移動(dòng)端頁(yè)面的所有交互活動(dòng)由鼠標(biāo)控制變?yōu)槭种赣|屏控制，操作方式更加豐富，如搖一搖、雙指放大、滑動(dòng)、雙擊、單擊等。VisualStudioCode1.31.3.1什么是VisualStudioCode

先定一個(gè)小目標(biāo)！熟悉VisualStudioCode基本使用VisualStudioCode（簡(jiǎn)稱VSCode）是由微軟公司推出的一款免費(fèi)、開(kāi)源的代碼編輯器。VisualStudioCode編輯器的特點(diǎn)是簡(jiǎn)單、便捷、高效。1.3.1什么是VisualStudioCodeVisualStudioCodeVisualStudioCode編輯器的優(yōu)勢(shì)：1.3.1什么是VisualStudioCode輕巧極速，占用系統(tǒng)資源較少。具備語(yǔ)法高亮顯示、智能代碼補(bǔ)全、自定義快捷鍵和代碼匹配等功能。跨平臺(tái)。VSCode編輯器是跨平臺(tái)的（支持Mac、Windows和Linux），可以在不同平臺(tái)來(lái)進(jìn)行項(xiàng)目開(kāi)發(fā)。主題界面的設(shè)計(jì)比較人性化。VSCode編輯器可以快速查找文件并直接進(jìn)行開(kāi)發(fā)，可以通過(guò)分屏顯示代碼，可以自定義主題顏色（默認(rèn)為黑色），也可以快速查看最近打開(kāi)的項(xiàng)目文件和查看項(xiàng)目文件結(jié)構(gòu)。提供豐富的插件。用戶根據(jù)需要自行下載和安裝插件，并使用此插件提供的功能。1.3.2下載和安裝VisualStudioCode登錄官方網(wǎng)站下載安裝啟動(dòng)簡(jiǎn)單使用12345打開(kāi)瀏覽器，登錄VSCode官方網(wǎng)站。在網(wǎng)站的首頁(yè)可以看到軟件的下載按鈕。將VSCode編輯器下載完成后，雙擊安裝包啟動(dòng)安裝程序，然后按照程序的提示一步一步進(jìn)行操作，直到安裝完成即可使用。將VSCode編輯器安裝成功后，啟動(dòng)編輯器主界面。打開(kāi)文件夾后，創(chuàng)建一個(gè)簡(jiǎn)單的網(wǎng)頁(yè)，進(jìn)入到代碼編輯環(huán)境。VisualStudioCode編輯器使用的基本步驟：1.3.3使用VisualStudioCode登錄VisualStudioCode官方網(wǎng)站，找到下載按鈕：VSCode官方網(wǎng)站1.3.3使用VisualStudioCodeVisualStudioCode編輯器安裝成功后，啟動(dòng)主界面：VSCode編輯器主界面1.3.3使用VisualStudioCode創(chuàng)建一個(gè)簡(jiǎn)單的網(wǎng)頁(yè)，進(jìn)入到代碼編輯環(huán)境：代碼編輯環(huán)境移動(dòng)端開(kāi)發(fā)主流方案1.41.4.1單獨(dú)制作移動(dòng)端頁(yè)面

先定一個(gè)小目標(biāo)！熟悉移動(dòng)Web開(kāi)發(fā)的主流方案1.4.1單獨(dú)制作移動(dòng)端頁(yè)面在移動(dòng)端瀏覽器中訪問(wèn)淘寶、京東和蘇寧移動(dòng)端頁(yè)面：?jiǎn)为?dú)制作移動(dòng)端頁(yè)面的網(wǎng)站1.4.1單獨(dú)制作移動(dòng)端頁(yè)面131322移動(dòng)端網(wǎng)站會(huì)產(chǎn)生多個(gè)URL（PC端一套URL，移動(dòng)端一套URL）重定向移動(dòng)網(wǎng)站需要花費(fèi)一些時(shí)間，需要對(duì)搜索引擎做一些處理維護(hù)成本會(huì)增加，工作量比較大可以充分考慮到平臺(tái)的優(yōu)勢(shì)和局限性網(wǎng)頁(yè)在移動(dòng)設(shè)備上加載更快創(chuàng)建良好的用戶體驗(yàn)設(shè)計(jì)單獨(dú)制作移動(dòng)端頁(yè)面的優(yōu)勢(shì)和劣勢(shì)：1.4.1單獨(dú)制作移動(dòng)端頁(yè)面單獨(dú)制作移動(dòng)端頁(yè)面，通常的做法是不改變?cè)械腜C端頁(yè)面，然后針對(duì)移動(dòng)端單獨(dú)開(kāi)發(fā)出一套特定的版本。如果是移動(dòng)設(shè)備（iPhone6/7/8Plus），則跳轉(zhuǎn)到移動(dòng)端頁(yè)面：跳轉(zhuǎn)到移動(dòng)端頁(yè)面1.4.1單獨(dú)制作移動(dòng)端頁(yè)面如果是PC端設(shè)備，則跳轉(zhuǎn)到PC端頁(yè)面:跳轉(zhuǎn)到PC端頁(yè)面1.4.2制作響應(yīng)式頁(yè)面響應(yīng)式頁(yè)面指的是同一頁(yè)面在不同屏幕尺寸下實(shí)現(xiàn)不同的布局，從而使一個(gè)頁(yè)面兼容不同的終端。響應(yīng)式開(kāi)發(fā)主要是為了解決移動(dòng)互聯(lián)網(wǎng)瀏覽的問(wèn)題。響應(yīng)式開(kāi)發(fā)1.4.2制作響應(yīng)式頁(yè)面在PC端瀏覽器中訪問(wèn)三星官方網(wǎng)站：初始頁(yè)面1.4.2制作響應(yīng)式頁(yè)面縮小瀏覽器窗口寬度，網(wǎng)頁(yè)布局隨之發(fā)生變化：頁(yè)面的響應(yīng)式效果1.4.2制作響應(yīng)式頁(yè)面可以跨平臺(tái)。響應(yīng)式開(kāi)發(fā)具有跨平臺(tái)的優(yōu)勢(shì)，能夠快捷地解決多終端設(shè)備的顯示適配問(wèn)題。便于搜索引擎收錄，無(wú)論在移動(dòng)端設(shè)備還是PC端上訪問(wèn)的都是同一個(gè)鏈接地址，這樣就減少了權(quán)重的分散。讓網(wǎng)站對(duì)搜索引擎更加友好。節(jié)約成本。響應(yīng)式網(wǎng)站可以兼容多個(gè)終端，開(kāi)發(fā)者不需要為各個(gè)終端編寫(xiě)不同的代碼。對(duì)于開(kāi)發(fā)者而言，減少了大量重復(fù)的工作，提高了工作的效率；對(duì)于公司而言，節(jié)省了人員開(kāi)支，降低了開(kāi)發(fā)成本。響應(yīng)式頁(yè)面的優(yōu)點(diǎn)：本章小結(jié)本章首先介紹了Bootstrap的概念、優(yōu)點(diǎn)以及構(gòu)成，幫助讀者對(duì)Bootstrap有一個(gè)初步的認(rèn)識(shí)，然后介紹了PC端和移動(dòng)端常用瀏覽器的內(nèi)容，以及VisualStudioCode開(kāi)發(fā)工具的下載、安裝和基本配置，最后講解了移動(dòng)Web開(kāi)發(fā)的兩種主流方案，一種是單獨(dú)制作移動(dòng)端頁(yè)面，另一種是制作響應(yīng)式頁(yè)面。在實(shí)際開(kāi)發(fā)過(guò)程中，雖然利用Bootstrap能夠很快速地完成響應(yīng)式頁(yè)面的開(kāi)發(fā)，但若想要完成一個(gè)復(fù)雜的移動(dòng)Web頁(yè)面，往往不僅需要用到Bootstrap，還需要結(jié)合多種移動(dòng)Web開(kāi)發(fā)技術(shù)才能實(shí)現(xiàn)。第2章移動(dòng)Web開(kāi)發(fā)基礎(chǔ)（上）《Bootstrap響應(yīng)式Web開(kāi)發(fā)》學(xué)習(xí)目標(biāo)/Target

掌握視口的基本概念和使用方法

掌握移動(dòng)Web頁(yè)面的樣式編寫(xiě)方法

理解分辨率和設(shè)備像素比的概念

掌握SVG矢量圖的使用方法

掌握二倍圖的使用方法章節(jié)概述/Summary在熟悉了Bootstrap框架和移動(dòng)Web開(kāi)發(fā)的基本概念后，本章將對(duì)移動(dòng)Web開(kāi)發(fā)的基礎(chǔ)知識(shí)進(jìn)行詳解。本章內(nèi)容主要包括視口、移動(dòng)端Web頁(yè)面的樣式的編寫(xiě)、分辨率、設(shè)備像素比、二倍圖和SVG矢量圖等。其中，移動(dòng)端頁(yè)面的顯示效果與移動(dòng)端設(shè)備的視口有關(guān)，在移動(dòng)端頁(yè)面可以通過(guò)meta標(biāo)簽設(shè)置理想視口。在開(kāi)發(fā)時(shí)還需要注意移動(dòng)端設(shè)備的屏幕分辨率適配問(wèn)題，以及圖片的顯示問(wèn)題。目錄/Contents0102030405視口移動(dòng)Web頁(yè)面的樣式編寫(xiě)分辨率和設(shè)備像素比二倍圖SVG矢量圖視口2.12.1.1什么是視口

先定一個(gè)小目標(biāo)！熟悉什么是視口2.1.1什么是視口視口（Viewport）最早是由蘋(píng)果公司在推出iPhone手機(jī)時(shí)提出的，其目的是為了讓iPhone的小屏幕盡可能完整顯示整個(gè)網(wǎng)頁(yè)，它是瀏覽器顯示頁(yè)面內(nèi)容的區(qū)域。視口主要包括布局視口（layoutviewport）、視覺(jué)視口（visualviewport）和理想視口（idealviewport）。視口能將大分辨率尺寸網(wǎng)頁(yè)縮小顯示在手機(jī)瀏覽器上，這樣保證網(wǎng)頁(yè)在手機(jī)上看起來(lái)更像在桌面瀏覽器中的樣子。2.1.1視口布局視口是指瀏覽器繪制網(wǎng)頁(yè)的視口，一般移動(dòng)端瀏覽器都默認(rèn)設(shè)置了布局視口的寬度。布局視口2.1.1視口布局視口的默認(rèn)寬度有可能是980px或1024px（取決于不同移動(dòng)端設(shè)備的設(shè)置），這個(gè)寬度并不適合在手機(jī)屏幕中展示。當(dāng)移動(dòng)端瀏覽器展示PC端網(wǎng)頁(yè)內(nèi)容時(shí)，由于移動(dòng)端設(shè)備屏幕比較小，布局視口不能像PC端瀏覽器那樣完美地展示網(wǎng)頁(yè)，網(wǎng)頁(yè)在手機(jī)的瀏覽器中會(huì)出現(xiàn)左右滾動(dòng)條，用戶需要左右滑動(dòng)才能查看完整的一行內(nèi)容。2.1.1視口視覺(jué)視口是指用戶正在看到的網(wǎng)站的區(qū)域，這個(gè)區(qū)域的寬度等同于移動(dòng)設(shè)備的瀏覽器窗口的寬度。視覺(jué)視口2.1.1視口理想視口是指對(duì)設(shè)備來(lái)講最理想的視口，效果如圖所示。理想視口2.1.1視口采用理想視口的方式，可以使網(wǎng)頁(yè)在移動(dòng)端瀏覽器上獲得最理想的瀏覽和閱讀的寬度。在理想視口情況下，布局視口的大小和屏幕寬度是一致的，這樣就不需要左右滾動(dòng)頁(yè)面了。在開(kāi)發(fā)中，為了實(shí)現(xiàn)理想視口，需要給移動(dòng)端頁(yè)面添加<meta>標(biāo)簽配置視口，通知瀏覽器來(lái)進(jìn)行處理。為了方便對(duì)不同屏幕尺寸的設(shè)備進(jìn)行適配，PC端的Chrome瀏覽器在開(kāi)發(fā)者工具中加入了模擬移動(dòng)端屏幕的功能，可以模擬各種手機(jī)的顯示效果。利用Chrome瀏覽器模擬手機(jī)屏幕，來(lái)觀察移動(dòng)端屏幕的顯示效果，可以幫助我們更好地理解視口。2.1.2利用Chrome瀏覽器模擬手機(jī)屏幕編寫(xiě)HTML代碼創(chuàng)建demo01.html，并定義<div>標(biāo)簽和<img>標(biāo)簽。其中，<img>標(biāo)簽引入的圖片素材picture1.jpg文件。編寫(xiě)頁(yè)面樣式使用類選擇器.title獲取元素，將字體大小設(shè)為20px，字體顏色設(shè)為紅色。查看頁(yè)面效果在瀏覽器打開(kāi)demo01.html，查看頁(yè)面顯示效果。初始頁(yè)面效果PC端頁(yè)面顯示效果2.1.2利用Chrome瀏覽器模擬手機(jī)屏幕編寫(xiě)HTML結(jié)構(gòu)代碼，實(shí)現(xiàn)頁(yè)面結(jié)構(gòu)。例2-1：利用Chrome瀏覽器模擬手機(jī)屏幕<body><div

class="title">新款A(yù)ndroid手機(jī)</div><img

src="picture1.jpg"

alt=""></body>HTML代碼例2-1：利用Chrome瀏覽器模擬手機(jī)屏幕<style>.title

{font-size:

20px;color:

red;}</style>2.1.2利用Chrome瀏覽器模擬手機(jī)屏幕CSS代碼編寫(xiě)CSS樣式代碼，實(shí)現(xiàn)頁(yè)面樣式。2.1.2利用Chrome瀏覽器模擬手機(jī)屏幕通過(guò)瀏覽器打開(kāi)demo01.html，查看頁(yè)面運(yùn)行效果。PC端頁(yè)面顯示效果2.1.2利用Chrome瀏覽器模擬手機(jī)屏幕啟動(dòng)開(kāi)發(fā)者工具在瀏覽器顯示的頁(yè)面中，單擊鼠標(biāo)右鍵，然后在彈出菜單中選擇“檢查”命令啟動(dòng)開(kāi)發(fā)者工具（也可以直接按F12快捷鍵）。單擊切換按鈕單擊開(kāi)發(fā)者工具面板左上角的第2個(gè)按鈕，進(jìn)入到移動(dòng)端設(shè)備調(diào)試功能。查看iPhone6/7/8進(jìn)入后，會(huì)看到頁(yè)面整體縮小了，并且在頁(yè)面的頂部出現(xiàn)了設(shè)備的名稱（如iPhone6/7/8）。查看iPhone/6/7/8查看移動(dòng)端設(shè)備顯示效果啟動(dòng)開(kāi)發(fā)者工具2.1.2利用Chrome瀏覽器模擬手機(jī)屏幕單擊Elements在瀏覽器的控制臺(tái)中，找到Elements面板，并單擊。查看頁(yè)面寬度將鼠標(biāo)指針?lè)旁贓lements面板中的html標(biāo)簽上，會(huì)看到瀏覽器顯示了當(dāng)前頁(yè)面的寬度為980px。查看頁(yè)面寬度查看頁(yè)面寬度2.1.3利用<meta>標(biāo)簽設(shè)置視口

先定一個(gè)小目標(biāo)！掌握利用<meta>標(biāo)簽設(shè)置視口2.1.3利用<meta>標(biāo)簽設(shè)置視口在傳統(tǒng)的PC端網(wǎng)頁(yè)開(kāi)發(fā)中，并沒(méi)有使用過(guò)meta標(biāo)簽來(lái)設(shè)置視口，此時(shí)瀏覽器會(huì)按照默認(rèn)的布局視口寬度來(lái)顯示網(wǎng)頁(yè)。如果希望網(wǎng)頁(yè)在瀏覽器中以理想視口的形式呈現(xiàn)，就需要利用<meta>標(biāo)簽設(shè)置視口。在<meta>標(biāo)簽中，將name屬性設(shè)為viewport，即可設(shè)置視口。2.1.3利用<meta>標(biāo)簽設(shè)置視口在<meta>標(biāo)簽的基本語(yǔ)法中，將<meta>標(biāo)簽的content屬性的值設(shè)置為“width=device-width”表示通知瀏覽器，布局視口的寬度應(yīng)該與設(shè)備的寬度一致，示例代碼如下。<metaname="viewport"content="width=device-width">示例代碼2.1.3利用<meta>標(biāo)簽設(shè)置視口創(chuàng)建HTML文件將demo01.html文件復(fù)制為demo02.html。添加<meta>標(biāo)簽在demo02.html頁(yè)面中添加<meta>標(biāo)簽。查看頁(yè)面效果在瀏覽器打開(kāi)demo02.html，查看頁(yè)面顯示效果。利用<meta>標(biāo)簽設(shè)置視口查看設(shè)置視口后的頁(yè)面寬度例2-2：利用<meta>標(biāo)簽設(shè)置視口<head><meta

charset="UTF-8"><title>Document</title><!--添加<meta>標(biāo)簽--><metaname="viewport"content="width=device-width">

…（原有代碼）</head>2.1.3利用<meta>標(biāo)簽設(shè)置視口HTML代碼創(chuàng)建demo02.html文件，添加<meta>標(biāo)簽。2.1.3利用<meta>標(biāo)簽設(shè)置視口通過(guò)瀏覽器打開(kāi)demo02.html，并查看html頁(yè)面的寬度。該頁(yè)面的寬度為414px，與當(dāng)前設(shè)備的寬度相同，實(shí)現(xiàn)了理想視口的效果。查看設(shè)置視口后的頁(yè)面寬度2.1.4視口的常用設(shè)置在使用<meta>標(biāo)簽設(shè)置視口時(shí)，該標(biāo)簽的常用設(shè)置參數(shù)如下。參數(shù)名說(shuō)明width設(shè)置視口寬度，可以設(shè)為正整數(shù)（像素）或特殊值device-widthheight設(shè)置視口高度，可以設(shè)為正整數(shù)（像素）或特殊值device-heightinitial-scale初始縮放比，取值范圍為0.0~10.0maximum-scale最大縮放比，取值范圍為0.0~10.0minimum-scale最小縮放比，取值范圍為0.0~10.0user-scalable用戶是否可以縮放，其值為yes或no<metaname="viewport"content="user-scalable=no,width=device-width,initial-scale=1.0,maximum-scale=1.0">2.1.4視口的常用設(shè)置在實(shí)際開(kāi)發(fā)中，通常會(huì)將視口設(shè)置為不允許用戶縮放頁(yè)面、視口寬度等于設(shè)備寬度、初始縮放比為1.0，最大縮放比為1.0，示例代碼如下。示例代碼移動(dòng)Web頁(yè)面的樣式編寫(xiě)2.22.2.1利用Normalize.css初始化默認(rèn)樣式

先定一個(gè)小目標(biāo)！熟悉移動(dòng)Web頁(yè)面的樣式編寫(xiě)2.2.1利用Normalize.css初始化默認(rèn)樣式在傳統(tǒng)的PC端Web開(kāi)發(fā)中，一些舊版本的瀏覽器不符合W3C標(biāo)準(zhǔn)，有些不支持HTML5和CSS3的新特性，給開(kāi)發(fā)人員帶來(lái)了許多麻煩。在移動(dòng)Web開(kāi)發(fā)中，幾乎不用擔(dān)心瀏覽器的兼容問(wèn)題，因?yàn)橐苿?dòng)端的瀏覽器基本上都是以WebKit內(nèi)核為主，對(duì)HTML5和CSS3的支持非常好。3.1.2全屏操作保留默認(rèn)樣式保留有用的瀏覽器默認(rèn)樣式，而不是完全去掉它們。一致性保證各瀏覽器樣式的一致性。模塊化開(kāi)發(fā)采用模塊化開(kāi)發(fā)，方便后期維護(hù)。文檔擁有詳細(xì)的文檔。Normalize.css的特點(diǎn)：登錄官網(wǎng)在瀏覽器中打開(kāi)Normalize.css官方網(wǎng)站找到可以獲取文件的下載地址。下載單擊“Downloadv8.0.1”按鈕，即可獲取Normalize.css源代碼。保存文件在瀏覽器頁(yè)面中，單擊鼠標(biāo)右鍵，然后在彈出的菜單中選擇“另存為”即可將Normalize.css保存到本地。下載Normalize.css2.2.1利用Normalize.css初始化默認(rèn)樣式Normalize.css官網(wǎng)Normalize.css源代碼編寫(xiě)HTML代碼創(chuàng)建demo03.html文件，編寫(xiě)頁(yè)面結(jié)構(gòu)代碼。引入Normalize.css文件通過(guò)<link>標(biāo)簽引入normalize.css文件，其中，href屬性的值為normalize.css文件的路徑地址。查看頁(yè)面效果在瀏覽器頁(yè)面中打開(kāi)demo03.html，查看頁(yè)面效果。使用Normalize.css2.2.1利用Normalize.css初始化默認(rèn)樣式設(shè)置body元素的margin值為02.2.1利用Normalize.css初始化默認(rèn)樣式例2-3：利用Normalize.css初始化默認(rèn)樣式<head><meta

name="viewport"

content="user-scalable=no,

width=device-width,initial-scale=1.0,

maximum-scale=1.0"><link

rel="stylesheet"

href="normalize.css"></head><body><div>成功引入Normalize.css</div></body>HTML代碼編寫(xiě)HTML結(jié)構(gòu)代碼，實(shí)現(xiàn)頁(yè)面結(jié)構(gòu)，并使用Normalize.css初始化頁(yè)面的默認(rèn)樣式。2.2.1利用Normalize.css初始化默認(rèn)樣式通過(guò)瀏覽器打開(kāi)demo03.html，查看頁(yè)面運(yùn)行效果。設(shè)置body元素的margin值為02.2.2設(shè)置box-sizing為border-box在CSS3中，通過(guò)box-sizing屬性可以更改盒子尺寸的計(jì)算方式。將box-sizing設(shè)為content-box（默認(rèn)值）時(shí)，表示使用傳統(tǒng)的計(jì)算方式；將box-sizing設(shè)為border-box時(shí)，表示使用CSS3的一種新的計(jì)算方式，通過(guò)這種方式可以解決傳統(tǒng)盒子在添加了邊框和內(nèi)邊距之后，盒子被撐大的問(wèn)題。2.2.2設(shè)置box-sizing為border-box在CSS3中，將box-sizing屬性box-sizing設(shè)為content-box（默認(rèn)值）和border-box的基本語(yǔ)法如下。/*傳統(tǒng)計(jì)算方式*/box-sizing:content-box;/*新的計(jì)算方式*/box-sizing:border-box;基本語(yǔ)法2.2.2設(shè)置box-sizing為border-box盒子的寬度=CSS中設(shè)置的width+border+padding使用content-box計(jì)算方式的盒子模型，其寬度的計(jì)算公式如下。計(jì)算公式2.2.2設(shè)置box-sizing為border-box盒子的寬度=CSS中設(shè)置的width使用border-box計(jì)算方式的盒子模型，其寬度的計(jì)算公式如下。當(dāng)采用border-box計(jì)算方式時(shí)，CSS中設(shè)置的寬度width已經(jīng)包含了border和padding值，不用擔(dān)心因?yàn)樵O(shè)置了元素的border和padding導(dǎo)致盒子被撐大的問(wèn)題。這種方式的優(yōu)點(diǎn)在于，盒子的大小是固定的，不會(huì)受到邊框和內(nèi)邊距的影響，也不會(huì)影響到頁(yè)面中其他盒子的結(jié)構(gòu)。因此，在移動(dòng)Web開(kāi)發(fā)中，推薦使用border-box這種計(jì)算方式。計(jì)算公式2.2.2設(shè)置box-sizing為border-box編寫(xiě)HTML代碼創(chuàng)建demo04.html文件，編寫(xiě)頁(yè)面結(jié)構(gòu)代碼。編寫(xiě)頁(yè)面樣式設(shè)置div元素的公共樣式，并設(shè)置不同的div元素的box-sizing屬性值為content-box和border-box。查看頁(yè)面效果在瀏覽器頁(yè)面中打開(kāi)demo04.html，查看頁(yè)面效果。content-box和border-box的區(qū)別對(duì)比content-box和border-box2.2.2設(shè)置box-sizing為border-box編寫(xiě)HTML結(jié)構(gòu)代碼，實(shí)現(xiàn)頁(yè)面結(jié)構(gòu)。例2-4：content-box與border-box的區(qū)別<body><div>content-box</div><div>border-box</div></body>HTML代碼2.2.2設(shè)置box-sizing為border-box例2-4：content-box與border-box的區(qū)別<style>

div

{

width:

100px;height:

100px;padding:

10px;background-color:

#eee;}div:nth-child(1)

{border:

10px

solid

#999;box-sizing:

content-box;}div:nth-child(2)

{border:

10px

solid

#666;box-sizing:

border-box;}</style>編寫(xiě)CSS樣式代碼，實(shí)現(xiàn)頁(yè)面樣式。CSS代碼2.2.2設(shè)置box-sizing為border-box通過(guò)瀏覽器打開(kāi)demo04.html，查看頁(yè)面運(yùn)行效果。對(duì)比content-box和border-box2.2.3設(shè)置移動(dòng)端的特殊樣式

先定一個(gè)小目標(biāo)！掌握設(shè)置移動(dòng)端的特殊樣式2.2.3設(shè)置移動(dòng)端的特殊樣式在實(shí)際開(kāi)發(fā)中，移動(dòng)Web頁(yè)面的設(shè)計(jì)風(fēng)格更接近App（手機(jī)應(yīng)用），而不是傳統(tǒng)的網(wǎng)頁(yè)。為了有更好的用戶體驗(yàn)，我們可以給移動(dòng)Web頁(yè)面設(shè)置一些特殊樣式。移動(dòng)端的特殊樣式是非標(biāo)準(zhǔn)的，因此加上了私有前綴“-webkit-”，該前綴在WebKit和Blink內(nèi)核的瀏覽器中有效，適用于Chrome瀏覽器和大多數(shù)移動(dòng)端瀏覽器。2.2.3設(shè)置移動(dòng)端的特殊樣式在移動(dòng)Web開(kāi)發(fā)中經(jīng)常會(huì)設(shè)置的特殊樣式，如表所示。樣式說(shuō)明-webkit-tap-highlight-color:transparent;去除超鏈接按下時(shí)默認(rèn)的高亮效果（設(shè)為透明）-webkit-appearance:none;去除按鈕的原生樣式-webkit-touch-callout:none;禁止長(zhǎng)按頁(yè)面時(shí)彈出菜單-webkit-user-select:none;禁止文本被手動(dòng)選擇2.2.3設(shè)置移動(dòng)端的特殊樣式編寫(xiě)HTML代碼創(chuàng)建demo05.html文件，編寫(xiě)頁(yè)面結(jié)構(gòu)代碼。編寫(xiě)CSS代碼設(shè)置<a>標(biāo)簽樣式中的-webkit-tap-highlight-color的值為transparent，清除單擊高亮效果；設(shè)置按鈕樣式中的-webkit-appearance的值為none，用來(lái)去除按鈕的原生樣式。查看頁(yè)面效果在瀏覽器頁(yè)面中打開(kāi)demo05.html，查看頁(yè)面效果。設(shè)置特殊樣式設(shè)置特殊樣式2.2.3設(shè)置移動(dòng)端的特殊樣式編寫(xiě)HTML結(jié)構(gòu)代碼，實(shí)現(xiàn)頁(yè)面結(jié)構(gòu)。例2-5：設(shè)置特殊樣式<body>

<a

href="#">超鏈接</a>

<input

type="button"

value="按鈕"></body>HTML代碼2.2.3設(shè)置移動(dòng)端的特殊樣式編寫(xiě)CSS樣式代碼，實(shí)現(xiàn)頁(yè)面樣式。例2-5：設(shè)置特殊樣式<style>a

{-webkit-tap-highlight-color:

transparent;}input

{-webkit-appearance:

none;}</style>CSS代碼2.2.3設(shè)置移動(dòng)端的特殊樣式在瀏覽器中打開(kāi)demo05.html，運(yùn)行結(jié)果如圖所示。設(shè)置特殊樣式分辨率和設(shè)備像素比2.32.3.1分辨率

先定一個(gè)小目標(biāo)！了解分辨率和設(shè)備像素比2.3.1分辨率在移動(dòng)端Web開(kāi)發(fā)的過(guò)程中，除了要使用<meta>標(biāo)簽設(shè)置理想視口之外，還需要解決移動(dòng)端頁(yè)面中圖片的顯示問(wèn)題。圖片的顯示是否清晰，與屏幕分辨率、圖像分辨率和設(shè)備像素比有關(guān)。分辨率分為屏幕分辨率和圖像分辨率。屏幕分辨率是指一個(gè)屏幕上可以顯示多少信息，通常以像素（px）為單位來(lái)衡量。在同一臺(tái)設(shè)備上，圖片的像素點(diǎn)和屏幕的像素點(diǎn)通常是一一對(duì)應(yīng)的。2.3.1分辨率屏幕分辨率1920×1080表示水平方向含有1920個(gè)像素，垂直方向含有1080個(gè)像素，屏幕上總共有2073600個(gè)像素點(diǎn)。在屏幕的大小相同的情況下，如果屏幕的分辨率低（如640×480），則屏幕上顯示的像素少，單個(gè)像素點(diǎn)比較大，看起來(lái)會(huì)有種顆粒感。在屏幕的大小相同的情況下，如果屏幕的分辨率高（如1920×1080），則屏幕上顯示的像素多，單個(gè)像素點(diǎn)比較小，看起來(lái)會(huì)比較清晰。2.3.1分辨率圖像分辨率500×200表示這張圖片在屏幕上按1:1顯示時(shí)，水平方向有500個(gè)像素點(diǎn)（色塊），垂直方向有200個(gè)像素點(diǎn)（色塊）。圖片的分辨率越低，圖片越模糊。圖片的分辨率越高，圖片越清晰。當(dāng)圖片放大時(shí)，圖片在屏幕上顯示的像素變大，軟件通過(guò)算法對(duì)圖像進(jìn)行了像素補(bǔ)充；當(dāng)圖片縮小時(shí)，也是通過(guò)算法將顯示的圖片像素進(jìn)行減少。2.3.2設(shè)備像素比在傳統(tǒng)的PC端和早期的普通手機(jī)中，屏幕上的一個(gè)像素和網(wǎng)頁(yè)CSS中的一個(gè)像素是完全對(duì)應(yīng)的。隨著技術(shù)的進(jìn)步，為了提高屏幕顯示的細(xì)膩度，高分辨率的屏幕開(kāi)始流行，一塊屏幕可以顯示更多的像素。隨之產(chǎn)生了一個(gè)問(wèn)題，就是同一個(gè)網(wǎng)頁(yè)在不同分辨率的屏幕下顯示效果會(huì)有大小差異，因?yàn)镃SS中使用的像素是一個(gè)固定值，它不會(huì)因?yàn)槠聊环直媛识l(fā)生改變。在屏幕尺寸相同的情況下，一個(gè)12px的文字在低分辨率的屏幕中的尺寸很大，但在高分辨率的屏幕中尺寸很小。在分辨率非常高的屏幕中，文字會(huì)顯得特別小，不利于瀏覽。2.3.2設(shè)備像素比在高分辨率屏幕中，CSS使用的像素單位和屏幕顯示的像素并不是一對(duì)一的，將屏幕像素除以CSS像素得到的就是設(shè)備像素比。為了解決這個(gè)問(wèn)題，高分辨率設(shè)備的操作系統(tǒng)會(huì)對(duì)網(wǎng)頁(yè)畫(huà)面進(jìn)行縮放，讓大小看上去比較舒適，而網(wǎng)頁(yè)中使用的像素也不必修改。尤其是網(wǎng)頁(yè)中的文字，在高分辨率屏幕下的顯示效果會(huì)更加細(xì)膩。例如，當(dāng)設(shè)備像素比為2時(shí)，CSS像素和屏幕像素的轉(zhuǎn)換關(guān)系如圖所示。CSS像素和屏幕像素的轉(zhuǎn)換二倍圖2.42.4.1什么是二倍圖

先定一個(gè)小目標(biāo)！了解什么是二倍圖2.4.1什么是二倍圖二倍圖可以理解為當(dāng)設(shè)備像素比很大時(shí)，圖片會(huì)被放大，而放大會(huì)讓圖片看起來(lái)模糊。為此，我們可以使用二倍圖的方式來(lái)提高圖片的清晰度。當(dāng)一個(gè)50px×50px（CSS像素）的圖片直接放到iPhone6/7/8設(shè)備中顯示時(shí)，圖片會(huì)被放大，長(zhǎng)和寬都放大到原來(lái)的二倍（iPhone6/7/8的設(shè)備像素比為2），即100px×100px。2.4.1什么是二倍圖編寫(xiě)HTML代碼創(chuàng)建demo06.html文件，使用<img>標(biāo)簽引入50px×50px的圖片和引入100px×100px的圖片；編寫(xiě)頁(yè)面結(jié)構(gòu)代碼。編寫(xiě)CSS代碼獲取到100px×100px的圖片，并手動(dòng)設(shè)置圖片的寬度和高度為50px。這張圖片就會(huì)以它原本的像素（100×100）來(lái)顯示，保證了圖片的原有清晰度。查看頁(yè)面效果在瀏覽器頁(yè)面中打開(kāi)demo06.html，查看頁(yè)面效果。二倍圖的使用方法二倍圖2.4.1什么是二倍圖例2-6：二倍圖的使用<body><!--

原圖

--><img

src="images/50.png"

alt=""><!--

二倍圖

--><img

src="images/100.png"

alt=""></body>編寫(xiě)HTML結(jié)構(gòu)代碼，實(shí)現(xiàn)頁(yè)面結(jié)構(gòu)。HTML代碼2.4.1什么是二倍圖例2-6：二倍圖的使用方法<style>img:nth-child(2)

{width:

50px;height:

50px;}</style>編寫(xiě)CSS樣式代碼，實(shí)現(xiàn)頁(yè)面樣式。CSS代碼2.4.1什么是二倍圖在瀏覽器中打開(kāi)demo06.html，查看二倍圖的頁(yè)面效果。二倍圖2.4.2背景圖片的縮放

先定一個(gè)小目標(biāo)！掌握背景圖片的縮放2.4.2背景圖片的縮放除了使用<img>標(biāo)簽插入的圖片，還會(huì)用到背景圖片，所以背景圖片也需要設(shè)置縮放效果。在CSS3中，提供了background-size屬性用來(lái)規(guī)定背景圖片的尺寸，從而達(dá)到背景圖片的縮放效果。background-size設(shè)置的寬度和高度可以是像素或百分比。使用background-size的基本語(yǔ)法如下。background-size:背景圖片的寬度背景圖片的高度;基本語(yǔ)法2.4.2背景圖片的縮放除像素或百分比以外，background-size屬性還可以用其他的屬性值來(lái)實(shí)現(xiàn)不同的縮放效果，如表所示。屬性值說(shuō)明cover把背景圖像擴(kuò)展至足夠大，以使背景圖像完全覆蓋背景區(qū)域contain把背景圖像擴(kuò)展至最大尺寸，以使其寬度和高度完全適應(yīng)內(nèi)容區(qū)域2.4.2背景圖片的縮放編寫(xiě)HTML代碼創(chuàng)建demo07.html文件，定義<div>標(biāo)簽，編寫(xiě)頁(yè)面結(jié)構(gòu)代碼。編寫(xiě)CSS代碼將background屬性的值設(shè)置為url(images/dog.jpg)，表示使用給定的圖片作為背景，no-repeat表示不重復(fù)。查看頁(yè)面效果在瀏覽器頁(yè)面中打開(kāi)demo07.html，查看初始頁(yè)面效果。background-size屬性的使用方法初始頁(yè)面2.4.2背景圖片的縮放<body><div></div></body>例2-7：background-size屬性的使用方法編寫(xiě)HTML結(jié)構(gòu)代碼，實(shí)現(xiàn)頁(yè)面結(jié)構(gòu)。HTML代碼2.4.2背景圖片的縮放<style>div

{width:

200px;height:

200px;border:

2px

solid

red;background:

url(images/dog.jpg)

no-repeat;}</style>例2-7：background-size屬性的使用方法編寫(xiě)CSS樣式代碼，實(shí)現(xiàn)頁(yè)面樣式。CSS代碼2.4.2背景圖片的縮放在瀏覽器中打開(kāi)demo07.html，背景圖片縮放效果如下。初始頁(yè)面2.4.2背景圖片的縮放設(shè)置背景圖片的寬度在<div>標(biāo)簽的樣式代碼中添加background-size屬性，將背景圖片的寬度設(shè)置為200px，沒(méi)有設(shè)置高度，瀏覽器會(huì)自動(dòng)等比例縮放。設(shè)置圖片的百分比除了設(shè)置圖片的具體的尺寸大小之外，還可以通過(guò)百分比來(lái)實(shí)現(xiàn)背景圖片的縮放效果，background-size屬性的值為50%，這個(gè)百分比是相對(duì)于父盒子來(lái)說(shuō)的。查看頁(yè)面效果刷新瀏覽器頁(yè)面，查看頁(yè)面效果。background-size屬性的使用方法設(shè)置百分比為父盒子的50%背景等比例縮放2.4.2背景圖片的縮放background-size:

200px;例2-7：background-size屬性的使用方法在<div>標(biāo)簽的樣式中添加設(shè)置background-size屬性值為200px的代碼。2.4.2背景圖片的縮放刷新瀏覽器頁(yè)面，運(yùn)行結(jié)果如圖所示。背景等比例縮放2.4.2背景圖片的縮放background-size:

50%;例2-7：background-size屬性的使用方法在<div>標(biāo)簽的樣式中重新設(shè)置background-size屬性值為50%。2.4.2背景圖片的縮放刷新瀏覽器頁(yè)面，運(yùn)行結(jié)果如圖所示。設(shè)置百分比為父盒子的50%2.4.2背景圖片的縮放設(shè)置background-size為cover設(shè)置background-size屬性的值為cover，表示將背景圖片等比例拉伸，使背景圖片完全覆蓋<div>盒子。設(shè)置background-size為contain設(shè)置background-size為contain，表示將背景圖片的高度和寬度等比例拉伸，當(dāng)寬度或者高度鋪滿div盒子就不再進(jìn)行拉伸了。查看頁(yè)面效果刷新瀏覽器頁(yè)面，查看頁(yè)面效果。background-size屬性的使用方法設(shè)置為cover設(shè)置為contain2.4.2背景圖片的縮放background-size:

cover;例2-7：background-size屬性的使用方法在<div>標(biāo)簽的樣式中重新設(shè)置background-size屬性的值為cover，由于父盒子是正方形，圖片是長(zhǎng)方形，當(dāng)把長(zhǎng)方形等比例放大時(shí)，為了讓高度占滿父盒子，就會(huì)導(dǎo)致寬度顯示不全，設(shè)置background-size屬性的值為cover，表示將背景圖片等比例拉伸，使背景圖片完全覆蓋div盒子，具體代碼如下。2.4.2背景圖片的縮放刷新瀏覽器頁(yè)面，運(yùn)行結(jié)果如圖所示。設(shè)置為cover2.4.2背景圖片的縮放background-size:

contain;例2-7：設(shè)置為contain在<div>標(biāo)簽的樣式中重新設(shè)置background-size屬性的值為contain，當(dāng)瀏覽器進(jìn)行縮放時(shí)，寬度會(huì)鋪滿div，而高度無(wú)法鋪滿，所以會(huì)出現(xiàn)空白，表示將背景圖片的高度和寬度等比例拉伸，當(dāng)寬度或者高度鋪滿div盒子就不再進(jìn)行拉伸了。2.4.2背景圖片的縮放刷新瀏覽器頁(yè)面，運(yùn)行結(jié)果如圖所示。設(shè)置為contain2.4.3實(shí)現(xiàn)背景圖片的二倍圖

先定一個(gè)小目標(biāo)！掌握實(shí)現(xiàn)背景圖片的二倍圖2.4.3實(shí)現(xiàn)背景圖片的二倍圖編寫(xiě)HTML代碼創(chuàng)建demo08.html文件，定義<div>標(biāo)簽，編寫(xiě)頁(yè)面結(jié)構(gòu)代碼。編寫(xiě)CSS代碼設(shè)置<div>元素的寬度和高度為50px，并給<div>標(biāo)簽設(shè)置背景圖片，該圖片的實(shí)際大小為100px×100px，并設(shè)置背景圖片的寬度和高度皆為50px。查看頁(yè)面效果在瀏覽器頁(yè)面中打開(kāi)demo08.html，查看頁(yè)面效果。實(shí)現(xiàn)背景圖片的二倍圖效果背景圖片使用二倍圖2.4.3實(shí)現(xiàn)背景圖片的二倍圖<body><div></div></body>例2-8：實(shí)現(xiàn)背景圖片的二倍圖效果編寫(xiě)HTML結(jié)構(gòu)代碼，實(shí)現(xiàn)頁(yè)面結(jié)構(gòu)。HTML代碼2.4.3實(shí)現(xiàn)背景圖片的二倍圖<style>div

{width:

50px;height:

50px;border:

1px

solid

red;background:

url(images/100.png)

no-repeat;background-size:

50px

50px;}</style>例2-8：實(shí)現(xiàn)背景圖片的二倍圖效果編寫(xiě)CSS樣式代碼，通過(guò)background-size屬性設(shè)置背景圖片的二倍圖效果。CSS代碼2.4.3實(shí)現(xiàn)背景圖片的二倍圖在瀏覽器中打開(kāi)demo08.html，查看背景圖片的二倍圖效果。背景圖片使用二倍圖SVG矢量圖2.52.5.1什么是SVG

先定一個(gè)小目標(biāo)！了解什么是SVG2.5.1什么是SVG網(wǎng)頁(yè)中的圖片可以分為兩類，一類是小圖標(biāo)和簡(jiǎn)單的圖形；另一類圖片經(jīng)常使用GIF、JPEG、PNG等格式，這些格式比較常見(jiàn)，但因?yàn)槎际腔谙袼靥幚淼?，?dāng)放大時(shí)會(huì)失真，變得模糊。可縮放矢量圖形（ScalableVectorGraphics，SVG）是一種開(kāi)放標(biāo)準(zhǔn)的描述矢量圖形的語(yǔ)言，它基于XML（可擴(kuò)展標(biāo)記語(yǔ)言）。在2003年1月，SVG1.1被確立為W3C（萬(wàn)維網(wǎng)聯(lián)盟）標(biāo)準(zhǔn)。2.5.1什么是SVG0102030405SVG是開(kāi)放的標(biāo)準(zhǔn)，它是用XML編寫(xiě)的。SVG可被非常多的工具讀取和修改（如記事本）。SVG與JPEG和GIF圖像比起來(lái)，文件體積更小，且可壓縮性更強(qiáng)。SVG矢量圖形是可伸縮的，可在任何的分辨率下被高質(zhì)量地打印，可在圖像質(zhì)量不下降的情況下被放大。SVG圖像中的文本是可選的，同時(shí)也是可搜索的（很適合制作地圖）。開(kāi)放讀取和修改文件體積小可伸縮文本可選SVG矢量圖的優(yōu)勢(shì)2.5.2SVG標(biāo)簽和樣式

先定一個(gè)小目標(biāo)！熟悉SVG標(biāo)簽和樣式2.5.2SVG標(biāo)簽和樣式SVG使用標(biāo)簽的方式定義各種圖形，外層標(biāo)簽是<svg>，viewBox可以定義用來(lái)觀察SVG視圖的一個(gè)矩形區(qū)域，它的屬性主要包括x、y、width、height，用數(shù)字表示，每個(gè)數(shù)字之間用空格或逗號(hào)隔開(kāi)，表示定義一個(gè)在左上角(x,y)坐標(biāo)位置，寬度為width，高度為height的矩形。常用屬性如表所示。屬性說(shuō)明width用來(lái)控制SVG視圖的寬度height用來(lái)控制SVG視圖的高度viewBox定義用戶視野的位置及大小2.5.2SVG標(biāo)簽和樣式在<svg>標(biāo)簽的內(nèi)部，可以使用SVG提供的一些預(yù)定義的標(biāo)簽來(lái)繪制圖形，或者繪制文字。常用的內(nèi)部標(biāo)簽如表所示。標(biāo)簽名說(shuō)明<rect>矩形標(biāo)簽<circle>圓形標(biāo)簽<ellipse>橢圓形標(biāo)簽<line>線段標(biāo)簽<polyline>折線標(biāo)簽2.5.2SVG標(biāo)簽和樣式常用的內(nèi)部標(biāo)簽如表所示。標(biāo)簽名說(shuō)明<polygon>多邊形標(biāo)簽<path>路徑標(biāo)簽<text>文字標(biāo)簽<tspan>類似<span>，用在<text>內(nèi)部單獨(dú)設(shè)置樣式2.5.2SVG標(biāo)簽和樣式SVG常用的內(nèi)部標(biāo)簽還可以通過(guò)屬性來(lái)設(shè)置樣式，常用的屬性如表所示。屬性名屬性值說(shuō)明fillString定義填充顏色以及文字顏色fill-opacity0~1之間的浮點(diǎn)數(shù)定義填充顏色的透明度strokeString定義描邊的顏色stroke-width大于0的浮點(diǎn)數(shù)定義描邊的寬度stroke-opacity0~1之間的浮點(diǎn)數(shù)定義描邊的顏色的透明度2.5.2SVG標(biāo)簽和樣式SVG常用的內(nèi)部標(biāo)簽還可以通過(guò)屬性來(lái)設(shè)置樣式，常用的屬性如表所示。屬性名屬性值說(shuō)明opacity0~1之間的浮點(diǎn)數(shù)定義整個(gè)圖形元素的透明度transformtranslate(x,y)平移scale(x,y)縮放rotate(angle,[cx,cy])旋轉(zhuǎn)skewX(angel)skewY(angel)傾斜2.5.2SVG標(biāo)簽和樣式編寫(xiě)HTML代碼創(chuàng)建demo09.html文件，外層寫(xiě)了一個(gè)<svg>標(biāo)簽，通過(guò)<circle>標(biāo)簽定義了圓形，編寫(xiě)頁(yè)面結(jié)構(gòu)代碼。編寫(xiě)CSS代碼設(shè)置svg的寬度和高度為100%，<svg>標(biāo)簽的cx和cy屬性用來(lái)定義圓中心的x和y坐標(biāo)，r屬性用來(lái)定義圓的半徑；fill屬性用來(lái)設(shè)置填充顏色為#ddd。。查看頁(yè)面效果在瀏覽器頁(yè)面中打開(kāi)demo09.html，查看頁(yè)面效果。SVG的使用SVG圖形2.5.2SVG標(biāo)簽和樣式<body><svgwidth="100%"height="100%"><circlecx="100"cy="50"r="40"stroke="black"stroke-width="2"fill="#ddd"></svg></body>例2-9：SVG的使用編寫(xiě)HTML結(jié)構(gòu)代碼，實(shí)現(xiàn)頁(yè)面結(jié)構(gòu)。HTML代碼2.5.2SVG標(biāo)簽和樣式在瀏覽器中打開(kāi)demo09.html，查看SVG圓形圖片。SVG圖形2.5.3從外部引入SVG文件

先定一個(gè)小目標(biāo)！掌握從外部引入SVG文件2.5.3從外部引入SVG文件編寫(xiě)HTML文件創(chuàng)建demo10.html文件，定義<img>標(biāo)簽，編寫(xiě)頁(yè)面結(jié)構(gòu)代碼。在HTML中引入circle.svg文件使用<img>標(biāo)簽的src屬性引入circle.svg文件。定義circle.svg文件設(shè)置svg的寬度和高度為100%，<svg>標(biāo)簽的cx和cy屬性用來(lái)定義圓中心的x和y坐標(biāo)，r屬性用來(lái)定義圓的半徑；fill屬性用來(lái)設(shè)置填充顏色為#ddd。從外部引入SVG文件<body><imgsrc="circle.svg"alt=""></body>例2-10：從外部引入SVG文件HTML代碼2.5.3從外部引入SVG文件<?xmlversion="1.0"standalone="no"?><!DOCTYPEsvgPUBLIC"-//W3C//DTDSVG1.1//EN""/Graphics/SVG/1.1/DTD/svg11.dtd">例2-10：從外部引入SVG文件定義circle.svg文件，并進(jìn)行XML聲明，其中standalone屬性用來(lái)規(guī)定此SVG文檔是“獨(dú)立的”還是含有對(duì)外部文件的引用，此處設(shè)為no表示該SVG文檔會(huì)引用一個(gè)外部文件（即第2行的DTD文件）。引用了外部的SVG的DTD文件，此處引用的是W3C提供的svg11.dtd，表示含有所有允許的SVG元素。XML聲明2.5.3從外部引入SVG文件<svgwidth="100%"height="100%"version="1.1"xmlns="/2000/svg"><circlecx="100"cy="50"r="40"stroke="black"stroke-width="2"fill="#ddd"/></svg>例2-10：從外部引入SVG文件在circle.svg文件中添加代碼，為<svg>標(biāo)簽添加了version（SVG版本）和xmlns（XML命名空間）屬性，用來(lái)在XML文檔中使用，并定義<circle>圓形。定義圓形本章小結(jié)本章主要講解了視口的概念、如何利用Chrome瀏覽器模擬手機(jī)屏幕、如何利用<meta>標(biāo)簽設(shè)置視口、如何進(jìn)行移動(dòng)Web頁(yè)面的樣式編寫(xiě)、分辨率和設(shè)備像素比的基本概念、如何通過(guò)二倍圖來(lái)提高圖片清晰度，以及SVG矢量圖的使用。通過(guò)本章的學(xué)習(xí)，讀者應(yīng)對(duì)移動(dòng)Web開(kāi)發(fā)中的基礎(chǔ)知識(shí)有了一定的了解，為后面的課程奠定基礎(chǔ)。第3章移動(dòng)Web開(kāi)發(fā)基礎(chǔ)（下）《Bootstrap響應(yīng)式Web開(kāi)發(fā)》學(xué)習(xí)目標(biāo)/Target

掌握HTML5新增API的使用

掌握移動(dòng)端常用事件的使用

掌握移動(dòng)端常用插件的使用章節(jié)概述/SummaryHTML5是HTML當(dāng)前最新的版本，是新一代Web相關(guān)技術(shù)的總稱。在HTML5中提供了很多新的特性，如文件讀取、網(wǎng)絡(luò)存儲(chǔ)等。另外，目前多數(shù)移動(dòng)端設(shè)備都使用觸屏操作，使得用戶逐漸擺脫了鍵盤(pán)和鼠標(biāo)操作的束縛，人機(jī)交互更加方便。本章將針對(duì)HTML5常用API以及移動(dòng)Web開(kāi)發(fā)常用事件和插件進(jìn)行詳細(xì)講解。目錄/Contents010203HTML5常用API移動(dòng)端常用事件移動(dòng)端常用插件HTML5常用API3.1

先定一個(gè)小目標(biāo)！掌握如何檢測(cè)網(wǎng)絡(luò)連接3.1.1檢測(cè)網(wǎng)絡(luò)連接3.1.1檢測(cè)網(wǎng)絡(luò)連接在HTML5之前，通過(guò)window.navigator.onLine來(lái)檢查用戶當(dāng)前的網(wǎng)絡(luò)狀態(tài)，它會(huì)返回一個(gè)布爾值，false表示沒(méi)有連接網(wǎng)絡(luò)，true表示已連接網(wǎng)絡(luò)。HTML5提供了online和offline兩個(gè)事件，它們監(jiān)聽(tīng)的都是window對(duì)象。其中，online在用戶網(wǎng)絡(luò)連接時(shí)調(diào)用，offline在用戶網(wǎng)絡(luò)斷開(kāi)時(shí)調(diào)用。需要注意的是，這種方式在不同瀏覽器會(huì)存在差異。3.1.1檢測(cè)網(wǎng)絡(luò)連接編寫(xiě)HTML+CSS代碼創(chuàng)建demo01.html，定義<p>標(biāo)簽標(biāo)簽，并編寫(xiě)頁(yè)面樣式。編寫(xiě)JavaScript代碼使用<script>標(biāo)簽引入jquery.min.js文件，并為window對(duì)象綁定online事件，處理網(wǎng)絡(luò)連接狀態(tài)的邏輯；綁定offline事件，處理網(wǎng)絡(luò)斷開(kāi)時(shí)的邏輯。查看頁(yè)面效果在瀏覽器打開(kāi)demo01.html，查看頁(yè)面顯示效果。檢測(cè)設(shè)備網(wǎng)絡(luò)狀態(tài)網(wǎng)絡(luò)斷開(kāi)時(shí)的效果網(wǎng)絡(luò)恢復(fù)連接時(shí)的效果3.1.1檢測(cè)網(wǎng)絡(luò)連接<style>body{padding:0;margin:0;background-color:#f7f7f7;}p{width:200px;height:40px;text-align:center;line-height:40px;margin:100pxauto;color:#fff;font-size:24px;background-color:#000;display:none;}</style><body><pclass="tips"></p></body>例3-1：檢測(cè)網(wǎng)絡(luò)連接狀態(tài)編寫(xiě)HTML結(jié)構(gòu)和CSS樣式代碼，實(shí)現(xiàn)頁(yè)面效果。HTML+CSS代碼3.1.1檢測(cè)網(wǎng)絡(luò)連接編寫(xiě)JavaScript代碼。<scriptsrc="jquery.min.js"></script><script>window.addEventListener('online',function(){$('.tips').text('網(wǎng)絡(luò)已連接').fadeIn(500).delay(1000).fadeOut();})window.addEventListener('offline',function(){$('.tips').text('網(wǎng)絡(luò)已斷開(kāi)').fadeIn(500).delay(1000).fadeOut();})</script>例3-1：檢測(cè)網(wǎng)絡(luò)連接狀態(tài)JavaScript代碼3.1.1檢測(cè)網(wǎng)絡(luò)連接在瀏覽器中打開(kāi)demo01.html，當(dāng)斷開(kāi)網(wǎng)絡(luò)連接時(shí)，效果如圖所示。網(wǎng)絡(luò)斷開(kāi)時(shí)的效果3.1.1檢測(cè)網(wǎng)絡(luò)連接在瀏覽器中打開(kāi)demo01.html，當(dāng)網(wǎng)絡(luò)連接時(shí)，效果如圖所示。網(wǎng)絡(luò)恢復(fù)連接時(shí)的效果

先定一個(gè)小目標(biāo)！掌握全屏操作的實(shí)現(xiàn)3.1.2全屏操作3.1.2全屏操作HTML5提供了requestFullscreen()方法允許用戶自定義網(wǎng)頁(yè)上任一元素的全屏顯示，并提供了exitFullscreen()方法關(guān)閉全屏顯示。這兩個(gè)方法存在兼容性問(wèn)題，不同瀏覽器需要添加不同的私有前綴。3.1.2全屏操作早期版本Chrome瀏覽器基于WebKit內(nèi)核的瀏覽器需要添加webkit前綴，使用webkitRequestFullScreen()和webkitCancelFullScreen()來(lái)實(shí)現(xiàn)。早期版本Opera瀏覽器Opera瀏覽器需要添加o前綴，使用oRequestFullScreen()和oCancelFullScreen()來(lái)實(shí)現(xiàn)。早期版本火狐瀏覽器基于Gecko內(nèi)核的瀏覽器需要添加moz前綴，使用mozRequestFullScreen()和mozCancelFullScreen()來(lái)實(shí)現(xiàn)。早期版本IE瀏覽器基于Trident內(nèi)核的瀏覽器需要添加ms前綴，使用msRequestFullscreen()和msExitFullscreen()來(lái)實(shí)現(xiàn)，注意方法里的screen的s為小寫(xiě)形式。各類瀏覽器的全屏方法：3.1.2全屏操作編寫(xiě)HTML代碼創(chuàng)建demo02.html，定義按鈕和圖片，實(shí)現(xiàn)頁(yè)面結(jié)構(gòu)。編寫(xiě)JavaScript代碼單擊“全屏顯示”按鈕，文檔進(jìn)入全屏狀態(tài)，并修改背景色；單擊“取消全屏”按鈕，退出全屏界面；單擊“是否全屏”按鈕，根據(jù)返回的布爾值來(lái)判斷當(dāng)前是否為全屏狀態(tài)。查看頁(yè)面效果在瀏覽器打開(kāi)demo02.html，查看頁(yè)面顯示效果。全屏操作頁(yè)面初始效果3.1.2全屏操作<body><div><imgsrc="pic1.png"height="300"alt=""><buttonid="full">全屏顯示</button><buttonid="cancelFull">取消全屏</button><buttonid="isFull">是否全屏</button></div></body>例3-2：全屏操作編寫(xiě)HTML結(jié)構(gòu)代碼，實(shí)現(xiàn)頁(yè)面結(jié)構(gòu)。HTML代碼3.1.2全屏操作在瀏覽器中打開(kāi)demo02.html，查看頁(yè)面效果。頁(yè)面初始效果3.1.2全屏操作<script>vardiv=document.querySelector('div');document.querySelector('#full').onclick=function(){if(div.requestFullscreen){div.requestFullscreen();//正常瀏覽器}elseif(div.webkitRequestFullScreen){div.webkitRequestFullScreen();//webkit}elseif(…){…}else{alert('暫不支持在您的瀏覽器中全屏');}};</script>例3-2：全屏操作編寫(xiě)JavaScript代碼，實(shí)現(xiàn)全屏操作。全屏操作3.1.2全屏操作//取消全屏document.querySelector('#cancelFull').onclick=function(){if(document.exitFullscreen){div.exitFullscreen();//正常瀏覽器}elseif(document.webkitCancelFullScreen){document.webkitCancelFullScreen();//webkit}elseif(…){…}else{alert('暫不支持在您的瀏覽器中全屏');}};例3-2：全屏操作編寫(xiě)JavaScript代碼，實(shí)現(xiàn)取消全屏操作。取消全屏3.1.2全屏操作單擊圖中的“取消全屏”按鈕，即可恢復(fù)成原來(lái)的狀態(tài)。全屏效果在瀏覽器中刷新頁(yè)面，然后單擊“全屏顯示”按鈕，效果如圖所示。3.1.2全屏操作編寫(xiě)JavaScript代碼，檢測(cè)當(dāng)前是否處于全屏狀態(tài)。如果返回的值為false，則表明當(dāng)前不是全屏狀態(tài)，如果返回的值為true，則表明當(dāng)前處于全屏狀態(tài)，具體代碼如下。document.querySelector('#isFull').onclick=function(){alert(document.webkitIsFullScreen); //webkit};例3-2：全屏操作是否全屏3.1.2全屏操作在瀏覽器中刷新頁(yè)面，單擊“是否全屏”按鈕，效果如圖所示。檢測(cè)是否處于全屏狀態(tài)3.1.3文件讀取如果想要把圖片的縮略圖顯示到頁(yè)面中，這就需要用到HTML5給我們提供的文件讀取接口來(lái)實(shí)現(xiàn)。該接口通過(guò)FileReader對(duì)象來(lái)讀取本地存儲(chǔ)的文件，然后使用File對(duì)象來(lái)指定讀取的文件或數(shù)據(jù)。File對(duì)象可以是來(lái)自用戶在一個(gè)元素上（如<input>）選擇文件后返回的FileList對(duì)象，也可以是自由拖放操作生成的DataTransfer對(duì)象。dataTransfer對(duì)象只能訪問(wèn)文件的一些基本的信息。

先定一個(gè)小目標(biāo)！掌握文件讀取操作3.1.3文件讀取3.1.3文件讀取由于Web環(huán)境的特殊性，為了考慮文件安全問(wèn)題，瀏覽器不允許JavaSctipt直接訪問(wèn)文件系統(tǒng)，使用<input>表單元素的文件域<inputtype="file">來(lái)實(shí)現(xiàn)文件的上傳。input元素還有一個(gè)multiple屬性（HTML5新增），可以實(shí)現(xiàn)一次上傳多個(gè)文件。在用戶選擇文件以后，可以得到一個(gè)FileList對(duì)象，它代表所選的文件列表。<inputtype="file"multiple>基本語(yǔ)法3.1.3文件讀取編寫(xiě)HTML代碼創(chuàng)建demo03.html，定義表單控件，編寫(xiě)頁(yè)面結(jié)構(gòu)。編寫(xiě)JavaScript代碼獲取到頁(yè)面中表單元素對(duì)象，然后在控制臺(tái)中輸出this.files的輸出結(jié)果FileList對(duì)象。查看頁(yè)面效果在瀏覽器打開(kāi)demo03.html，在頁(yè)面中隨意選擇一個(gè)文件，然后在控制臺(tái)中查看this.files的輸出結(jié)果。查看FileList對(duì)象查看FileList對(duì)象3.1.3文件讀取編寫(xiě)HTML結(jié)構(gòu)和JavaScript邏輯代碼。<body><inputtype="file"multiple><script>varfile=document.querySelector('input');file.onchange=function(){//當(dāng)用戶選擇文件后執(zhí)行此事件console.log(this.files);//查看FileList對(duì)象};</script></body>例3-3：查看FileList對(duì)象HTML+JavaScript代碼3.1.3文件讀取在瀏覽器中打開(kāi)demo03.html，查看FileList對(duì)象的文件，效果如圖所示。查看FileList對(duì)象3.1.3文件讀取FileList對(duì)象代表所選的文件列表，該對(duì)象是一個(gè)類數(shù)組的形式，其中包含一個(gè)或多個(gè)File對(duì)象。如果用戶只選擇了一個(gè)上傳文件，那么只需要訪問(wèn)FileList對(duì)象的第一個(gè)元素，如果FileList對(duì)象是類數(shù)組對(duì)象，可以使用for循環(huán)遍歷其內(nèi)部的File對(duì)象。for(vari=0,numFiles=files.length;i<numFiles;i++){varfiles=files[i];

…}