HTML和CSS基础总结1. HTML标签与属性 HTML（HyperText Markup Language）是网页的

1. HTML标签与属性

HTML（HyperText Markup Language）是网页的基础语言，用于描述网页的结构和内容。在HTML中，我们使用标签来定义页面元素，而标签可以包含属性。

HTML标签： HTML标签是用尖括号括起来的关键词，如<p>表示段落，<h1>表示一级标题等。标签通常成对出现，包括开标签和闭标签，如<b>加粗文字</b>。
HTML属性： HTML属性提供了有关HTML元素更多信息，属性总是以名称/值对的形式出现，位于HTML标签的开始标签中。例如，<a href="https://www.example.com">链接</a>中的href就是一个属性。

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML基础示例</title>
</head>
<body>
    <h1>欢迎学习HTML和CSS基础</h1>
    
    <p>这是一个简单的段落。</p>
    
    <a href="https://www.example.com" target="_blank">访问示例网站</a>
</body>
</html>

2. CSS选择器运用

CSS（Cascading Style Sheets）用于样式化网页，使其具有更好的外观和布局。在CSS中，我们使用选择器来选择HTML元素，并定义它们的样式。

元素选择器： 通过元素名称选择HTML元素，如p选择所有段落。
类选择器： 通过类名选择HTML元素，以.开头，如.highlight选择所有具有highlight类的元素。
ID选择器： 通过元素ID选择HTML元素，以#开头，如#header选择具有header ID的元素。

示例代码：

/* CSS样式表 */
body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
}

h1 {
    color: #333;
}

p {
    font-size: 16px;
}

.highlight {
    background-color: yellow;
}

#header {
    border-bottom: 1px solid #ccc;
}

3. DOM树的理解

DOM（Document Object Model）是一种表述文档结构的方式，它将HTML文档表示为一个树状结构，使开发者可以通过脚本语言（通常是JavaScript）来操作文档的内容和结构。

节点： 在DOM树中，HTML元素、属性、文本等都被称为节点，节点之间存在父子、兄弟关系。
根节点： 整个HTML文档的顶层节点被称为根节点。
父节点和子节点： 节点之间通过父子关系连接，一个节点可以有多个子节点。

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DOM树示例</title>
</head>
<body>
    <div id="container">
        <h2>DOM树结构示例</h2>
        <p>这是一个包含子节点的段落。</p>
    </div>
</body>
</html>

// JavaScript操作DOM树
const container = document.getElementById('container');
const heading = container.getElementsByTagName('h2')[0];
const paragraph = container.getElementsByTagName('p')[0];

// 修改节点内容
heading.textContent = '修改后的DOM树结构示例';

// 添加新节点
const newParagraph = document.createElement('p');
newParagraph.textContent = '这是新增的段落。';
container.appendChild(newParagraph);

以上示例为HTML和CSS基础的总结与示例代码，涵盖了HTML标签与属性、CSS选择器运用以及DOM树的基本理解。在学习过程中，实际操作这些代码将有助于更深入地理解和掌握这些基础知识。

示例代码

from lxml import etree
from bs4 import BeautifulSoup

html_content = """
<html>
    <head>
        <title>爬虫示例</title>
    </head>
    <body>
        <h1 class="main-title">欢迎使用爬虫</h1>
        <p id="content">这是一个示例页面。</p>
        <a href="https://www.example.com">访问示例网站</a>
    </body>
</html>
"""

soup = BeautifulSoup(html_content, 'html.parser')

# 提取标题
title = soup.title.text
print(f"页面标题: {title}")

# 提取文字内容
main_title = soup.h1.text
content = soup.find('p', {'id': 'content'}).text
print(f"主标题: {main_title}")
print(f"内容: {content}")

# 提取链接
link = soup.a['href']
print(f"链接: {link}")

# 使用CSS选择器提取数据
main_title_css = soup.select('.main-title')[0].text
content_css = soup.select('#content')[0].text
print(f"使用CSS选择器提取的主标题: {main_title_css}")
print(f"使用CSS选择器提取的内容: {content_css}")

# 使用lxml解析HTML
html_tree = etree.HTML(html_content)

# 使用XPath提取数据
main_title_xpath = html_tree.xpath('//h1[@class="main-title"]/text()')[0]
content_xpath = html_tree.xpath('//p[@id="content"]/text()')[0]
print(f"使用XPath提取的主标题: {main_title_xpath}")
print(f"使用XPath提取的内容: {content_xpath}")

以上示例展示了如何在Python爬虫中应用HTML标签与属性、CSS选择器运用以及DOM树的理解。这些知识点对于网页数据的定位和提取至关重要。

下一步

在下一篇教程中，我们将学习有关Python网络请求的实践技巧，涵盖以下关键内容：

requests库的基本使用： 掌握如何使用requests库发送HTTP请求，处理响应，以及常见的参数设置。
Python网络请求实践总结与示例代码： 提供一系列实际的示例代码，演示如何在爬虫中利用Python进行网络请求，并处理不同类型的响应。