例を通して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をインストールする方法

推薦する

Bootstrap 3.0 の特殊効果の学習ノート(表示と非表示、フローティングの除去、閉じるボタンなど)

この記事の主な内容は次のとおりです。 1. 閉じるボタン2.キャレット3. フローティングを素早く設...

Vue3でアイコンを使用する2つの例

目次1. SVGを使用する2. fontAwesomeを使用する3 ソース4 結論テクノロジースタッ...

MySQL におけるデータタイムとタイムスタンプの違い

MySQL には 3 つの日付型があります。日付(年-月-日)テーブル test(hiredate ...

Tomcat をアンインストールして再インストールする方法 (画像とテキスト付き)

tomcat9をアンインストールする1. Tomcatのインストールはディレクトリに解凍するだけで...

Linux システムでのユーザー管理の概要

目次1. ユーザーとユーザーグループの重要性1) ユーザーの存在意義2) ユーザーグループの重要性2...

過去の Linux イメージの問題を修正するためのサンプル分析

過去の Linux イメージに関する問題を修正従来の Linux イメージで作成された ECS クラ...

CSS3で蓮の花が咲くアニメーション効果を実現

まずは効果を見てみましょう:この効果は非常に華やかに見えますが、原理は複雑ではありません。1 枚の花...

HTMLは無効なテーブル幅設定の問題を解決します

テーブルに table-layer:fixed スタイルを設定し、テーブル内の行が結合されていること...

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

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

インライン要素とブロック要素とは何ですか?

1. インライン要素はコンテンツの幅のみを占めますが、ブロック要素はコンテンツの量に関係なく行全体を...

Dockerコンテナを終了した後も実行を継続する方法

現象:イメージを実行します (例: ubuntu14.04)。 docker run -it --r...

Win10 + Ubuntu20.04 LTS デュアルシステムブートインターフェースの美化

エフェクト表示組み込みのブートインターフェースがあまりにも醜いので、テーマをダウンロードして美しくし...

Windows 10 で MySQL を完全に削除してアンインストールする方法

序文この記事では、Windows 10 システムで MySQL を完全に削除してアンインストールする...

ウェブページにプレーヤーを埋め込む埋め込み要素の自動開始が false 無効

最近、仕事でサウンド ファイルを再生するために Web ページにプレーヤーを埋め込む必要に迫られまし...

docker redis5.0 clusterの実装 クラスタ構築

システム環境: Ubuntu 16.04LTSこの記事では、6 つの Docker コンテナを使用し...