WAP與H5的區(qū)別介紹

著移動(dòng)互聯(lián)網(wǎng)的飛速發(fā)展，移動(dòng)端網(wǎng)站的重要性日益凸顯。在這一過程中，HTML5和WAP作為兩種不同的移動(dòng)端網(wǎng)頁技術(shù)，各自扮演著獨(dú)特的角色。本文將深入探討HTML5與WAP之間的區(qū)別，介紹它們的不同之處以及各自的區(qū)別。

首先，從定義和性質(zhì)上來看，HTML5和WAP有著本質(zhì)的差異。HTML5是超文本標(biāo)記語言的第五次修訂版本，它是一種腳本語言，可以直接在多種平臺(tái)上使用，無需轉(zhuǎn)換代碼，從而保證了頁面的兼容性。而WAP，即無線應(yīng)用協(xié)議，是一種通信協(xié)議，其設(shè)計(jì)目的是將互聯(lián)網(wǎng)上的HTML內(nèi)容轉(zhuǎn)換為WML（無線標(biāo)記語言），以便在移動(dòng)電話等早期移動(dòng)設(shè)備的小屏幕上顯示。簡而言之，HTML5是一種編程語言，而WAP則是一種實(shí)現(xiàn)移動(dòng)電話與互聯(lián)網(wǎng)結(jié)合的應(yīng)用協(xié)議標(biāo)準(zhǔn)。

其次，從平臺(tái)支持的角度來看，HTML5和WAP也存在著顯著的區(qū)別。HTML5支持大多數(shù)Web前端平臺(tái)和移動(dòng)終端，包括智能手機(jī)、平板電腦和個(gè)人電腦等。這意味著，通過HTML5制作的網(wǎng)站可以靈活運(yùn)行于各種媒體，為用戶提供一致的瀏覽體驗(yàn)。而WAP主要支持老式的移動(dòng)設(shè)備，尤其是那些只能訪問WAP網(wǎng)站的功能機(jī)。隨著智能手機(jī)的普及，WAP的應(yīng)用范圍已經(jīng)大幅縮減。

從功能方面上考慮，HTML5和WAP同樣存在著較大的差異。HTML5提供了豐富的新特性，如地理位置服務(wù)、本地存儲(chǔ)、視頻播放等，這些功能使得HTML5能夠提供更加動(dòng)態(tài)和交互性強(qiáng)的網(wǎng)頁體驗(yàn)。而WAP的功能則相對(duì)基礎(chǔ)，主要用于顯示簡單的文本和鏈接，不適合現(xiàn)代互聯(lián)網(wǎng)的需求。

此外，HTML5還具有跨平臺(tái)性、離線存儲(chǔ)、多媒體支持、圖形和動(dòng)畫以及實(shí)時(shí)通信等優(yōu)勢(shì)。這些特點(diǎn)使得HTML5成為了移動(dòng)互聯(lián)網(wǎng)和Web開發(fā)的主流技術(shù)。

以上總體來看，HTML5和WAP在定義和性質(zhì)、平臺(tái)支持以及功能方面上存在著顯著的區(qū)別。HTML5作為目前移動(dòng)互聯(lián)網(wǎng)和Web開發(fā)的主流技術(shù)，提供了更加先進(jìn)的功能和更好的跨平臺(tái)兼容性，適用于現(xiàn)代的智能手機(jī)和瀏覽器。而WAP作為早期的移動(dòng)網(wǎng)頁技術(shù)，隨著智能手機(jī)的普及，其應(yīng)用范圍已經(jīng)大幅縮減。在未來的發(fā)展中，HTML5將繼續(xù)發(fā)揮其優(yōu)勢(shì)，推動(dòng)移動(dòng)互聯(lián)網(wǎng)和Web開發(fā)的進(jìn)步。

要快搭建高質(zhì)量的個(gè)人網(wǎng)站，可以試著用Wordpress搭建屬于自己的個(gè)人網(wǎng)站了，這也是很多設(shè)計(jì)師比較關(guān)心的事情。

認(rèn)識(shí)Wordpress

