當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

data类型的Url的格式

發布時間：2023/12/4 编程问答 31 豆豆

生活随笔收集整理的這篇文章主要介紹了 data类型的Url的格式小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

data類型的Url的格式

一、data類型的簡介

所謂"data"類型的Url格式，是在RFC2397中提出的，目的對于一些“小”的數據，可以在網頁中直接嵌入，而不是從外部文件載入。例如對于img這個Tag，哪怕

這個圖片非常非常的小，小到只有一個點，也是要從另外一個外部的圖片文件例如gif文件中讀入的，如果瀏覽器實現了data類型的Url格式，這個文件就可以

直接從頁面文件內部讀入了。

二、入門實例

下面這個html代碼可以在支持data類型Url的瀏覽器中運行，運行后會看到一條藍色漸變底色的標題。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head> <style type="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> <div class="title">Hello, world!</div> </body> </html>

直接嵌入到html或css文件還是很合適的。

data格式的Url最直接的好處是，這些Url原本會引起一個新的網絡訪問，因為那里是一個網頁的地址，現在不會有新的網絡訪問了，因為現在這里是網頁的內

容。這樣做，會減少服務器的負載，當然同時也增加了當前網頁的大小。所以對“小”數據特別有好處。

三、data類型Url的形式

既然是Url，當然也可以直接在瀏覽器的地址欄中輸入。

data:text/html,<html><body><p><b>Hello, world!</b></p></body></html>

在瀏覽器中輸入以上的Url，會得到一個加粗的"Hello, world!"。也就是說，data:后面的數據直接用做網頁的內容，而不是網頁的地址。

data:text/plain;charset=UTF-8;base64,5L2g5aW977yM5Lit5paH77yB

這個例子會顯示出"你好，中文！"。如果吧charset部分去掉，就會顯示亂碼，因為我用的是UTF-8編碼。

簡單的說，data類型的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圖片數據 四、data類型Url的形式舉例

因為Url是一種基于文本的協議，所以gif/png/jpeg這種二進制屬于需要用base64進行編碼。換句話說，引入base64以后，就可以支持任意形式的數據格式。下

面是個png圖片的例子，會在瀏覽器中顯示一個Mozilla的圖標：

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAHWSURBVHjaYvz//z8DJQAggJiQOe/fv2fv7Oz8rays/N+VkfG/iYnJfyD/1+rVq7ffu3dPFpsBAAHEAHIBCJ85c8bN2Nj4vwsDw/8zQLwKiO8CcRoQu0DxqlWrdsHUwzBAAIGJmTNnPgYa9j8UqhFElwPxf2MIDeIrKSn9FwSJoRkAEEAM0DD4DzMAyPi/G+QKY4hh5WAXGf8PDQ0FGwJ22d27CjADAAIIrLmjo+MXA9R2kAHvGBA2wwx6B8W7od6CeQcggKCmCEL8bgwxYCbUIGTDVkHDBia+CuotgACCueD3TDQN75D4xmAvCoK9ARMHBzAw0AECiBHkAlC0Mdy7x9ABNA3obAZXIAa6iKEcGlMVQHwWyjYuL2d4v2cPg8vZswx7gHyAAAK7AOif7SAbOqCmn4Ha3AHFsIDtgPq/vLz8P4MSkJ2W9h8ggBjevXvHDo4FQUQg/kdypqCg4H8lUIACnQ/SOBMYI8bAsAJFPcj1AAEEjwVQqLpAbXmH5BJjqI0gi9DTAAgDBBCcAVLkgmQ7yKCZxpCQxqUZhAECCJ4XgMl493ug21ZD+aDAXH0WLM4A9MZPXJkJIIAwTAR5pQMalaCABQUULttBGCCAGCnNzgABBgAMJ5THwGvJLAAAAABJRU5ErkJggg==

data格式Url的種種應用舉例

可以在Html的Img對象中使用，例如

可以在Css的background-image屬性中使用，例如

div.image { width:100px; height:100px; background-image:url(data:image/x-icon;base64,AAABAAEAEBAAAAAAAABoBQAAF...); }

可以在Html的Css鏈接處使用，例如

可以在Html的Javascript鏈接處使用，例如

完整的語法定義

在RFC中，完整的語法定義如下。

urlchar指的就是一般url中允許的字符，有些字符需要轉義，例如"="要轉義為"%3D"，不過我測試下來，至少在Firefox里面，不轉義也是可以的。

parameter可以對mediatype進行屬性的擴展，常見的是charset，用來定義編碼格式，在多語言情況下需要用到。例如下面的例子。

五、base64數據轉換工具

把二進制數據轉換成為Base64不是什么難事，比如Total Commander就有這樣的功能。還有一些在線資源，

http://www.greywyvern.com/code/php/binary2base64

http://www.kawa.net/works/js/data-scheme/base64-e.html

有些在線轉換把base64里面的“=”轉換成為%3D，這個在Url中和“=”是一樣的，不轉換也沒什么問題。

總結

以上是生活随笔為你收集整理的data类型的Url的格式的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： Android 节操视频播放器jieca
下一篇： CSDN,CNBLOGS博客文章一键转载