<div class="box1">一个div 用了叫 box1 的css 样式
<img src="1.jpg" />插了一个 叫1.jpg 的图片
<div class="boxDis1">又一个div 用了 boxDis1的css 样式
<span class="span1"></span>一个 span 用了span1 的css样式 这是一个空行没有文字
<span class="span2">小猫</span> 一个 span 用了span2的css样式 这一行 有小猫两个字
</div>div 结束
</div>div 结束
上面提到的
<span>在定义中属于一个行内元素,在行内定义一个区域，也就是一行内可以被 <span>划分成CSS好几个区域，从而实现某种特定效果。 <span>本身没有任何属性。 <div>在CSS定义中属于一个块级元素 <div>可以包含段落、标题、表格甚至其它部分。这使DIV便于建立不同集成的类，如章节、摘要或备注。在页面效果上，使用 <div>会自动换行，使用 <span>就会保持同行。
css：级联样式表（Cascading Style Sheet）简称“CSS”，通常又称为“风格样式表（Style Sheet）”，它是用来进行网页风格设计的。比如，如果想让链接字未点击时是蓝色的，当鼠标移上去后字变成红色的且有下划线，这就是一种风格。通过设立样式表，可以统一地控制HTML中各标志的显示属性。级联样式表可以使人更能有效地控制网页外观。使用级联样式表，可以扩充精确指定网页元素位置，外观以及创建特殊效果的能力。
写的够详细了吧
将图片转换为base64编码最常见的应用就是在将网页中的一些图片转黄为base64编码可以实现网页图片在网速 不好的时候先于内容加载和减少http的请求次数来减少网站服务器的负担。
1、关于提前加载图片的应用
这个大家可以去看一下天猫主页的css代码，大家可能没有注意到，在我们使用网速不好的时候网络去访问天猫的时候，在页面没有完全加载出来的时候会出现一个“小猫”的等待图标，增加了用户体验。其实现的原理就是将那张图片使用base64编码放到css中，因为我们都知道，css是在html的头部引用的，要是优先与下面的内容被加载，所以在网速不好的时候就会出现这种效果。
（天猫css截图）
2、关于减少请求次数
我们都知道，我们的网站采用的都是http协议，而http协议是一种无状态的连接，就是连接和传输后都会断开连接节省资源。此时解决的方法就是尽量的减少http请求，此时base64编码可以将图片添加到css中，实现请求css即可下载下来图片，减少了再次请求图片的请求。当然减少http请求次数的方法还有很多，如css sprite技术，将网页中的小图片拼在 一张大图中，下载时只需要一次完整的http请求就可以，减少了请求次数。
阶段一：Python开发基础Python全栈开发与人工智能之Python开发基础知识学习内容包括：Python基础语法、数据类型、字符编码、文件操作、函数、装饰器、迭代器、内置方法、常用模块等。
阶段二：Python高级编程和数据库开发
Python全栈开发与人工智能之Python高级编程和数据库开发知识学习内容包括：面向对象开发、Socket网络编程、线程、进程、队列、IO多路模型、Mysql数据库开发等。
阶段三：前端开发
Python全栈开发与人工智能之前端开发知识学习内容包括：Html、CSS、JavaScript开发、Jquery&bootstrap开发、前端框架VUE开发等。
阶段四：WEB框架开发
Python全栈开发与人工智能之WEB框架开发学习内容包括：Django框架基础、Django框架进阶、BBS+Blog实战项目开发、缓存和队列中间件、Flask框架学习、Tornado框架学习、Restful API等。
阶段五：爬虫开发
Python全栈开发与人工智能之爬虫开发学习内容包括：爬虫开发实战。
阶段六：全栈项目实战
Python全栈开发与人工智能之全栈项目实战学习内容包括：企业应用工具学习、CRM客户关系管理系统开发、路飞学城在线教育平台开发等。
阶段七：数据分析
Python全栈开发与人工智能之数据分析学习内容包括：金融量化分析。
阶段八：人工智能
Python全栈开发与人工智能之人工智能学习内容包括：机器学习、数据分析 、图像识别、自然语言翻译等。
