搜索
首页后端开发Python教程Python网络爬虫入门:理解Web网页基础

    1.网页的组成

    网页主要是三大部分组成——HTML,CSS和JavaScript。如果把网页比作人的脸,这三部分就好比人的眼睛,鼻子和嘴。下面我们介绍这三个功能。

    HTML

    HTML(HyperText Markup Language)是用于构建网页的标记语言,它是一种基于标准通用标记语言的子集,它取代了HTML1.0作为网页制作的标准,在HTML2.0中,新增了一些元素,增强了网页的表现能力。

    HTML的语法包括标签和标签语法,它们被用来定义网页的结构、内容和样式。一个HTML文档通常包含一个根标签和一个或多个标签,每个标签都有一个标题行,用于标记标签的类型、属性和值。

    HTML的根标签是文档的开始标签,它包含文档的标题和其他基本信息,如文档类型、语言、日期、版本等。

    除此之外,HTML还有一些其他的元素和属性,如标题、段落、表格、列表、图像、链接等,这些元素和属性可以用来定义网页的外观和行为。

    HTML的优点包括可移植性、跨平台性和内容丰富性等,它已经成为网页制作的标准语言,广泛应用于网站、电子邮件、新闻文章、在线聊天等领域。

    CSS

    HTML定义了网页的结构,但是只有HTML的页面布局,网页并不好看。为了使网页更加好看一些,可以借助CSS来实现。

    CSS(层叠样式表)是一种用于定义网页样式的语言,它是HTML的超集。CSS提供了更多的样式选择和定义,使网页设计更加灵活和易于维护。

    CSS的语法包括选择器、属性、值和伪类选择器等。选择器是用来选择要应用样式的元素的,它可以基于类、ID、通配符等进行选择。属性是用来定义元素样式的,它可以基于类、ID、通配符等进行定义。值可以是一个单独的值,也可以是一个字符串、数字或其他类型的值。伪类选择器是用来定义类选择器和ID选择器的,它可以用来定义伪类元素和伪类选择器。

    CSS的优点包括可维护性、可扩展性和可定制性等,它使网页设计更加灵活和易于维护。通过使用CSS,可以更好地控制网页的布局、样式和动画效果,从而使网页更加美观和吸引人。

    CSS3是CSS的最新版本,它增加了一些新的选择器、属性和值,使网页设计更加灵活和丰富。例如,CSS3新增了伪类选择器、动画选择器、过渡选择器等,使网页设计更加生动和有趣。

    那么CSS什么样子呢,我摘抄了一段。

    #head {
        position: relative;
        height: 100%;
        width: 100%;
        min-height: 768px;
        cursor: default;
    }

    这段代码定义了一个名为#head的元素,它的样式属性为position: relative; height: 100%; width: 100%; min-height: 768px; cursor: default;。

    这些属性的含义如下:

    position: relative:表示元素的定位方式为相对定位,即元素相对于其父元素进行定位。
    height: 100%:表示元素的高度为其父元素的高度的100%。
    width: 100%:表示元素的宽度为其父元素的宽度的100%。
    min-height: 768px:表示元素的最小高度为768像素,即其父元素的最小高度为768像素。
    cursor: default:表示元素的光标样式为默认值,即不设置光标样式。
    通过这些属性的组合,可以定义一个具有相对定位、高度为100%、宽度为100%的元素,并且具有默认的光标样式。

    JavaScript

    JavaScript(简称“JS”)是一种具有函数优先的轻量级,解释型或即时编译型的编程语言。它由Netscape公司的Brendan Eich在1995年首次设计实现,并被广泛用于Web浏览器中。

    JavaScript 的语法基于原型编程、多范式的动态脚本语言,并且支持面向对象、命令式、声明式、函数式编程范式。它的标准是ECMAScript,截至 2012 年,所有浏览器都完整的支持ECMAScript 5.1,旧版本的浏览器至少支持ECMAScript 3 标准。

    JavaScript 的基本语法包括变量、函数、对象、数组和闭包等。变量用于存储数据,函数用于实现逻辑,对象用于封装数据和方法,数组用于存储数据或对象,闭包用于重写函数或方法并在其中使用变量。

    JavaScript 的内置对象包括函数、数组、对象、字符串、正则表达式和函数等。它还支持ES6中的class和const,以及新增的let和const`。ES7引入了let,const和rest/spread等语法。

    JavaScript 的作用域链机制使代码可以在不同的作用域中安全地执行。它还支持事件处理、DOM操作、模块化等功能。JavaScript 已经广泛应用于Web浏览器、移动应用、游戏开发等领域。

    JavaScript通常是以单独文件加载的,后缀是.js。

    综上所述,HTML定义了网页的内容和结构,CSS描述了网页的样式,JavaScript定义了网页的行为。

    2.网页的结构

    下面我们看一个示例代码。

    <!DOCTYPE html>  
    <html>  
    <head>  
    <title>网页标题</title>  
    <meta charset="UTF-8">  
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  
    <link rel="stylesheet" href="styles.css" rel="external nofollow" >  
    </head>  
    <body>  
    <header>  
    <nav>  
    <ul>  
    <li><a href="#" rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >导航链接1</a></li>  
    <li><a href="#" rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >导航链接2</a></li>  
    <li><a href="#" rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >导航链接3</a></li>  
    </ul>  
    </nav>  
    </header>  
    <main>  
    <h2>网页标题</h2>  
    <p>这是一个段落。</p>  
    <ul>  
    <li>列表项1</li>  
    <li>列表项2</li>  
    <li>列表项3</li>  
    </ul>  
    </main>  
    <footer>  
    <p>版权信息</p>  
    </footer>  
    </body>  
    </html>

    这个示例中,8b05045a5be5764f313ed5b9168a17e6 声明了这是一个 HTML5 文档,100db36a723c770d327fc0aef2ce13b1 标签定义了文档的根元素,93f0f5c25f18dab9d176bd4f6de5d30e 标签包含了文档的元数据,如标题、字符集、视口等。b2386ffb911b14667cb8f0f91ea547a7 标签定义了文档的标题,0d94b2dad07259293dd606022eaa23d8 和 f67d41984a32dd6bd50b01abe7702909 标签定义了文档的字符集和视口。2cdf5bf648cf2f33323966d7f58a7f3f 标签定义了文档的样式表,c787b9a589a3ece771e842a6176cf8e9 标签定义了文档的导航链接,ff6d136ddc5fdfeffaf53ff6ee95f185 标签定义了文档的列表项,25edfb22a4f469ecb59f1190150159c6 标签定义了文档的列表项。c1a436a314ed609750bd7c7d319db4da 标签定义了文档的标题,e388a4556c0f65e1904146cc1a846bee 标签定义了文档的段落。c37f8231a37e88427e62669260f0074d 标签定义了文档的版权信息。

    这只是一个简单的示例,实际的HTML结构可能更加复杂。在编写网页时,需要根据具体的需求和目标,选择合适的HTML标签和样式表,并进行适当的排版和布局。

    3.节点树和节点间的关系

    节点树(Node Tree)是一个树形数据结构,它通过节点的组合来表示数据,节点通过节点之间的关系来表示数据之间的层次结构。节点树可以用来实现各种数据的组织和管理,例如数据库中的表,文件系统中的文件,以及各种应用程序中的数据模型。

    节点间的关系通常通过以下方式表示:

    1. 树形结构:节点之间通过树形结构连接,节点的父节点通过右子节点连接,左子节点连接到根节点。

    2. 节点的层次结构:节点根据其父节点的层次结构来确定其位置。例如,一个节点的父节点是其子节点的父节点,其子节点是其左右子节点。

    3. 节点的继承关系:节点之间存在继承关系,即子节点继承其父节点的属性和关系。

    4. 节点的属性和关系:节点可以有属性和关系,属性用于描述节点的基本信息,例如名称、类型、值等。关系用于描述节点之间的关系,例如父子关系、层级关系等。

    5. 节点的遍历:节点树可以通过遍历来访问和修改节点的属性和关系。例如,可以通过递归遍历来查找节点的子节点和父节点,可以通过深度优先搜索遍历整个树。

    下面我们一个示意图,一目了然。

    Python网络爬虫之Web网页基础是什么

    4.选择器

    我们知道网页由一个个节点组成,CSs 选择器会根据不同的节点设置不同的样式规则,那么怎样来定位节点呢?

    在 Css 中,我们使用 CSS 选择器来定位节点。

    CSS选择器是用于在HTML文档中选择元素的语言。CSS选择器是一种用于选择HTML元素的语言,它可以用于创建样式表,并将样式应用于HTML元素。

    CSS选择器通常由一个或多个关键字组成,这些关键字用于指定选择器的类型。例如,div选择器用于选择所有具有div类的元素,a选择器用于选择所有具有a类的元素,img选择器用于选择所有具有img类的元素等。

    CSS选择器可以使用通配符来匹配多个类型的元素。例如,div, a, img可以匹配所有具有这些类型的元素。

    CSS选择器还可以使用伪类来创建更复杂的选择器。例如,:hover伪类用于在鼠标悬停在元素上时应用样式,:focus伪类用于在元素上聚焦时应用样式等。

    CSS选择器可以嵌套使用,以创建更复杂的选择器。例如,div:hover a可以选择所有具有a类的元素,div:focus a可以选择所有具有a类的元素,并在鼠标悬停和聚焦时应用样式。

    总之,CSS选择器是一种用于在HTML文档中选择元素的语言,它可以用于创建样式表,并将样式应用于HTML元素。

    以上是Python网络爬虫入门:理解Web网页基础的详细内容。更多信息请关注PHP中文网其他相关文章!

    声明
    本文转载于:亿速云。如有侵权,请联系admin@php.cn删除
    Python的执行模型:编译,解释还是两者?Python的执行模型:编译,解释还是两者?May 10, 2025 am 12:04 AM

    pythonisbothCompileDIntered。

    Python是按线执行的吗?Python是按线执行的吗?May 10, 2025 am 12:03 AM

    Python不是严格的逐行执行,而是基于解释器的机制进行优化和条件执行。解释器将代码转换为字节码,由PVM执行,可能会预编译常量表达式或优化循环。理解这些机制有助于优化代码和提高效率。

    python中两个列表的串联替代方案是什么?python中两个列表的串联替代方案是什么?May 09, 2025 am 12:16 AM

    可以使用多种方法在Python中连接两个列表:1.使用 操作符,简单但在大列表中效率低;2.使用extend方法,效率高但会修改原列表;3.使用 =操作符,兼具效率和可读性;4.使用itertools.chain函数,内存效率高但需额外导入;5.使用列表解析,优雅但可能过于复杂。选择方法应根据代码上下文和需求。

    Python:合并两个列表的有效方法Python:合并两个列表的有效方法May 09, 2025 am 12:15 AM

    有多种方法可以合并Python列表:1.使用 操作符,简单但对大列表不内存高效;2.使用extend方法,内存高效但会修改原列表;3.使用itertools.chain,适用于大数据集;4.使用*操作符,一行代码合并小到中型列表;5.使用numpy.concatenate,适用于大数据集和性能要求高的场景;6.使用append方法,适用于小列表但效率低。选择方法时需考虑列表大小和应用场景。

    编译的与解释的语言:优点和缺点编译的与解释的语言:优点和缺点May 09, 2025 am 12:06 AM

    CompiledLanguagesOffersPeedAndSecurity,而interneterpretledlanguages provideeaseafuseanDoctability.1)commiledlanguageslikec arefasterandSecureButhOnderDevevelmendeclementCyclesclesclesclesclesclesclesclesclesclesclesclesclesclesclesclesclesclesandentency.2)cransportedeplatectentysenty

    Python:对于循环,最完整的指南Python:对于循环,最完整的指南May 09, 2025 am 12:05 AM

    Python中,for循环用于遍历可迭代对象,while循环用于条件满足时重复执行操作。1)for循环示例:遍历列表并打印元素。2)while循环示例:猜数字游戏,直到猜对为止。掌握循环原理和优化技巧可提高代码效率和可靠性。

    python concatenate列表到一个字符串中python concatenate列表到一个字符串中May 09, 2025 am 12:02 AM

    要将列表连接成字符串,Python中使用join()方法是最佳选择。1)使用join()方法将列表元素连接成字符串,如''.join(my_list)。2)对于包含数字的列表,先用map(str,numbers)转换为字符串再连接。3)可以使用生成器表达式进行复杂格式化,如','.join(f'({fruit})'forfruitinfruits)。4)处理混合数据类型时,使用map(str,mixed_list)确保所有元素可转换为字符串。5)对于大型列表,使用''.join(large_li

    Python的混合方法:编译和解释合并Python的混合方法:编译和解释合并May 08, 2025 am 12:16 AM

    pythonuseshybridapprace,ComminingCompilationTobyTecoDeAndInterpretation.1)codeiscompiledtoplatform-Indepententbybytecode.2)bytecodeisisterpretedbybythepbybythepythonvirtualmachine,增强效率和通用性。

    See all articles

    热AI工具

    Undresser.AI Undress

    Undresser.AI Undress

    人工智能驱动的应用程序,用于创建逼真的裸体照片

    AI Clothes Remover

    AI Clothes Remover

    用于从照片中去除衣服的在线人工智能工具。

    Undress AI Tool

    Undress AI Tool

    免费脱衣服图片

    Clothoff.io

    Clothoff.io

    AI脱衣机

    Video Face Swap

    Video Face Swap

    使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸!

    热工具

    WebStorm Mac版

    WebStorm Mac版

    好用的JavaScript开发工具

    EditPlus 中文破解版

    EditPlus 中文破解版

    体积小,语法高亮,不支持代码提示功能

    mPDF

    mPDF

    mPDF是一个PHP库,可以从UTF-8编码的HTML生成PDF文件。原作者Ian Back编写mPDF以从他的网站上“即时”输出PDF文件,并处理不同的语言。与原始脚本如HTML2FPDF相比,它的速度较慢,并且在使用Unicode字体时生成的文件较大,但支持CSS样式等,并进行了大量增强。支持几乎所有语言,包括RTL(阿拉伯语和希伯来语)和CJK(中日韩)。支持嵌套的块级元素(如P、DIV),

    Dreamweaver CS6

    Dreamweaver CS6

    视觉化网页开发工具

    安全考试浏览器

    安全考试浏览器

    Safe Exam Browser是一个安全的浏览器环境,用于安全地进行在线考试。该软件将任何计算机变成一个安全的工作站。它控制对任何实用工具的访问,并防止学生使用未经授权的资源。