例を通してBRタグとPタグの違いを理解する

例を通してBRタグとPタグの違いを理解する
<br />改行タグの使用<br>改行タグ<br>は終わりのないタグです。HTMLファイル内のどこかに<br>タグが使用されている限り、そのファイルをブラウザで表示したときに、その位置以降のテキストが次の行に表示されます。<br>タグは改行タグです!
ご注意ください!通常のテキスト ファイルでは、キーボードの Enter キーを押すだけで改行できます。ただし、HTML ファイルでは Enter キーを押しても意味がありません。改行するには、特定のタグ <br> を使用する必要があります。例:
引用内容は以下のとおりです。
<html>
<ヘッド>
<title>br タグの使用</title>
</head>
<本文>
チンピン・ディアオ<br>
雲は衣服のよう、花は顔のよう、
春風が玄関を吹き抜け、花々が満開です。
もし玉山の頂上で会っていなかったら、
私たちは月の下で瑶台で会います。 <br>
</本文>
</html>
どんな効果が出るかお楽しみに〜!
詩全体をページの中央に配置するにはどうしたらよいかと尋ねる人もいるかもしれません。中央揃えを実現したい場合は、前に学習した <p align=center>content</p> を使用できます。
例:
引用内容は以下のとおりです。
<html>
<ヘッド>
<title>br タグの使用</title>
</head>
<本文>
<p align=center>チンピン・ディアオ<br>
雲は衣服のよう、花は顔のよう、
春風が玄関を吹き抜け、花々が満開です。
もし玉山の頂上で会っていなかったら、
私たちは月の下で瑶台で会います。 <br>
</p>
</本文>
</html>
================================================
段落タグ <p> の使用 <p> タグで識別されるテキストは、同じ段落のテキストを表します。ブラウザでは、改行に加えて、異なる段落のテキストを区別するために、空白行で異なる段落のテキストが区切られることがあります。構文は次のとおりです。
<p>テキスト</p>
しかし、一般的なアプリケーションでは、段落に分割されるテキストの後にのみ <p> タグが追加されることがよくあります。例:
引用内容は以下のとおりです。
<html>
<ヘッド>
</head>
<title><p>タグの使用</title>
</head>
<本文>
チンピン・ディアオ
雲は服に似ており、花は顔に似ている。
春風が敷居を吹き抜け、露が濃い。
もし玉山の頂上でそれを見ていなかったら、
我々は月の下で瑶台で会うだろう、
</本文>
</html>
では、<br> と <p> の違いは何でしょうか?簡単に言えば、枝分かれすると列に分かれる
<p>行間が比較的広いです!以下を見てみましょう:
引用内容は以下のとおりです。
<html>
<ヘッド>
</head>
<title><p>タグの使用</title>
</head>
<本文>
チンピン・ディアオ<br>
雲は衣服のよう、花は顔のよう、
春風が敷居を吹き抜け、露が濃い。
もし玉山の頂上でそれを見ていなかったら、
我々は月の下で瑶台で会うだろう、
</本文>
</html>
こうすると効果がわかりますよね?

<<:  フロントエンドはJavaScriptを通じてCADグラフィックスの詳細を作成および変更します。

>>:  YUMを使用してdockerをインストールする方法

推薦する

Nginx ログ出力のリクエスト後パラメータを設定する方法

【序文】当プロジェクトの SMS 機能は、第三者に接続することです。第三者からの元の受信確認要求は ...

ノードスクリプトで自動サインインと抽選機能を実現

目次1. はじめに2. 準備3. スクリプトプロジェクトの構築4. コードの作成と実行5. まとめと...

Nginx転送マッチングルールの実装

1. 正規表現マッチング大文字と小文字を区別するマッチングの場合 ~ ~*は大文字と小文字を区別しな...

HTMLのマーキータグは、シームレスなスクロールマーキー効果を実現します。

<marquee> タグはペアで表示されるタグです。最初のタグ <marquee...

MySQL 外部キー制約の無効化と有効化コマンド

MySQL 外部キー制約の無効化と有効化: MySQL 外部キー制約が有効になっているかどうかは、グ...

ラジオボタンとチェックボックス効果の純粋な CSS 実装例

ラジオボタンとチェックボックスラジオボタンとチェックボックスの効果を実現するための純粋な CSSラジ...

Vue3の一般的なAPIの使用方法の紹介

目次ライフサイクルの変化反応的な参照vue2.x では ref を使用して要素タグを取得します。vu...

MySQL の lru リンク リストの簡単な分析

1. 従来のLRUリンクリストについて簡単に説明するLRU:最も最近使われなかったものLRU リンク...

MySQL Limitクエリのパフォーマンスを向上させる方法

MySQL データベース操作では、一部のクエリを実行するときにデータベース エンジンが完全なテーブル...

MySQLが基礎データ構造としてB+ツリーを使用する理由

MySQL の基盤となるデータ構造が B+ ツリーであることは誰もが知っていますが、ではなぜ赤黒ツリ...

Windows システムの MySQL が中国語を入力および表示できない問題の解決方法

ステップ 1: メモ帳を使用して、MySQL インストール ディレクトリの「my.ini」ファイルを...

ubuntu14.04 に jdk1.8 をインストールするチュートリアル

1. jdkダウンロードアドレスをダウンロードする我下載的是jdk-8u221-linux-x64....

HTML+CSS3+JSで実装されたドロップダウンメニュー

成果を達成する html <div class="コンテナ"> &l...

Vue で HTML 5 ドラッグ アンド ドロップ API を使用する方法

ドラッグ アンド ドロップ API は、ドラッグ可能な要素を HTML に追加し、ドラッグ可能な豊富...

vue+antv でレーダーチャートを実装するためのサンプルコード

1. 依存関係をダウンロードするnpm インストール @antv/データセットnpm インストール ...