在前面講過網(wǎng)頁分為靜態(tài)和動(dòng)態(tài)兩種，通過前面知識(shí)的學(xué)習(xí)應(yīng)該完全可以制作一個(gè)靜態(tài)頁面出來，但是靜態(tài)頁面的局限性非常大，尤其是個(gè)人網(wǎng)站，可能需要經(jīng)常更新作品或者文字，這就需要一個(gè)動(dòng)態(tài)頁面，而動(dòng)態(tài)頁面需要編寫后臺(tái)系統(tǒng)，好在現(xiàn)在互聯(lián)網(wǎng)上有非常多開源的建站系統(tǒng)可供選擇，Wordpress就是其中非常優(yōu)秀的一款。

截止到本書完稿前，Wordpress的最新版本為4.9.4。Wordpress誕生于2003年，經(jīng)過15年的發(fā)展，功能已經(jīng)非常強(qiáng)大，在其官網(wǎng)上可以看到很多案例，如圖4-25所示。

圖4-25

Wordpress需要安裝在服務(wù)器或者虛擬主機(jī)上，對(duì)服務(wù)器的環(huán)境要求為：PHP 5.2.4或更高版本；MySQL 5.0或更高版本。

目前網(wǎng)上有非常多的服務(wù)器提供商可供選擇，包括免費(fèi)的和收費(fèi)的，一般收費(fèi)的服務(wù)器在速度和穩(wěn)定性上都好過免費(fèi)的，另外服務(wù)器的價(jià)格會(huì)高于虛擬主機(jī)的價(jià)格，個(gè)人網(wǎng)站使用虛擬主機(jī)即可，建議大家根據(jù)實(shí)際情況進(jìn)行選擇。

下面以服務(wù)商“阿里云”為例講解申請(qǐng)購買虛擬主機(jī)的方法。

打開阿里云網(wǎng)站，然后在導(dǎo)航中找到“云虛擬主機(jī)”，如圖4-26所示。

圖4-26

在“云虛擬主機(jī)”頁面中可以看到不同價(jià)格的虛擬主機(jī)，主要區(qū)別是空間、內(nèi)存、數(shù)據(jù)庫大小和帶寬等，如圖4-27所示。個(gè)人網(wǎng)站選擇最便宜的虛擬主機(jī)就足夠使用了。

圖4-27

在下面可以看到對(duì)應(yīng)主機(jī)的詳細(xì)信息，在“數(shù)據(jù)庫類型”和“支持語言”中可以找到對(duì)應(yīng)虛擬主機(jī)支持的PHP和MySQL版本號(hào)，如圖4-28所示。

圖4-28

選擇好需要的虛擬主機(jī)后，單擊購買按鈕會(huì)跳轉(zhuǎn)到配置界面，在這個(gè)界面中主要是選擇虛擬主機(jī)的操作系統(tǒng)，因?yàn)樾枰脕泶罱╓ordpress，所以選擇Linux操作系統(tǒng)，如圖4-29所示。

圖4-29

一般虛擬主機(jī)的操作系統(tǒng)需要根據(jù)網(wǎng)站開發(fā)的語言和數(shù)據(jù)庫進(jìn)行選擇。網(wǎng)站的開發(fā)語言為ASP、.NET和HTML，數(shù)據(jù)庫為ACCESS和SQL Server 則選擇Windows系統(tǒng)；網(wǎng)站的開發(fā)語言為PHP、HTML和WAP，數(shù)據(jù)庫為MySQL和SQLite則選擇Linux系統(tǒng)。機(jī)房則根據(jù)所在地，或者目標(biāo)主要訪問用戶所在地進(jìn)行選擇即可，比如有青島和北京兩個(gè)機(jī)房，目標(biāo)用戶主要分布在北京就可以優(yōu)先選擇北京的機(jī)房。距離越近延遲時(shí)間越少訪問速度越快。無論是機(jī)房還是操作系統(tǒng)，后期都可以進(jìn)行切換。

付款完成后，在網(wǎng)站的“管理控制臺(tái)”中可以找到購買的虛擬主機(jī)，如圖4-30所示。

圖4-30

單擊右側(cè)的“管理”按鈕即可進(jìn)入虛擬主機(jī)的管理界面，在這個(gè)界面中可以找到虛擬主機(jī)的FTP登錄名和密碼、MySQL數(shù)據(jù)庫的名稱、用戶名和密碼等信息，這些可以用來對(duì)Wordpress進(jìn)行配置，如圖4-31所示。

