本申請(qǐng)實(shí)施例涉及網(wǎng)頁(yè)編輯技術(shù)領(lǐng)域，更具體的涉及網(wǎng)頁(yè)中的元素的編輯方法及裝置。

背景技術(shù)：

網(wǎng)站(Website)是指在因特網(wǎng)上根據(jù)一定的規(guī)則，使用HTML(Hyper Text Markup Language，超級(jí)文本標(biāo)記語(yǔ)言)等工具制作的用于展示特定內(nèi)容相關(guān)網(wǎng)頁(yè)的集合。網(wǎng)頁(yè)是一個(gè)包含HTML標(biāo)簽的純文本文件，網(wǎng)頁(yè)上可以呈現(xiàn)以下元素：文字、圖片、動(dòng)畫(huà)、音樂(lè)、鏈接等等。

網(wǎng)站在試運(yùn)營(yíng)階段主要涉及網(wǎng)頁(yè)上各元素的編輯，例如元素的修改，而各元素的編輯涉及的主要過(guò)程如下：獲取網(wǎng)頁(yè)相應(yīng)的網(wǎng)頁(yè)代碼文件，將網(wǎng)頁(yè)代碼文件中相應(yīng)的代碼進(jìn)行修改后，再將更新后的網(wǎng)頁(yè)代碼文件上傳至服務(wù)器，服務(wù)器會(huì)將依據(jù)更新后的網(wǎng)頁(yè)代碼文件對(duì)其自身存儲(chǔ)的相應(yīng)網(wǎng)頁(yè)代碼文件進(jìn)行更新，從而完成網(wǎng)頁(yè)上各元素的編輯。在通過(guò)瀏覽網(wǎng)頁(yè)獲得網(wǎng)頁(yè)中需要進(jìn)行編輯的元素后，由于涉及網(wǎng)頁(yè)代碼文件的修改，因此需要專(zhuān)業(yè)編程人員對(duì)網(wǎng)頁(yè)代碼文件中的代碼進(jìn)行修改。

綜上，目前對(duì)網(wǎng)頁(yè)中的元素的編輯方法僅適用于專(zhuān)業(yè)編程人員，適用范圍較小。

技術(shù)實(shí)現(xiàn)要素：

有鑒于此，本發(fā)明提供了一種網(wǎng)頁(yè)中的元素的編輯方法及裝置，以克服現(xiàn)有技術(shù)中當(dāng)網(wǎng)頁(yè)中的元素需要進(jìn)行編輯時(shí)，需要專(zhuān)業(yè)編程人員對(duì)網(wǎng)頁(yè)代碼文件中的代碼進(jìn)行編輯，導(dǎo)致效率降低的問(wèn)題。

為實(shí)現(xiàn)上述目的，本發(fā)明提供如下技術(shù)方案：

一種網(wǎng)頁(yè)中的元素的編輯方法，包括：

檢測(cè)網(wǎng)頁(yè)中的觸按位置；

依據(jù)所述觸按位置，從所述網(wǎng)頁(yè)相應(yīng)的網(wǎng)頁(yè)代碼文件中獲取目標(biāo)代碼，所述目標(biāo)代碼關(guān)聯(lián)有所述觸按位置所指向的待編輯元素；

顯示元素編輯界面；

通過(guò)所述元素編輯界面，接收更新信息，所述更新信息用于將所述待編輯元素替換為更新元素；

依據(jù)所述更新信息更新所述目標(biāo)代碼。

一種網(wǎng)頁(yè)中元素的編輯裝置，包括：

確定位置模塊，用于確定網(wǎng)頁(yè)中的觸按位置；

獲取代碼模塊，用于依據(jù)所述觸按位置，從所述網(wǎng)頁(yè)相應(yīng)的網(wǎng)頁(yè)代碼文件中獲取所述觸按位置相應(yīng)的目標(biāo)代碼，所述目標(biāo)代碼對(duì)應(yīng)待編輯元素；

顯示模塊，用于在所述網(wǎng)頁(yè)中顯示元素編輯界面；

接收更新信息模塊，用于通過(guò)所述元素編輯界面，接收更新信息，所述更新信息用于將所述待編輯元素替換為更新元素；

更新模塊，用于依據(jù)所述更新信息對(duì)所述網(wǎng)頁(yè)代碼文件中的目標(biāo)代碼進(jìn)行更新。

經(jīng)由上述的技術(shù)方案可知，與現(xiàn)有技術(shù)相比，本發(fā)明實(shí)施例提供了一種網(wǎng)頁(yè)中的元素的編輯方法，利用該方法可以直接在網(wǎng)頁(yè)上進(jìn)行元素的編輯，首先確定網(wǎng)頁(yè)中的觸按位置，再依據(jù)觸按位置從網(wǎng)頁(yè)相應(yīng)的網(wǎng)頁(yè)代碼文件中獲取觸按位置相應(yīng)的目標(biāo)代碼，該目標(biāo)代碼對(duì)應(yīng)待編輯元素，在網(wǎng)頁(yè)中顯示元素編輯界面，可以通過(guò)元素編輯界面輸入更新信息，該更新信息用于將網(wǎng)頁(yè)中的待編輯元素替換為更新元素。對(duì)網(wǎng)頁(yè)中的元素進(jìn)行編輯的整個(gè)過(guò)程中，都是在網(wǎng)頁(yè)上進(jìn)行操作的，無(wú)需人為對(duì)網(wǎng)頁(yè)代碼文件中的代碼進(jìn)行修改，所以非專(zhuān)業(yè)編程人員通過(guò)本申請(qǐng)實(shí)施例提供的方法也可以對(duì)網(wǎng)頁(yè)中的元素進(jìn)行編輯，適用范圍較廣。

附圖說(shuō)明

為了更清楚地說(shuō)明本發(fā)明實(shí)施例或現(xiàn)有技術(shù)中的技術(shù)方案，下面將對(duì)實(shí)施例或現(xiàn)有技術(shù)描述中所需要使用的附圖作簡(jiǎn)單地介紹，顯而易見(jiàn)地，下面描述中的附圖僅僅是本發(fā)明的實(shí)施例，對(duì)于本領(lǐng)域普通技術(shù)人員來(lái)講，在不付出創(chuàng)造性勞動(dòng)的前提下，還可以根據(jù)提供的附圖獲得其他的附圖。

