検索
ホームページバックエンド開発Python チュートリアルPython Web クローラー入門: Web ページの基本を理解する

    1. Web ページの構成

    Web ページは主に HTML、CSS、JavaScript の 3 つの部分で構成されます。 Web ページを人間の顔にたとえると、これら 3 つの部分は人間の目、鼻、口に相当します。以下にこれら3つの機能を紹介します。

    HTML

    HTML (HyperText Markup Language) は、Web ページの構築に使用されるマークアップ言語です。標準のユニバーサル マークアップ言語に基づくサブセットです。Web ページとして HTML1.0 を置き換えます。実稼働標準である HTML2.0 では、Web ページのパフォーマンス機能を強化するためにいくつかの新しい要素が追加されています。

    HTML 構文には、Web ページの構造、コンテンツ、スタイルを定義するために使用されるタグとタグ構文が含まれています。 HTML ドキュメントには通常、ルート タグと 1 つ以上のタグが含まれており、各タグには、タグのタイプ、属性、および値をマークするヘッダー行があります。

    HTML のルート タグはドキュメントの開始タグであり、ドキュメントのタイトルと、ドキュメントの種類、言語、日付、バージョンなどのその他の基本情報が含まれます。

    さらに、HTML には、タイトル、段落、表、リスト、画像、リンクなどの他の要素と属性もあります。これらの要素と属性は、Web ページの外観と動作を定義するために使用できます。 。

    HTML には、移植性、クロスプラットフォーム、リッチ コンテンツなどの利点があり、Web ページ制作の標準言語となっており、Web サイト、電子メール、ニュース記事、オンライン チャットなどの分野で広く使用されています。

    CSS

    HTML は Web ページの構造を定義しますが、HTML ページ レイアウトだけでは Web ページの見栄えは良くありません。 Web ページの見栄えを良くするには、CSS を使用します。

    CSS (Cascading Style Sheets) は、Web ページのスタイルを定義するために使用される言語であり、HTML のスーパーセットです。 CSS では、より多くのスタイルの選択肢と定義が提供され、Web デザインがより柔軟になり、保守が容易になります。

    CSS 構文には、セレクター、属性、値、疑似クラス セレクターなどが含まれます。セレクターは、スタイルを設定する要素を選択するために使用され、クラス、ID、ワイルドカードなどに基づいて選択できます。属性は要素スタイルを定義するために使用され、クラス、ID、ワイルドカードなどに基づいて定義できます。値には、単一の値、または文字列、数値、またはその他のタイプの値を指定できます。擬似クラス セレクターは、クラス セレクターと ID セレクターを定義するために使用され、擬似クラス要素と擬似クラス セレクターを定義するために使用できます。

    CSS の利点には、保守性、拡張性、カスタマイズ性などが含まれます。CSS により、Web デザインがより柔軟になり、保守が容易になります。 CSS を使用すると、Web ページのレイアウト、スタイル、アニメーション効果をより適切に制御でき、Web ページをより美しく魅力的なものにすることができます。

    CSS3 は CSS の最新バージョンであり、Web デザインをより柔軟かつ充実させるために、いくつかの新しいセレクター、プロパティ、値が追加されています。たとえば、CSS3 では新しい疑似クラス セレクター、アニメーション セレクター、トランジション セレクターなどが追加され、Web デザインがより鮮やかで興味深いものになります。

    CSS とはどのようなものですか? 抜粋してみました。

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

    このコードは #head という名前の要素を定義し、そのスタイル属性は位置: 相対; 高さ: 100%; 幅: 100%; 最小高さ: 768px; カーソル: デフォルト; です。

    これらの属性の意味は次のとおりです。

    position:relative:要素の配置方法が相対配置であること、つまり要素がその親要素に対して相対的に配置されることを示します。
    Height: 100%: 要素の高さが親要素の高さの 100% であることを示します。
    width: 100%: 要素の幅が親要素の幅の 100% であることを示します。
    min-height: 768px: 要素の最小の高さが 768 ピクセルであること、つまり、その親要素の最小の高さが 768 ピクセルであることを示します。
    cursor:default: 要素のカーソル スタイルがデフォルト値であること、つまりカーソル スタイルが設定されていないことを示します。
    これらの属性を組み合わせることで、相対位置、高さ 100%、幅 100%、およびデフォルトのカーソル スタイルを使用して要素を定義できます。

    JavaScript

    JavaScript (略して「JS」) は、関数優先度を備えた軽量のインタプリタ型またはジャストインタイムでコンパイルされるプログラミング言語です。 1995 年に Netscape の Brendan Eich によって初めて設計および実装され、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 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 クローラー入門: 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 クローラー入門: Web ページの基本を理解するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

    声明
    この記事は亿速云で複製されています。侵害がある場合は、admin@php.cn までご連絡ください。
    Pythonループ:例とベストプラクティスPythonループ:例とベストプラクティスMay 10, 2025 am 12:05 AM

    Pythonloopsは、forloopsealforsecences andwhilelcondition basedrepetition.bestPracticesInvolveを使用して、Pythonloopsincludeを使用します

    Pythonの実行モデル:コンパイル、解釈、またはその両方?Pythonの実行モデル:コンパイル、解釈、またはその両方?May 10, 2025 am 12:04 AM

    pythonisbothcompiledinterted.whenyourunapythonscript、itisfirstcompiledintobytecode、これはdenepythonvirtualmachine(pvm).thishybridapproaChallowsforplatform-platform-denodent-codebutcututicut。

    Pythonはラインごとに実行されますか?Pythonはラインごとに実行されますか?May 10, 2025 am 12:03 AM

    Pythonは厳密に行ごとの実行ではありませんが、最適化され、インタープレーターメカニズムに基づいて条件付き実行です。インタープリターは、コードをPVMによって実行されるBytecodeに変換し、定数式または最適化ループを事前促進する場合があります。これらのメカニズムを理解することで、コードを最適化し、効率を向上させることができます。

    Pythonの2つのリストを連結する代替品は何ですか?Pythonの2つのリストを連結する代替品は何ですか?May 09, 2025 am 12:16 AM

    Pythonに2つのリストを接続する多くの方法があります。1。オペレーターを使用しますが、これはシンプルですが、大きなリストでは非効率的です。 2。効率的ですが、元のリストを変更する拡張メソッドを使用します。 3。=演算子を使用します。これは効率的で読み取り可能です。 4。itertools.chain関数を使用します。これはメモリ効率が高いが、追加のインポートが必要です。 5。リストの解析を使用します。これはエレガントですが、複雑すぎる場合があります。選択方法は、コードのコンテキストと要件に基づいている必要があります。

    Python:2つのリストをマージする効率的な方法Python:2つのリストをマージする効率的な方法May 09, 2025 am 12:15 AM

    Pythonリストをマージするには多くの方法があります。1。オペレーターを使用します。オペレーターは、シンプルですが、大きなリストではメモリ効率的ではありません。 2。効率的ですが、元のリストを変更する拡張メソッドを使用します。 3. Itertools.chainを使用します。これは、大規模なデータセットに適しています。 4.使用 *オペレーター、1つのコードで小規模から中型のリストをマージします。 5. numpy.concatenateを使用します。これは、パフォーマンス要件の高い大規模なデータセットとシナリオに適しています。 6.小さなリストに適したが、非効率的な追加方法を使用します。メソッドを選択するときは、リストのサイズとアプリケーションのシナリオを考慮する必要があります。

    コンパイルされた通信言語:長所と短所コンパイルされた通信言語:長所と短所May 09, 2025 am 12:06 AM

    compiledlanguagesOfferspeedandsecurity、foredlanguagesprovideeaseofuseandportability.1)compiledlanguageslikec arefasterandsecurebuthavelOnderdevelopmentsplat dependency.2)

    Python:ループのために、そして最も完全なガイドPython:ループのために、そして最も完全なガイドMay 09, 2025 am 12:05 AM

    Pythonでは、forループは反復可能なオブジェクトを通過するために使用され、条件が満たされたときに操作を繰り返し実行するためにしばらくループが使用されます。 1)ループの例:リストを通過し、要素を印刷します。 2)ループの例:正しいと推測するまで、数値ゲームを推測します。マスタリングサイクルの原則と最適化手法は、コードの効率と信頼性を向上させることができます。

    Python concatenateリストを文字列に入れますPython concatenateリストを文字列に入れますMay 09, 2025 am 12:02 AM

    リストを文字列に連結するには、PythonのJoin()メソッドを使用して最良の選択です。 1)join()メソッドを使用して、 '' .join(my_list)などのリスト要素を文字列に連結します。 2)数字を含むリストの場合、連結する前にマップ(str、数字)を文字列に変換します。 3) '、'などの複雑なフォーマットに発電機式を使用できます。 4)混合データ型を処理するときは、MAP(STR、Mixed_List)を使用して、すべての要素を文字列に変換できるようにします。 5)大規模なリストには、 '' .join(lage_li)を使用します

    See all articles

    ホットAIツール

    Undresser.AI Undress

    Undresser.AI Undress

    リアルなヌード写真を作成する AI 搭載アプリ

    AI Clothes Remover

    AI Clothes Remover

    写真から衣服を削除するオンライン AI ツール。

    Undress AI Tool

    Undress AI Tool

    脱衣画像を無料で

    Clothoff.io

    Clothoff.io

    AI衣類リムーバー

    Video Face Swap

    Video Face Swap

    完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

    ホットツール

    SAP NetWeaver Server Adapter for Eclipse

    SAP NetWeaver Server Adapter for Eclipse

    Eclipse を SAP NetWeaver アプリケーション サーバーと統合します。

    メモ帳++7.3.1

    メモ帳++7.3.1

    使いやすく無料のコードエディター

    EditPlus 中国語クラック版

    EditPlus 中国語クラック版

    サイズが小さく、構文の強調表示、コード プロンプト機能はサポートされていません

    MinGW - Minimalist GNU for Windows

    MinGW - Minimalist GNU for Windows

    このプロジェクトは osdn.net/projects/mingw に移行中です。引き続きそこでフォローしていただけます。 MinGW: GNU Compiler Collection (GCC) のネイティブ Windows ポートであり、ネイティブ Windows アプリケーションを構築するための自由に配布可能なインポート ライブラリとヘッダー ファイルであり、C99 機能をサポートする MSVC ランタイムの拡張機能が含まれています。すべての MinGW ソフトウェアは 64 ビット Windows プラットフォームで実行できます。

    ZendStudio 13.5.1 Mac

    ZendStudio 13.5.1 Mac

    強力な PHP 統合開発環境