圖4-31

安裝Wordpress

準(zhǔn)備好服務(wù)器或虛擬主機(jī)后就可以安裝Wordpress了。Wordpress的安裝非常簡單，首先訪問Wordpress的官網(wǎng)并下載Wordpress安裝包，如圖4-32所示。

圖4-32

將下載到的wordpress-4.9.4-zh_CN.zip文件通過FTP工具上傳到虛擬主機(jī)上。可供選擇的FTP工具非常多，這里以FileZilla為例進(jìn)行講解，F(xiàn)ileZilla是一款免費(fèi)的FTP工具，有Linux、Windows和macOS版本可供選擇，如圖4-33所示。需要注意的是，這里的操作系統(tǒng)版本是個(gè)人電腦的操作系統(tǒng)，并非虛擬主機(jī)的操作系統(tǒng)。

圖4-33

下載并安裝后打開FileZilla，主界面如圖4-34所示。要使用FileZilla進(jìn)行傳輸，需要對(duì)FileZilla和虛擬主機(jī)進(jìn)行連接。可以在阿里云的幫助中心找到阿里云虛擬主機(jī)和FileZilla進(jìn)行連接的設(shè)置方法。

圖4-34

當(dāng)連接到虛擬主機(jī)后，可以在FileZilla右側(cè)的“遠(yuǎn)程站點(diǎn)”界面中，看到虛擬主機(jī)的文件信息，然后找到htdocs文件夾并打開，如圖4-35所示。

圖4-35

將下載的Wordpress安裝包解壓，然后將解壓出來的文件復(fù)制并粘貼到FileZilla右側(cè)的遠(yuǎn)程站點(diǎn)窗口中，即可把這些文件上傳到htdocs文件夾中，如圖4-36所示。注意，不要把wordpress文件夾上傳上去了。

圖4-36

FileZilla下方會(huì)顯示文件上傳的進(jìn)度，等文件全部上傳完成后，打開瀏覽器輸入http://xxx.xxx.com/wp-admin/install.php，其中xxx.xxx.com這個(gè)地址是虛擬主機(jī)的默認(rèn)域名，大家在圖4-31中的臨時(shí)域名可以找到這個(gè)地址，每個(gè)人的虛擬主機(jī)的域名都不相同，用該地址替換xxx.xxx.com，如果一切無誤瀏覽器會(huì)打開圖4-37所示的網(wǎng)頁。

圖4-37

單擊“現(xiàn)在就開始”按鈕進(jìn)行數(shù)據(jù)庫配置，如圖4-38所示。這里的所有信息請(qǐng)回到虛擬主機(jī)的管理界面進(jìn)行查詢并將其填入對(duì)應(yīng)的列表中，其中，數(shù)據(jù)庫名對(duì)應(yīng)圖4-31中的數(shù)據(jù)庫名稱；用戶名對(duì)應(yīng)的是數(shù)據(jù)庫用戶名；密碼則是各位數(shù)據(jù)庫的密碼，如果不清楚點(diǎn)擊重置密碼即可重新設(shè)置；數(shù)據(jù)庫主機(jī)則對(duì)應(yīng)的是數(shù)據(jù)庫鏈接地址。表前綴保持為默認(rèn)即可。

圖4-38

信息填寫完成后單擊“提交”按鈕，若所有信息正確可以看到圖4-39所示的界面，然后單擊“現(xiàn)在安裝”按鈕，即可自動(dòng)安裝Wordpress。

圖4-39

在“歡迎”界面中需要填寫一些初始信息，如圖4-40所示。這里的所有信息都可以按照自己的喜好進(jìn)行填寫，后續(xù)也可以隨意修改，需要注意的是，這里填寫的用戶名和密碼，是個(gè)人網(wǎng)站管理員的賬號(hào)和密碼，建議大家慎重填寫，并防止這些信息的泄露。其中電子郵件地址也建議填寫真實(shí)的郵件地址，在后續(xù)找回密碼等操作中會(huì)有用到。

圖4-40