圖1為本申請(qǐng)實(shí)施例提供的網(wǎng)頁(yè)中的元素的編輯系統(tǒng)的結(jié)構(gòu)框圖；

圖2為通過(guò)終端中的瀏覽器訪問(wèn)的槍火游俠網(wǎng)站的首頁(yè)的部分示意圖；

圖3為本申請(qǐng)實(shí)施例提供的一種網(wǎng)頁(yè)中的元素的編輯方法的流程示意圖；

圖4為本申請(qǐng)實(shí)施例提供的網(wǎng)頁(yè)中位置區(qū)域的示意圖；

圖5為本申請(qǐng)實(shí)施例提供的網(wǎng)頁(yè)中的元素的編輯方法中的顯示元素編輯界面的一種實(shí)現(xiàn)方式的流程示意圖；

圖6為本申請(qǐng)實(shí)施例提供的一種元素編輯界面的示意圖；

圖7為本申請(qǐng)實(shí)施例提供的一種網(wǎng)頁(yè)中元素的編輯裝置的結(jié)構(gòu)示意圖；

圖8為本發(fā)明實(shí)施例提供的包含網(wǎng)頁(yè)中的元素的編輯裝置的終端的硬件結(jié)構(gòu)框圖。

具體實(shí)施方式

下面將結(jié)合本發(fā)明實(shí)施例中的附圖，對(duì)本發(fā)明實(shí)施例中的技術(shù)方案進(jìn)行清楚、完整地描述，顯然，所描述的實(shí)施例僅僅是本發(fā)明一部分實(shí)施例，而不是全部的實(shí)施例?；诒景l(fā)明中的實(shí)施例，本領(lǐng)域普通技術(shù)人員在沒(méi)有做出創(chuàng)造性勞動(dòng)前提下所獲得的所有其他實(shí)施例，都屬于本發(fā)明保護(hù)的范圍。

本申請(qǐng)實(shí)施例記載的網(wǎng)頁(yè)中的元素的編輯方法可以應(yīng)用于網(wǎng)頁(yè)中的元素的編輯系統(tǒng)，如圖1所示，為本申請(qǐng)實(shí)施例提供的網(wǎng)頁(yè)中的元素的編輯系統(tǒng)的結(jié)構(gòu)框圖。

網(wǎng)頁(yè)中的元素的編輯系統(tǒng)包括終端11以及服務(wù)器12。終端11中裝載有瀏覽器，用戶可以通過(guò)終端中的瀏覽器訪問(wèn)網(wǎng)頁(yè)。例如用戶可以通過(guò)瀏覽器訪問(wèn)“槍火游俠”網(wǎng)站，如圖2所示，為通過(guò)終端11中的瀏覽器訪問(wèn)的槍火游俠網(wǎng)站的首頁(yè)的部分示意圖。其中，槍火游俠21為圖片元素，游戲特色22、新聞中心23以及視頻圖片24為文字元素。用戶可以在終端11中顯示的網(wǎng)頁(yè)(如圖2所示的槍火游俠網(wǎng)站的首頁(yè))中對(duì)各元素進(jìn)行編輯，對(duì)網(wǎng)頁(yè)中元素的編輯之后，終端解析出的該網(wǎng)頁(yè)相應(yīng)的網(wǎng)頁(yè)代碼文件會(huì)隨之相應(yīng)修改。

終端11將更新后的網(wǎng)頁(yè)代碼文件發(fā)送至服務(wù)器12，服務(wù)器12會(huì)依據(jù)更新后的網(wǎng)頁(yè)代碼文件對(duì)身存儲(chǔ)的相應(yīng)網(wǎng)頁(yè)代碼文件(如圖2所示的槍火游俠網(wǎng)站的首頁(yè)的網(wǎng)頁(yè)代碼文件)進(jìn)行更新，當(dāng)其他用戶通過(guò)各自的終端中的瀏覽器再次訪問(wèn)槍火游俠網(wǎng)站的首頁(yè)時(shí)，瀏覽器會(huì)依據(jù)更新后的網(wǎng)頁(yè)代碼文件呈現(xiàn)槍火游俠網(wǎng)站的首頁(yè)。

下面結(jié)合上述網(wǎng)頁(yè)中的元素的編輯系統(tǒng)，對(duì)終端中的網(wǎng)頁(yè)中的元素的編輯方法進(jìn)行說(shuō)明，如圖3所示，為本申請(qǐng)實(shí)施例提供的一種網(wǎng)頁(yè)中的元素的編輯方法的流程示意圖，該方法包括：

步驟S301：檢測(cè)網(wǎng)頁(yè)中的觸按位置。

用戶需要對(duì)終端中顯示的網(wǎng)頁(yè)中某一元素進(jìn)行修改時(shí)，可以觸按相應(yīng)的元素，此時(shí)終端會(huì)檢測(cè)到網(wǎng)頁(yè)中被觸按的觸按位置。當(dāng)終端為觸屏終端時(shí)，用戶可以通過(guò)終端的顯示屏觸按網(wǎng)頁(yè)中某一元素，當(dāng)終端為非觸屏終端時(shí)，用戶可以通過(guò)鼠標(biāo)觸按網(wǎng)頁(yè)中某一元素。

步驟S302：依據(jù)所述觸按位置，從所述網(wǎng)頁(yè)相應(yīng)的網(wǎng)頁(yè)代碼文件中獲取目標(biāo)代碼，所述目標(biāo)代碼關(guān)聯(lián)有所述觸按位置所指向的待編輯元素。

每一網(wǎng)頁(yè)都有一網(wǎng)頁(yè)代碼文件，網(wǎng)頁(yè)代碼文件包括網(wǎng)頁(yè)中顯示的各元素相應(yīng)的代碼，即網(wǎng)頁(yè)中顯示的每一元素都是通過(guò)網(wǎng)頁(yè)代碼文件中相應(yīng)的代碼來(lái)呈現(xiàn)的，當(dāng)用戶觸按網(wǎng)頁(yè)中某一位置后，終端會(huì)獲得觸按位置相應(yīng)的目標(biāo)代碼。

步驟S303：顯示元素編輯界面。

