直接上代碼，然后加上自己的一些樣式調(diào)整，界面就完成啦：

那么接下來(lái)就是功能的實(shí)現(xiàn)了，我用PHP來(lái)寫(xiě)，首先第一步就是獲取網(wǎng)站的html代碼，獲取html代碼的方式也有很多，我就不一一介紹了，這里用了curl來(lái)獲取，傳入網(wǎng)站url就能得到html代碼啦：

private function get_html($url){
 
 $ch = curl_init();
 
 $timeout = 10;
 
 curl_setopt($ch, CURLOPT_URL, $url);
 
 curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
 
 curl_setopt($ch, CURLOPT_ENCODING, 'gzip');
 
 curl_setopt($ch, CURLOPT_USERAGENT, 'Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/34.0.1847.131 Safari/537.36');
 
 curl_setopt($ch, CURLOPT_CONNECTTIMEOUT, $timeout);
 
 $html = curl_exec($ch);
 
 return $html;
 
}

雖然得到了html代碼，但是很快你會(huì)遇到一個(gè)問(wèn)題，那就是編碼問(wèn)題，這可能讓你下一步的匹配無(wú)功而返，我們這里統(tǒng)一把得到的html內(nèi)容轉(zhuǎn)為utf8編碼：

$coding = mb_detect_encoding($html);
 
if ($coding != "UTF-8" || !mb_check_encoding($html, "UTF-8"))
 
 $html = mb_convert_encoding($html, 'utf-8', 'GBK,UTF-8,ASCII');

得到網(wǎng)站的html，要獲取文章的url，那么下一步就是要匹配該網(wǎng)頁(yè)下的所有a標(biāo)簽，需要用到正則表達(dá)式，經(jīng)過(guò)多次測(cè)試，最終得到一個(gè)比較靠譜的正則表達(dá)式，不管a標(biāo)簽下結(jié)構(gòu)多復(fù)雜，只要是a標(biāo)簽的都不放過(guò)：(最關(guān)鍵的一步)

$pattern = '|]*>(.*)|isU';
 
preg_match_all($pattern, $html, $matches);

匹配的結(jié)果在$matches中，它大概是這樣的一個(gè)多維素組：

array(2) { 
 [0]=> 
 array(*) { 
  [0]=>
  string(*) "完整的a標(biāo)簽"
  .
  .
  .
 }
 [1]=>
 array(*) {
  [0]=>
  string(*) "與上面下標(biāo)相對(duì)應(yīng)的a標(biāo)簽中的內(nèi)容"
 }
}

只要能得到這個(gè)數(shù)據(jù)，其他就完全可以操作啦，你可以遍歷這個(gè)素組，找到你想要a標(biāo)簽，然后獲取a標(biāo)簽相應(yīng)的屬性，想怎么操作就怎么操作啦，下面推薦一個(gè)類(lèi)，讓你更方便操作a標(biāo)簽：

$dom = new DOMDocument();
 
@$dom->loadHTML($a);//$a是上面得到的一些a標(biāo)簽
 
$url = new DOMXPath($dom);
 
$hrefs = $url->evaluate('//a');
 
for ($i = 0; $i < $hrefs->length; $i++) {
 
 $href = $hrefs->item($i);
 
 $url = $href->getAttribute('href'); //這里獲取a標(biāo)簽的href屬性
 
}

當(dāng)然，這只是一種方式，你也可以通過(guò)正則表達(dá)式匹配你想要的信息，把數(shù)據(jù)玩出新花樣。

得到并匹配得出你想要的結(jié)果，下一步當(dāng)然就是傳回前端將他們顯示出來(lái)啦，把接口寫(xiě)好，然后前端用js獲取數(shù)據(jù)，用jquery動(dòng)態(tài)添加內(nèi)容顯示出來(lái)：

var website_url = '你的接口地址';
$.getJSON(website_url,function(data){
 if(data){
  if(data.text == ''){
   $('#article_url').html('
暫無(wú)該文章鏈接
');
   return;
  }
  var string = '';
  var list = data.text;
  for (var j in list) {
    var content = list[j].url_content;
    for (var i in content) {
     if (content[i].title != '') {
      string += '' +
       '[' + list[j].website.web_name + ']' +
       '' + content[i].title + '' +
       '';
     }
    }
   }
  $('#article_url').html(string);
});

上最終效果圖：

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“PHP+HTML+JavaScript+Css如何實(shí)現(xiàn)爬蟲(chóng)開(kāi)發(fā)”這篇文章對(duì)大家有幫助，同時(shí)也希望大家多多支持創(chuàng)新互聯(lián)網(wǎng)站建設(shè)公司，，關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來(lái)學(xué)習(xí)!