陳圣儉　孫明濤

摘 要：隨著互聯(lián)網(wǎng)的普及，大型的跨國公司要求公司對內(nèi)對外的所有網(wǎng)站都遵循統(tǒng)一的框架結(jié)構(gòu)，因此為了判斷網(wǎng)頁結(jié)構(gòu)是否符合標(biāo)準(zhǔn)，需要對網(wǎng)頁結(jié)構(gòu)進(jìn)行檢測。Web結(jié)構(gòu)分析是指從Web文檔中自動分析網(wǎng)頁結(jié)構(gòu)的過程，檢測不符合標(biāo)準(zhǔn)的網(wǎng)頁。依據(jù)W3C Markup Validation Service的設(shè)計理念，基于DOM結(jié)構(gòu)樹和正則表達(dá)式的操作，以分析Web網(wǎng)頁結(jié)構(gòu)為基礎(chǔ)，提出了Web頁面結(jié)構(gòu)檢測的設(shè)計思想。在解析Html和CSS代碼的基礎(chǔ)上，網(wǎng)頁結(jié)構(gòu)檢測正確率達(dá)到80%以上。

關(guān)鍵詞：正則表達(dá)式；網(wǎng)頁結(jié)構(gòu)樹；檢測；文檔對象模型；屬性元素

中圖分類號：TP311文獻(xiàn)標(biāo)識碼：A

文章編號：1004 373X(2009)02 135 04

Application and Research on Web Structure Inspection Based on B/S Construction

CHEN Shengjian,SUN Mingtao

(Computer Science and Technology College,North China Electronic Power University,Beijing,102206,China)

Abstract：As the popularization of Internet,like the multinational companies,the company is asked to follow the unified guideline to all the Website,in order to judge whether the Webpage is consistent with the guideline,the Webpage′s structure is needed to inspect.Web structure′s analysis refers to the course of auto－analyzing Webpage′s structure,and inspect the page that is not with the guideline.Based on W3C Markup Validation Service,the DOM tree and regular expression,with analyzing the Webpage′s structure,the designing idea of how to inspect Webpage′s structure is brought forward.Based on the Html parse and CSS code parse,the correct rate on Web structure inspection is up to 80%.

Keywords：regular expression;web page structure tree;inspection;document object model;attribute element

0 引 言

隨著網(wǎng)絡(luò)的發(fā)展，互聯(lián)網(wǎng)上信息量的激增，在網(wǎng)頁上合理地布局信息的格式變得非常重要，因此Web結(jié)構(gòu)的設(shè)計越來越受到開發(fā)者的重視。在一般情況下，頁面的框架被大多數(shù)開發(fā)者定義為3部分(上、中、下)或者有規(guī)律的幾部分，對于大型的跨國公司，他們要求位于不同國家的各個部門的所有網(wǎng)站都遵循統(tǒng)一的標(biāo)準(zhǔn)結(jié)構(gòu)。根據(jù)某跨國公司中國研究院制定的網(wǎng)頁設(shè)計標(biāo)準(zhǔn)，依據(jù)W3C的Markup Validation Service［1］設(shè)計思想，提出了Web頁面結(jié)構(gòu)檢測系統(tǒng)的設(shè)計方案，分別對各部門的網(wǎng)站進(jìn)行半自動檢測，省略了人工測試的隨意性，同時使開發(fā)者的設(shè)計更加規(guī)范。

1 Web頁面概述

1.1 HTML簡介

HTML(Hypertext Markup Language)超文本標(biāo)記語言［2］，被用來結(jié)構(gòu)化信息，并通過瀏覽器表現(xiàn)信息設(shè)計的內(nèi)容，作為構(gòu)造網(wǎng)頁的通用語言，具有簡單、多樣、靈活的特性。

Web上的數(shù)據(jù)大部分是以HTML的形式出現(xiàn)的。HTML文檔由標(biāo)記(TAG)和元素組成。HTML標(biāo)記確定了瀏覽器所顯示文檔元素的格式，大多數(shù)HTML標(biāo)記是成對出現(xiàn)的，它們分別用作開始標(biāo)記和結(jié)束標(biāo)記，HTML的結(jié)束標(biāo)記與開始標(biāo)記的惟一區(qū)別是多了斜杠“/”。HTML標(biāo)記放在尖括號里，如 ＜HTML＞是位于HTML文檔中的第一個條目，HTML文檔由標(biāo)題＜HEAD＞和主體＜BODY＞兩部分組成。HTML文件的基本結(jié)構(gòu)為［3］：

