网页组成
一个网页通常是由HTML元素、CSS样式和JavaScript脚本组成,但是对于数据采集来说,有用的只有HTML元素。通俗一点讲,网页就是一个房子,html就是简单的毛坯,CSS就是给房子来个精装修,Js脚本就是给房子通上了水电。要是把房子的精装修拆除,房子也可以用,就是有点难看,网页也是一样,把CSS样式拿走,内容还在,但是就不太美观。一个网页的大体结构如下:
<html>
<head>
<title>页面标题</title>
<script src="jquery-2.2.0.min.js"></script>
<link type="text/css" rel="stylesheet" href="style.css" />
</head>
<body>
<h1>这是标题</h1>
<p>段落1</p>
<p>段落2</p>
</body>
</html>
由标签<html>和</html>分别开头和结尾。只有<body></body>的部分才会在浏览器显示出来,<head></head>部分通常是写一些配置或者引入一些css或者js文件。
上面的网页示例中有很多的标签,比如说<p></p>,这表示一个段落,通常标签都是成对的。但是也有一些只有单个,没有结束标签,比如:< link ><br>等。这是需要了解到的,我们需要知道这些标签是表达的什么,里面存放的什么内容,好比我们需要知道一套房子每个房间是干啥的,这样的话,是去做饭还是去睡觉,都可以找到对的房间。数据采集的时候也是一样,需要知道我们的要找的东西在哪个标签下存放着,下表中例举几个常见的标签。
属性是为了给HTML标签增加了更丰富的信息,而且需要在开始标签中定义。比如最常用的超链接
<a href="http://www.mlscoder.cn">马拉松程序员</a>
很多时候,需要获取某一页面中的所有超链接,就是通过寻找所有<a>标签中的href属性中的值,来得到结果。在Html中需要重点认识的属性有下面5个
属性名 | 属性含义 |
---|---|
class | 表示元素的一个或多个类名 |
id | 表示元素在页面的中唯一id |
style | 表示元素的行内css样式,高于class中样式 |
title | 表示元素内的额外信息,鼠标悬停显示 |
type | 表示元素的类型,一般配合input标签使用 |
上述5个元素的属性是最常见的,也是后面重点使用的,需要了解属性的用途。比如说要找到class为“col-10”的元素,或者href中包含www.mlscoder.cn开头的所有链接,都是需要依靠标签的属性key和value来判断。