元素編輯界面在網(wǎng)頁(yè)中顯示的位置信息可以根據(jù)實(shí)際情況而定，例如顯示在待編輯元素的正上方(覆蓋待編輯元素)，或顯示在待編輯元素的一側(cè)等等，以圖2為例，用戶觸按游戲特色22之后，在網(wǎng)頁(yè)中會(huì)顯示元素編輯界面25。元素編輯界面25顯示在游戲特色22的一側(cè)。

元素編輯界面25只是為了便于本領(lǐng)域技術(shù)人員理解而提供的一種可選的元素編輯界面，本申請(qǐng)實(shí)施例中的元素編輯界面的表現(xiàn)形式包括但不限于元素編輯界面25。

步驟S302和步驟S303可以同時(shí)執(zhí)行，也可以先執(zhí)行步驟S303再執(zhí)行步驟S302，也可以先執(zhí)行步驟S302再執(zhí)行步驟S303。

步驟S304：通過(guò)所述元素編輯界面，接收更新信息，所述更新信息用于將所述待編輯元素替換為更新元素。

仍以圖2為例，假設(shè)需要將“游戲特色”修改為“游戲特點(diǎn)”，則用戶可以在元素編輯界面25中輸入更新信息——“游戲特點(diǎn)”，本申請(qǐng)實(shí)施例中將網(wǎng)頁(yè)中顯示的內(nèi)容稱(chēng)為元素，將元素編輯界面中顯示的內(nèi)容稱(chēng)為更新信息。當(dāng)網(wǎng)頁(yè)中的游戲特色22修改為游戲特點(diǎn)之后，在網(wǎng)頁(yè)中顯示的游戲特點(diǎn)可稱(chēng)為更新元素。

步驟S305：依據(jù)所述更新信息更新所述目標(biāo)代碼。

假設(shè)圖2中網(wǎng)頁(yè)代碼文件中與游戲特色22相應(yīng)的目標(biāo)代碼為title＝"游戲特色"，則依據(jù)更新信息更新所述目標(biāo)代碼之后的代碼為title＝"游戲特點(diǎn)"。

本發(fā)明實(shí)施例提供了一種網(wǎng)頁(yè)中的元素的編輯方法，可以直接在網(wǎng)頁(yè)上進(jìn)行元素的編輯，用戶對(duì)需要進(jìn)行編輯的元素進(jìn)行觸按后，本申請(qǐng)實(shí)施例會(huì)依據(jù)網(wǎng)頁(yè)中的觸按位置從網(wǎng)頁(yè)相應(yīng)的網(wǎng)頁(yè)代碼文件中獲取觸按位置相應(yīng)的目標(biāo)代碼，在網(wǎng)頁(yè)中顯示元素編輯界面，用戶可以通過(guò)元素編輯界面輸入更新信息，該更新信息用于將網(wǎng)頁(yè)中的待編輯元素替換為更新元素。對(duì)網(wǎng)頁(yè)中的元素進(jìn)行編輯的整個(gè)過(guò)程中，都是在網(wǎng)頁(yè)上進(jìn)行操作的，無(wú)需人為對(duì)網(wǎng)頁(yè)代碼文件中的代碼進(jìn)行修改，所以非專(zhuān)業(yè)編程人員通過(guò)本申請(qǐng)實(shí)施例提供的方法也可以對(duì)網(wǎng)頁(yè)中的元素進(jìn)行編輯，適用范圍較廣。

上述網(wǎng)頁(yè)中的元素的編輯方法實(shí)施例中“依據(jù)所述觸按位置，從所述網(wǎng)頁(yè)相應(yīng)的網(wǎng)頁(yè)代碼文件中獲取目標(biāo)代碼”有多種實(shí)現(xiàn)方式，下面進(jìn)行詳細(xì)說(shuō)明。

第一種，從網(wǎng)頁(yè)相應(yīng)的網(wǎng)頁(yè)代碼文件中獲取目標(biāo)代碼的實(shí)現(xiàn)方法如下：

從所述網(wǎng)頁(yè)預(yù)定義的至少一個(gè)位置區(qū)域中，確定所述觸按位置對(duì)應(yīng)的目標(biāo)位置區(qū)域，其中，位置區(qū)域相應(yīng)的元素通過(guò)相應(yīng)的代碼呈現(xiàn)。從所述目標(biāo)位置區(qū)域?qū)?yīng)的代碼中，篩選出目標(biāo)代碼。

網(wǎng)頁(yè)中各元素都對(duì)應(yīng)一位置區(qū)域，如圖4所示，為本申請(qǐng)實(shí)施例提供的網(wǎng)頁(yè)中位置區(qū)域的示意圖。

假設(shè)網(wǎng)頁(yè)中顯示有元素B，網(wǎng)頁(yè)中預(yù)先設(shè)置的原點(diǎn)為預(yù)設(shè)點(diǎn)A，元素B所在的位置區(qū)域41包括：與所述網(wǎng)頁(yè)中預(yù)設(shè)點(diǎn)A的水平距離、與所述預(yù)設(shè)點(diǎn)A的垂直距離、位置區(qū)域的長(zhǎng)度以及位置區(qū)域的高度。

用戶觸按了網(wǎng)頁(yè)中某一元素時(shí)，終端會(huì)檢測(cè)到觸按位置，然后判斷哪一位置區(qū)域包括該觸按位置，最終確定出目標(biāo)位置區(qū)域。

以圖2中的槍火游俠21為例，假設(shè)用戶觸按槍火游俠21，該觸按位置所屬的目標(biāo)位置區(qū)域相應(yīng)的代碼如下：

<h1class＝”spr logo”onclick＝”pgvSengClick({hottag:’main.nav.logo’})”></h1>

該代碼包括開(kāi)始標(biāo)簽<h1以及與結(jié)束標(biāo)簽</h1>，本申請(qǐng)實(shí)施例中可以依據(jù)開(kāi)始標(biāo)簽和結(jié)束標(biāo)簽，來(lái)判斷各位置區(qū)域?qū)?yīng)的代碼的起始位置和結(jié)束位置，從而可以確定出目標(biāo)位置區(qū)域相應(yīng)的代碼。在網(wǎng)頁(yè)中，開(kāi)始標(biāo)簽有很多種，結(jié)束標(biāo)簽也有很多種。一般情況下，開(kāi)始標(biāo)簽的格式為“<字符”，結(jié)束標(biāo)簽的格式為“</字符>”，可以依據(jù)開(kāi)始標(biāo)簽和結(jié)束標(biāo)簽的上述特征，來(lái)判斷網(wǎng)頁(yè)文件代碼中的字符是否為開(kāi)始標(biāo)簽和結(jié)束標(biāo)簽。具體的，可以依據(jù)正則表達(dá)式來(lái)判斷網(wǎng)頁(yè)代碼文件中哪些是開(kāi)始標(biāo)簽，哪些是結(jié)束標(biāo)簽。

