Bootstrap響應式Web開發(fā)PPT完整全套教學課件

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

先定一個小目標！了解什么是Bootstrap1.1.1什么是BootstrapBootstrap是一個基于HTML、CSS和JavaScript語言編寫的框架，具有簡單、靈活的特性，擁有樣式庫、組件和插件。Bootstrap常用來開發(fā)響應式布局和移動設備優(yōu)先的Web項目，能夠幫助開發(fā)者快速搭建前端頁面。Bootstrap框架1.1.2Bootstrap的特點

先定一個小目標！掌握Bootstrap的特點1.1.2Bootstrap的特點Bootstrap框架的特點：低成本，易上手CSS預編譯框架成熟豐富的組件庫響應式設計移動設備優(yōu)先瀏覽器支持1.1.3Bootstrap的組成

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

先定一個小目標！了解瀏覽器1.2.1PC端的瀏覽器瀏覽器按照設備類型來劃分，主要包括PC端瀏覽器和移動端瀏覽器。瀏覽器內(nèi)核主要包括Blink、WebKit和Trident等。PC端的瀏覽器主要包括Google（谷歌）公司的Chrome瀏覽器、Mozilla公司的Firefox瀏覽器、和Edge瀏覽器等。Chrome瀏覽器1.2.1PC端的瀏覽器213市場占有率高，兼容性好，界面簡潔、簡單易用。基于強大的JavaScript

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

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

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

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

掌握移動Web頁面的樣式編寫方法

理解分辨率和設備像素比的概念

掌握SVG矢量圖的使用方法

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

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

class="title">新款Android手機</div><img

src="picture1.jpg"

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

