HTML+CSS 网页

favicon 图标

使用 link 中的 favicon 来引用，需要在网页文件同文件夹下的一个 favicon.ico 文件图标

https://www.bitbug.net/index.php 在线转换地址

搜索引擎优化

title 标题

首页标题：网站名 (产品名) - 网站的介绍

建议不超 28 个汉字

description 网站说明

使用 meta 标签 name 为 description content 介绍内容 建议不超 120 个汉字

如:

<meta name="description" content="介绍内容">

keywords 关键字

使用 meat 标签 name 为 keywords content 为关键字 关键字应该限制在 6-8 个

如:

 <meta
      name="keywords"
      content="网上购物,网上商城,手机,笔记本,电脑,MP3,CD,VCD,DV,相机,数码,配件,手表,存储卡,品优购"
    /> 

字体图标

利用自定义字体库，生成个性化字体图标，减少图片请求

http://icomoon.io 无序创建项目 添加即可下载字体

https://www.iconfont.cn/ 阿里的矢量字库 得创建项目才能下载字体

声明字体

在 css 中声明字体才能使用自定义字体

@font-face {
	font-family:'自定义名称';
    src:url('字体路径'),url('路径2');
    font-weight:normal;
    font-style:normal;
}
/* 引用字体 */
div {
    font-family:'自定义名称';
}

web-fonts 的兼容性

我们刚才使用的字体文件是 .ttf, 它是 TrueType 字体.

在开发中某些浏览器可能不支持该字体，所以为了浏览器的兼容性问题，我们需要有对应其他格式的字体；

TrueType 字体：拓展名是 .ttf

• OpenType/TrueType 字体：拓展名是 .ttf、.otf，建立在 TrueType 字体之上
• Embedded OpenType 字体：拓展名是 .eot，OpenType 字体的压缩版
• SVG 字体：拓展名是 .svg、 .svgz
• WOFF 表示 Web Open Font Format web 开放字体：拓展名是 .woff，建立在 TrueType 字体之上

https://font.qqe2.com/#

如果我们具备很强的兼容性，那么可以如下格式编写：

bulletproof @font-face syntax（刀枪不入的 @font-face 语法）

• url 指定资源的路径
• format 用于帮助浏览器快速识别字体的格式；

logo 优化

logo 里面放一个 h1 标签 提高搜索引擎权重

h1 里面放一个 a 标签，可以返回到首页，再给 a 标签一个大小 和 背景图片

a 标签 里面要放文字 (网站名称，但文字不要显示出来)

• 方法 1: 用 text-iudent 移动盒子外面 再用 overflow:hidden 移除溢出部分
• 方法 2: 用 font-size:0;

最后 给链接一个 title 属性 这样鼠标放上去就可以看到提示文字

css 过渡动画 transition

css 过渡动画用 transition 关键字，经常与:hover 配合使用

• transition-property: 过渡 css 属性的名称， 可以写 all 表示所有可动画的属性
• transition-duration: 过渡效果花费的时间，默认为 0
  • 注意要写时间单位 可以填写 s 或者 ms
• transition-timing-function: 过渡动画的时间曲线，默认为 ease
  • 
• transition-delay: 过渡效果何时开始，默认为 0，指定过渡动画执行之前的等待时间
• transition: 要过渡的属性 花费时间 运动曲线 何时开始；
  • 可以拥有多个过渡动画，用逗号隔开不能使用分号，分号代表 transition 结束.
  • all 属性，我们 transition 中过渡的属性可以用 all 关键字，代表着所有的属性都拥有过渡
  • 过渡动画写在元素本身上

如:

div {
	width:400px;
    height:150px;
    backround-clor;pink;
    transition: width 1s ease 0s,height 1s linear 0s;
    /*当鼠标放在div上时宽度变成800px,transition过渡动画属性为width宽度,时间为1s
    	单元素可以拥有多个过渡动画,用逗号隔开.
    */
}

div:hover {
    width:800px;
    height:700px
}

表单获得焦点

当此元素获取光标焦点的情况

伪类选择器 中的 focus , 失去焦点复原

如:

input:focus {
    background-color:pink;
}

Emmet 语法

>（子代）和 +（兄弟）

*（多个）和 ^（上一级）

()（分组）

属性 (id 属性、class 属性、普通属性) {}（内容）

$（数字）

隐式标签

CSS Emmet