一、项目样式补充。
1、精灵图的介绍
场景：项目中将多张小图片合并成一张大图片大图片就称为精灵图。
优点：减少服务器发送次数，减轻服务器的压力，提高页面加载速度
备注：取值取负数
2、背景图片大小
background-size （背景图片的大小）
取值：
数字＋px 比较简单，在已知大小的情况下比较常用
百分比 相对于自身盒子的宽高百分比图片会变形，实际开发比较常用
contain 包含将背景图片等比例缩放，直到不会超出盒子的最大范围
cover 覆盖，将背景图片等比例缩放，直到刚好装满整的大盒子没有空白。实际开发中应用也比较广。
background连写拓展
完整版：background： 、color imge repeat position/size
分别是背景的 颜色 图片 覆盖方式 位置/大小
2、文字阴影
作用：给文字添加阴影效果，吸引用户注意
属性名：text-shadow文字阴影
取值 ：
h-shadow 必须要有 ，水平偏移，有负值
v-shadow 必须有，垂直偏移量 有负值
blur 可选 模糊度
color 可选 阴影颜色
阴影可以叠加设置，每组阴影取值之间以逗号隔开
3、盒子阴影
作用：给盒子添加阴影效果，吸引用户注意，体现页面的制作细节
属性名：box-shadow
取值跟上面多加
spread 可选阴影扩大
inset 可选阴影改为内部阴影
4、过渡
作用：让元素的样式慢慢的变化，常配合hover使用，增强网页交互体验
属性名：transition
常见取值
过渡的属性 all：所有嫩滑过渡的属性都过渡、具体属性名：width 表示只有width过渡
过渡时长 数字＋s（秒数）
备注：
过渡需要：默认状态 和 hover状态样式不同，才能有过渡效果
transition属性给需要过渡的元素本身加
transition属性设置在不同状态中，效果不同的
① 给默认状态设置，鼠标移入移出都有过渡效果
② 给hover状态设置，鼠标移入有过渡效果，移出没有过渡效果
二、项目前置认知
1、网页与网站的关系
在互联网中，网站类似于是一本书，网页就是这本书的每一页
比如：淘宝、京东、黑马程序员等就是一个网站，类似于是一本书
这些网站中的每一个网页，如：主页、登录页面、商品页面就是每一个单独的页面，类似于每一页纸
多个同主题网页整合在一起，就称之为网站。
网站：提供特定服务的一组网页集合
网页：网站中的每一“页”
2、 骨架结构标签
DOCTYPE文档说明
<! DOCTYPE html>文档类型声明，告诉浏览器该网页的 HTML版本
注意点：DOCTYPE需要写在页面的第一行，不属于HTML标签
网页语言
Ø < html lang="en" >标识 网页 使用的 语言
Ø 作用：搜索引擎归类 + 浏览器翻译
Ø 常见语言：zh-CN 简体中文 / en 英文
字符编码（了解）
作用：保存和打开的字符编码需要统一设置，否则可能会出现 乱码
Ø 常见字符编码：
UTF-8：万国码，国际化的字符编码，收录了全球语言的文字
GB2312：6000+ 汉字
GBK：20000+ 汉字
Ø 注意点：开发中 统一使用 UTF-8 字符编码 即可
SEO三大标签
目标：能够知道 SEO三大标签，能够设置网页的ico图标 ，能够书写版心公共类代码
SEO（
Search Engine Optimization）：搜索引擎优化
作用：让网站在搜索引擎上的排名靠前
提升SEO的常见方法：
竞价排名
将网页制作成html后缀
标签语义化（在合适的地方使用合适的标签）
3、三大标签
title：网页标题标签
description：网页描述标签
keywords：网页关键词标签
常见有语义的布局标签有哪些？
布局标签 有语义化标签
header：网页头部
nav：网页导航
footer：网页底部
aside：网页侧边栏
section：网页区块
article：网页文章
ico图标设置
link rel="shortcut icon" herf="图标路径" tupe=“imge/x-icon”