{font-size:

20px;color:

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

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

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

…（原有代碼）</head>2.1.3利用<meta>標簽設置視口HTML代碼創(chuàng)建demo02.html文件，添加<meta>標簽。2.1.3利用<meta>標簽設置視口通過瀏覽器打開demo02.html，并查看html頁面的寬度。該頁面的寬度為414px，與當前設備的寬度相同，實現(xiàn)了理想視口的效果。查看設置視口后的頁面寬度2.1.4視口的常用設置在使用<meta>標簽設置視口時，該標簽的常用設置參數(shù)如下。參數(shù)名說明width設置視口寬度，可以設為正整數(shù)（像素）或特殊值device-widthheight設置視口高度，可以設為正整數(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視口的常用設置在實際開發(fā)中，通常會將視口設置為不允許用戶縮放頁面、視口寬度等于設備寬度、初始縮放比為1.0，最大縮放比為1.0，示例代碼如下。示例代碼移動Web頁面的樣式編寫2.22.2.1利用Normalize.css初始化默認樣式

先定一個小目標！熟悉移動Web頁面的樣式編寫2.2.1利用Normalize.css初始化默認樣式在傳統(tǒng)的PC端Web開發(fā)中，一些舊版本的瀏覽器不符合W3C標準，有些不支持HTML5和CSS3的新特性，給開發(fā)人員帶來了許多麻煩。在移動Web開發(fā)中，幾乎不用擔心瀏覽器的兼容問題，因為移動端的瀏覽器基本上都是以WebKit內(nèi)核為主，對HTML5和CSS3的支持非常好。3.1.2全屏操作保留默認樣式保留有用的瀏覽器默認樣式，而不是完全去掉它們。一致性保證各瀏覽器樣式的一致性。模塊化開發(fā)采用模塊化開發(fā)，方便后期維護。文檔擁有詳細的文檔。Normalize.css的特點：登錄官網(wǎng)在瀏覽器中打開Normalize.css官方網(wǎng)站找到可以獲取文件的下載地址。下載單擊“Downloadv8.0.1”按鈕，即可獲取Normalize.css源代碼。保存文件在瀏覽器頁面中，單擊鼠標右鍵，然后在彈出的菜單中選擇“另存為”即可將Normalize.css保存到本地。下載Normalize.css2.2.1利用Normalize.css初始化默認樣式Normalize.css官網(wǎng)Normalize.css源代碼編寫HTML代碼創(chuàng)建demo03.html文件，編寫頁面結(jié)構代碼。引入Normalize.css文件通過<link>標簽引入normalize.css文件，其中，href屬性的值為normalize.css文件的路徑地址。查看頁面效果在瀏覽器頁面中打開demo03.html，查看頁面效果。使用Normalize.css2.2.1利用Normalize.css初始化默認樣式設置body元素的margin值為02.2.1利用Normalize.css初始化默認樣式例2-3：利用Normalize.css初始化默認樣式<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代碼編寫HTML結(jié)構代碼，實現(xiàn)頁面結(jié)構，并使用Normalize.css初始化頁面的默認樣式。2.2.1利用Normalize.css初始化默認樣式通過瀏覽器打開demo03.html，查看頁面運行效果。設置body元素的margin值為02.2.2設置box-sizing為border-box在CSS3中，通過box-sizing屬性可以更改盒子尺寸的計算方式。將box-sizing設為content-box（默認值）時，表示使用傳統(tǒng)的計算方式；將box-sizing設為border-box時，表示使用CSS3的一種新的計算方式，通過這種方式可以解決傳統(tǒng)盒子在添加了邊框和內(nèi)邊距之后，盒子被撐大的問題。2.2.2設置box-sizing為border-box在CSS3中，將box-sizing屬性box-sizing設為content-box（默認值）和border-box的基本語法如下。/*傳統(tǒng)計算方式*/box-sizing:content-box;/*新的計算方式*/box-sizing:border-box;基本語法2.2.2設置box-sizing為border-box盒子的寬度=CSS中設置的width+border+padding使用content-box計算方式的盒子模型，其寬度的計算公式如下。計算公式2.2.2設置box-sizing為border-box盒子的寬度=CSS中設置的width使用border-box計算方式的盒子模型，其寬度的計算公式如下。當采用border-box計算方式時，CSS中設置的寬度width已經(jīng)包含了border和padding值，不用擔心因為設置了元素的border和padding導致盒子被撐大的問題。這種方式的優(yōu)點在于，盒子的大小是固定的，不會受到邊框和內(nèi)邊距的影響，也不會影響到頁面中其他盒子的結(jié)構。因此，在移動Web開發(fā)中，推薦使用border-box這種計算方式。計算公式2.2.2設置box-sizing為border-box編寫HTML代碼創(chuàng)建demo04.html文件，編寫頁面結(jié)構代碼。編寫頁面樣式設置div元素的公共樣式，并設置不同的div元素的box-sizing屬性值為content-box和border-box。查看頁面效果在瀏覽器頁面中打開demo04.html，查看頁面效果。content-box和border-box的區(qū)別對比content-box和border-box2.2.2設置box-sizing為border-box編寫HTML結(jié)構代碼，實現(xiàn)頁面結(jié)構。例2-4：content-box與border-box的區(qū)別<body><div>content-box</div><div>border-box</div></body>HTML代碼2.2.2設置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>編寫CSS樣式代碼，實現(xiàn)頁面樣式。CSS代碼2.2.2設置box-sizing為border-box通過瀏覽器打開demo04.html，查看頁面運行效果。對比content-box和border-box2.2.3設置移動端的特殊樣式

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

<a

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

<input

type="button"

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

{-webkit-tap-highlight-color:

transparent;}input

{-webkit-appearance:

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

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

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

原圖

--><img

src="images/50.png"

alt=""><!--

二倍圖

--><img

src="images/100.png"

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

{width:

50px;height:

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

先定一個小目標！掌握背景圖片的縮放2.4.2背景圖片的縮放除了使用<img>標簽插入的圖片，還會用到背景圖片，所以背景圖片也需要設置縮放效果。在CSS3中，提供了background-size屬性用來規(guī)定背景圖片的尺寸，從而達到背景圖片的縮放效果。background-size設置的寬度和高度可以是像素或百分比。使用background-size的基本語法如下。background-size:背景圖片的寬度背景圖片的高度;基本語法2.4.2背景圖片的縮放除像素或百分比以外，background-size屬性還可以用其他的屬性值來實現(xiàn)不同的縮放效果，如表所示。屬性值說明cover把背景圖像擴展至足夠大，以使背景圖像完全覆蓋背景區(qū)域contain把背景圖像擴展至最大尺寸，以使其寬度和高度完全適應內(nèi)容區(qū)域2.4.2背景圖片的縮放編寫HTML代碼創(chuàng)建demo07.html文件，定義<div>標簽，編寫頁面結(jié)構代碼。編寫CSS代碼將background屬性的值設置為url(images/dog.jpg)，表示使用給定的圖片作為背景，no-repeat表示不重復。查看頁面效果在瀏覽器頁面中打開demo07.html，查看初始頁面效果。background-size屬性的使用方法初始頁面2.4.2背景圖片的縮放<body><div></div></body>例2-7：background-size屬性的使用方法編寫HTML結(jié)構代碼，實現(xiàn)頁面結(jié)構。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屬性的使用方法編寫CSS樣式代碼，實現(xiàn)頁面樣式。CSS代碼2.4.2背景圖片的縮放在瀏覽器中打開demo07.html，背景圖片縮放效果如下。初始頁面2.4.2背景圖片的縮放設置背景圖片的寬度在<div>標簽的樣式代碼中添加background-size屬性，將背景圖片的寬度設置為200px，沒有設置高度，瀏覽器會自動等比例縮放。設置圖片的百分比除了設置圖片的具體的尺寸大小之外，還可以通過百分比來實現(xiàn)背景圖片的縮放效果，background-size屬性的值為50%，這個百分比是相對于父盒子來說的。查看頁面效果刷新瀏覽器頁面，查看頁面效果。background-size屬性的使用方法設置百分比為父盒子的50%背景等比例縮放2.4.2背景圖片的縮放background-size:

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

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

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

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

先定一個小目標！掌握實現(xiàn)背景圖片的二倍圖2.4.3實現(xiàn)背景圖片的二倍圖編寫HTML代碼創(chuàng)建demo08.html文件，定義<div>標簽，編寫頁面結(jié)構代碼。編寫CSS代碼設置<div>元素的寬度和高度為50px，并給<div>標簽設置背景圖片，該圖片的實際大小為100px×100px，并設置背景圖片的寬度和高度皆為50px。查看頁面效果在瀏覽器頁面中打開demo08.html，查看頁面效果。實現(xiàn)背景圖片的二倍圖效果背景圖片使用二倍圖2.4.3實現(xiàn)背景圖片的二倍圖<body><div></div></body>例2-8：實現(xiàn)背景圖片的二倍圖效果編寫HTML結(jié)構代碼，實現(xiàn)頁面結(jié)構。HTML代碼2.4.3實現(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：實現(xiàn)背景圖片的二倍圖效果編寫CSS樣式代碼，通過background-size屬性設置背景圖片的二倍圖效果。CSS代碼2.4.3實現(xiàn)背景圖片的二倍圖在瀏覽器中打開demo08.html，查看背景圖片的二倍圖效果。背景圖片使用二倍圖SVG矢量圖2.52.5.1什么是SVG

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

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

先定一個小目標！掌握從外部引入SVG文件2.5.3從外部引入SVG文件編寫HTML文件創(chuàng)建demo10.html文件，定義<img>標簽，編寫頁面結(jié)構代碼。在HTML中引入circle.svg文件使用<img>標簽的src屬性引入circle.svg文件。定義circle.svg文件設置svg的寬度和高度為100%，<svg>標簽的cx和cy屬性用來定義圓中心的x和y坐標，r屬性用來定義圓的半徑；fill屬性用來設置填充顏色為#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文件，并進行XML聲明，其中standalone屬性用來規(guī)定此SVG文檔是“獨立的”還是含有對外部文件的引用，此處設為no表示該SVG文檔會引用一個外部文件（即第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>標簽添加了version（SVG版本）和xmlns（XML命名空間）屬性，用來在XML文檔中使用，并定義<circle>圓形。定義圓形本章小結(jié)本章主要講解了視口的概念、如何利用Chrome瀏覽器模擬手機屏幕、如何利用<meta>標簽設置視口、如何進行移動Web頁面的樣式編寫、分辨率和設備像素比的基本概念、如何通過二倍圖來提高圖片清晰度，以及SVG矢量圖的使用。通過本章的學習，讀者應對移動Web開發(fā)中的基礎知識有了一定的了解，為后面的課程奠定基礎。第3章移動Web開發(fā)基礎（下）《Bootstrap響應式Web開發(fā)》學習目標/Target

掌握HTML5新增API的使用

掌握移動端常用事件的使用

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

先定一個小目標！掌握如何檢測網(wǎng)絡連接3.1.1檢測網(wǎng)絡連接3.1.1檢測網(wǎng)絡連接在HTML5之前，通過window.navigator.onLine來檢查用戶當前的網(wǎng)絡狀態(tài)，它會返回一個布爾值，false表示沒有連接網(wǎng)絡，true表示已連接網(wǎng)絡。HTML5提供了online和offline兩個事件，它們監(jiān)聽的都是window對象。其中，online在用戶網(wǎng)絡連接時調(diào)用，offline在用戶網(wǎng)絡斷開時調(diào)用。需要注意的是，這種方式在不同瀏覽器會存在差異。3.1.1檢測網(wǎng)絡連接編寫HTML+CSS代碼創(chuàng)建demo01.html，定義<p>標簽標簽，并編寫頁面樣式。編寫JavaScript代碼使用<script>標簽引入jquery.min.js文件，并為window對象綁定online事件，處理網(wǎng)絡連接狀態(tài)的邏輯；綁定offline事件，處理網(wǎng)絡斷開時的邏輯。查看頁面效果在瀏覽器打開demo01.html，查看頁面顯示效果。檢測設備網(wǎng)絡狀態(tài)網(wǎng)絡斷開時的效果網(wǎng)絡恢復連接時的效果3.1.1檢測網(wǎng)絡連接<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：檢測網(wǎng)絡連接狀態(tài)編寫HTML結(jié)構和CSS樣式代碼，實現(xiàn)頁面效果。HTML+CSS代碼3.1.1檢測網(wǎng)絡連接編寫JavaScript代碼。<scriptsrc="jquery.min.js"></script><script>window.addEventListener('online',function(){$('.tips').text('網(wǎng)絡已連接').fadeIn(500).delay(1000).fadeOut();})window.addEventListener('offline',function(){$('.tips').text('網(wǎng)絡已斷開').fadeIn(500).delay(1000).fadeOut();})</script>例3-1：檢測網(wǎng)絡連接狀態(tài)JavaScript代碼3.1.1檢測網(wǎng)絡連接在瀏覽器中打開demo01.html，當斷開網(wǎng)絡連接時，效果如圖所示。網(wǎng)絡斷開時的效果3.1.1檢測網(wǎng)絡連接在瀏覽器中打開demo01.html，當網(wǎng)絡連接時，效果如圖所示。網(wǎng)絡恢復連接時的效果

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

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

…}