Python 学习第 30 天(≧∀≦)ゞ

当我们爬取网页时，常常面对 HTML 文档以及内部源码用 CSS 渲染，而这些前端的配置都非常有特点和规律，利于我们分块、按特征提取想要的内容。因此，今天先了解一下 HTML 与 CSS 的基本结构与语法。

一、HTML

1. 概念

        HTML 是一种超文本标记语言，是编写网页最基本、最核心的语言，本质上就是用不同的标签对不同的内容（文字、图形、动画、声音、表格、链接等）进行标记，使内容在网页上按照规则以我们想要的方式呈现。

2. 基础语法

        基本格式：<标签名 属性名1 = "属性值1", 属性名2 = "属性值2",……>待特殊处理的内容</标签名>

        总的来说，在网页中需要展示的内容，如果不用标签（<标签名></标签名>）括住，其将会被识别为普通形式，如文字会被识别为纯文本，无法通过设置 CSS 对其外观进行渲染（调节大小、颜色、字体等）。

        一般情况下，对于双标签，有开始就要有结束，即 <标签> 与 </标签> 是成对出现的，如果缺少，系统会自动补齐，但难免会导致样式出错、布局混乱、嵌套层级等问题。对于单标签则没有以上情况，只需要在需要的位置标注即可。

标签 含义
<html></html> 整个网页的根标签
<head></head> 网页的头部
<meta 属性名 = "属性"> 网页的编码格式
<title></title> 网页的标签，“这个网页叫什么？”
<body></body> 网页的主体
<footer></footer> 网页的尾部
<div></div> 区块容器，“网页头部/主体/尾部中含有几个部分？”
<h1></h1>，<h2></h2>，……，<h6></h6> 从大到小，1~6 级标题
<p></p> 段落
<span></span> 行内文字（不换行）
<strong></strong> 加粗
<em></em> 斜体
<a></a> 超链接
<ul></ul> 无序列表（默认：圆点）
<ol></ol> 有序列表（默认：阿拉伯数字）
<li></li> 列表项
<table></table> 表格
<tr></tr> 表格行
<th></th> 表头单元格
<tb></tb> 表格单元格
<form></form> 表单
<label></label> 表单标签（文字说明）
<button></button> 按钮
<select></select> 下拉选择框
<option></option> 下拉选项
<textarea></textarea> 多行文本框
<br> 换行
<hr> 分割线
<img> 图片
<link> 引入 CSS 文件
<base> 链接基础地址
<input> 输入框（文本 / 密码 / 单选 / 多选）

        注意：<!DOCTYPE html> 不是双标签，也不是单标签，它是 html5 的声明，用于告诉浏览器这个文件内的内容是什么，以便浏览器解码。

二、CSS

1. 概念

        CSS（层叠样式表）是一种用于描述 HTML 和 XML 文档样式的语言，它的作用在于控制网页的外观与布局，让网页更加美观、易维护。一般其会以放在标签内的 属性名 = "属性值" 出现，或在 <head></head> 网页头部中用 <style></style> 标签中编写各部分的样式，或先设置一个 CSS 文件后用 link 引入文档中。

2. 选择器

        在 <style></style> 标签或  CSS 文件中，我们通过选择器精准控制每个部分的样式，例如：同一种标签、同一个类别、同一个子层级等。

        控制 / 样式显示优先级：行内选择器 > ID 选择器 > 类 / 伪类选择器 > 元素 / 伪元素选择器 > 通用选择器

(1) 通用选择器

        不管属于哪个标签，所有的内容都用这个样式。

        格式：

* {
    属性名1:属性值1;
    属性名2:属性值2;
    ………………
    属性名n:属性值n
}

(2) 标签（元素）选择器

        直接用标签名控制同一标签属性中的内容样式。

        格式：

标签名 {
    属性名1:属性值1;
    属性名2:属性值2;
    ………………
    属性名n:属性值n
}

(3) 类选择器

        当某个标签中设置有类（class = "类名"）时，就可以通过类名直接控制这部分的内容。

        格式：

.类名 {
    属性名1:属性值1;
    属性名2:属性值2;
    ………………
    属性名n:属性值n
}

(4) ID 选择器

        当某个标签中设置了 ID（id = "ID 名"）时，就可以通过 ID 名直接控制该部分内容的样式，单需要注意，一个页面中一个 ID 名只能出现一次，也就是只能设置在一个标签中，就算是同类型的标签也不能重复标注。

        格式：

#ID名 {
    属性名1:属性值1;
    属性名2:属性值2;
    ………………
    属性名n:属性值n
}

(5) 后代选择器

        控制一个标签内的子标签中所有内容的样式。

        格式：

标签名 子标签名 {
    属性名1:属性值1;
    属性名2:属性值2;
    ………………
    属性名n:属性值n
}

(6) 子选择器

        控制标签内的子标签中内容的样式，不包括子标签的子标签。（只控制子代，孙代、曾孙代等都不管）

        格式：

