ホームページ > ウェブフロントエンド > htmlチュートリアル > HTMLにスペースを挿入する方法を詳しく紹介

HTMLにスペースを挿入する方法を詳しく紹介

黄舟
リリース: 2017-05-26 15:00:16
オリジナル
3657 人が閲覧しました

通常、コードを記述するときはスペースバーを使用して複数のスペースを入力しますが、スペースバー、Tab キー、Enter キーによって入力されたスペースは HTML (ハイパーテキスト マークアップ言語) によって自動的に無視されます。 HTML では、このようなキーを空白文字として扱い、単一の空白間隔として表示します。 CSS ではさまざまなスタイルの間隔とインデントが提供されていますが、HTML には間隔を自分で定義できるツールもあります。

方法 1. 単一のスペースとタブ文字を挿入します

1. 改行しないスペースを挿入します。一般に、HTML では、スペースバーを何回押しても、単語間の空白スペースのみが表示されます。複数のスペースを挿入する必要がある場合は、  コードを入力してください。 これらは「スペース プレースホルダー」と呼ばれ、いくつか入力すると、ページ上にいくつかのスペースが表示されます。

これが非改行スペースと呼ばれる理由は、改行が生成されないためです。この間隔を乱用すると、ブラウザは改行をきれいに読みやすい方法で挿入できなくなる可能性があります。

2. 異なる幅のスペースを挿入します。ブラウザでスペースを表示できるようにするさまざまな文字エンティティがあります。ブラウザによって表示が多少異なる場合がありますが、  とは異なり、改行には影響しません:

  — 「en スペース」は活版印刷の測定単位にちなんで名付けられ、幅は通常のスペースの 2 倍です

  — 「em スペース」は通常のスペース 4 つ分の幅です

3. タブをシミュレートするには非改行スペースを使用します。段落を生成する 1 つの方法は、最初の行の前にいくつかのスペースを挿入することです:    。この方法は HTML でのみ機能し、CSS を使用している場合はお勧めできません (他の方法については他の手順で説明します)。

段落の内容がリッチテキストの場合は、「pre」タグを使用してください。

4. CSS を使用して段落を生成します。 CSS の内側のマージンまたは外側のマージンは、ブラウザに特定の表示形式を示すため、表示効果がより一貫します。 CSS の知識があまりなく、説明書が手元にない場合でも、簡単に追加できます。段落全体を右に移動する方法の具体的な手順は次のとおりです。

HTML ドキュメントの

セクションに、次のコマンドを挿入します。

<style>p.indent{ padding-left: 1.8em }</style>
ログイン後にコピー

"p.indent" は、 「インデント」と呼ばれるオブジェクト (任意に名前を付けることができます) 段落 (p というラベルが付いています)。残りのコマンドは、段落の左側にパディング スペースを追加します。

HTMLドキュメントの本文を返します。段落を追加したい場合は、タグ内に次のコードを挿入します:

<p class="indent"></p> 。
ログイン後にコピー

インデントの量を調整するには、CSS コマンドの数値「1.8」を変更するだけです。次の「em」は保持する必要があります。これは幅を表す単位です。

方法 2. 長い段落を書式設定する

1. 事前に書式設定されたテキストを使用します。 「pre」要素は、テキスト内のスペースまたは改行を保持する事前にフォーマットされたテキストを定義できます。そのため、

タグ内に入力されたスペースやEnterキーはスペースや改行として表示されます。これを使用して、コード サンプル、詩、またはスペースや改行を必要とするその他のテキスト コンテンツを表示できます。 

フォーマット済みテキストの欠点の 1 つは、その幅です。通常のハイパーテキスト マークアップ言語のように、ユーザーのウィンドウ サイズに合わせてページ幅を調整することはできません。

2. 改行を作成します。
タグはテキストの現在の行の末尾に配置され、単純な改行を挿入します。複数の「br」タグを入力して複数の空白行を作成できます。これは、HTML の初心者がコードを記述するのに適した方法ですが、CSS を学習すると、この種の必須の HTML スタイル コードは推奨されないことがわかります。 ,

3.「p」タグを使用して段落を定義します。 p 要素は前後に空白を自動的に作成するため、テキストの後の

タグで段落を終了できます。ほとんどのブラウザは空行で段落を区切りますが、これは正確な書式を保証するものではありません。

ヒント

最終的にテキストとコードを確認したときに、コード上に余分な記号が「浮いている」場合は、「
」を置き換えるなど、不完全なコードがないかどうかを注意深く確認する必要があります。 「

CSS (Cascading Style Sheets) は、Web ページ内の要素の位置のレイアウト (テキスト内の間隔を含む) をピクセルレベルで正確に制御できるため、Web ページのオブジェクトとモデル スタイルをより適切かつ正確に編集できます。

開始タグの後または終了タグの前にスペースを入力しないでください。たとえば、「スペース チュートリアル」と入力する場合は、「スペースチュートリアル 」と入力しないでください。

非スペース文字 ( ) は文字エンティティの例です。このような Web 文字をキーボードから入力することはできませんが、対応するコードを使用して文字を挿入することはできます。

警告

ハイパーテキスト マークアップ言語 (HTML) は、タブ ( ) 改行文字を通常どおり表示しません。標準のハイパーテキスト Web ページには改行がないため、「タブ」文字には実際の意味はありません。

HTML 言語はコード エディターまたはプレーン テキスト ファイルで作成するのが最善であり、ワードプロセッサ プログラム「Word」は使用しないでください。テキスト編集ソフトウェアでコードを記述すると、Web ページ内でスペースが奇妙な記号に変わり、表示エラーが発生することがあります。これは通常、Word プログラムがテキスト コンテンツに追加データを追加し、この情報が Web ブラウザーで認識されず、表示エラーが発生することが原因です。

以上がHTMLにスペースを挿入する方法を詳しく紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート