您的位置：首页 > 编程语言 > Python开发

python爬虫——web前端基础HTML+CSS

2017-10-20 18:29 1141 查看

学习爬虫最好还是先去系统的学习一下HTML5+CSS3,本篇文章主要是简单的介绍HTML,CSS,JavaScript,Xpath和Json这五部分。

一、HTML

html是什么，在这就不作介绍。首先介绍一下它的用处。

设置文本格式。如：标题、字号、文本颜色、段落等等。

创建列表。包括有序列表和无序列表。

插入图片和媒体。

建立表格。

创建超链接。

这是我之前学习html5+css3的部分思维导图

高清图：http://pan.baidu.com/s/1qY2ZKug

基本结构：

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这些强大的编译器帮助学习。自己也在学习阶段，若有错误，不吝赐教！

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： python html html5 css3 爬虫

相关文章推荐

新的分享

章节导航