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

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 オブジェクトの素晴らしい使い方

推薦する

jQuery はラブエフェクトをクリックする

この記事では、jQueryのクリック時のラブエフェクトの具体的なコードを参考までに共有します。具体的...

vue-qr を使用して Vue の QR コードを生成する方法について深く理解する

目次npm ダウンロードステップ(1)輸入(2)vue-qrパラメータ例要約する「QRコード」の英語...

JavaScript でネットワーク速度をテストする方法

目次序文ネットワーク速度のフロントエンド判定原理のまとめ1. img を読み込むか Ajax リクエ...

HTML マークアップ言語 - テーブルタグ

123WORDPRESS.COM HTML チュートリアル セクションに戻るには、ここをクリックして...

Linux での MySQL 5.6.24 (バ​​イナリ) 自動インストール スクリプト

この記事では、Linux環境でのmysql5.6.24自動インストールスクリプトコードを参考までに共...

Reactは無限ループスクロール情報を実装する

この記事では、無限ループスクロールを実現するためのReactの具体的なコードを参考までに紹介します。...

MySQL空間関数を使用してロケーションパンチインを実装するための完全な手順

序文プロジェクトの要件は、ユーザーの現在の位置が特定の地理的位置範囲内にあるかどうかを判断することで...

MySQLデータベース監視binlogを有効にする手順

序文多くの場合、ユーザーが自分のデータに対して実行する操作に基づいて何かを行う必要があります。たとえ...

CentOS 6.6 ソースコードのコンパイルと MySQL 5.7.18 のインストールチュートリアルの詳細な説明

1. ユーザーとグループを追加する1. mysqlユーザーグループを追加する # グループ追加mys...

3つの簡単な調整でMySQLを最適化する

私は熟練した DBA になるつもりはありませんが、MySQL を最適化するときは、いくつかの構成を調...

VMware kali仮想マシン環境の設定方法

1|0 カーネルをコンパイルする(1)uname -rコマンドを実行してカーネルバージョンを表示しま...

Linux/CentOS サーバー セキュリティ構成の一般ガイド

Linux はオープン システムです。インターネット上には、既成のプログラムやツールが多数存在します...

Linux システムで複数のバージョンの PHP を共存させるソリューション (超シンプル)

PHP7が出たので、最新バージョンのファンとしては、早速アップグレードして体験してみました。しかし...

HTMLはWEB標準の開発の中心的な基盤です

HTML 中心のフロントエンド開発は、ほぼ Web 標準の意味です。共通しているのは「分離」という考...

読めばわかるVueの8つのヒント

1. v-forでは常に:keyを使用するデータを操作する必要があるときにプログラムを一定かつ予測可...