一切填寫完成后，單擊“安裝WordPress”按鈕，這時(shí)就已經(jīng)完成了Wordpress的全部安裝工作，接下來可以像使用一個(gè)博客系統(tǒng)那樣使用Wordpress來對(duì)個(gè)人網(wǎng)站進(jìn)行管理。

Wordpress的基本使用

安裝完成Wordpress后可以通過http://xxx.xxx.com/wp-login.php進(jìn)入到自己網(wǎng)站的登錄界面，輸入安裝時(shí)設(shè)置的用戶名和密碼即可進(jìn)入Wordpress的后臺(tái)，如圖4-41所示。

圖4-41

在這里可以對(duì)網(wǎng)站做一切管理，包括界面的設(shè)置、文章的發(fā)布和留言的管理等。可以通過虛擬主機(jī)的臨時(shí)域名進(jìn)入到網(wǎng)站，在后臺(tái)進(jìn)行任何變動(dòng)后，都建議前往網(wǎng)站查看變動(dòng)的效果。圖4-42所示是Wordpress默認(rèn)的網(wǎng)站內(nèi)容。

圖4-42

在后臺(tái)中執(zhí)行“外觀>主題”菜單命令，即可對(duì)網(wǎng)站外觀進(jìn)行修改，默認(rèn)會(huì)有3個(gè)主題，可以單擊“添加新主題”來選擇更多的主題模板，如圖4-43所示。

圖4-43

在這里可以看到所有的Wordpress主題列表，這個(gè)列表還在不斷地新增中，找到自己喜歡的主題，把鼠標(biāo)懸停上去，可以快速地進(jìn)行預(yù)覽和安裝，如圖4-44所示。

圖4-44

還可以快速的篩選主題，單擊“特性篩選”按鈕，然后勾選篩選的內(nèi)容，接著單擊“應(yīng)用過濾器2”即可對(duì)主題進(jìn)行篩選，如圖4-45所示。

圖4-45

如果以上都無法滿足需要，還可以通過互聯(lián)網(wǎng)進(jìn)行主題模板的添加。可以通過搜索引擎搜索“Wordpress主題”等關(guān)鍵詞找到對(duì)應(yīng)的網(wǎng)站。現(xiàn)在網(wǎng)上有非常多的模板可供免費(fèi)下載使用，圖4-46所示是一款圖片主題，單擊網(wǎng)頁上方的“下載該主題”按鈕，即可下載到一個(gè)包含該主題的zip文件。

圖4-46

下載完成后回到Wordpress后臺(tái)的添加主題板塊，單擊“上傳主題”按鈕，然后選擇剛才下載到的zip文件并單擊“現(xiàn)在安裝”按鈕，即可完成主題的安裝，如圖4-47所示。

圖4-47

Wordpress主題的代碼修改

雖然可以自行選擇主題，但是很多情況下主題也會(huì)有所限制，比如上述主題左上角的LOGO只能顯示文字，我們希望修改為圖片；左下角的Blank Portfolio by ThemePort的字樣，我們希望修改為其他內(nèi)容。

這就需要進(jìn)行代碼層級(jí)的修改了，通過前面對(duì)HTML和CSS基礎(chǔ)知識(shí)的學(xué)習(xí)，這些都是小問題。要修改Wordpress的主題代碼，只需執(zhí)行“外觀>編輯”菜單命令即可，如圖4-48所示。

圖4-48

要修改主題內(nèi)容，需要找到該內(nèi)容所在的位置，在上圖中的右側(cè)可以切換主題中的文件，不同的內(nèi)容在不同的位置需要自己慢慢查找，并沒有其他快速的辦法，但是可以根據(jù)內(nèi)容所在的位置優(yōu)先找到大致的文件。

比如左下角的文字應(yīng)該屬于頁腳位置，因此選擇“主題頁腳（footer.php）”文件，這時(shí)可以看到以下的代碼，如圖4-49所示。

<?php printf( esc_html__( '%1$s by %2$s', 'blankportfolio' ), 'Blank Portfolio', '<a href="https://themeport.net" rel="designer">ThemePort</a>' ); ?>

圖4-49

接下來修改左上角的LOGO，這里的LOGO相對(duì)比較復(fù)雜一些。