上述代碼中的class＝”spr logo”為需要篩選出的目標(biāo)代碼。

下面詳細(xì)介紹如何從目標(biāo)位置區(qū)域相應(yīng)的代碼中，篩選出所述目標(biāo)代碼的實(shí)現(xiàn)方法。

從所述目標(biāo)代碼區(qū)域?qū)?yīng)的代碼中，獲取待分析代碼；判斷所述待分析代碼中是否包含元素標(biāo)簽屬性，元素標(biāo)簽屬性用于指示相應(yīng)元素的元素類(lèi)型；當(dāng)所述待分析代碼中包含所述元素標(biāo)簽屬性時(shí)，確定所述待分析代碼為所述目標(biāo)代碼。

元素標(biāo)簽屬性可以包括class、src、title等等，class與src標(biāo)識(shí)的元素類(lèi)型為圖片類(lèi)型，title標(biāo)識(shí)的元素類(lèi)型為文本類(lèi)型。

仍以槍火游俠21為例，待分析代碼可以為onclick＝”pgvSengClick({hottag:’main.nav.logo’})”，也可以為class＝”spr logo”。

若開(kāi)始獲取的待分析代碼為class＝”spr logo”，則該待分析代碼中包括元素標(biāo)簽屬性class，則該目標(biāo)代碼為class＝”spr logo”。

若開(kāi)始獲取的待分析碼不包括元素標(biāo)簽屬性，則從所述目標(biāo)位置區(qū)域相應(yīng)的代碼中，篩選出所述目標(biāo)代碼還包括：

當(dāng)所述待分析代碼中不包括所述元素標(biāo)簽屬性時(shí)，判斷所述待分析代碼的前一代碼是否為開(kāi)始標(biāo)簽；當(dāng)所述待分析代碼的前一代碼不是開(kāi)始標(biāo)簽時(shí)，將所述待分析代碼的前一代碼作為待分析代碼，返回判斷所述待分析代碼中是否包含元素標(biāo)簽屬性的步驟。

若開(kāi)始獲取的待分析碼為onclick＝”pgvSengClick({hottag:’main.nav.logo’})”，其前一代碼為class＝”spr logo”，該代碼包括元素標(biāo)簽屬性class，則將class＝”spr logo”作為待分析代碼。

當(dāng)所述待分析代碼中不包括所述元素標(biāo)簽屬性時(shí)，從所述目標(biāo)位置區(qū)域相應(yīng)的代碼中，篩選出所述目標(biāo)代碼還包括：

當(dāng)所述待分析代碼中不包括所述元素標(biāo)簽屬性時(shí)，判斷所述待分析代碼的后一代碼是否為結(jié)束標(biāo)簽；

當(dāng)所述待分析代碼的后一代碼不是結(jié)束標(biāo)簽時(shí)，將所述后一代碼作為待分析代碼，返回判斷所述待分析代碼中是否包含元素標(biāo)簽屬性的步驟。

若開(kāi)始獲取的待分析碼為onclick＝”pgvSengClick({hottag:’main.nav.logo’})”，其后一代碼為</h1>，其為結(jié)束標(biāo)簽，因此不會(huì)再向后查找目標(biāo)代碼。

第二種，從網(wǎng)頁(yè)相應(yīng)的網(wǎng)頁(yè)代碼文件中獲取目標(biāo)代碼的實(shí)現(xiàn)方法如下：

從所述網(wǎng)頁(yè)預(yù)定義的至少一個(gè)位置區(qū)域中，確定所述觸按位置對(duì)應(yīng)的目標(biāo)位置區(qū)域，其中，位置區(qū)域相應(yīng)的元素通過(guò)相應(yīng)的代碼呈現(xiàn)；確定所述觸按位置相應(yīng)的待編輯元素；從所述目標(biāo)位置區(qū)域相應(yīng)的代碼中，確定與所述待編輯元素對(duì)應(yīng)的目標(biāo)代碼。

可以理解的是，網(wǎng)頁(yè)代碼文件包含的代碼中可能包含待編輯元素相應(yīng)的內(nèi)容信息，本申請(qǐng)實(shí)施例中同一內(nèi)容(例如“游戲特色”)所處的位置不同，稱(chēng)呼不同，例如在網(wǎng)頁(yè)中稱(chēng)為元素，在元素編輯界面中稱(chēng)為更新信息(例如圖2中游戲特點(diǎn)是更新信息)，在網(wǎng)頁(yè)代碼文件中稱(chēng)為元素相應(yīng)內(nèi)容信息。

在確定出目標(biāo)位置區(qū)域相應(yīng)的代碼后，可以從目標(biāo)位置區(qū)域相應(yīng)的代碼中搜索包括待編輯元素相應(yīng)的內(nèi)容信息的代碼，將包括待編輯元素相應(yīng)的內(nèi)容信息的代碼確定為目標(biāo)代碼。

假設(shè)圖2中網(wǎng)頁(yè)代碼文件中與游戲特色22相應(yīng)的位置區(qū)域的代碼如下：

<div href＝"/"title＝"游戲特色"id＝"popvideo"></div>，則依據(jù)“游戲特色”這一內(nèi)容信息，可以從上述代碼中直接確定出目標(biāo)代碼為title＝"游戲特色"。

可以理解的是，圖片元素的內(nèi)容信息為圖片，網(wǎng)頁(yè)代碼文件包含的是圖片元素的存儲(chǔ)路徑或包含存儲(chǔ)路徑的函數(shù)，例如槍火游俠21的目標(biāo)代碼class＝”spr logo”，spr logo是一個(gè)函數(shù)，spr logo函數(shù)中包括槍火游俠21圖片的存儲(chǔ)路徑，此時(shí)，若利用第二種方法則無(wú)法找到圖片元素的目標(biāo)代碼，此時(shí)可以利用第一種方式找到圖片元素的目標(biāo)代碼。