(1) ＜HTML＞和＜/HTML＞是HTML文件的首標(biāo)記和最后一個標(biāo)記，用來表示HTML文件的開始與結(jié)束；

(2) ＜head＞和＜/head＞標(biāo)記是第二個出現(xiàn)的，用來表示HTML文件的頭區(qū)域；

(3) ＜title＞和＜/title＞標(biāo)記用來表示HTML文件的標(biāo)題，出現(xiàn)在瀏覽器的最頂端左上角；

(4) ＜body＞和＜/body＞表示文件的主題信息，也就是正文。是Web結(jié)構(gòu)分析的主體部分。

可以根據(jù)HTML的屬性，靈活地擴(kuò)展HTML元素的能力。

1.2 DOM簡介

DOM(Document Object Model) ［1］是一個獨立于平臺和語系的接口，它是相關(guān)于文檔的一系列對象列表，通過操作這些對象，可以對XML文檔進(jìn)行讀取、遍歷、修改、添加和刪除操作。在DOM中最基本的對象是Node,從Node中又派生出了幾種具體的節(jié)點類型。對應(yīng)于XML中各種相應(yīng)的節(jié)點［4］。在使用DOM加載XML文檔后，在內(nèi)存中形成一個節(jié)點樹，也就是相應(yīng)的Web結(jié)構(gòu)樹，由XML的標(biāo)簽節(jié)點形成的對象模型組成。這些對象包括相應(yīng)的屬性、方法，以對數(shù)據(jù)進(jìn)行操作。

在DOM規(guī)范的設(shè)計思想下，HTML跟XML一樣是一種樹形結(jié)構(gòu)的文檔，＜HTML＞是根(Root)節(jié)點，＜head＞，＜body＞是＜HTML＞的子節(jié)點(Children Node)，互相之間是兄弟節(jié)點(Sibling Node)；＜body＞下面才是子節(jié)點＜table＞，＜div＞，＜span＞，＜p＞等。

所謂樣本文檔分析［5］，就是把文檔輸入HTML分析器(Parser)，按照文檔對象模型生成一種樹形結(jié)構(gòu)表示。DOM 是W3C 制定的一種獨立于平臺和具體編程語言的API 接口標(biāo)準(zhǔn)。它提供了一個標(biāo)準(zhǔn)的對象集合用以表示HTML或XML文檔及其各組成部分(即對象)之間的關(guān)系，并為存取和處理這些對象提供了標(biāo)準(zhǔn)的編程接口。

1.3 總結(jié)

雖然HTML語言具有一系列的優(yōu)點，便于表達(dá)Web頁面信息，但是HTML語言同樣存在缺點。HTML的“標(biāo)記”只是告訴瀏覽器軟件如何顯示所定義的信息，卻不包含任何語義，因此由HTML語言所表述的Web頁面經(jīng)過瀏覽器分析后只適合人們?yōu)g覽，不適合作為一種數(shù)據(jù)交換的方式由機(jī)器處理［4］。在此以文檔對象模型為基礎(chǔ)，構(gòu)造一棵DOM樹，把需要的信息在DOM樹的不同層次中的路徑作為信息抽取的標(biāo)記，根據(jù)父子節(jié)點和兄弟節(jié)點的關(guān)系的基本原理為基礎(chǔ)，設(shè)計了一種檢測學(xué)習(xí)算法來半自動地提取并檢測Web頁面框架。

2 網(wǎng)頁結(jié)構(gòu)的檢測

2.1 對于W3C Markup Validation Service的認(rèn)識

W3C的標(biāo)記驗證服務(wù)，是在SGML的基礎(chǔ)上，將待驗證頁面的HTML同DTD(Document Type Definition)［1］進(jìn)行比較，檢測HTML語法隨意性的缺點，提示正確的HTML文檔定義格式。這種方法可以確保頁面HTML的有效性，從而使頁面能夠在所有的瀏覽器中正常的顯示，同時給出開發(fā)者或相關(guān)人員有針對性的提示。

