1. El tipo de datos
1 Datos estructurados
Los datos estructurados se refieren a datos que se pueden expresar y almacenar mediante una base de datos relacional y se representan en forma bidimensional.Las características generales son: Los datos están en unidades de filas, una fila de datos representa la información de una entidad y los atributos de cada fila de datos son los mismos.
2 Datos semiestructurados
Modelo no relacional, datos con un esquema estructural básico fijo,Por ejemploArchivos de registro, documentos XML, documentos jsonW, etc.
3 Datos no estructurados
Como sugiere el nombre, significa datos sin una estructura fija. Varios documentos, imágenes y video/audio son todos datos no estructurados. Para este tipo de datos, generalmente los almacenamos directamente como un todo y generalmente los almacenamos comobinarioformato de datos.
2. Introducción a HTML
1 HTML
Ⅰ HTML es un lenguaje de marcado de hipertexto (Hyper Text Markup Language) es un lenguaje utilizado para describir páginas web.
① Interpretación del hipertexto
Puede agregar imágenes, sonidos, animaciones, multimedia y otros contenidos, es decir, más allá de la limitación de texto, no solo eso, también puede saltar de un archivo a otro y conectarse con archivos de hosts de todo el mundo, es decir: texto de hipervínculo
Ⅱ HTML no es un lenguaje de programación, sino un lenguaje de marcas (markup language)
Ⅲ Un lenguaje de marcado es un conjunto de etiquetas de marcado
Ⅹ En pocas palabras, una página web se compone de elementos de página web, que se describen mediante etiquetas HTML y luego son analizados por un navegador antes de mostrarse a los usuarios.
2 Resumen de etiquetas de esqueleto HTML
① El marco básico se muestra en la siguiente figura:
② La explicación de cada etiqueta es como se muestra en la figura
3 Relación de etiquetas HTML
etiqueta padre-hijo
<head>
<title> </title>
</head>
etiqueta de hermano
<head></head>
<body></body>
1 Las etiquetas dobles HTML se pueden dividir en: una espadre e hijoLa etiqueta de la relación de contención eshermanoEtiquetas paralelas
3. Explicación detallada de los selectores de CSS
En css, un selector es un patrón para seleccionar elementos que necesitan estilo, luego podemos usar los selectores de css para encontrar las etiquetas correspondientes en html.
1 Un ejemplo sencillo es el siguiente:
Selector de 2 pestañas
El selector de etiquetas es en realidad la etiqueta en el código html que solemos decir, por ejemplo: html, span, p, div, a, img, etc., por ejemplo, queremos establecer la fuente y el color de un párrafo de texto. en la etiqueta p en la página web, entonces el código css es el siguiente:
# 简化的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)
Resultado actual:
['Soy una etiqueta de intervalo']
3 tipos de selectores
El selector de clase es el más común en nuestra futura codificación de estilo css Le da al elemento un efecto de estilo al establecer una clase separada para el elemento.usar sintaxis:(Establecemos un atributo de clase de clase por separado para la etiqueta p aquí, el código es el siguiente)
# 简化的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)
Resultado de ejecución:
['
Introducción a los selectores de etiquetas css
', 'Selector de etiquetas, selector de clase, selector de ID
']Explicación detallada:
- Los selectores de clase son todos puntos ingleses (.)comienzo.
- Cada elemento puede tener múltiples nombres de clase, y el nombre puede nombrarse arbitrariamente (pero no tome el nombre chino, generalmente es una abreviatura en inglés relacionada con el contenido)
Selector de 4 identificaciones
Los selectores de ID son similares a los selectores de clase y actúan igual que los selectores del mismo tipo, pero hay algunas diferencias.
# 简化的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)
El resultado es el siguiente:
['
Introducción a los selectores de etiquetas css
', 'Selector de etiquetas, selector de clase, selector de ID
']Explicación detallada:
1. El selector de ID establece id="nombre de ID" para la etiqueta en lugar de class="nombre de clase"
2. El símbolo delante del selector de ID es el signo de libra (#), en lugar de puntos ingleses (.3.
El nombre del selector de ID es único, es decir, el selector de ID con el mismo nombre solo puede aparecer una vez en una página;
5 selectores combinados
Se pueden usar varios selectores juntos, que es un selector combinado.
# 简化的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)
El resultado es el siguiente:
['
Introducción a los selectores de etiquetas css
', 'Selector de etiquetas, selector de clase, selector de ID
']6 selectores de pseudoclase
Puede usar ==:== para especificar las primeras etiquetas que desea extraer.
# 简化的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
El resultado es el siguiente:
['selector de etiqueta, selector de clase, selector de ID']
Extractor de 7 atributos
Puede usar ==::== para extraer los atributos contenidos en la etiqueta.
# 简化的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)
Los resultados son los siguientes:
['Introducción al selector de etiquetas css', 'Selector de etiquetas, selector de clase, selector de ID']
['https://www.baidu.com']
4. Los beneficios de aprender CSS
CSS es una de las tres funciones principales del front-end. Después de aprenderlo, será de gran ayuda para nuestro front-end. Hay otros dos métodos de análisis de datos en el rastreador (expresión regular, xpath), el editor se actualizará lo antes posible. Gracias por su compañía.