下面對(duì)上述確定所述觸按位置相應(yīng)的待編輯元素的實(shí)現(xiàn)方法進(jìn)行說(shuō)明。

從所述網(wǎng)頁(yè)預(yù)定義的至少一個(gè)位置區(qū)域中，確定包含所述觸按位置的目標(biāo)位置區(qū)域，其中一個(gè)位置區(qū)域相應(yīng)的元素通過(guò)相應(yīng)的代碼呈現(xiàn)；將所述目標(biāo)位置區(qū)域?qū)?yīng)的元素，確定為所述待編輯元素。

位置區(qū)域、位置區(qū)域中顯示的元素、呈現(xiàn)該元素的代碼是一一對(duì)應(yīng)的，當(dāng)確定位置區(qū)域后，就可以獲得位置區(qū)域中顯示的元素以及呈現(xiàn)該元素的代碼。

如圖5為本申請(qǐng)實(shí)施例提供的網(wǎng)頁(yè)中的元素的編輯方法中的顯示元素編輯界面的一種實(shí)現(xiàn)方式的流程示意圖，該方法包括：

步驟S501：依據(jù)所述目標(biāo)代碼確定所述待編輯元素的目標(biāo)元素類(lèi)型。

由于目標(biāo)代碼中包括元素標(biāo)簽屬性，元素標(biāo)簽屬性可以標(biāo)識(shí)元素類(lèi)型，例如元素標(biāo)簽屬性可以包括class、src、title等等，class與src標(biāo)識(shí)的元素類(lèi)型為圖片類(lèi)型，title標(biāo)識(shí)的元素類(lèi)型為文本類(lèi)型。

步驟S502：從預(yù)先設(shè)置的各元素類(lèi)型相應(yīng)的元素編輯界面中，確定所述目標(biāo)元素類(lèi)型對(duì)應(yīng)的元素編輯界面。

不同元素類(lèi)型相應(yīng)的元素編輯界面可能不同，例如當(dāng)元素類(lèi)型為文本類(lèi)型時(shí)，元素編輯界面可以為如圖2中的元素編輯界面25，即為一文本輸入框。

當(dāng)元素類(lèi)型為圖片類(lèi)型或聲音類(lèi)型時(shí)，元素編輯界面可以如圖6所示的元素編輯界面61。

用戶觸按槍火游俠22后，會(huì)在網(wǎng)頁(yè)中呈現(xiàn)元素編輯界面61，元素編輯界面61中包括槍火游俠的圖片、上傳按鍵62以及下載按鍵63。圖6中所示的元素編輯界面61的背景是可以是透明的，即在網(wǎng)頁(yè)中顯示元素編輯界面61后，仍可以看到被元素編輯界面61覆蓋的內(nèi)容，當(dāng)然元素編輯界面61的背景也可以不是透明的，這可以根據(jù)實(shí)際需要設(shè)置。在此不作具體限定。

步驟S503：顯示所述目標(biāo)元素類(lèi)型對(duì)應(yīng)的元素編輯界面。

可選的，元素編輯界面中可以顯示待編輯元素相應(yīng)的內(nèi)容信息(本申請(qǐng)實(shí)施例中將元素編輯界面中顯示的待編輯元素稱(chēng)為元素的內(nèi)容信息)，這樣可以節(jié)省用戶輸入更新信息的時(shí)間，例如，用戶觸按游戲特色22之后，顯示的元素編輯界面25中顯示有“游戲特色”，若用戶需要將“游戲特色”修改為“游戲特點(diǎn)”，則只需要將“色”修改為“點(diǎn)”即可，節(jié)省了用戶輸入更新信息的時(shí)間。

可以理解的是，有的待編輯元素的內(nèi)容信息在網(wǎng)頁(yè)中直接修改可能不太方便，需要將該待編輯元素的內(nèi)容信息下載到本地，再進(jìn)行編輯，例如圖片元素的內(nèi)容信息、聲音元素的內(nèi)容信息在網(wǎng)頁(yè)中就不方便編輯，因此，可選的，元素編輯界面中可以展示有下載按鍵以及上傳按鍵。此時(shí)通過(guò)所述元素編輯界面，接收更新信息包括：

當(dāng)接收到所述下載按鍵被觸按指令時(shí)，下載所述待編輯元素相應(yīng)的內(nèi)容信息；獲取對(duì)所述待編輯元素的內(nèi)容信息進(jìn)行編輯后的所述更新信息；當(dāng)接收到所述上傳按鍵被觸按指令時(shí)，上傳所述更新信息。

可以理解的是，在上傳聲音元素的更新信息(即聲音文件)、圖片元素的更新信息(即圖片)等等時(shí)，可能聲音元素的更新信息的占用空間、圖片元素的更新信息的分辨率，會(huì)超出網(wǎng)頁(yè)的預(yù)設(shè)閾值，因此，上述任一網(wǎng)頁(yè)中的元素的編輯方法實(shí)施例中還可以包括：在接收到所述上傳按鍵被觸按指令時(shí)，判斷所述更新信息的屬性值是否小于等于預(yù)設(shè)閾值；當(dāng)檢測(cè)到所述更新信息的屬性值小于等于所述預(yù)設(shè)閾值時(shí)，接收所述更新信息。

不同類(lèi)型的元素的更新信息的屬性值類(lèi)型不同，例如聲音元素相應(yīng)的屬性值為占用空間；圖片元素相應(yīng)的屬性值為分辨率。不同類(lèi)型的元素的預(yù)設(shè)閾值不同。

用戶在通過(guò)終端中的瀏覽器訪問(wèn)網(wǎng)頁(yè)的過(guò)程中，若需要對(duì)網(wǎng)頁(yè)進(jìn)行編輯，則需要先確定進(jìn)入元素編輯模式，否則用戶觸按網(wǎng)頁(yè)中某一位置時(shí)，例如觸按游戲特色22時(shí)，會(huì)鏈接到游戲特色22相應(yīng)的網(wǎng)頁(yè)中。因此，上述任一網(wǎng)頁(yè)中的元素的編輯方法實(shí)施例中，在檢測(cè)網(wǎng)頁(yè)中的觸按位置之前還包括：確定進(jìn)入元素編輯模式。

