url(data:image/png;base64,R0)_html/css_WEB-ITnose
url(data:image/png;base64,R0**)
いわゆる「データ」タイプの URL 形式は、RFC2397 で提案されており、その目的は、いくつかの「小さな」データを Web ページに直接埋め込むことです。外部ファイルからロードするのではなく、たとえば、タグ img の場合、画像が 1 ドットほどの非常に小さい場合でも、ブラウザが URL 形式のデータ型を実装している場合は、gif ファイルなどの別の外部画像ファイルから読み取る必要があります。このファイルはページ ファイル内から直接読み取ることができます。
データ型 URL 形式は 1998 年に提案されました。現在、Firefox、Opera、Safari、Konqueror などのブラウザーはすでにこれをサポートしていますが、IE はバージョン 7.0 までサポートしていません。IE がサポートしていないものが多すぎます。まあ、これも違いはありません。 :(
小さな例です
次の HTML コードは、Firefox などのデータ型 Url をサポートするブラウザーで実行できます。実行後、青色のグラデーションの背景を持つタイトルが表示されます。
<!DOCTYPEhtml PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml" ><head><styletype="text/css">；.title { background-image:url(data:image/gif;base64,R0lGODlhAQAcALMAAMXh96HR97XZ98Hf98Xg97DX97nb98Lf97vc98Tg973d96rU97ba97%2Fe96XS9wAAACH5BAAAAAAALAAAAAABABwAAAQVMLhVBDNItXESAURyDI2CGIxQLE4EADs%3D);background-repeat:repeat-x;height:28px;line-height: 28px;text-align:center;}</style></head><body><divclass="title">Hello, world!</div></body></html> このグラデーションの青色の背景実際には、色は水平方向の繰り返し (repeat-x) によって 1x28 の小さな画像を使用して形成されます。この画像は非常に小さいですが、104 バイトなので、データ形式で HTML または CSS ファイル
Url に直接埋め込むのに適しています。最も直接的な利点は、Web ページのアドレスがあるため、これらの URL によって新しいネットワーク訪問が発生することですが、これが Web ページのコンテンツになるため、新しいネットワーク訪問がなくなることです。サーバーの負荷を軽減します。もちろん、現在の Web ページのサイズも増加します。したがって、データ型の URL を直接入力することもできます。ブラウザのアドレスバーに
data:text/html,<html><body><p><b>Hello, world!</b></p></body></html>
ブラウザに上記の URL を入力すると、太字の「Hello, world!」が表示されます。つまり、data: の後のデータは Web ページのコンテンツとして使用されません。 Web ページのアドレス
簡単に言えば、データ型の URL は次の形式になります
data:,<文本数据>data:text/plain,<文本数据>data:text/html,<HTML代码>data:text/html;base64,<base64编码的HTML代码>data:text/css,<CSS代码>data:text/css;base64,<base64编码的CSS代码>data:text/javascript,<Javascript代码>data:text/javascript;base64,<base64编码的Javascript代码>data:image/gif;base64,base64编码的gif图片数据data:image/png;base64,base64编码的png图片数据data:image/jpeg;base64,base64编码的jpeg图片数据data:image/x-icon;base64,base64编码的icon图片数据
URL はテキストベースのプロトコルであるため、gif/png/jpeg などのバイナリは Base64 でエンコードする必要があります。つまり、base64 の導入後は、あらゆるデータ形式をサポートできます。以下は、ブラウザーに Mozilla アイコンを表示する PNG 画像の例です。
データ形式の URL のさまざまなアプリケーションの例です。
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAHWSURBVHjaYvz//z8DJQAggJiQOe/fv2fv7Oz8rays/N+VkfG/iYnJfyD/1+rVq7ffu3dPFpsBAAHEAHIBCJ85c8bN2Nj4vwsDw/8zQLwKiO8CcRoQu0DxqlWrdsHUwzBAAIGJmTNnPgYa9j8UqhFElwPxf2MIDeIrKSn9FwSJoRkAEEAM0DD4DzMAyPi/G+QKY4hh5WAXGf8PDQ0FGwJ22d27CjADAAIIrLmjo+MXA9R2kAHvGBA2wwx6B8W7od6CeQcggKCmCEL8bgwxYCbUIGTDVkHDBia+CuotgACCueD3TDQN75D4xmAvCoK9ARMHBzAw0AECiBHkAlC0Mdy7x9ABNA3obAZXIAa6iKEcGlMVQHwWyjYuL2d4v2cPg8vZswx7gHyAAAK7AOif7SAbOqCmn4Ha3AHFsIDtgPq/vLz8P4MSkJ2W9h8ggBjevXvHDo4FQUQg/kdypqCg4H8lUIACnQ/SOBMYI8bAsAJFPcj1AAEEjwVQqLpAbXmH5BJjqI0gi9DTAAgDBBCcAVLkgmQ7yKCZxpCQxqUZhAECCJ4XgMl493ug21ZD+aDAXH0WLM4A9MZPXJkJIIAwTAR5pQMalaCABQUULttBGCCAGCnNzgABBgAMJ5THwGvJLAAAAABJRU5ErkJggg
<img src="data:image/x-icon;base64,AAABAAEAEBAAAAAAAABoBQAAF..." />
div.image {width:100px;height:100px;background-image:url(data:image/x-icon;base64,AAABAAEAEBAAAAAAAABoBQAAF...);} 使用できますHTML の Javascript リンク (例:
<link rel="stylesheet" type="text/css"href="data:text/css;base64,LyogKioqKiogVGVtcGxhdGUgKioq..." />
RFC では、完全な構文は次のように定義されています。
<script type="text/javascript"href="data:text/javascript;base64,dmFyIHNjT2JqMSA9IG5ldyBzY3Jv..."></script>完整的语法定义
urlchar は、「=」など、エスケープする必要がある文字を指します。 「%3D」としてエスケープできますが、少なくとも Firefox ではエスケープなしで実行できます。最も一般的なのは、多言語で使用される charset です。例えば以下の例では「Hello, Chinese.」と表示されますが、charset部分を削除すると文字化けしてしまいます。
Firefox には、データ型 Url のテスト ページがあり、さまざまな形式のデータ型 Url のテスト URL とテスト結果の説明がリストされます。
base64エンコードと内容の秘密
バイナリデータをBase64に変換することは難しいことではなく、例えばTotal Commanderにはそのような機能があります。オンライン リソースもいくつかあります。http://www.greywyvern.com/code/php/binary2base64http://www.kawa.net/works/js/data-scheme/base64-e.html
オンライン リソースもあります変換 Base64の「=」を%3Dに変換します。これは、URLの「=」と同じです。変換しなくても問題ありません。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
7532
15
1379
52
82
11
21
79
HTML5のクロスブラウザー互換性のベストプラクティスは何ですか？
Mar 17, 2025 pm 12:20 PM
記事では、HTML5クロスブラウザーの互換性を確保するためのベストプラクティスについて説明し、機能検出、プログレッシブエンハンスメント、およびテスト方法に焦点を当てています。
＆lt; Progress＆gt;の目的は何ですか 要素？
Mar 21, 2025 pm 12:34 PM
この記事では、HTML＆lt; Progress＆gt;について説明します。要素、その目的、スタイリング、および＆lt; meter＆gt;との違い要素。主な焦点は、＆lt; Progress＆gt;を使用することです。タスクの完了と＆lt; Meter＆gt; statiの場合
＆lt; datalist＆gt;の目的は何ですか 要素？
Mar 21, 2025 pm 12:33 PM
この記事では、HTML＆lt; Datalist＆GT;について説明します。オートコンプリートの提案を提供し、ユーザーエクスペリエンスの改善、エラーの削減によりフォームを強化する要素。
HTML5フォーム検証属性を使用してユーザー入力を検証するにはどうすればよいですか？
Mar 17, 2025 pm 12:27 PM
この記事では、ブラウザのユーザー入力を直接検証するために、必要、パターン、MIN、MAX、および長さの制限などのHTML5フォーム検証属性を使用して説明します。
＆lt; meter＆gt;の目的は何ですか 要素？
Mar 21, 2025 pm 12:35 PM
この記事では、html＆lt; meter＆gt;について説明します。要素は、範囲内でスカラーまたは分数値を表示するために使用され、Web開発におけるその一般的なアプリケーション。それは差別化＆lt; Meter＆gt; ＆lt; Progress＆gt;およびex
ビューポートメタタグとは何ですか？レスポンシブデザインにとってなぜそれが重要なのですか？
Mar 20, 2025 pm 05:56 PM
この記事では、モバイルデバイスのレスポンシブWebデザインに不可欠なViewportメタタグについて説明します。適切な使用により、最適なコンテンツのスケーリングとユーザーの相互作用が保証され、誤用が設計とアクセシビリティの問題につながる可能性があることを説明しています。
＆lt; iframe＆gt;の目的は何ですか タグ？使用する際のセキュリティ上の考慮事項は何ですか？
Mar 20, 2025 pm 06:05 PM
この記事では、＆lt; iframe＆gt;外部コンテンツをWebページ、その一般的な用途、セキュリティリスク、およびオブジェクトタグやAPIなどの代替案に埋め込む際のタグの目的。
HTMLは初心者のために簡単に学ぶことができますか？
Apr 07, 2025 am 12:11 AM
HTMLは、簡単に学習しやすく、結果をすばやく見ることができるため、初心者に適しています。 1）HTMLの学習曲線はスムーズで簡単に開始できます。 2）基本タグをマスターして、Webページの作成を開始します。 3）柔軟性が高く、CSSおよびJavaScriptと組み合わせて使用できます。 4）豊富な学習リソースと最新のツールは、学習プロセスをサポートしています。
