XHTML 入門チュートリアル: よく使われる XHTML タグ

XHTML 入門チュートリアル: よく使われる XHTML タグ
<br />記事と同様に、Web ページにも明確な段落と重要度の異なるタイトルが必要です。このセクションでは、XHTMLでタイトルや段落などを実装するためによく使用されるタグを紹介します。タイトルタグ<h1>から<h6>
タイトルを定義するには、<h1> から <h6> までのタグを使用できます。対応する終了タグは </h1> から </h6> です。<h1> から <h6> のフォント サイズは順に小さくなり、重要度も徐々に低くなります。ブラウザはタイトルの上下に自動的に空白行を残します。 段落タグ <p>
段落を定義するには、<p> と </p> を使用します。<p> と </p> の間のコンテンツは段落として認識されます。これは、通常「自然な段落」と呼ばれるものに似ています。見出しと同様に、ブラウザは段落の始めと終わりの前後に空白行を追加します。 改行タグ <br /> (<br>)
新しい行にテキストを書きたいが、新しい段落を開始したくない場合は、<br /> タグを使用できます。 <br> タグも空のタグなので、XHTML の要件に準拠するには「/」を追加する必要があります。 水平分割線タグ <hr />(<hr>)
水平分割線を実装するためのタグは <hr /> です。 <br> タグと同様に、<hr> も空のタグです。XHTML ルールに準拠するには、「/」を追加する必要があります。 (下に区切り線があります)
注記
上記で紹介した 4 つのタグを適切に使用することで、Web ページを閲覧するユーザーに Web ページの階層が明確であると感じさせることができます。また、コメントを使用すると、自分の Web ページのソース コードを読むときに階層が明確であると感じさせ、混乱を招かないようにすることができます。 <!-- と --> の間の内容はコメントの内容であり、Web ページには表示されません。次の練習例でコメントを挿入する方法を確認してください。 練習例 前のセクションで保存した Web ページを開き、このセクションで学習した重要なタグを練習します。 <body></body> の「これは私の最初の <b>Web ページ</b> です。」を削除し、次のコンテンツを入力します: <h1>サービスアナウンスメント</h1><!-- タイトルの使用を練習して、フォント サイズが大きくなるかどうかを確認します。 -->
<hr /><!-- 水平分割線、「/」を忘れないでください -->
<h2>現在、全国の小学生と保護者に以下のサービスを提供しています。</h2><!--No. 2タイトル、フォントサイズがNo. 1タイトルより小さいか確認してください-->
<h3>学生向けサービス</h3>
<p>
冬休みや夏休みの宿題を書く(数学は間違いがないとは保証できませんし、中国語はタイプミスがないとは保証できませんし、英語の宿題は他の人に書いてもらうこともできます)
<br />小学4年生以下の生徒のいじめに加担した場合は、追加料金が発生します。
<br />保護者会では保護者のなりすましをお手伝いします。
</p><!--上記コンテンツは段落です-->
<h3>VIPサービス</h3>
<p>3 つのサービスすべてを購入した人は、自動的に VIP にアップグレードされます。 W3CのXHTML規格とISO2009~に完全準拠した個人ホームページを無料で作成いたします。 </p>
<!--ここの Web ページは比較的わかりやすく整理されていますが、インターフェースが醜くて粗雑だと思いませんか?たとえば、行間にスペースがなく、サイズ 1 の見出しが大きすぎます。 Web ページの外観を定義する方法については、後続の CSS チュートリアルで紹介します。要点を述べ忘れましたが、コメントは Web ページには表示されないので、ここには意味のないことを大量に入力できます。ただし、今後の Web デザイン プロセスでは、リマインダーとして役立つメモをいくつか書き留めるようにしてください。 -->
変更を保存した後、Web ページを参照して、自分の Web ページがこのページと同じであることを確認したら完了です。

<<:  Docker インストール rocketMQ チュートリアル (最も詳細)

>>:  MySQLとSpringの自動コミットの詳細な説明

推薦する

Vue マルチページ構成の詳細

目次1. 複数ページの違い2. SPAとMPA 3. Vue Cli スキャフォールディング構成1....

Workbench を介して MySQL データベースにリモートでアクセスする方法の詳細な説明

序文Workbench が 1 台のコンピューターにインストールされており、別の Ubuntu サー...

LinuxにNginxをインストールする正しい手順

序文私のように、Java バックエンドに勤勉な人であれば、多数のプロジェクト機能を実装することに加え...

Windows および Linux での Redis のインストールとデーモン設定

# Windows および Linux 上の Redis のインストール デーモン構成Redis の...

win2008 で mysql8.0.11 を mysql8.0.17 にアップグレードする詳細な手順

アップグレードの背景: MySQLの下位バージョンの脆弱性を解決するために、MySQLはMySQL ...

VPSサーバーでよく使われるパフォーマンステストスクリプトの概要

これは、VPS サーバー用の一般的なワンクリック パフォーマンス テスト スクリプトです。マシンの構...

uniapp プロジェクトの最適化方法と提案

目次1. 複雑なページデータ領域をコンポーネントにカプセル化する2. 大きな画像の使用を避ける3. ...

Vue+express+Socketでチャット機能を実現

この記事では、チャット機能を実現するためのVue+express+Socketの具体的なコードを参考...

魔法のMySQLデッドロックトラブルシューティング記録

背景MySQL のデッドロックについて言えば、私は以前 MySQL のロックに関する基本的な紹介記事...

Docker メモリ監視とストレステストの方法

起動していたDockerコンテナはメモリを使い果たした状態になっており、再起動せずにコンテナのメモリ...

ubuntu16.04でNFSサービスを構築する方法

NFS の紹介NFS (ネットワーク ファイル システム) は、FreeBSD でサポートされている...

MySQLデータベースのnullに関する知識ポイントのまとめ

MySQL データベースでは、null は一般的な状況です。MySQL での null に関する注意...

Node.js で簡単なクローラーケースを作成するチュートリアル

準備まず、nodejs をダウンロードする必要がありますが、これは問題ないはずです。原文はwebst...

MySQL 8.0.25 のインストールと設定方法のグラフィックチュートリアル

MySQL 8.0.25の最新のダウンロードとインストールのチュートリアルは参考になります。具体的な...

Ajax は CORS レスポンス ヘッダーを設定してクロスドメインの問題を解決し、クロスドメインのケース スタディを実現します。

1. クロスドメインを実現するためにCORSレスポンスヘッダーを設定するクロスオリジンリソース共有...