2.2 Web結(jié)構(gòu)檢測的設(shè)計思想

根據(jù)網(wǎng)頁的URL，利用基于HTTP協(xié)議的WebRequest，WebResponse［6］類操作，可以獲取頁面對應(yīng)的HTML和CSS源代碼的字符流，根據(jù)W3C的標(biāo)記驗證服務(wù)對網(wǎng)頁代碼進(jìn)行相應(yīng)的檢測，并且糾正其中的錯誤，然后將源代碼構(gòu)造成DOM樹；根據(jù)制定的檢測標(biāo)準(zhǔn)(主要是網(wǎng)頁框架的限制標(biāo)準(zhǔn)值)，提取源代碼中對應(yīng)的屬性值，再者根據(jù)兄弟節(jié)點和父子節(jié)點之間的聯(lián)系，分析原始網(wǎng)頁的框架，從而匹配該網(wǎng)頁是否符合給定的標(biāo)準(zhǔn)；對于符合標(biāo)準(zhǔn)的框架給出其準(zhǔn)確值，對于不符合標(biāo)準(zhǔn)的框架則予以提示，并要求糾正。具體的流程圖如圖1所示。

2.3 源代碼的過濾體系

為了使頁面源代碼形成的DOM樹的結(jié)構(gòu)更加清晰，首先應(yīng)清理源代碼中的空格信息、注釋信息以及頁面內(nèi)容信息和多余的操作信息。

對于空格信息和Js信息可以利用正則表達(dá)式快速、精確的清除或者替換(部分空格要保留，用作結(jié)束標(biāo)識位)；對于注釋信息可以利用字符串匹配的判斷規(guī)則，清除＜!-- --!＞之間的內(nèi)容；＜style＞的內(nèi)容應(yīng)利用正則表達(dá)式快速取出，同CSS文件相似，需要獲取color，font以及頁面框架涉及到的寬、高等信息；對于tag標(biāo)簽內(nèi)的style屬性值，可以在Dom樹構(gòu)造完成后，直接獲取。

2.4 網(wǎng)頁結(jié)構(gòu)樹的構(gòu)造算法

在構(gòu)造DOM樹的過程中，可以利用HTML頁面的Tag的Element特征，采用標(biāo)記匹配和回溯相結(jié)合的方法構(gòu)造Web文檔結(jié)構(gòu)樹［7］。這是因為大多數(shù)HTML標(biāo)記是成對出現(xiàn)的，在起始標(biāo)記和結(jié)束標(biāo)記之間，包括網(wǎng)頁描述屬性信息和網(wǎng)頁內(nèi)容信息，如＜td width = "393"＞＜fontcolor="# 666666"＞＜img src="" width="393"＞＜/font＞＜/td＞。在起始標(biāo)記＜td＞和結(jié)束標(biāo)記＜/td＞之間的width ="393"＞＜font color="#666666"＞＜img src="" width="393"＞＜/font＞是屬性信息，＜img src="" width="393"＞是內(nèi)容信息。在構(gòu)造文檔結(jié)構(gòu)樹時，需要對Tag標(biāo)記進(jìn)行分析，并將屬性作為節(jié)點信息。由于HTML的隨意性，它的規(guī)范性差，所以在對代碼進(jìn)行清理后，還要對剩余代碼進(jìn)行規(guī)范化整理，比較實用的Tidy工具即可實現(xiàn)該功能。如果主要是對框架內(nèi)容的抽取，則需要考慮HTML的標(biāo)記主要有＜STYLE＞,＜STYLE＞,＜BODY＞,＜/BODY＞,＜TABLE＞,＜/TABLE＞,＜DIV＞,＜/DIV＞,＜TR＞,＜/TR＞,＜TD＞,＜/TD＞,＜A＞,＜/A＞,＜IMG＞。對于其他的HTML標(biāo)記可視為無用HTML標(biāo)記，在程序處理中將忽略對這些標(biāo)記的處理。網(wǎng)頁文檔結(jié)構(gòu)樹的每個結(jié)點對應(yīng)1個Tag標(biāo)記,因此構(gòu)建DOM樹的前提條件是正確地讀取標(biāo)記，分析開始標(biāo)記、結(jié)束標(biāo)記和沒有得到匹配的標(biāo)記。結(jié)點對應(yīng)的Tag開始與結(jié)束標(biāo)記之間的內(nèi)容存在Tag Node類中［8］。

