Datenanalyse im Python-Crawler ------Detaillierte Erläuterung des CSS-Selektors

1. Die Art der Daten

1 Strukturierte Daten

Strukturierte Daten beziehen sich auf Daten, die mithilfe einer relationalen Datenbank ausgedrückt und gespeichert werden können und in zweidimensionaler Form dargestellt werden.Allgemeine Merkmale sind: Daten liegen in Zeileneinheiten vor, eine Datenzeile stellt die Informationen einer Entität dar und die Attribute jeder Datenzeile sind gleich.

2 Halbstrukturierte Daten

Nicht relationales Modell, Daten mit einem grundlegenden festen Strukturschema,Zum BeispielProtokolldateien, XML-Dokumente, JSONW-Dokumente usw.

3 Unstrukturierte Daten

Wie der Name schon sagt, handelt es sich dabei um Daten ohne feste Struktur. Verschiedene Dokumente, Bilder und Video/Audio sind alle unstrukturierte Daten. Für diese Art von Daten speichern wir sie im Allgemeinen direkt als Ganzes und speichern sie im Allgemeinen alsbinärDatei Format.

2. Einführung in HTML

1 HTML

Ⅰ HTML ist eine Hyper Text Markup Language (Hyper Text Markup Language), eine Sprache zur Beschreibung von Webseiten.

① Interpretation von Hypertext

Es kann Bilder, Töne, Animationen, Multimedia und andere Inhalte hinzufügen, d. Hyperlink-Text

Ⅱ HTML ist keine Programmiersprache, sondern eine Auszeichnungssprache (Auszeichnungssprache)

Ⅲ Eine Auszeichnungssprache ist eine Reihe von Auszeichnungs-Tags

Vereinfacht ausgedrückt besteht eine Webseite aus Webseitenelementen, die durch HTML-Tags beschrieben und dann von einem Browser analysiert werden, bevor sie den Benutzern angezeigt werden.

2 Zusammenfassung des HTML-Skelett-Tags

① Das Grundgerüst ist in der folgenden Abbildung dargestellt:

Fügen Sie hier eine Bildbeschreibung ein

② Die Erklärung jedes Etiketts ist in der Abbildung dargestellt

Fügen Sie hier eine Bildbeschreibung ein

3 HTML-Tag-Beziehung

Eltern-Kind-Label


<head>
	<title> </title>
</head>

Geschwisteretikett


<head></head>
<body></body>

1 HTML-Doppel-Tags können unterteilt werden in: eines istEltern und KindDie Bezeichnung der Einschlussbeziehung lautetGeschwisterParallele Etiketten

3. Detaillierte Erläuterung der CSS-Selektoren

In CSS ist ein Selektor ein Muster zum Auswählen von Elementen, die gestaltet werden müssen. Anschließend können wir CSS-Selektoren verwenden, um die entsprechenden Tags in HTML zu finden.

1 Ein einfaches Beispiel lautet wie folgt:

Fügen Sie hier eine Bildbeschreibung ein

2-Tab-Auswahl

Der Beschriftungsselektor ist eigentlich die Beschriftung im HTML-Code, die wir oft sagen. Zum Beispiel: html, span, p, div, a, img usw.; wir möchten beispielsweise die Schriftart und Farbe eines Textabsatzes festlegen im p-Label auf der Webseite. Dann lautet der CSS-Code wie folgt:

# 简化的html标签
html = """
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>标签选择器</title>
</head>
<style>
	p{
		color: #f00;
		font-size: 16px;
	}
</style>
<body>
	<p>css标签选择器的介绍</p>
	<p>标签选择器、类选择器、ID选择器</p>
	<a href="https://www.baidu.com">百度一下</a>
	<span> 我是一个span标签</span>
</body>
</html>
"""


import parsel
selector = parsel.Selector(html)
span = selector.css('span').getall()
print(span)


Laufergebnis:
['Ich bin ein Span-Tag']

3 Arten von Selektoren

Der Klassenselektor ist der gebräuchlichste in unserer zukünftigen CSS-Stilcodierung. Er verleiht dem Element einen Stileffekt, indem er eine separate Klasse für das Element festlegt.Syntax verwenden:(Wir legen hier separat ein Klassenattribut für das p-Tag fest, der Code lautet wie folgt)

# 简化的html标签
html = """
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>标签选择器</title>
</head>
<style>
	p{
		color: #f00;
		font-size: 16px;
	}
</style>
<body>
	<p class="top">css标签选择器的介绍</p>
	<p class="top">标签选择器、类选择器、ID选择器</p>
	<a href="https://www.baidu.com">百度一下</a>
	<span> 我是一个span标签</span>
</body>
</html>
"""
import parsel
selector = parsel.Selector(html)
p = selector.css('.top').getall()
print(p)

