学习爬虫最好还是先去系统的学习一下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这些强大的编译器帮助学习。自己也在学习阶段，若有错误，不吝赐教！