2.5 網(wǎng)頁代碼檢測的過程

根據(jù)檢測需要，篩選tag標(biāo)簽信息，保留tag標(biāo)記和element元素。在構(gòu)造過程中，借鑒HtmlParser［9］的設(shè)計思想，過濾HTML中的tag標(biāo)簽，將＜HTML＞＜/HTML＞之間的部分tag標(biāo)簽構(gòu)造成DOM樹；這種構(gòu)造DOM樹的算法，在讀取過程中可能產(chǎn)生部分重復(fù)，因此應(yīng)該進(jìn)一步優(yōu)化。具體的算法設(shè)計為：

(1) 讀入獲取到的字符流源文件，設(shè)置狀態(tài)機(jī)；

① 判斷第1個字符是否是“＜”，如果是，則可能是標(biāo)簽入口，需要取下1個字符確認(rèn)；

② 如果不是，設(shè)置狀態(tài)機(jī)開始解析一個Node，如果是“＜”，繼續(xù)讀取下一字符；

③ 根據(jù)＜/HTML＞判斷是否到達(dá)頁尾，如果是則產(chǎn)生一個Node返回；

④ 如果讀取到“%”，則說明是JSP(Java Server Page) ［10］標(biāo)簽，進(jìn)入JSP狀態(tài)機(jī)去解析；

⑤ 如果讀取到“？”，則說明是XML標(biāo)簽，進(jìn)入XML狀態(tài)機(jī)去解析；

⑥ 如果讀取到“/”或任何字符，說明是Tag標(biāo)簽，進(jìn)入Tag標(biāo)簽狀態(tài)機(jī)去解析；

⑦ 如果讀取到“！”，則說明進(jìn)入一個注釋標(biāo)簽，需要再讀取一個字符，如果到頁尾，則產(chǎn)生一個Node返回，如果字符為”＞”則生成一個Remark Node返回，否則，回溯一個字符，再判斷字符如果是“-“則回溯一個字符，進(jìn)入Remark狀態(tài)機(jī)去解析，如果不是，則回退一個字符進(jìn)入Tag狀態(tài)機(jī)去解析。

(2) 當(dāng)進(jìn)入Tag標(biāo)簽狀態(tài)機(jī)后，開始Tag標(biāo)簽的解析：

① 如何讀取到“＜body”，則將body插入隊列，以body為父節(jié)點開始構(gòu)造樹；

② 如果遇到“＜table”，則將table作為body的第一個孩子節(jié)點插入到樹中；

③ 繼續(xù)讀取，如果遇到“＜tr”，則將tr作為table的第一個孩子節(jié)點插入到樹中；

④ 如果遇到“table”，則將table作為body的第二個孩子節(jié)點(前一個table的右兄弟節(jié)點插入樹中)；

⑤ 繼續(xù)讀取，如果遇到“td”，則將td作為tr的第一個孩子節(jié)點插入樹中；

⑥ 如果遇到“＜tr”，則將其作為tr的兄弟節(jié)點，table的孩子節(jié)點插入樹中；

⑦ 繼續(xù)讀取，如果是“td”，則將其作為td的兄弟節(jié)點(tr的孩子節(jié)點)插入樹中。

以此遞歸，直到遇到“＜/”，表示每一節(jié)點的結(jié)束，“＜/body＞”整棵DOM樹建立完畢。DOM樹結(jié)構(gòu)可用圖2表示。

2.6 網(wǎng)頁結(jié)構(gòu)的檢測

具體的匹配檢測需要根據(jù)實際的標(biāo)準(zhǔn)頁面結(jié)構(gòu)，利用HTML中的兄弟節(jié)點和父子節(jié)點的關(guān)系，由兄弟節(jié)點確定頁面的各個子框架結(jié)構(gòu)，然后再根據(jù)子框架下的兄弟節(jié)點和父子節(jié)點的屬性值(例如width，height等)判斷該框架是否符合給定的標(biāo)準(zhǔn)。

