最もよく使われるHTMLエスケープシーケンス

最もよく使われるHTMLエスケープシーケンス
HTML では、<、>、& などは特別な意味を持ち (<、> はリンク タグ、& はエスケープ)、直接使用することはできません。これらのシンボルは、最終的に表示される Web ページには表示されません。これらのシンボルを Web ページに表示したい場合はどうすればよいでしょうか。
ここで HTML エスケープ シーケンスが登場します。
エスケープ シーケンスは、文字エンティティとも呼ばれます。 HTML では、エスケープ文字列が 2 つの理由で定義されています。1 つ目の理由は、「<」や「>」などの記号は既に HTML タグを表すために使用されているため、テキスト内の記号として直接使用できないことです。これらのシンボルを HTML ドキュメントで使用するには、エスケープ文字列を定義する必要があります。インタープリタはこのタイプの文字列に遭遇すると、それを実際の文字として解釈します。エスケープ文字列を入力するときは、大文字と小文字のルールに厳密に従ってください。 2 番目の理由は、一部の文字が ASCII 文字セットで定義されていないため、エスケープ文字列を使用して表現する必要があることです。
エスケープ シーケンス、つまり文字エンティティは 3 つの部分に分かれています。最初の部分はアンパサンド、2 番目の部分はエンティティ名または # とエンティティ番号、3 番目の部分はセミコロンです。
たとえば、小なり記号 (<) を表示するには、&lt; または &#60; と記述します。
エンティティ名を使用する利点は、理解しやすいことです。lt を見ると、それが「より小さい」という意味であることが推測できるでしょう。ただし、すべてのブラウザが最新のエンティティ名をサポートしているわけではないという欠点があります。エンティティ番号は、さまざまなブラウザで処理できます。
ヒント: エンティティ名では大文字と小文字が区別されます。
注意:同じシンボルを「エンティティ名」と「エンティティ番号」の2つの方法で参照できます。「エンティティ名」の利点は覚えやすいことですが、すべてのブラウザでスムーズに認識できるという保証はありません。「エンティティ番号」にはこの懸念はありませんが、覚えるのは本当に不便です。
最もよく使われる文字エンティティ
文字エンティティ表示の説明エンティティ名エンティティ番号
半角空白 &ensp; &#8194;
巨大な空白 &emsp; &#8195;
途切れない空白 &nbsp; &#160;
< 未満 &lt; &#60;
> より大きい > &#62;
&シンボル &amp; &#38;
二重引用符 &#34;
© 著作権 &コピー; &#169;
® 登録商標 &reg; &#174;
商標(米国) &#8482;
× 乗算記号 &times; &#215;
÷ 除算記号 &分ける; &#247;

<<:  vue data が関数である理由をご存知ですか?

>>:  MySQLクエリ最適化プロセスを理解する

推薦する

Nginx タイムアウト設定の詳細な説明

最近、プロジェクトで nginx を使用し、バックエンドで Java を使用しました。バックエンドで...

HTMLでは、div内のコンテンツが次のサイズを超えたときに自動的にスクロールバーが表示されるように設定します。

HTML ページでは、div 内のコンテンツが制限を超えた後に自動的にスクロール バーを表示する必要...

JavaScript を使用してテーブル情報を追加および削除する

JavaScript 入門JavaScript は軽量なインタープリタ型の Web 開発言語です。言...

JavaScript で配列の最大値と最小値を実装する 6 つの方法

配列[1,8,5,4,3,9,2]が与えられた場合、配列の最大値9と最小値1を取得するアルゴリズムを...

Linux で同じ内容のファイルを識別する方法の詳細な説明

序文ファイルのコピーによってハードドライブのスペースが大量に浪費され、ファイルを更新するときに混乱が...

ページングクリックコントロールを実装するネイティブJS

これは、ネイティブJSを使用してページングクリックコントロールを実装する必要がある面接の質問です。参...

Vue で PC 解像度の適応を実装するためのサンプルコード

目次プラン依存関係をインストールする依存関係の導入pxをremに変換するFlexible.jsを変更...

Dockerボリュームのファイルマッピング方法

背景ブロックチェーン ログ モジュールで作業しているときに、コンテナーが実行されている場合は、ログ ...

高同時実行シナリオにおける nginx 最適化の詳細な説明

日常の運用・保守作業では、nginx サービスが頻繁に使用され、nginx の高同時実行性によって生...

Vueの監視プロパティの詳細な説明

目次Vue モニターのプロパティリスナープロパティとは何ですか?リスニングプロパティと計算プロパティ...

レスポンシブ Web デザインが価値のない 5 つの理由

この記事は Tom Ewer の Managewp ブログからのもので、現在人気のレスポンシブ デザ...

Vue フロントエンド開発補助機能状態管理詳細例

目次マップ状態マップゲッターマップミューテーションマップアクション例まとめマップ状態コンポーネントが...

Centos7でmysql5.7.19のデータ保存場所を移動する方法

シナリオ: データ量が増加すると、MySQL が配置されているディスクがいっぱいになり、より大きなス...

LinuxシステムにISOファイルをインストールする方法

Linux システムで iso ファイルをインストールするにはどうすればいいですか?インストール手順...

vue ルーティング ビュー router-view のネストされたジャンプの実装

目次1. app.vueページを修正する2. ログインページを作成する (/views/login/...