搜尋
首頁後端開發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年首次設計實現,並被廣泛用於網頁瀏覽器中。

    JavaScript 的語法基於原型程式設計、多範式的動態腳本語言,並且支援物件導向、命令式、宣告式、函數式程式設計範式。它的標準是ECMAScript,截至 2012 年,所有瀏覽器都完整的支援ECMAScript 5.1,舊版的瀏覽器至少支援ECMAScript 3 標準。

    JavaScript 的基本語法包括變數、函數、物件、陣列和閉包等。變數用於存儲數據,函數用於實現邏輯,對像用於封裝數據和方法,數組用於存儲數據或對象,閉包用於重寫函數或方法並在其中使用變量。

    JavaScript 的內建物件包括函數、陣列、物件、字串、正規表示式和函數等。它也支援ES6中的class和const,以及新增的let和const`。 ES7引入了let,const和rest/spread等語法。

    JavaScript 的作用域鏈機制使程式碼可以在不同的作用域中安全地執行。它還支援事件處理、DOM操作、模組化等功能。 JavaScript 已廣泛應用於網頁瀏覽器、行動應用程式、遊戲開發等領域。

    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 id="网页标题">网页标题</h2>  
    <p>这是一个段落。</p>  
    <ul>  
    <li>列表项1</li>  
    <li>列表项2</li>  
    <li>列表项3</li>  
    </ul>  
    </main>  
    <footer>  
    <p>版权信息</p>  
    </footer>  
    </body>  
    </html>

    这个示例中, 声明了这是一个 HTML5 文档, 标签定义了文档的根元素,

    标签包含了文档的元数据,如标题、字符集、视口等。 标签定义了文档的标题,<meta charset="UTF-8"> 和 <meta name="viewport"> 标签定义了文档的字符集和视口。<link> 标签定义了文档的样式表,<nav> 标签定义了文档的导航链接,<ul> 标签定义了文档的列表项,<li> 标签定义了文档的列表项。<h2 id="标签定义了文档的标题"> 标签定义了文档的标题,</h2> <p> 标签定义了文档的段落。<footer> 标签定义了文档的版权信息。</footer></p> <p>这只是一个简单的示例,实际的HTML结构可能更加复杂。在编写网页时,需要根据具体的需求和目标,选择合适的HTML标签和样式表,并进行适当的排版和布局。</p> </li> </ul></nav>

    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

    Safe Exam Browser

    Safe Exam Browser是一個安全的瀏覽器環境,安全地進行線上考試。該軟體將任何電腦變成一個安全的工作站。它控制對任何實用工具的訪問,並防止學生使用未經授權的資源。