根據(jù)LOGO所在的位置應(yīng)該可以在“首頁頁眉（header.php）”中找到，但是主題中的內(nèi)容會(huì)根據(jù)網(wǎng)站的名字進(jìn)行變更，可能并不能直接找到這部分代碼所在的位置，這時(shí)就需要借助chrome的開發(fā)者工具。

在chrome中打開這個(gè)網(wǎng)站，然后執(zhí)行“設(shè)置>更多工具>開發(fā)者工具”操作進(jìn)入開發(fā)者模式，如圖4-50所示。

圖4-50

這時(shí)通過查看“全棧設(shè)計(jì)”這幾個(gè)字快速定位其代碼，可以看到這里是<h1>和<h2>標(biāo)簽，并且其class值分別為site-title和site-description，如圖4-51所示。

圖4-51

再回到Wordpress的編輯界面，在“首頁頁眉（header.php）”中就可以快速的定位到這里的代碼所在的位置，如圖4-52所示。

圖4-52

可以直接在里面的<a>標(biāo)簽中嵌套一個(gè)<img>標(biāo)簽，并且直接在<img>標(biāo)簽中設(shè)置圖片的寬和高的屬性，比類似于下面的代碼。

<h1>

</a>

</h1>

這里需要注意圖片的位置，一般情況下需要把圖片上傳到虛擬主機(jī)的htdocs文件夾中。

這樣便可以完全自定義個(gè)人網(wǎng)站了，Wordpress的功能遠(yuǎn)不止這些，并且通過插件的支持，其功能強(qiáng)大到遠(yuǎn)超你的想象，大家如果有興趣可以深入學(xué)習(xí)，在Wordpress的官網(wǎng)可以查閱到Wordpress的官方文檔。

域名的申請(qǐng)和綁定

在申請(qǐng)?zhí)摂M主機(jī)時(shí)發(fā)現(xiàn)主機(jī)只有一個(gè)臨時(shí)域名，且很難記住，實(shí)際上要申請(qǐng)一個(gè)頂級(jí)的域名也非常容易。

域名和主機(jī)可以選擇同一個(gè)服務(wù)商，也可以選擇不同的服務(wù)商，選擇相同的服務(wù)商在綁定虛擬主機(jī)時(shí)可能更加方便一點(diǎn)。本文依然以“阿里云”為例，帶大家了解一下域名的申請(qǐng)和綁定。

首先，在阿里云網(wǎng)站菜單中，找到域名注冊(cè)，如圖4-53所示。

圖4-53

進(jìn)入到注冊(cè)域名的頁面后，首先需要查詢希望注冊(cè)的域名是否被注冊(cè)。在上方的輸入框中輸入希望注冊(cè)的域名，然后單擊“查詢名”按鈕即可，如圖4-54所示。注意如果希望注冊(cè)一個(gè)如www.xxx.com的域名，只需要輸入xxx部分即可，一般個(gè)人網(wǎng)站可以考慮使用自己名字的拼音或者英文名。

圖4-54

域名后綴可以不用選擇，一般情況下網(wǎng)站會(huì)查詢所有的域名后綴，直接單擊“查詢”按鈕即可。在結(jié)果頁，可以看到可以注冊(cè)的域名以及對(duì)應(yīng)的價(jià)格，還可以單擊篩選按鈕，只查看感興趣的后綴域名，如圖4-55所示。

圖4-55

接下來就可以根據(jù)購買虛擬主機(jī)的方法購買域名，一個(gè)域名最長可以選擇10年，且不保證域名的價(jià)格永遠(yuǎn)相同，因此對(duì)于自己特別喜歡的域名，如果覺得價(jià)格合適可以多買幾年，否則域名如果到期后沒有續(xù)費(fèi)，就可能會(huì)被回收。

域名購買后可以在管理控制臺(tái)中看到該域名，并對(duì)其進(jìn)行管理，如圖4-56所示。

圖4-56

如果需要將域名綁定到虛擬主機(jī)上，單擊“解析”按鈕即可。一般情況下需要修改A解析，將其地址設(shè)置為虛擬主機(jī)的IP地址即可，不同的域名服務(wù)商和虛擬主機(jī)服務(wù)商對(duì)此可能會(huì)有不同的要求，具體方法建議大家查詢對(duì)應(yīng)服務(wù)商的幫助文檔，如圖4-57所示。

