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

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

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

  1. 设置文本格式。如:标题、字号、文本颜色、段落等等。
  2. 创建列表。包括有序列表和无序列表。
  3. 插入图片和媒体。
  4. 建立表格。
  5. 创建超链接。

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

    python爬虫——web前端基础HTML+CSS_第1张图片
    高清图:http://pan.baidu.com/s/1qY2ZKug

基本结构:
html基本结构包括:

  `<html>  
   <head>
        <meta>内容meta> 
   head>  
   <body>  
   body>  
   html>

若其结构比作某一生物,则该基本结构定义了该生物的种类,该生物的头,名字,身体以及有关重要部分。
决定了该代码是html文件,即说明各类,
申明头部。
即主体部分。
在其头部,是重要部分。即提供有关页面的元信息,搜索引擎的关键词就是元信息的内容,因此是用来概述本页面的信息的。

格式标记:

:强制换行

:换段落

:居中标记
    :建立无序列表
      :建立有序列表
    1. :建立列表,
    2. 用在
          里面。
          :分区显示

          文本标记:
          :标题标记。n的大小为1~6,最多6级标题。
          :字体设置标记。字体大小(size)、颜色(color)、字体(face)
          :字体加粗标记
          :斜体标记
          :下标标记
          :上标标记
          :引用方式的字体
          :表示强调,一般用于粗体
          :也表示强调,一般用于斜体
          :小型字体标记
          :大型字体标记
          :下划线标记
          图像标记:
          :图像标记。的属性有src,width,height,border,alt。src用来指定文件的路径,width,height,border都是宽度设置,很容易理解。alt属性是爬虫的重要部分,对于爬虫学习来说有三个作用:1.鼠标移动到加载完的图片上,会显示该图片的文字信息。2.图片加载失败就直接显示文字。3.写爬虫时可根据alt属性的文字抓取想要的图片。
          超链接:
          :超链接标记。
          链接文字或图片

          herf :链接的地址
          target: 值为_blank时,在新的窗口打开;值为_self(默认)时,在当前窗口打开;值为_parent时,在父窗口打开;值为_top时在顶层窗口打开。具体效果可以自己尝试。

          建立表格:
          表格的基本结构有

          ,,
          ,
          ,这些标记。
          它们有些属性是相同的,如width,height,align(对齐方式),也是最基础的属性,所以我们记住他们的不同就好。

          属性:
          cellspacing:单元格的间距
          cellpadding:单元格内容与单元格边框的距离
          rules:控制单元格之间的分割线的显示。none(无),all(全有),rows(仅有行有),clos(仅有列有)

          :定义表格的行
          ‘ bgcolor:背景色; align:垂直对齐方式; valign:水平对齐方式

          属性:
          确定标题在表格中的位置,top,bottom,left,right.
          :定义表格的数据
          :表头
          ,共有的属性bgcolor,align,valign,width,height;
          rowspan:设置单元格所占行数;clospan:设置单元格所占列数

          样例:

          
          <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>webp>
              <div style="color: blue">前端基础div>
          div>
          <br>
          <<------------------------------文本标记----------------------------->>
          <h1>一、htmlh1>
          <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、imgh3>
                  <h4>a. srch4>
                  <h4>b. widthh4>
                  <h4>c. alth4>
                      <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>htmltr>
              <th>pythonth>
              <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爬虫开发与实战》

          
          <html lang="en">
          <head>
              <meta charset="UTF-8">
              <title>web前端基础HTML+CSStitle>
          
          <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">bookli>
              <li class="computer">computerli>
              <li>teali>
              <li>Cocali>
          ul>
          
          body>
          html>

          可能觉得这么多属性记不住,其实编译会自动补全的。可以用sublimeText,pycharm,notepad++,eclipse这些强大的编译器帮助学习。自己也在学习阶段,若有错误,不吝赐教!

          你可能感兴趣的:(python,爬虫)