用戶可以通過(guò)點(diǎn)擊相應(yīng)的快捷鍵確定進(jìn)入元素編輯模式，例如通過(guò)按t+d+e+b+e+g+回車(chē)確定進(jìn)入元素編輯模式。

上述的元素編輯模式可以為debug模式。

可以理解的是，用戶對(duì)網(wǎng)頁(yè)中元素進(jìn)行編輯時(shí)，可能需要編輯多個(gè)元素，此時(shí)可以在每次編輯一元素后，將更新后的網(wǎng)頁(yè)代碼文件以及網(wǎng)頁(yè)代碼文件的標(biāo)識(shí)，發(fā)送至服務(wù)器，這樣編輯元素的個(gè)數(shù)，就是終端與服務(wù)器進(jìn)行交互的次數(shù)，使得網(wǎng)頁(yè)中的元素的編輯速度較慢。

為了提高網(wǎng)頁(yè)中的元素的編輯速度，可以將該網(wǎng)頁(yè)中所有元素編輯完畢之后，再將該網(wǎng)頁(yè)對(duì)應(yīng)的更新后的網(wǎng)頁(yè)代碼文件以及網(wǎng)頁(yè)代碼文件的標(biāo)識(shí)發(fā)送至云端服務(wù)器。

終端檢測(cè)到退出元素編輯模式指令時(shí)，就認(rèn)為該網(wǎng)頁(yè)中所有元素編輯完畢。

同一網(wǎng)頁(yè)的原始的網(wǎng)頁(yè)代碼文件的標(biāo)識(shí)與更新后的網(wǎng)頁(yè)代碼文件的標(biāo)識(shí)是相同的。

服務(wù)器在接收到更新后的網(wǎng)頁(yè)代碼文件以及網(wǎng)頁(yè)代碼文件的標(biāo)識(shí)后，會(huì)從預(yù)先存儲(chǔ)的各標(biāo)識(shí)相應(yīng)的網(wǎng)頁(yè)代碼文件中，確定接收到的標(biāo)識(shí)相應(yīng)的目標(biāo)網(wǎng)頁(yè)代碼文件；依據(jù)接收到的網(wǎng)頁(yè)代碼文件對(duì)目標(biāo)網(wǎng)頁(yè)代碼文件進(jìn)行更新。

上述依據(jù)接收到的網(wǎng)頁(yè)代碼文件對(duì)目標(biāo)網(wǎng)頁(yè)代碼文件進(jìn)行更新可以包括：將接收到的網(wǎng)頁(yè)代碼文件和目標(biāo)網(wǎng)頁(yè)代碼文件進(jìn)行比對(duì)，將目標(biāo)網(wǎng)頁(yè)代碼文件中與接收到的網(wǎng)頁(yè)代碼文件中不同的代碼，更新為接收到的網(wǎng)頁(yè)代碼文件相應(yīng)的代碼。

具體的，可以利用javascript對(duì)目標(biāo)網(wǎng)頁(yè)代碼文件中與接收到的網(wǎng)頁(yè)代碼文件中不同的代碼，例如文字、圖片的存儲(chǔ)路徑等等進(jìn)行更新。

若服務(wù)器同時(shí)接收到多個(gè)終端發(fā)送的具有同一標(biāo)識(shí)ID的網(wǎng)頁(yè)代碼文件，可以先將具有同一標(biāo)識(shí)ID的網(wǎng)頁(yè)代碼文件進(jìn)行合并，獲得一個(gè)整合后的網(wǎng)頁(yè)代碼文件，再將服務(wù)器預(yù)先存儲(chǔ)的相應(yīng)網(wǎng)頁(yè)代碼文件與該整合后的網(wǎng)頁(yè)代碼文件進(jìn)行比對(duì)，假設(shè)服務(wù)器同時(shí)接收到具有同一標(biāo)識(shí)ID的網(wǎng)頁(yè)代碼文件有3個(gè)，分別為網(wǎng)頁(yè)代碼文件A、網(wǎng)頁(yè)代碼文件B以及網(wǎng)頁(yè)代碼文件C，假設(shè)網(wǎng)頁(yè)代碼文件A中包含的代碼如下：

<meta name＝"Description"content＝"由騰訊游戲獨(dú)家代理的第一人稱(chēng)視角射擊游戲網(wǎng)游。">

<meta name＝"Keywords"content＝"paladinsOL，paladins，槍火游俠，槍火游俠Online，槍火游俠OL，現(xiàn)代戰(zhàn)爭(zhēng)，射擊游戲，Call of Duty，Call of Duty Online，Call of Duty Online現(xiàn)代戰(zhàn)爭(zhēng)，黑色行動(dòng)，普萊斯，幽靈，肥皂，ghost，paladinsOL視頻，paladinsOL官網(wǎng)，paladinsOL游戲下載">

假設(shè)網(wǎng)頁(yè)代碼文件B中包含的代碼如下：

<meta name＝"Description"content＝"由騰訊游戲獨(dú)家代理的第一人稱(chēng)視角射擊游戲網(wǎng)游。">

<meta name＝"Keywords"content＝"paladinsOL，paladins，槍火游俠，槍火游俠Online，槍火游俠OL，現(xiàn)代戰(zhàn)爭(zhēng)，現(xiàn)代戰(zhàn)爭(zhēng)OL，F(xiàn)PS，F(xiàn)PS網(wǎng)游，射擊游戲，Call of Duty，Call of Duty Online，Callof Duty Online現(xiàn)代戰(zhàn)爭(zhēng)，黑色行動(dòng)，普萊斯，幽靈，肥皂，ghost，paladinsOL視頻，paladinsOL官網(wǎng)，paladinsOL游戲下載">

假設(shè)網(wǎng)頁(yè)代碼文件C中包含的代碼如下：

<meta name＝"Description"content＝"《槍火游俠Online》是由騰訊游戲獨(dú)家代理的第一人稱(chēng)視角射擊游戲網(wǎng)游。">

<meta name＝"Keywords"content＝"paladinsOL，paladins，槍火游俠，槍火游俠Online，槍火游俠OL，現(xiàn)代戰(zhàn)爭(zhēng)，射擊游戲，Call of Duty，Call of Duty Online，Call of Duty Online現(xiàn)代戰(zhàn)爭(zhēng)，黑色行動(dòng)，普萊斯，幽靈，肥皂，ghost，paladinsOL視頻，paladinsOL官網(wǎng)，paladinsOL游戲下載">