标签名 > 子标签名 {
    属性名1:属性值1;
    属性名2:属性值2;
    ………………
    属性名n:属性值n
}

(7) 相邻兄弟选择器

        控制本标签和本标签后的第一个指定类型的同级标签中的内容样式。

        格式：

标签名 + 标签名 {
    属性名1:属性值1;
    属性名2:属性值2;
    ………………
    属性名n:属性值n
}

(8) 通用兄弟选择器

        控制本标签和本标签后的指定类型的所有同级标签。

        格式：

标签名 ~ 标签名 {
    属性名1:属性值1;
    属性名2:属性值2;
    ………………
    属性名n:属性值n
}

(9) 属性选择器

        根据标签括号内的属性与属性值控制标签中的内容样式。

        格式：

标签名[属性名] {
    属性名1:属性值1;
    属性名2:属性值2;
    ………………
    属性名n:属性值n
}

标签名[属性名 = "属性值"] {
    属性名1:属性值1;
    属性名2:属性值2;
    ………………
    属性名n:属性值n
}

标签名[属性名 ~= "属性值包含的内容"] {
    属性名1:属性值1;
    属性名2:属性值2;
    ………………
    属性名n:属性值n
}

标签名[属性名 ^= "属性值的开头"] {
    属性名1:属性值1;
    属性名2:属性值2;
    ………………
    属性名n:属性值n
}

标签名[属性名 $= "属性值的结尾"] {
    属性名1:属性值1;
    属性名2:属性值2;
    ………………
    属性名n:属性值n
}

标签名[属性名 *= "属性值包含的字符串"] {
    属性名1:属性值1;
    属性名2:属性值2;
    ………………
    属性名n:属性值n
}

(10) 伪类选择器

        按照标签中的内容的状态、位置、行为控制其样式。

        (A) 链接/状态

a:link { color: blue; }       /* 未访问 */
a:visited { color: purple; }  /* 已访问 */
a:hover { color: red; }      /* 鼠标悬浮 */
a:active { color: green; }    /* 点击时 */

        (B)j 结构

/* 父元素下第一个子元素 */
div p:first-child { color: red; }

/* 父元素下最后一个子元素 */
div p:last-child { color: blue; }

/* 第n个子元素 */
div p:nth-child(2) { font-weight: bold; }

/* 偶数行/奇数行（表格常用） */
tr:nth-child(even) { background: #f2f2f2; }
tr:nth-child(odd) { background: white; }

/* 否定选择器 */
div:not(.box) { margin: 0; }

        (C) 表单

input:focus { outline: 2px solid skyblue; }  /* 聚焦 */
input:disabled { background: #eee; }        /* 禁用 */
input:checked { transform: scale(1.2); }    /* 选中 */

(11) 伪元素选择器

        在标签所控制的内容的前端、后端添加标注，或选中其某部分进行样式控制（渲染）。

        格式：

/* 元素最前面加内容 */
标签名::before {
    content:"待添加的内容";
    属性名1:属性值1;
    属性名2:属性值2;
    ………………
    属性名n:属性值n
}

/* 元素最后面加内容 */
标签名::after {
    content:"待添加的内容";
    属性名1:属性值1;
    属性名2:属性值2;
    ………………
    属性名n:属性值n
}


/* 选中元素第一行 */
标签名::first-line {
    属性名1:属性值1;
    属性名2:属性值2;
    ………………
    属性名n:属性值n
}


/* 选中元素第一个字 */
标签名::first-letter {
    属性名1:属性值1;
    属性名2:属性值2;
    ………………
    属性名n:属性值n
}


/* 修改全局选中文本样式 */
::selection {
    属性名1:属性值1;
    属性名2:属性值2;
    ………………
    属性名n:属性值n
}

/* 修改某标签中选中文本样式 */
标签名::selection {
    属性名1:属性值1;
    属性名2:属性值2;
    ………………
    属性名n:属性值n
}

# python # 爬虫 # 开发语言 # html5 # css
Logo
亚马逊云科技技术品牌专区

更多推荐

cover

2026年CSDN年度技术趋势预测：AI、云原生与开发者工具的未来

avatar 亚马逊云科技技术品牌专区

数据产业服务分类（32）——数据产业——数字技术服务与数据产业服务

值得关注的是，当前呈现出一种显著趋势，AIGC（生成式AI）技术既依赖海量数据进行训练，这属于数据产业服务的范畴，又推动了数字内容生产效率的大幅提升，体现了数字技术服务的价值，二者相互交融，共同推动着行业的发展与进步。技术融合方面，致力于构建“数据 + 技术”中台，通过整合数据中台所提供的数据产业服务与技术中台所开展的数字技术服务，达成数据与技术能力的复用，提升资源利用效能。数字技术服务与数据产业

avatar 亚马逊云科技技术品牌专区
cover

C# 做 AI 真的可行吗？.NET 人工智能生态的现状与未来

avatar 亚马逊云科技技术品牌专区