html css项目实战——favicon图标、meta、title、字体图标、Logo优化、css3的过渡动画、:focus、超链接的假链接

引入favicon图标

图标必须放在根目录下

<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">

三大优化标签

关键词：

<meta name="keywords" content="书写关键词用逗号隔开 " />

关键描述：

<meta name="description" content="关键描述，建议不要超过120字 " />

标题：

<title> 网站标题 title>

字体图标

https://icomoon.io/　　　Icomoon字体图标
第一步 ： 将下载的文件解压，复制fonts文件夹到根目录
第二步 : 打开解压的文件夹，打开demo.html，选择自己想要的图标并且复制，复制右下角的小框框，放到标签里面，有些人显示为空格有些人显示为？号
第三步 ： 声明icomoon字体，直接拷贝下面的代码到css文件里面，不过我们要注意url里面的路径（如果是内嵌式就直接复制，如果是外部链接式，需要…/往前翻一级再去查找）

@font-face {
     
  font-family: 'icomoon';
  src:  url('fonts/icomoon.eot?hk5gnb');
  src:  url('fonts/icomoon.eot?hk5gnb#iefix') format('embedded-opentype'),
    url('fonts/icomoon.ttf?hk5gnb') format('truetype'),
    url('fonts/icomoon.woff?hk5gnb') format('woff'),
    url('fonts/icomoon.svg?hk5gnb#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
}

第四步 ： icomoon的字体样式的设置，哪个标签调用了咱们的字体，我们就给她设置font-family: ‘icomoon’;，一般情况下建议大家使用后代选择器选择

追加字体图标：
选择需要追加的字体，然后下载，解压替换fonts文件夹

https://www.iconfont.cn/　　　阿里巴巴字体库
第一步 搜索自己想要下载的图标，直接免费的加入到购物车
第二步 点击购物车 ---- 添加至项目 — 新建自己的项目 — 确定
第三步 找到我的项目 ---- 我发起的项目 — 下载至本地

Unicode 引用：
第一步：拷贝项目下面生成的 @font-face

@font-face {
     
  font-family: 'iconfont';
  src: url('iconfont.eot');
  src: url('iconfont.eot?#iefix') format('embedded-opentype'),
      url('iconfont.woff2') format('woff2'),
      url('iconfont.woff') format('woff'),
      url('iconfont.ttf') format('truetype'),
      url('iconfont.svg#iconfont') format('svg');
}

第二步：定义使用 iconfont 的样式

.iconfont {
     
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

第三步：挑选相应图标并获取字体编码，应用于页面

<span class="iconfont">3span>

font-class 引用（第一次引用可能需要联网才能切换过来）
第一步：引入项目下面生成的 fontclass 代码：

<link rel="stylesheet" href="./iconfont.css">

第二步：挑选相应图标并获取类名，应用于页面：

<span class="iconfont icon-xxx">span>

" iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 “iconfont”。

阿里巴巴图标的追加：
将想要追加的图标添加到购物车，然后添加至项目（选择我们自己的项目）— 确定 — 下载 — 将之前的全部替换

Logo优化

放一个 h1 标签
a　设置大小　　可以返回首页
写文字，不显示：

１　text-indent: -9999px　　　　overflow:hidden
２　font-size: 0;

title　提示文字

Css3的过渡动画

transition: 要过渡的属性 花费时间 运动曲线 何时开始；
　　　　　all　　　　　 1s　　　　 ease 　　0s
　　　　　all　　　　　 0.5s
linear　匀速　　　　ease逐渐慢下来　　　ease-in 加速　　　　ease-out 减速

focus伪类选择器-获得焦点元素

input:focus

超链接的假链接

需要手型，不要跳转

<a href="javascript:;">