HTML 基本構造_Powernode Java アカデミー

多くの場合、Web ページ開発を学ぶときに最初に印象に残るのは、html または htm サフィックスで終わる Web ページです。疑似静的 Web ページを除き、このタイプの Web ページは静的 Web ページとして分類されます。

では、html や htm と、php、asp、aspx、jsp などのサフィックスで終わる他の Web ページの違いは何でしょうか?

まず、HTML ページは静的です。最初から最後までプログラムが実行されることはありません。純粋な HTML 言語です。サーバーで処理されることなく、ブラウザに直接送信され、閲覧者に表示されます。
その他のサフィックスで終わる Web ページは、比較的動的な Web ページです。動的なページは、それぞれのプログラム変換とデータベース操作を通じてサーバーによって処理され、その後、ブラウザーは処理されたデータプログラムをユーザーに送信します。Web ページのコンテンツデータは、バックグラウンドデータによって変化する可能性があります。

では、HTML の基本的な言語構造とは何でしょうか?

まず HTML 構造を見てみましょう。

 <html>  
<ヘッド>  
<title>記事のタイトルを入力します</title>  
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> // これはウェブページのエンコーディングで、現在は gb2312 です 
<meta name="キーワード" content="キーワード" />  
<meta name="description" content="このページの説明またはキーワードの説明" /> 
</head> 
<本文> 
これがメインコンテンツです</body> 
</html>

完全な HTML には、HTML DOCTYPE 宣言、タイトル、ヘッド、Web ページコーディング宣言などが含まれます。

最初は完全な HTML ソースコード付き:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 0 Transitional//EN"
 "http://wwwworg/TR/xhtml1/DTD/xhtml1-transitionaldtd"> 
<html xmlns="http://wwwworg/1999/xhtml"> 
<ヘッド> 
<meta http-equiv="コンテンツタイプ" コンテンツ="text/html; charset=utf-8" /> 
<title>タイトル部分 - パワーノード</title> 
<meta name="キーワード" content="キーワード" />  
<meta name="description" content="このページの説明またはキーワードの説明" /> 
</head> 
<本文> 
目次</body> 
</html>

最新の完全な HTML 構造 - HTML ソースコード (推奨):

<!DOCTYPE html>  
<html lang="ja"> 
<ヘッド> 
<メタ文字セット="utf-8"> 
<title>ウェブページのタイトル</title> 
<meta name="キーワード" content="キーワード" /> 
<meta name="description" content="このページの説明" /> 
</head> 
<本文> 
ウェブページのコンテンツ</body> 
</html>

html であっても、他のサフィックスを持つ動的ページであっても、html 言語構造は同じですが、Web ページファイルに名前を付けるときに異なるサフィックスで終わります。

1. 動的ページでも静的ページでも、Web ページの先頭は「<html>」で始まり、末尾は「</html>」で終わります。

2. 「<html>」の次にはページヘッダー「<head>」が来ます。<head></head>内のコンテンツはブラウザでは表示できません。ここはサーバー、ブラウザ、外部JSへのリンク、リンクCSSスタイルなどのための領域で、「<title></title>」にはWebページのタイトルが配置されます。

3. そして、この2つのタグ「<meta name="keywords" content="キーワード" /> <meta name="description" content="このページの説明またはキーワードの説明" />」の内容は、検索エンジンがこのページのキーワードやこのウェブページのメインコンテンツなどを参照するためのもので、SEOに活用できます。

4. 次はメインテキスト「<body></body>」で、ボディエリアと呼ばれることもあります。ここに配置したコンテンツは、ブラウザを通じてユーザーに表示できます。コンテンツは、テーブルレイアウト形式、DIVレイアウト形式、または直接テキストにすることができます。これは、Web ページのコンテンツ表示領域であり、最も重要な領域でもあります。

5. 最後に「</html>」が付きます。これは、Web ページが閉じられていることを意味します。

上記は HTML 言語の完全かつ最もシンプルな基本構造です。上記を通じて、より多くのスタイルとコンテンツを追加して、Web ページを充実させることができます。
注: Web ページでは一般に、各タグを xhtml 標準に従って閉じる必要があります。たとえば、<html> で始まり </html> で終わります。<meta name="keywords" content="Keywords" /> のように閉じがない場合、</meta> は存在しないため、閉じを完了するには <meta /> が必要です。

上記は、素人にとって最も簡単な HTML 言語構造です。より豊富な HTML 言語構造を確認する必要がある場合は、Web サイトの Web ページを開き、ブラウザで [表示] をクリックし、[ソースコードの表示] をクリックして、Web ページの HTML 言語構造を確認します。このようにして、ソースコードに基づいてこの Web ページの HTML 言語構造とコンテンツを分析できます。

<<: MySQL 8.0.22.0 のダウンロード、インストール、設定方法のグラフィックチュートリアル

>>: JavaScript における URL オブジェクトの素晴らしい使い方