基于Ｂ／Ｓ架構的Ｗｅｂ網(wǎng)頁結構檢測應用研究

陳圣儉　孫明濤

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

關鍵詞：正則表達式；網(wǎng)頁結構樹；檢測；文檔對象模型；屬性元素

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

1 Web頁面概述

1.1 HTML簡介

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

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

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

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

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

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

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

1.2 DOM簡介

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

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

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

1.3 總結

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

2 網(wǎng)頁結構的檢測

2.1 對于W3C Markup Validation Service的認識

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

2.2 Web結構檢測的設計思想

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

2.3 源代碼的過濾體系

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

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

2.4 網(wǎng)頁結構樹的構造算法

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

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

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

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

① 判斷第1個字符是否是“＜”，如果是，則可能是標簽入口，需要取下1個字符確認；

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

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

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

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

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

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

(2) 當進入Tag標簽狀態(tài)機后，開始Tag標簽的解析：

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

② 如果遇到“＜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é)點的結束，“＜/body＞”整棵DOM樹建立完畢。DOM樹結構可用圖2表示。

2.6 網(wǎng)頁結構的檢測

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

例如在檢測頁面時，首先取定body的子節(jié)點的個數(shù)，如果等于1，則判斷其子節(jié)點的孩子節(jié)點，從而判斷出頁面的布局?？梢岳萌缦麓a：其中parserCompare()函數(shù)為將獲取到的值與標準值進行匹配的函數(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)頁的各部分框架分析出來后，取得各部分對應的color和font等的值，對于＜style＞和＜div＞中的css信息，通過正則表達式獲取style信息；然后分析字符串，得到相應的命名；再結合標準庫中的color，font 等標準值，匹配并檢測得到相關信息。

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

司內(nèi)部標準規(guī)范設計。

3 結 語

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

參考文獻

［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建站標準.北京:人民郵電出版社,2007.

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

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

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

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

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

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

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

作者簡介

陳圣儉 男，1966年出生，博士后，教授，博士生導師。主要研究方向為計算機測控技術。

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