通過(guò)比對(duì)網(wǎng)頁(yè)代碼文件A、網(wǎng)頁(yè)代碼文件B以及網(wǎng)頁(yè)代碼文件C，認(rèn)為區(qū)別與另外兩個(gè)網(wǎng)頁(yè)文件代碼中的內(nèi)容是更新部分(已經(jīng)用加粗下劃線突出更新部分)，從而確定出上述“現(xiàn)代戰(zhàn)爭(zhēng)OL，F(xiàn)PS，F(xiàn)PS網(wǎng)游，射擊游戲”以及“《槍火游俠Online》是”是更新部分，則整合后的網(wǎng)頁(yè)代碼文件如下：

<meta name＝"Description"content＝"《槍火游俠Online》是由騰訊游戲獨(dú)家代理的第一人稱(chēng)視角射擊游戲網(wǎng)游。">

<meta name＝"Keywords"content＝"paladinsOL，paladins，槍火游俠，槍火游俠Online，槍火游俠OL，現(xiàn)代戰(zhàn)爭(zhēng)，現(xiàn)代戰(zhàn)爭(zhēng)OL，F(xiàn)PS，F(xiàn)PS網(wǎng)游，射擊游戲，Call of Duty，Call of Duty Online，Call of Duty Online現(xiàn)代戰(zhàn)爭(zhēng)，黑色行動(dòng)，普萊斯，幽靈，肥皂，ghost，paladinsOL視頻，paladinsOL官網(wǎng)，paladinsOL游戲下載">

上述任一網(wǎng)頁(yè)中元素的編輯方法實(shí)施例中的網(wǎng)頁(yè)代碼文件中可以加入tdebug.js文件中的代碼。

下面對(duì)本發(fā)明實(shí)施例提供的網(wǎng)頁(yè)中元素的編輯裝置進(jìn)行介紹，下文描述的網(wǎng)頁(yè)中元素的編輯裝置可以與上文網(wǎng)頁(yè)中元素的編輯方法中的信令流程內(nèi)容相互對(duì)應(yīng)參照。

如圖7，為本申請(qǐng)實(shí)施例提供的一種網(wǎng)頁(yè)中元素的編輯裝置的結(jié)構(gòu)示意圖，該裝置包括：檢測(cè)位置模塊71、獲取代碼模塊72、顯示模塊73、接收更新信息模塊74以及更新模塊75，其中：

檢測(cè)位置模塊71，用于檢測(cè)網(wǎng)頁(yè)中的觸按位置。

獲取代碼模塊72，用于依據(jù)所述觸按位置，從所述網(wǎng)頁(yè)相應(yīng)的網(wǎng)頁(yè)代碼文件中獲取目標(biāo)代碼，所述目標(biāo)代碼關(guān)聯(lián)有所述觸按位置所指向的待編輯元素。

顯示模塊73，用于顯示元素編輯界面。

接收更新信息模塊74，用于通過(guò)所述元素編輯界面，接收更新信息，所述更新信息用于將所述待編輯元素替換為更新元素。

更新模塊75，用于依據(jù)所述更新信息更新所述目標(biāo)代碼。

可選的，上述網(wǎng)頁(yè)中的元素的編輯裝置中的獲取代碼模塊72可以包括：

第一確定單元，用于從所述網(wǎng)頁(yè)預(yù)定義的至少一個(gè)位置區(qū)域中，確定所述觸按位置對(duì)應(yīng)的目標(biāo)位置區(qū)域，其中一個(gè)位置區(qū)域相應(yīng)的元素通過(guò)相應(yīng)的代碼呈現(xiàn)；

篩選單元，用于從所述目標(biāo)位置區(qū)域?qū)?yīng)的代碼中，篩選出目標(biāo)代碼。

可選的，上述網(wǎng)頁(yè)中的元素的編輯裝置中的篩選單元包括：

第一獲取子單元，用于從所述目標(biāo)代碼區(qū)域?qū)?yīng)的代碼中，獲取待分析代碼。

第一判斷子單元，用于判斷所述待分析代碼中是否包含元素標(biāo)簽屬性，所述元素標(biāo)簽屬性用于指示相應(yīng)元素的元素類(lèi)型。

第一確定子單元，用于當(dāng)所述待分析代碼中包含所述元素標(biāo)簽屬性時(shí)，確定所述待分析代碼為所述目標(biāo)代碼。

可選的，上述網(wǎng)頁(yè)中的元素的編輯裝置中的篩選單元還包括：

第二判斷子單元，用于當(dāng)所述待分析代碼中不包括所述元素標(biāo)簽屬性時(shí)，判斷所述待分析代碼的前一代碼是否為開(kāi)始標(biāo)簽；

第一返回子單元，用于當(dāng)所述待分析代碼的前一代碼不是開(kāi)始標(biāo)簽時(shí)，將所述待分析代碼的前一代碼作為待分析代碼，返回判斷所述待分析代碼中是否包含元素標(biāo)簽屬性的步驟。

可選的，上述網(wǎng)頁(yè)中的元素的編輯裝置中的篩選單元還包括：

第三判斷子單元，用于當(dāng)所述待分析代碼中不包括所述元素標(biāo)簽屬性時(shí)，判斷所述待分析代碼的后一代碼是否為結(jié)束標(biāo)簽；

第二返回子單元，用于當(dāng)所述待分析代碼的后一代碼不是結(jié)束標(biāo)簽時(shí)，將所述后一代碼作為待分析代碼，返回判斷所述待分析代碼中是否包含元素標(biāo)簽屬性的步驟。

可選的，上述網(wǎng)頁(yè)中的元素的編輯裝置中的篩選單元包括：

第二獲取子單元，用于獲取所述觸按位置相應(yīng)的待編輯元素；

第二確定子單元，用于從所述目標(biāo)位置區(qū)域相應(yīng)的代碼中，確定與所述待編輯元素對(duì)應(yīng)的目標(biāo)代碼。

可選的，上述網(wǎng)頁(yè)中的元素的編輯裝置中的第二獲取子單元包括：

確定子模塊，用于將所述目標(biāo)位置區(qū)域?qū)?yīng)的元素，確定為所述待編輯元素。