Laufergebnis:
['

Einführung in CSS-Tag-Selektoren

', '

Tag-Selektor, Klassen-Selektor, ID-Selektor

']

Ausführliche Erklärung:

  1. Klassenselektoren sind alle englischen Punkte (.)Anfang.
  2. Jedes Element kann mehrere Klassennamen haben und der Name kann beliebig benannt werden (verwenden Sie jedoch nicht den chinesischen Namen, es handelt sich im Allgemeinen um eine englische Abkürzung, die sich auf den Inhalt bezieht).

4 ID-Wahlschalter

ID-Selektoren ähneln Klassenselektoren und verhalten sich genauso wie Selektoren derselben Art, es gibt jedoch einige Unterschiede.


# 简化的html标签
html = """
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>标签选择器</title>
</head>
<style>
	p{
		color: #f00;
		font-size: 16px;
	}
</style>
<body>
	<p class="top">css标签选择器的介绍</p>
	<p class="top">标签选择器、类选择器、ID选择器</p>
	<a href="https://www.baidu.com">百度一下</a>
	<span> 我是一个span标签</span>
</body>
</html>
"""
import parsel
selector = parsel.Selector(html)
p = selector.css('#content').getall()
print(p)

Das Ergebnis ist wie folgt:
['

Einführung in CSS-Tag-Selektoren

', '

Tag-Selektor, Klassen-Selektor, ID-Selektor

']

Ausführliche Erklärung:
1. Der ID-Selektor setzt id="ID-Name" für die Beschriftung anstelle von class="Klassenname"
2. Das Symbol vor dem ID-Selektor ist das Nummernzeichen (#), anstelle der englischen Punkte (.).
3. Der Name des ID-Selektors ist eindeutig, d. h. der ID-Selektor mit demselben Namen kann nur einmal auf einer Seite erscheinen;

5 Combo-Selektoren

Mehrere Selektoren können zusammen verwendet werden, es handelt sich um einen kombinierten Selektor.

# 简化的html标签
html = """
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>标签选择器</title>
</head>
<style>
	p{
		color: #f00;
		font-size: 16px;
	}
</style>
<body>
	<p class="top">css标签选择器的介绍</p>
	<p class="top">标签选择器、类选择器、ID选择器</p>
	<a href="https://www.baidu.com">百度一下</a>
	<span> 我是一个span标签</span>
</body>
</html>
"""
import parsel
selector = parsel.Selector(html)
result = selector.css('p#contend.top').getall()
print(result)

Das Ergebnis ist wie folgt:
['

Einführung in CSS-Tag-Selektoren

', '

Tag-Selektor, Klassen-Selektor, ID-Selektor

']

6 Pseudoklassenselektoren

Sie können ==:== verwenden, um die ersten paar Tags anzugeben, die Sie extrahieren möchten.

Fügen Sie hier eine Bildbeschreibung ein


# 简化的html标签
html = """
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>标签选择器</title>
</head>
<style>
	p{
		color: #f00;
		font-size: 16px;
	}
</style>
<body>
	<p class="top">css标签选择器的介绍</p>
	<p class="top">标签选择器、类选择器、ID选择器</p>
	<a href="https://www.baidu.com">百度一下</a>
	<span> 我是一个span标签</span>
</body>
</html>
"""
import parsel
selector = parsel.Selector(html)
result = selector.css('p:nth-child(2)::text').getall()
print(result

Das Ergebnis ist wie folgt:
['Label-Selektor, Klassen-Selektor, ID-Selektor']

7 Attributextraktor

Sie können ==::== verwenden, um die im Tag enthaltenen Attribute zu extrahieren.

# 简化的html标签
html = """
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>标签选择器</title>
</head>
<style>
	p{
		color: #f00;
		font-size: 16px;
	}
</style>
<body>
	<p class="top">css标签选择器的介绍</p>
	<p class="top">标签选择器、类选择器、ID选择器</p>
	<a href="https://www.baidu.com">百度一下</a>
	<span> 我是一个span标签</span>
</body>
</html>
"""
import parsel
selector = parsel.Selector(html)
result = selector.css('p#contend.top::text').getall()
print(result)
result = selector.css('a::attr(href)').getall()
print(result)


Die Ergebnisse lauten wie folgt:
['Einführung in den CSS-Tag-Selektor', 'Tag-Selektor, Klassen-Selektor, ID-Selektor']
['https://www.baidu.com']

4. Die Vorteile des Erlernens von CSS

CSS ist eine der drei Hauptfunktionen des Frontends. Nach dem Erlernen wird es für unser Frontend eine große Hilfe sein. Es gibt zwei weitere Datenanalysemethoden im Crawler (regulärer Ausdruck, xpath), wird der Editor so schnell wie möglich aktualisiert. Vielen Dank für Ihr Unternehmen.

Ich denke du magst

Origin blog.csdn.net/m0_74459049/article/details/130213264
Empfohlen
Rangfolge