预览加载中，请您耐心等待几秒...

CSS3实例学习教程data类型的Url.docx

预览
1/4
2/4
3/4
4/4

在线预览结束，喜欢就下载吧，查找使用更方便

下载提示 文本预览

如果您无法下载资料，请参考说明：

1、部分资料下载需要金币，请确保您的账户上有足够的金币

2、已购买过的文档，再次下载不重复扣费

3、资料包下载后请先用软件解压，在使用对应软件打开

所谓"data"类型的Url格式，是在RFC2397中提出的，目的对于一些“小”的数据，可以在网页中直接嵌入，而不是从外部文件载入。例如对于img这个Tag，哪怕这个图片非常非常的小，小到只有一个点，也是要从另外一个外部的图片文件例如gif文件中读入的，如果浏览器实现了data类型的Url格式，这个文件就可以直接从页面文件内部读入了。 data类型的Url格式早在1998年就提出了，时至今日，Firfox、Opera、Safari和Konqueror这些浏览器都已经支持，但是IE直到7.0版本都还没有支持，IE不支持的东西太多了，也不差这一个。:( 小例子：下面这个html代码可以在支持data类型Url的浏览器中运行，例如Firefox。 运行后会看到一条蓝色渐变底色的标题。 01<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN" 02"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 03<htmlxmlns="http://www.w3.org/1999/xhtml"> 04<head> 05<styletype="text/HYPERLINK"http://www.cnwebshow.com/edu/Dreamweaver/"\t"_blank"css"> 06.title{ 07background-image:url(data:image/gif;base64,R0lGODlhAQAcALMAAMXh96HR97XZ98Hf98Xg97DX97nb98Lf97vc98Tg973d96rU97ba97%2Fe96XS9wAAACH5BAAAAAAALAAAAAABABwAAAQVMLhVBDNItXESAURyDI2CGIxQLE4EADs%3D); 08background-repeat:repeat-x; 09height:28px; 10line-height:28px; 11text-align:center; 12} 13</style> 14</head> 15<body> 16<divclass="title">Hello,world!</div> 17</body> 18</html> 这个渐变的蓝色底色实际上是用一个1x28的小图片通过横行重复(repeat-x)形成的。 这个图片很小，不过104个字节，直接嵌入到html或HYPERLINK"http://www.cnwebshow.com/edu/Dreamweaver/"\t"_blank"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类型的Url大致有下面几种形式。 01data:,<文本数据> 02data:text/plain,<文本数据> 03data:text/html,<HTML代码> 04data:text/html;base64,<base64编码的HTML代码> 05data:text/HYPERLINK"http://www.cnwebshow.com/edu/Dreamweaver/"\t"_blank"css,<CSS代码> 06data:text/HYPERLINK"http://www.cnwebshow.com/edu/Dreamweaver/"\t"_blank"css;base64,<base64编码的CSS代码> 07data:text/javascript,<Javascript代码> 08data:text/javascript;base64,<base64编码的Javascript代码> 09data:image/gif;base64,base64编码的gif图片数据 10data:image/png;base64,base64编码的png图片数据 11data:image/jpeg;base64,base64编码的jpeg图片数据 12data:image/x