學習爬蟲最好還是先去系統的學習一下HTML5+CSS3,本篇文章主要是簡單的介紹HTML,CSS,JavaScript,Xpath和Json這五部分。
一、HTML
html是什麼，在這就不作介紹。首先介紹一下它的用處。
- 設置文本格式。如：標題、字號、文本顏色、段落等等。
- 創建列表。包括有序列表和無序列表。
- 插入圖片和媒體。
- 建立表格。
創建超鏈接。
這是我之前學習html5+css3的部分思維導圖
基本結構：
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這些強大的編譯器幫助學習。自己也在學習階段，若有錯誤，不吝賜教！