HTMLのスペースの問題を解決する-htmlチュートリアル-php.cn

ホームページ

ウェブフロントエンド

htmlチュートリアル

HTMLのスペースの問題を解決する

黄舟

Jul 22, 2017 am 09:37 AM

html解決する質問

<h2 id="span-nbsp-class-glyphicon-nbsp-glyphicon-send-span-nbsp-联系我们"><span class="glyphicon glyphicon-send"></span> 联系我们</h2>
<h2 id="span-nbsp-class-glyphicon-nbsp-glyphicon-send-span-nbsp-联系我们"><span class="glyphicon glyphicon-send"></span> 联系我们</h2>
<h2 id="span-nbsp-class-glyphicon-nbsp-glyphicon-send-span-nbsp-联系我们"><span class="glyphicon glyphicon-send"></span> 联系我们</h2>

上記3つの書き方でアイコンとテキストの距離が違うのはなぜですか？インラインブロックアイコンと改行は関係あるのでしょうか？ 5 行変更すると

<h2 id="span-nbsp-class-glyphicon-nbsp-glyphicon-send-span-nbsp-联系我们"><span class="glyphicon glyphicon-send"></span> 联系我们</h2>
<h2 id="span-nbsp-class-glyphicon-nbsp-glyphicon-send-span-nbsp-联系我们"><span class="glyphicon glyphicon-send"></span> 联系我们</h2>

上記 2 つの効果は同じですが、なぜですか?

<h2 id="span-nbsp-class-glyphicon-nbsp-glyphicon-send-span-nbsp-nbsp-nbsp-联系我们"><span class="glyphicon glyphicon-send"></span>   联系我们</h2>

nasp は実際の型付きスペースと同じ効果があるのに、なぜ nbsp を使用するのでしょうか?

<h2 id="span-nbsp-class-glyphicon-nbsp-glyphicon-send-span-nbsp-nbsp-联系我们"><span class="glyphicon glyphicon-send"></span>  联系我们</h2>
<h2 id="span-nbsp-class-glyphicon-nbsp-glyphicon-send-span-nbsp-nbsp-nbsp-nbsp-nbsp-nbsp-nbsp-联系我们"><span class="glyphicon glyphicon-send"></span>       联系我们</h2>

なぜ 1 スペース、1 nbsp と 5 スペース、1 nbsp では同じ効果があるのでしょうか?

ブラウザが HTML ドキュメントを解析すると、複数の接続されたスペース、キャリッジリターン、または TAB が直接 1 つに解析されます...

インライン要素間のスペースまたはリターン (span、b、a など)、車が解析されますスペースとして扱うため、コードの最初の部分は次と同等になります:

 联系我们
  联系我们
<h2 id="span-nbsp-class-glyphicon-nbsp-glyphicon-send-span-nbsp-nbsp-nbsp-联系我们"><span class="glyphicon glyphicon-send"></span>   联系我们</h2>

通常、HTML はドキュメント内のスペースをトリミングします。文書内に 10 個の連続したスペースを入力すると、HTML はそのうちの 9 個を削除します。を使用すると、文書にスペースを追加できます。

nbspとは英語のNon-Breaking SPaceの略で、直訳すると「非破壊空間」となります。 HTML では、は 1 つのスペース文字 (英語では 1 つのスペース文字) を表し、1 つの中国語文字は 2 つの英語文字、つまり 2 つを占めます。

DOM 内の空白文字は、ノード構造を処理するときに多くの問題を引き起こします。
Mozilla のソフトウェアでは、元のファイル内のすべての空白文字が DOM に表示されます (タグに含まれる空白文字は除く)。この処理方法は、エディター内でテキストを直線的に配置できる一方で、CSS の空白:pre も役割を果たすことができます。
これは次のことを意味します:
- 一部の空白文字はそれ自体でテキストノードになります。
- 一部の空白文字は、他のテキストノードと結合されて 1 つのテキストノードになります。

Internet Explorer はノード間に生成された空白テキストノード (改行など) を無視しますが、他のブラウザは無視します。

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

声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

HTML：それはプログラミング言語か何か他のものですか？Apr 15, 2025 am 12:13 AM

htmlisnotaprogramminglanguage; itisamarkuplanguage.1）htmlStructuresandformatswebcontentusingtags.2）ItworkswithcsssssssssdjavascriptforInteractivity、強化を促進します。

HTML：Webページの構造の構築Apr 14, 2025 am 12:14 AM

HTMLは、Webページ構造の構築の基礎です。 1。HTMLは、コンテンツ構造とセマンティクス、および使用などを定義します。タグ。 2. SEO効果を改善するために、などのセマンティックマーカーを提供します。 3.タグを介したユーザーの相互作用を実現するには、フォーム検証に注意してください。 4. JavaScriptと組み合わせて、動的効果を実現するなどの高度な要素を使用します。 5.一般的なエラーには、閉じられていないラベルと引用されていない属性値が含まれ、検証ツールが必要です。 6.最適化戦略には、HTTP要求の削減、HTMLの圧縮、セマンティックタグの使用などが含まれます。

テキストからウェブサイトへ：HTMLの力Apr 13, 2025 am 12:07 AM

HTMLは、Webページを構築するために使用される言語であり、タグと属性を使用してWebページの構造とコンテンツを定義します。 1）htmlは、などのタグを介してドキュメント構造を整理します。 2）ブラウザはHTMLを分析してDOMを構築し、Webページをレンダリングします。 3）マルチメディア関数を強化するなど、HTML5の新機能。 4）一般的なエラーには、閉じられていないラベルと引用されていない属性値が含まれます。 5）最適化の提案には、セマンティックタグの使用とファイルサイズの削減が含まれます。

HTML、CSS、およびJavaScriptの理解：初心者向けガイドApr 12, 2025 am 12:02 AM

webdevelopmentReliesOnhtml、css、andjavascript：1）htmlStructuresContent、2）cssStylesit、および3）Javascriptaddsinteractivity、形成、

HTMLの役割：Webコンテンツの構造Apr 11, 2025 am 12:12 AM

HTMLの役割は、タグと属性を使用してWebページの構造とコンテンツを定義することです。 1。HTMLは、読みやすく理解しやすいようなタグを介してコンテンツを整理します。 2。アクセシビリティとSEOを強化するには、セマンティックタグなどを使用します。 3. HTMLコードの最適化により、Webページの読み込み速度とユーザーエクスペリエンスが向上する可能性があります。