例如在檢測頁面時，首先取定body的子節(jié)點的個數(shù)，如果等于1，則判斷其子節(jié)點的孩子節(jié)點，從而判斷出頁面的布局?？梢岳萌缦麓a：其中parserCompare()函數(shù)為將獲取到的值與標(biāo)準(zhǔn)值進(jìn)行匹配的函數(shù)，利用遞歸操作，分析各個部分的框架。

if(node.Children!=null&&node.Children.Count;＞0)

{

parserLogoCompare(node.FirstChild);

start.Add(tag.StartPosition);

}

INode siBlingNode = tag.NextSibling;

while (siBlingNode != null)

{

parserCompare(siBlingNode);

paserData(siBlingNode);

siBlingNode = siBlingNode.NextSibling;

}

將網(wǎng)頁的各部分框架分析出來后，取得各部分對應(yīng)的color和font等的值，對于＜style＞和＜div＞中的css信息，通過正則表達(dá)式獲取style信息；然后分析字符串，得到相應(yīng)的命名；再結(jié)合標(biāo)準(zhǔn)庫中的color，font 等標(biāo)準(zhǔn)值，匹配并檢測得到相關(guān)信息。

根據(jù)制定的標(biāo)準(zhǔn)以及DTD的規(guī)定，將不同的提示信息綁定到頁面顯示中，將不同的審核數(shù)據(jù)綁定不同的顏色。這樣，用戶在輸入網(wǎng)址之后，就可以得到頁面結(jié)構(gòu)的相關(guān)信息，根據(jù)公

司內(nèi)部標(biāo)準(zhǔn)規(guī)范設(shè)計。

3 結(jié) 語

參照W3C Markup Validation Service分析HTML的規(guī)范性檢測方式，分析并檢測網(wǎng)頁結(jié)構(gòu)是否符合開發(fā)者制定的標(biāo)準(zhǔn)，對于不同開發(fā)者在同一模板下開發(fā)的規(guī)范性做出檢測。其中引入DOM樹結(jié)構(gòu)中的路徑表達(dá)式來定位HTML文檔中要分析的屬性，在分析頁面結(jié)構(gòu)的同時，可以利用關(guān)鍵字提取頁面的內(nèi)容信息，以及獲取鏈接頁面的各種信息，同時實現(xiàn)信息提取和Web檢測。

參考文獻(xiàn)

［1］W3C.Markup Validation Service.http://validator.w3.org/,2007.

［2］Lauren W,Arnaud LH,Vidur A,et al.Document Object Model(DOM) Level 1 Specification［EB/OL］.http://www.w3.org/TR/REC2DOM2Level21,1998,10(4).

［3］王建.Web建站標(biāo)準(zhǔn).北京:人民郵電出版社,2007.

［4］侯彥娥,蒲寶明.基于.NET的Web應(yīng)用系統(tǒng)通用平臺中構(gòu)件技術(shù)研究.沈陽:中國科學(xué)院沈陽計算技術(shù)研究所,2006.

［5］李效東.基于DOM 的Web信息提取.計算機(jī)學(xué)報,2002,25(5):526－533.

［6］Simon Robinson,K Scott Allen.C#高級編程.北京:清華大學(xué)出版社,2002.

［7］袁宇麗,左志宏.基于HTML的Web信息提取研究.成都:電子科技大學(xué),2006.

［8］陳瓊,蘇文健.基于網(wǎng)頁結(jié)構(gòu)樹的Web信息抽取方法.計算機(jī)工程,2005,31(20):54－55,140.

［9］王琳琳,劉知青.基于HtmlParser的Web信息提取技術(shù).北京:北京郵電大學(xué),2007.

［10］JavaServer Pages Technology.http://www.javasoft.com/products/jsp,SDN,2007.

作者簡介

陳圣儉 男，1966年出生，博士后，教授，博士生導(dǎo)師。主要研究方向為計算機(jī)測控技術(shù)。

孫明濤 男，1983年出生，碩士研究生。主要研究方向為計算機(jī)測控技術(shù)。