Python Web クローラー入門: Web ページの基本を理解する-Python チュートリアル-php.cn

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）是一个树形数据结构，它通过节点的组合来表示数据，节点通过节点之间的关系来表示数据之间的层次结构。节点树可以用来实现各种数据的组织和管理，例如数据库中的表，文件系统中的文件，以及各种应用程序中的数据模型。

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

树形结构：节点之间通过树形结构连接，节点的父节点通过右子节点连接，左子节点连接到根节点。
节点的层次结构：节点根据其父节点的层次结构来确定其位置。例如，一个节点的父节点是其子节点的父节点，其子节点是其左右子节点。
节点的继承关系：节点之间存在继承关系，即子节点继承其父节点的属性和关系。
节点的属性和关系：节点可以有属性和关系，属性用于描述节点的基本信息，例如名称、类型、值等。关系用于描述节点之间的关系，例如父子关系、层级关系等。
节点的遍历：节点树可以通过遍历来访问和修改节点的属性和关系。例如，可以通过递归遍历来查找节点的子节点和父节点，可以通过深度优先搜索遍历整个树。

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

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 までご連絡ください。

ホットAIツール

Undresser.AI Undress

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

AI Clothes Remover

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

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

Video Face Swap

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

ホットツール

メモ帳++7.3.1

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

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

神レベルのコード編集ソフト（SublimeText3）

ホットトピック

Java チュートリアル

1666

CakePHP チュートリアル

1425

Laravel チュートリアル

1328

PHP チュートリアル

1273

C# チュートリアル

1253

Related knowledge

PHPおよびPython：さまざまなパラダイムが説明されています Apr 18, 2025 am 12:26 AM

PHPは主に手順プログラミングですが、オブジェクト指向プログラミング（OOP）もサポートしています。 Pythonは、OOP、機能、手続き上のプログラミングなど、さまざまなパラダイムをサポートしています。 PHPはWeb開発に適しており、Pythonはデータ分析や機械学習などのさまざまなアプリケーションに適しています。

PHPとPythonの選択：ガイド Apr 18, 2025 am 12:24 AM

PHPはWeb開発と迅速なプロトタイピングに適しており、Pythonはデータサイエンスと機械学習に適しています。 1.PHPは、単純な構文と迅速な開発に適した動的なWeb開発に使用されます。 2。Pythonには簡潔な構文があり、複数のフィールドに適しており、強力なライブラリエコシステムがあります。

Sublime Code Pythonを実行する方法 Apr 16, 2025 am 08:48 AM

PythonコードをSublimeテキストで実行するには、最初にPythonプラグインをインストールし、次に.pyファイルを作成してコードを書き込み、Ctrl Bを押してコードを実行する必要があります。コードを実行すると、出力がコンソールに表示されます。

PHPとPython：彼らの歴史を深く掘り下げます Apr 18, 2025 am 12:25 AM

PHPは1994年に発信され、Rasmuslerdorfによって開発されました。もともとはウェブサイトの訪問者を追跡するために使用され、サーバー側のスクリプト言語に徐々に進化し、Web開発で広く使用されていました。 Pythonは、1980年代後半にGuidovan Rossumによって開発され、1991年に最初にリリースされました。コードの読みやすさとシンプルさを強調し、科学的コンピューティング、データ分析、その他の分野に適しています。

Python vs. JavaScript：学習曲線と使いやすさ Apr 16, 2025 am 12:12 AM

Pythonは、スムーズな学習曲線と簡潔な構文を備えた初心者により適しています。 JavaScriptは、急な学習曲線と柔軟な構文を備えたフロントエンド開発に適しています。 1。Python構文は直感的で、データサイエンスやバックエンド開発に適しています。 2。JavaScriptは柔軟で、フロントエンドおよびサーバー側のプログラミングで広く使用されています。

Golang vs. Python：パフォーマンスとスケーラビリティ Apr 19, 2025 am 12:18 AM

Golangは、パフォーマンスとスケーラビリティの点でPythonよりも優れています。 1）Golangのコンピレーションタイプの特性と効率的な並行性モデルにより、高い並行性シナリオでうまく機能します。 2）Pythonは解釈された言語として、ゆっくりと実行されますが、Cythonなどのツールを介してパフォーマンスを最適化できます。

vscodeでコードを書く場所 Apr 15, 2025 pm 09:54 PM

Visual Studioコード（VSCODE）でコードを作成するのはシンプルで使いやすいです。 VSCODEをインストールし、プロジェクトの作成、言語の選択、ファイルの作成、コードの書き込み、保存して実行します。 VSCODEの利点には、クロスプラットフォーム、フリーおよびオープンソース、強力な機能、リッチエクステンション、軽量で高速が含まれます。

メモ帳でPythonを実行する方法 Apr 16, 2025 pm 07:33 PM

メモ帳でPythonコードを実行するには、Python実行可能ファイルとNPPEXECプラグインをインストールする必要があります。 Pythonをインストールしてパスを追加した後、nppexecプラグインでコマンド「python」とパラメーター "{current_directory} {file_name}"を構成して、メモ帳のショートカットキー「F6」を介してPythonコードを実行します。

See all articles