那些年 程序员的样子

base64&标签之 小身躯大道理

2017-08-22  本文已影响24人  bo_bo_bo_la

一、�浅谈base64

      1.1、什么是base64?

               base64是网络上最常见的用于传输8Bit字节码的编码方式之一。Base编码是从二进制到字符的过程,可用于在HTTP环境下传递较长的标示信息。

      1.2、为什么使用base64?

             我们知道每个网页上或多或少都会有图片,而每张图片在下载的时候都会想服务器发送一个请求,这样会大大加重页面的加载速度。所以将图片转换为base64编码可以实现网页图片在网速不好的时候先于内容加载和减少HTTP的请求次数来减少服务器的负担。

      1.3、使用base64的优缺点

              优点:减少HTTP请求

                         转换成base64编码格式之后可以复用

              缺点:存在兼容问题(IE6+不支持)

                         增加HTML文档的体积

       1.4、什么时候使用base64?

              如果图片足够小且因为其特殊使用性无法被制作成雪碧图的时候,或者该图在整个网站的复用性很高且基本不hi被更新的时候

二、标签及其默认样式

        2.1、H1标题标签:

                   默认的 display: block; font-size:2em; font-weight: bold; margin: 0.67em 0; 

        2.2、P段落标签:

                 display: block; margin: 1em 0;

          2.3、ul无序列表标签:

                 display: block; list-style-type: disc; margin: 16px 0; padding-left: 40px;

          2.4、ol 有序列表标签:

                     display: block; list-style-type: decimal; margin: 16px 0; padding-left: 40px;

           2.5、li列表项标签:

                        display: list-item;  text-aligh: left;

         2.6、dl自定义标签: 

                    display: block; mardin: 16px 0;

          2.7、dt自定义标题标签:

                   display: block;

        2.8、dd自定义内容标签:

                display: block; margin-left: 40px;

       2.9、small小字标签(作用:内容强调):

                    display: inline; font-size: 相对较小

    2.10、big大字标签(作用:内容强调):

                    display: inline; font-size:相对较大

    2.11、strong加粗标签(作用:内容强调):

                     display:inline; font-weight: bold;

      2.12、em字体倾斜标签(作用:内容强调):

                      display:inline;font-size:italic;

        2.13、img图片标签:

                        display:inline;(注意img可以设置宽高)

      2.14、del删除标签(作用:内容强调):

                 display: inline; text-decoration-color: black; text_decoration-line: line-through; text-decoration-style: solid;

      2.15、sub向上标签(作用:内容强调):

               display:inline; font-size: smaller; vertical-align: sub;

dai

      2.16、sup向下标签(作用:内容强调):

              display:inline;font-size: smaller; vertical-align: super;

上一篇下一篇

猜你喜欢

热点阅读