今日励志语:生命太短暂,不要去做一些根本没有人想要的东西
今日知识点:
精灵图
为了有效地减少服务器接收和发送请求的次数,提高页面的加载速度,出现了 CSS 精灵技术(也称 CSS Sprites、CSS 雪碧)。将网页中的一些小背景图像整合到一张大图中 ,这样服务器只需要一次请求就可以了
使用精灵图核心:
- 精灵技术主要针对于背景图片使用。就是把多个小背景图片整合到一张大图片中。
- 这个大图片也称为 sprites 精灵图 或者 雪碧图
- 移动背景图片位置, 此时可以使用 background-position 。
- 移动的距离就是这个目标图片的 x 和 y 坐标。注意网页中的坐标有所不同
- 因为一般情况下都是往上往左移动,所以数值是负值。
- 使用精灵图的时候需要精确测量,每个小背景图片的大小和位置。
- 精灵图主要针对于小的背景图片使用。
- 主要借助于背景位置来实现—background-position 3. 一般情况下精灵图都是负值。(千万注意网页中的坐标: x轴右边走是正值,左边走是负值, y轴同理。)
今日面试题:述一下你对 HTML 语义化的理解
答:
(1)HTML 语义化让页面的内容结构化,结构更清晰,便于对浏览器、搜索引擎解
析;
(2)即使在没有样式 CSS 的情况下也能以一种文档格式显示,并且是容易阅读的;
(3)搜索引擎的爬虫也依赖于 HTML 标记来确定上下文和各个关键字的权重,有利于
SEO;
(4)使阅读源代码的人更容易将网站分块,便于阅读、维护和理解。