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

来源：互联网发布：java如何换行输出编辑：程序博客网时间：2024/06/11 02:50

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

阅读全文

0 0