最もよく使われる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クエリ最適化プロセスを理解する

推薦する

Vue 手書き読み込みアニメーション プロジェクト

ページが応答しない場合、白い画面が表示されないように、読み込みアニメーションを表示するのがユーザーフ...

Javascript 文字列メソッドの詳細な説明

目次文字列の長さ: 長さcharAt() charCodeAt()文字列に値が含まれているかどうかを...

InnoDB のアーキテクチャと機能の詳細な説明 (InnoDB ストレージ エンジンの読書メモの要約)

背景スレッド•マスタースレッドコア バックグラウンド スレッドは主に、バッファー プール データをデ...

Windows 10 で MySQL 8.0.12 の解凍バージョンをインストールして構成する方法 (グラフィック チュートリアル付き)

この記事では、MySQL 8.0.12 の解凍版のインストールと設定方法を記録し、皆様と共有します。...

Nodejs がイントラネット侵入サービスを実装

目次1. LAN内のプロキシ2. イントラネットの浸透イントラネット侵入とは何ですか?橋プロキシサー...

Dockerのクイックガイド

Docker は、安全で繰り返し可能な環境でソフトウェアを自動的にデプロイする方法を提供し、コンピュ...

Vue で debouce の手ぶれ補正機能を使用する方法

目次1. 手ぶれ補正機能2. Vueでdebouceの手ぶれ補正機能を使用する1. 手ぶれ補正機能2...

MySQLの大文字と小文字の区別によって発生する問題の分析

MYSQLは大文字と小文字を区別します言葉を見れば信じられます。タイトルを見れば内容がわかります。 ...

MySQL 空間データストレージと関数

目次1. データ型1. MySQL空間データとは何か2. GeoJSONとは3. 空間データ型のフォ...

CSSは2つの要素をブレンドする効果(スティッキー効果)を実現します。

数年前、Taobaoのモバイル版の左下隅に面白い丸いボタンがあったことを覚えています。それをクリック...

ウェブデザインの教育または学習プログラム

セクションコース内容営業時間1 ウェブデザインの概要2 2 HTML 基本タグとフォーマットタグ 2...

CentOS 上の Docker に Jupyter をインストールしてポートを開く方法

目次jupyterをインストールするDocker ポートマッピングjupyterをインストールするp...

MySQLのインストールと設定方法のグラフィックチュートリアル(CentOS7)

1. システム環境[root@localhost ホーム]# cat /etc/redhat-re...

Dockerはコンテナポートバインディングのローカルポートを実装します

今日、イメージを起動した後、HTTP リクエスト経由でアクセスできないという小さな問題が発生しました...

1 行のコードでさまざまな IE 互換性の問題を解決します (IE6-IE10)

x-ua-compatible は、IE ブラウザがページを解析およびコンパイルするためのモデルを...