Python 原生爬虫教程：HTML 与 CSS 基础入门-CSDN博客

本文链接：https://blog.csdn.net/2510_91865210/article/details/147868596

正所谓，知己知彼，百战不殆。我们爬虫的爬取对象，就是各式各样的网页，只有对网页的基本内容达到熟悉的程度，才能顺利的书写我们的爬虫程序。

以下是关于 Python 原生爬虫中 HTML 与 CSS 基础入门的教程：

HTML 基础入门

HTML（超文本标记语言）是构成网页的基础，使用标签来定义页面结构。以下是核心概念：

基本结构

html

预览

<!DOCTYPE html>
<html>
<head>
  <title>页面标题</title>
</head>
<body>
  <h1>一级标题</h1>
  <p>这是一个段落</p>
  <a href="https://example.com">链接</a>
  <img src="image.jpg" alt="图片">
</body>
</html>

常用标签

标题：<h1>到<h6>（重要性递减）
段落：<p>
链接：<a href="url">文本</a>
图像：<img src="路径" alt="描述">
列表：
- 无序列表：<ul><li>项1</li></ul>
- 有序列表：<ol><li>项1</li></ol>
表格：<table><tr><td>单元格</td></tr></table>
表单：<form><input type="text" /></form>

标签属性
标签可以通过属性提供额外信息，例如：

<a href="https://example.com" target="_blank">
<img src="image.jpg" width="200" height="100">
<div class="container" id="main">

CSS 基础入门

CSS（层叠样式表）用于美化 HTML 页面，控制布局和外观。

基本语法

css

选择器 {
  属性1: 值1;
  属性2: 值2;
}

选择器类型

元素选择器：直接使用标签名，如p、h1
类选择器：使用.前缀，如.container
ID 选择器：使用#前缀，如#header
属性选择器：如[type="text"]
组合选择器：如div p（div 内的所有 p 元素）

常用属性

文本样式：color、font-size、font-family、text-align
盒模型：width、height、margin、padding、border
背景：background-color、background-image
定位：position、top、left、right、bottom
显示：display、visibility、float

CSS 应用方式

内联样式：直接在 HTML 标签中使用style属性
html
```
<p style="color: red;">红色文本</p>
```
内部样式表：在 HTML 的<head>中使用<style>标签
html
```
<style>
  p { color: red; }
</style>
```
外部样式表：通过<link>标签引入外部 CSS 文件
html
```
<link rel="stylesheet" href="styles.css">
```