圖4-57

總結(jié)

需要注意的是，網(wǎng)站和域名都是錦上添花的東西，更重要的是網(wǎng)站本身的內(nèi)容。如果沒有優(yōu)質(zhì)的內(nèi)容，網(wǎng)站只是一個(gè)毫無價(jià)值的存在。所以，要讓個(gè)人網(wǎng)站發(fā)揮光芒，持續(xù)不斷地進(jìn)行更新才是王道。

愛讀微課（iread360.com） | 色技手稿

天給大家演示一下如何安裝我們開發(fā)的一款校園二手市場(chǎng)wap版的系統(tǒng)，該系統(tǒng)界面精美，實(shí)現(xiàn)了校園二手市場(chǎng)的所有功能，我們授權(quán)后可以直接部署上線商用，目前我們搭建了一個(gè)演示站：http://www.ischoolbar.com，有興趣的可以去看看，里面的演示數(shù)據(jù)在東華大學(xué)下，該系統(tǒng)實(shí)現(xiàn)了全國所有高校的錄入，后臺(tái)也可以新增，跟公眾號(hào)綁定后可實(shí)現(xiàn)微信登錄。系統(tǒng)基于thinkphp3.2開發(fā)，php版本需要5.3以上才可以運(yùn)行，mysql版本不限，nginx或Apache都可以，下面我們來演示一下如何部署到本地（原理跟部署服務(wù)器是一樣的）。

1. 將項(xiàng)目源碼復(fù)制到你的網(wǎng)站根目錄下，因?yàn)槲业母夸浵掠泻芏鄠€(gè)項(xiàng)目，所以我新建了一個(gè)文件夾，放在二級(jí)目錄下。

2. 復(fù)制（服務(wù)器的話就是上傳至ftp）過去后，我們來改配置文件。

3. 首先是Common/con/config.php這個(gè)文件：

4. 接下來修改一下js文件，因?yàn)樵撓到y(tǒng)全部用的ajax異步加載的方式，所以里面的路徑需要配置下，App/Public/js/index_goods.js：

5. 接下來是App/Public/js/publish.js：

6. 接下來修改上傳圖片的php文件，ThinkPHP/Library/Org/Plupload/Plupload.class.php：

改成windows格式的如下：

7.接下來修改富文本編輯器的上傳瀏覽路徑/Admin/Public/edit/php/config.json：

8. 接下來就是導(dǎo)入數(shù)據(jù)庫文件了，這里我們用的是navicat工具，也可以用phpmyadmin等，這個(gè)隨意，只要能把文件導(dǎo)入進(jìn)去就行。

9. 導(dǎo)入進(jìn)去后就可以運(yùn)行了。

10. 如果需要開通微信登錄的話在后臺(tái)的系統(tǒng)設(shè)置里面填寫微信公眾號(hào)的基本信息，如下圖所示：

在公眾號(hào)后臺(tái)設(shè)置回調(diào)域名：

更多項(xiàng)目猿來入此獲取！

首次打開后會(huì)跳轉(zhuǎn)到選擇地區(qū)學(xué)校等信息，選擇完后會(huì)記錄，以后直接跳轉(zhuǎn)到最近選擇的學(xué)校，當(dāng)然你可以從首頁隨意切換地區(qū)學(xué)校，

下面是選擇地區(qū)，有自動(dòng)定位，可直接選擇定位的地區(qū)：

選擇學(xué)校列表：

接下來我們要在后臺(tái)配置一下首頁的幻燈片，后臺(tái)地址是網(wǎng)址/admin.php，用戶名密碼都是admin：

配置完后首頁如下：

注冊(cè)登陸頁面：

會(huì)員中心：

發(fā)布商品頁面：

商品發(fā)布后需要后臺(tái)管理員審核后才會(huì)顯示在前端：

審核通過后剛才發(fā)布的就出現(xiàn)在首頁了：

商品詳情頁：

https://www.yuanlrc.com/product/details.html?pid=17&fuid=6666

在線咨詢

上一篇：使用requests爬蟲「中文亂碼」的解決方法
下一篇：JavaScript的執(zhí)行環(huán)境及作用域

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。