1. 程式人生 > >python爬蟲——web前端基礎HTML+CSS

python爬蟲——web前端基礎HTML+CSS

學習爬蟲最好還是先去系統的學習一下HTML5+CSS3,本篇文章主要是簡單的介紹HTML,CSS,JavaScript,XpathJson這五部分。

一、HTML
html是什麼,在這就不作介紹。首先介紹一下它的用處。

  1. 設定文字格式。如:標題、字號、文字顏色、段落等等。
  2. 建立列表。包括有序列表和無序列表。
  3. 插入圖片和媒體。
  4. 建立表格。

基本結構:
html基本結構包括:

  `<html>  
   <head>
        <meta>內容</meta> 
   </head>  
   <body>
</body> </html>

若其結構比作某一生物,則該基本結構定義了該生物的種類,該生物的頭,名字,身體以及有關重要部分。
<html></html>決定了該程式碼是html檔案,即說明各類,
<head></head>申明頭部。
<body></body>即主體部分。
<meta></meta>在其頭部,是重要部分。即提供有關頁面的元資訊,搜尋引擎的關鍵詞就是元資訊的內容,因此<meta></meta>是用來概述本頁面的資訊的。

格式標記:
<br>:強制換行
<p>:換段落
<center>:居中標記
<ul>:建立無序列表
<ol>:建立有序列表
<li>:建立列表,<li>用在<ul><ol>裡面。
<div>:分割槽顯示

文字標記:
<hn>:標題標記。n的大小為1~6,最多6級標題。
<font>:字型設定標記。字型大小(size)、顏色(color)、字型(face)
<b>:字型加粗標記
<i>:斜體標記
<sub>

:下標標記
<sup>:上標標記
<cite>:引用方式的字型
<strong>:表示強調,一般用於粗體
<em>:也表示強調,一般用於斜體
<small>:小型字型標記
<big>:大型字型標記
<u>:下劃線標記
影象標記:
<img>:影象標記。<img>的屬性有src,width,height,border,alt。src用來指定檔案的路徑,width,height,border都是寬度設定,很容易理解。alt屬性是爬蟲的重要部分,對於爬蟲學習來說有三個作用:1.滑鼠移動到載入完的圖片上,會顯示該圖片的文字資訊。2.圖片載入失敗就直接顯示文字。3.寫爬蟲時可根據alt屬性的文字抓取想要的圖片。
超連結:
<a>:超連結標記。
<a herf="連結地址" target="開啟方式" name="頁面名字" >連結文字或圖片</a>

herf :連結的地址
target: 值為_blank時,在新的視窗開啟;值為_self(預設)時,在當前視窗開啟;值為_parent時,在父視窗開啟;值為_top時在頂層視窗開啟。具體效果可以自己嘗試。

建立表格:
表格的基本結構有<table>,<caption>,<tr>,<td>,<th>這些標記。
它們有些屬性是相同的,如width,height,align(對齊方式),也是最基礎的屬性,所以我們記住他們的不同就好。

<table>屬性:
cellspacing:單元格的間距
cellpadding:單元格內容與單元格邊框的距離
rules:控制單元格之間的分割線的顯示。none(無),all(全有),rows(僅有行有),clos(僅有列有)

<caption>屬性:
確定標題在表格中的位置,top,bottom,left,right.
<tr>:定義表格的行
‘ bgcolor:背景色; align:垂直對齊方式; valign:水平對齊方式

<td>:定義表格的資料
<th>:表頭
<td>,<th>共有的屬性bgcolor,align,valign,width,height;
rowspan:設定單元格所佔行數;clospan:設定單元格所佔列數

樣例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>python爬蟲之Web前端基礎</title>
</head>
<body style="color: lightslategray">
<br>
<<------------------------------格式標記----------------------------->>
<br>
<p>段落標記</p>
<center>
    <p>段落標記且居中</p>
</center>

<ul>
    <li>無序</li>
    <li>列表</li>
</ul>
<ol>
    <li>有序</li>
    <li>列表</li>
</ol>
<<------------------------------------------------------------------>>
<div>
    <p>web</p>
    <div style="color: blue">前端基礎</div>
</div>
<br>
<<------------------------------文字標記----------------------------->>
<h1>一、html</h1>
<h2>格式標記</h2>
    <h3>1、列表</h3>
    <h3>2、段落</h3>
    <h3>3、分割槽</h3>
<h2>文字標記</h2>
    <h3>1、標題</h3>
         <big>標題分為6個級別</big>
    <h3>2、字型</h3>
<h2>影象標記</h2>
    <h3>1、img</h3>
        <h4>a. src</h4>
        <h4>b. width</h4>
        <h4>c. alt</h4>
            <h5>3個作用:</h5>
                 <p>1.滑鼠移動到載入完的圖片上,會顯示該圖片的文字資訊。2.圖片載入失敗就直接<em><u><顯示/u>文字</em>。3.寫<strong>爬蟲</strong>時可根據alt屬性的文字抓取想要的圖片。</p>
<<------------------------------超連結使用和表格----------------------------->>
<br>
<a href="http://blog.csdn.net/qq_35793358/article/details/78074174" target="_blank">Python思維導圖</a>
<br>
<table rules="all" width="60px" height="30px">
    <tr>html</tr>
    <th>python</th>
    <th>爬蟲</th>
</table>
</body>
</html>

二、CSS
css可以理解用來裝飾、美化HTML顯示的。
使用css有三種用法:

  • 內聯樣式表
  • 嵌入式樣式表
  • 外部樣式表

    屬性介紹
    1、顏色屬性

     顏色可用英文,十六進位制,RGB,RGBA表示。
    

    2、字型屬性:

     font-size:字型大小
     font-family:字型型別
     font-weight:字型加粗。取值可為英文名稱(normal,bold,boder,lighter)或為數字
    

    3、背景屬性:

     background-color:背景顏色
     background-image:背景圖片
     background-repeat:背景重複方式
     background-position:背景位置
    

    4、文字屬性:

     text-align:設定文字對齊方式
     line-height:設定文字行高
     text-indent:首先縮排
     letter-spacing:設定字元間距
    

    5、列表:

     list-style-type: 
     指明列表項的型別,屬性值有none(無標記)、disc(實心圓,預設值)、circle(空心圓)、square(實心方塊)、decimal(數字)、decimal-leading-zero(0開頭的數字)、lower-roman(小寫羅馬數字)、upper-roman(大寫羅馬數字)、lower-alpha(小寫字母)、upper-alpha(大寫字母)
    
     list-style-position: 
     列表項中的位置。inside(文字內,且環繞文字根據標記對齊);outside(與inside相反);inherit(繼承父元素list-style-position屬性)。 
    
     list-style-image:
     設定影象列表。屬性值包括url,inherit,none.
    

樣例:
程式碼改自《python爬蟲開發與實戰》

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>web前端基礎HTML+CSS</title>

<style>
h1
    {
        background-color: antiquewhite;
        color: aqua;
        text-align: center;
        font-size: 40px;
        font-family: "Bitstream Vera Sans Mono", Monaco, "Courier New", Courier, monospace;
    }
p
    {
        background-color: blue;
        text-indent: 50px;
        font-family: Times, "Times New Roman", serif;
    }
div
    {
        background-color: #ffe3f1;
    }

    ul.a {list-style-type: square;}
    ul.b {list-style-type: upper-roman;
    color: chartreuse;}
li.book {list-style-image: url("http://img.sccnn.com//simg/339/28714.jpg");
    list-style-position: inside;}
li.computer {list-style-image: url("http://img.sccnn.com//simg/338/44183.jpg");
    list-style-position: inside}

 p.ex{
        color: chocolate;
    }
</style>
</head>


<body>
<h1>CSS background-color演示</h1>
<div>該文字插入在div元素中
<p>自己的顏色背景</p>
    <p class="ex">ex的段落</p>
</div>
<p>無序列表例項</p>
<ul class="b">
    <li class="book">book</li>
    <li class="computer">computer</li>
    <li>tea</li>
    <li>Coca</li>
</ul>

</body>
</html>

可能覺得這麼多屬性記不住,其實編譯會自動補全的。可以用sublimeText,pycharm,notepad++,eclipse這些強大的編譯器幫助學習。自己也在學習階段,若有錯誤,不吝賜教!