XHTML 入門チュートリアル: Web ページのヘッダーと DTD

XHTML 入門チュートリアル: Web ページのヘッダーと DTD

ヘッドと DTD はページには表示されませんが、Web ページの重要な要素です。 なぜ失敗したのでしょうか?
前のセクションでは、Web ページをチェックしたときにエラー メッセージが表示されましたが、Web ページの作成プロセス全体を通じて XHTML 標準に従って記述しました。実は、問題はウェブページの「ヘッド」にあります。以下でこの問題を解決してみましょう。前回のチュートリアルでは、<title> タグを除いて、<body> 間のコンテンツ、つまりページに表示されるコンテンツを変更しました。では、XHTML の <head> セクションは何をするのでしょうか?実際、ブラウザが「見る」ことができる多くの情報を <head> 部分に追加できます。以下では、ヘッド部分でよく使われるタグをいくつか紹介します。
注: このセクションのタグと属性のほとんどは覚えにくいものです。実際、これらは Web ページ作成ソフトウェアを使用して Web ページを作成するときに自動的に生成されます。このセクションの目的は、これらのタグの意味を理解し、必要に応じて手動で変更できるようにすることです。次に、「index.html」を開き、<head></head> の間に次のコードを挿入します。
1. <meta http-equiv="Content-Type" content="text/html;charset=gb2312" />
このコードは、Web ページが gb2312 中国語文字エンコードを使用していることをブラウザに伝えます。この <meta> 情報が存在しないことが、前回のチェックで問題が発生した理由の 1 つです。
2. <meta name="keywords" content="小学生、いじめる同級生、冬休みと夏休みの宿題、保護者" />
このコードは検索エンジン向けに書かれており、内容はindex.htmlのキーワードです。
<meta> タグも空のタグなので、/ を追加することを忘れないでください。 <meta> タグにはこれ以外にも多くの機能がありますが、実際に使用してみなければ、<meta> タグの実際の有用性を理解することは困難です。 <meta> タグについて詳しく知りたい場合は、Baidu で関連する知識を検索できます。 <head> タグの解説 前述したように、<head> 部分の内容は閲覧者向けではなく、ブラウザや検索エンジン向けに書かれています。したがって、<head> セクションには、ページに表示されるコンテンツを含めないでください。 DTD
今、Web ページを再度確認すると、DTD ファイルが見つからないというエラー メッセージが表示されます。では、DTD ファイルとは何でしょうか?簡単に言えば、ファイルを読み取る前に、そのファイルがどのようなルールセットに従って記述されているかを誰にでも(主にブラウザのようなソフトウェアに)伝えます。検証プロセスを例にとると、HTML4.01 の DTD を使用すると、検証ツールは HTML4.01 のルールを使用して Web ページを記述していると認識し、対応するルールに従ってコードを行ごとに検証し、最後に検証結果を返します。
私たちが作成する Web ページでは、XHTML のルールが使用され、もちろん XHTML DTD も使用されます。ただし、前述したように、XHTML の DTD も、比較的緩やかな移行 DTD と、非常に厳格な要件を持つ厳密な DTD に分かれています。このチュートリアルでは、Web ページで厳密な DTD を宣言します。DTD について詳しく知りたい場合は、XML を学習する必要があります。このチュートリアルでは詳細には説明しません。
次に、Web ページの DTD を宣言します。以前に保存した「index.html」を開き、最初の行(<html> タグの前)に次のコードを入力します。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html> タグに次の属性を追加します: xmlns="http://www.w3.org/1999/xhtml"。これは名前空間属性と呼ばれ、XML カテゴリに属します。ここでは詳細には説明しません。
このコードの目的は、Web ページが xhtml1-strict.dtd を使用していることを宣言することです。ここで、このページを W3 バリデーターに送信すると、今度は「このページは XHTML1.0 Strict に準拠しています!」というメッセージが返されます。これは、コードにエラーがなく、XHTML1 の厳格な標準に完全に準拠していることを意味します。もちろん、実際の作業では必ずしもそうとは限りません。実際の Web デザインのプロセスでは、さまざまな理由から非標準のコードを記述することになります。このとき、バリデーターはエラーレポートを発行するので、プロンプトに従ってコードを変更するだけです。

<<:  MySQL データベースは XA 仕様をどのように実装しますか?

>>:  jQuery はシャッター効果を実現します (li 配置を使用)

推薦する

a タグにはテキストと画像があります。テキストを非表示にして画像のみを表示するにはどうすればよいでしょうか?

多くの場合、画像を表示する<a>タグのスタイルに遭遇しますが、タグ内にテキストがあり、そ...

CentOS7 64 ビットでの MySQL 5.7 のインストールと設定のチュートリアル

インストール環境: CentOS7 64ビットMINI版、MySQL5.7をインストール1. YUM...

Vue3 はメッセージコンポーネントの例を実装します

目次コンポーネント設計最終的なコンポーネントAPIの定義コンポーネント構造の定義テンプレートとスタイ...

Vue の動的メニュー、動的ルートの読み込みと更新の落とし穴

目次必要:アイデア:レッスン:テキストを共有する:要約する必要:インターフェイスからサブメニュー デ...

Linuxカーネルがプロセスアドレス空間に侵入し、プロセスメモリを変更する方法

プロセス アドレス空間の分離は、現代のオペレーティング システムの注目すべき機能です。これは、「古い...

HTML シンボルからエンティティへのアルゴリズムのチャレンジ

チャレンジ:文字列内の文字 &、<、>、" (二重引用符)、および &...

JSONオブジェクトのキーを置き換える最良の方法

JSON (JavaScript Object Notation、JS Object Notatio...

MySQL Installer 8.0.21 インストール チュートリアル (画像とテキスト付き)

1. 理由新しいシステムに MySQL を再インストールする必要があったので、将来詳細を忘れた場合...

Dockerアーキテクチャ入門

Docker には 3 つの基本概念が含まれています。イメージ: Docker イメージはルート フ...

Python スクリプトを Ubuntu で直接実行する方法

翻訳プログラムを例に挙げてみます。前回はWindowsでのアプリケーションのパッケージ化についてお話...

Vue補間式とv-textディレクティブの違い

目次1. プラグイン式を使用する2. プラグイン式でv-cloakを使用してちらつきの問題を解決する...

Dockerでデータディレクトリを移行する方法

目次ディスク使用量の表示ディスク クリーンアップ (軽々しく使用しないでください)データの移行ディス...

Centos8.3、dockerデプロイメントspringbootプロジェクトの実際のケース分析

導入現在、k8s は非常に人気があり、それについて学ぶために本を購入しました。しかし、k8s では数...

Linux コマンドを使用してオーディオ形式を変換および結合する方法

FFmpeg flacをインストールする eric@ray:~$ sudo apt install ...