一、HTML 开发引入图标字体
1、字体下载网站
Fontello - icon fonts generator
IcoMoon
iconfont
2、字体引入
1）、下载后的字体库解压如下：
字体库解压示意图
2）、这里面有用的文件和文件已经标出，将 fonts 文件夹拷贝到自己的项目当中，如图：
添加字体到项目
3）、在 style 标签内添加如下代码，目的是引用字体
@font-face {
font-family: 'icomoon';
src: url('fonts/icomoon.eot?aorssu');
src: url('fonts/icomoon.eot?aorssu#iefix') format('embedded-opentype'),
url('fonts/icomoon.ttf?aorssu') format('truetype'),
url('fonts/icomoon.woff?aorssu') format('woff'),
url('fonts/icomoon.svg?aorssu#icomoon') format('svg');
font-weight: normal;
font-style: normal;
font-display: block;
}
4）、完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>京东Test</title>
<style>
@font-face {
font-family: 'icomoon';
src: url('../fonts/icomoon.eot?aorssu');
src: url('../fonts/icomoon.eot?aorssu#iefix')
format('embedded-opentype'),
url('../fonts/icomoon.ttf?aorssu') format('truetype'),
url('../fonts/icomoon.woff?aorssu') format('woff'),
url('../fonts/icomoon.svg?aorssu#icomoon') format('svg');
font-weight: normal;
font-style: normal;
font-display: block;
}
span {
font-family: "icomoon", serif;
font-size: 20px;
}
</style>
</head>
<body>
<span></span>
</body>
</html>
span 标签内虽然只有一个方框 但是 表示出来的形式如下：
字体银行卡
下载的文件夹内 的 .json 文件也不能删除，用于后期 追加图标使用。
二、网页标签引入图标
<link rel="shortcut icon" href="favicon.ico"/>
注意：1、所有的图标均命名为“favicon.ico”；
2、该图标放在根目录下；
三、网页的 三大标签
1、网页 title 标题
定义：属于网页的重要标签，是搜索引擎了解网页的入口。
注意：
1）、长度： google 35个中文字、百度 28个中文字
2）、最先出现的词语 权重越高；
3）、主要关键词出现3次；辅关键词 1次；
标签：title
2、网站说明
定义：当搜索引擎所说出官网时的 说明；
属性：name ：description ；content ：介绍的内容；keyword ：搜索的关键字，搜索引擎关注点。
注意：
1)、内容与正文相关，提供给用户查看，应该负有吸引力；
2）、包含空格不得超过120字；
3）、补充 title 和 keywords 内未能充分表述的说明；
4）、使用英文逗号。
标签：meta
3、零散知识复习
1）、position 属性： 默认将控件默认转化为行内块，而行内块没有宽度，是根据内容确定宽度的，所以需要 width 属性：；
2）、控件展示，或者叠加顺序，最底层到最上层：标准流--->浮动---->定位；
3）、只有对于 定位控件 z-index 属性才起作用；
4)、图片引用需要添加如下属性
因为图片是与文字基线对齐的，导致父容器被撑大。
img {
vertical-align: top;
}
附赠 京东主体网站搭建 demo ：JD-Demo
欢迎关注.jpg
网友评论