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基本结构包括:
若其结构比作某一生物,则该基本结构定义了该生物的种类,该生物的头,名字,身体以及有关重要部分。
格式标记:
文本标记:
图像标记:
超链接:
herf :链接的地址
target: 值为_blank时,在新的窗口打开;值为_self(默认)时,在当前窗口打开;值为_parent时,在父窗口打开;值为_top时在顶层窗口打开。具体效果可以自己尝试。
建立表格:
表格的基本结构有
它们有些属性是相同的,如width,height,align(对齐方式),也是最基础的属性,所以我们记住他们的不同就好。
cellspacing:单元格的间距
cellpadding:单元格内容与单元格边框的距离
rules:控制单元格之间的分割线的显示。none(无),all(全有),rows(仅有行有),clos(仅有列有)
确定标题在表格中的位置,top,bottom,left,right.
‘ bgcolor:背景色; align:垂直对齐方式; valign:水平对齐方式
rowspan:设置单元格所占行数;clospan:设置单元格所占列数
样例:
二、CSS
css可以理解用来装饰、美化HTML显示的。
使用css有三种用法:
内联样式表
嵌入式样式表
外部样式表
属性介绍
1、颜色属性
2、字体属性:
3、背景属性:
4、文本属性:
5、列表:
样例:
代码改自《python爬虫开发与实战》
可能觉得这么多属性记不住,其实编译会自动补全的。可以用sublimeText,pycharm,notepad++,eclipse这些强大的编译器帮助学习。自己也在学习阶段,若有错误,不吝赐教!
一、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这些强大的编译器帮助学习。自己也在学习阶段,若有错误,不吝赐教!
相关文章推荐
- 这几天买了很多书,最近这2个月的学习目标是:熟悉Linux、C、Python、Web前端基础(HTML、XHTML,CSS)
- Web前端开发精品课HTML CSS JavaScript基础教程第十四章课后编程题答案
- 【麦子学院】02.web前端开发之HTML+CSS基础入门
- Web前端开发基础 第一天(Html和CSS)
- 20150726 Web前端开发基础html+css
- python之 前端HTML/CSS基础知识学习笔记
- Web前端开发精品课HTML CSS JavaScript基础教程第九章课后编程题答案
- Web前端开发精品课HTML CSS JavaScript基础教程第四章课后编程题答案
- python之 前端HTML/CSS基础知识学习笔记
- Web前端开发精品课HTML CSS JavaScript基础教程第二十三章课后编程题答案
- Web前端开发精品课HTML CSS JavaScript基础教程第五章课后编程题答案
- Web前端开发精品课HTML CSS JavaScript基础教程第十三章课后编程题答案
- 【从入门到放弃】WEB前端之HTML+CSS基础01
- Web前端开发精品课HTML CSS JavaScript基础教程CSS部分知识点总结
- Python爬虫——web前端基础XPath、Json和HTTP
- Python爬虫开发与项目实战 2:Web前端基础
- 【从入门到放弃】WEB前端之HTML+CSS基础02
- Web前端开发精品课HTML CSS JavaScript基础教程第六章课后编程题答案
- Web前端开发工具(html+css基础)
- HTML+CSS基础+web前端编码规范