python爬蟲——web前端基礎HTML+CSS
學習爬蟲最好還是先去系統的學習一下HTML5+CSS3,本篇文章主要是簡單的介紹HTML,CSS,JavaScript,Xpath和Json這五部分。
一、HTML
html是什麼，在這就不作介紹。首先介紹一下它的用處。
- 設定文字格式。如：標題、字號、文字顏色、段落等等。
- 建立列表。包括有序列表和無序列表。
- 插入圖片和媒體。
- 建立表格。
基本結構：
html基本結構包括：
`<html>
<head>
<meta>內容</meta>
</head>
<body> 若其結構比作某一生物，則該基本結構定義了該生物的種類，該生物的頭，名字，身體以及有關重要部分。
<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這些強大的編譯器幫助學習。自己也在學習階段，若有錯誤，不吝賜教！