可選的，上述任一網(wǎng)頁(yè)中的元素的編輯裝置中的所述顯示模塊包括：

確定元素類(lèi)型單元，用于依據(jù)所述目標(biāo)代碼確定所述待編輯元素的目標(biāo)元素類(lèi)型；

確定界面單元，用于從預(yù)先設(shè)置的各元素類(lèi)型相應(yīng)的元素編輯界面中，確定所述目標(biāo)元素類(lèi)型對(duì)應(yīng)的元素編輯界面；

顯示單元，用于顯示所述目標(biāo)元素類(lèi)型對(duì)應(yīng)的元素編輯界面。

可選的，上述任一網(wǎng)頁(yè)中的元素的編輯裝置中的元素編輯界面展示有下載按鍵以及上傳按鍵，接收更新信息模塊包括：

下載單元，用于當(dāng)接收到所述下載按鍵被觸按指令時(shí)，下載所述待編輯元素相應(yīng)的內(nèi)容信息；

第一獲取單元，用于獲取對(duì)所述待編輯元素的內(nèi)容信息進(jìn)行編輯后的所述更新信息；

上傳單元，用于當(dāng)接收到所述上傳按鍵被觸按指令時(shí)，上傳所述更新信息。

可選的，上述任一網(wǎng)頁(yè)中的元素的編輯裝置中的上傳單元包括：

第四判斷子單元，用于接收到所述上傳按鍵被觸按指令時(shí)，判斷所述更新信息的屬性值是否小于等于預(yù)設(shè)閾值；

接收子單元，用于當(dāng)檢測(cè)到所述更新信息的屬性值小于等于所述預(yù)設(shè)閾值時(shí)，接收所述更新信息。

可選的，上述任一網(wǎng)頁(yè)中的元素的編輯裝置還包括：

觸發(fā)模塊，用于當(dāng)進(jìn)入元素編輯模式時(shí)，觸發(fā)所述確定位置模塊。

可選的，上述網(wǎng)頁(yè)中的元素的編輯裝置還包括：

接收指令模塊，用于接收退出元素編輯模式指令；

發(fā)送單元，用于將更新后的所述網(wǎng)頁(yè)代碼文件以及所述網(wǎng)頁(yè)代碼文件的標(biāo)識(shí)發(fā)送至云端服務(wù)器。

圖8示出了本發(fā)明實(shí)施例提供的包含網(wǎng)頁(yè)中的元素的編輯裝置的終端的硬件結(jié)構(gòu)框圖，參照?qǐng)D8，該終端可以包括：處理器81，通信接口82，存儲(chǔ)器83和通信總線84；

其中處理器81、通信接口82、存儲(chǔ)器83通過(guò)通信總線84完成相互間的通信；

可選的，通信接口82可以為通信模塊的接口，如GSM模塊的接口；

處理器81，用于執(zhí)行程序；

存儲(chǔ)器83，用于存放程序和數(shù)據(jù)；

程序可以包括程序代碼，所述程序代碼包括計(jì)算機(jī)操作指令；數(shù)據(jù)可以包括網(wǎng)頁(yè)代碼文件。

處理器81可能是一個(gè)中央處理器CPU，或者是特定集成電路ASIC(Application Specific Integrated Circuit)，或者是被配置成實(shí)施本發(fā)明實(shí)施例的一個(gè)或多個(gè)集成電路。

存儲(chǔ)器83可能包含高速RAM存儲(chǔ)器，也可能還包括非易失性存儲(chǔ)器(non-volatile memory)，例如至少一個(gè)磁盤(pán)存儲(chǔ)器。

其中，程序可具體用于：

檢測(cè)網(wǎng)頁(yè)中的觸按位置；

依據(jù)所述觸按位置，從所述網(wǎng)頁(yè)相應(yīng)的網(wǎng)頁(yè)代碼文件中獲取目標(biāo)代碼，所述目標(biāo)代碼關(guān)聯(lián)有所述觸按位置所指向的待編輯元素；

顯示元素編輯界面；

通過(guò)所述元素編輯界面，接收更新信息，所述更新信息用于將所述待編輯元素替換為更新元素；

依據(jù)所述更新信息更新所述目標(biāo)代碼。

最后，還需要說(shuō)明的是，在本文中，諸如第一和第二等之類(lèi)的關(guān)系術(shù)語(yǔ)僅僅用來(lái)將一個(gè)實(shí)體或者操作與另一個(gè)實(shí)體或操作區(qū)分開(kāi)來(lái)，而不一定要求或者暗示這些實(shí)體或操作之間存在任何這種實(shí)際的關(guān)系或者順序。而且，術(shù)語(yǔ)“包括”、“包含”或者其任何其他變體意在涵蓋非排他性的包含，從而使得包括一系列要素的過(guò)程、方法、物品或者設(shè)備不僅包括那些要素，而且還包括沒(méi)有明確列出的其他要素，或者是還包括為這種過(guò)程、方法、物品或者設(shè)備所固有的要素。在沒(méi)有更多限制的情況下，由語(yǔ)句“包括一個(gè)……”限定的要素，并不排除在包括所述要素的過(guò)程、方法、物品或者設(shè)備中還存在另外的相同要素。

本說(shuō)明書(shū)中各個(gè)實(shí)施例采用遞進(jìn)的方式描述，每個(gè)實(shí)施例重點(diǎn)說(shuō)明的都是與其他實(shí)施例的不同之處，各個(gè)實(shí)施例之間相同相似部分互相參見(jiàn)即可。

對(duì)所公開(kāi)的實(shí)施例的上述說(shuō)明，使本領(lǐng)域?qū)I(yè)技術(shù)人員能夠?qū)崿F(xiàn)或使用本申請(qǐng)。對(duì)這些實(shí)施例的多種修改對(duì)本領(lǐng)域的專(zhuān)業(yè)技術(shù)人員來(lái)說(shuō)將是顯而易見(jiàn)的，本文中所定義的一般原理可以在不脫離本申請(qǐng)的精神或范圍的情況下，在其它實(shí)施例中實(shí)現(xiàn)。因此，本申請(qǐng)將不會(huì)被限制于本文所示的這些實(shí)施例，而是要符合與本文所公開(kāi)的原理和新穎特點(diǎn)相一致的最寬的范圍。