No.10 一些小工具的使用

2019-12-31 本文已影响0人 testleaf

一、Snipaste

Snipaste 是一个简单但强大的截图工具，也可以让你将截图贴回到屏幕上.
常用快捷方式:

F1 可以截图. 同时测量大小, 设置箭头书写文字等
F3 在桌面置顶显示
点击图片, alt 可以取色 (按下shift 可以切换取色模式)
按下esc 取消图片显示

二、字体图标

把下载包里面的 fonts 文件夹放入页面根目录下。
在 CSS 样式中全局声明字体：简单理解把这些字体文件通过css引入到我们页面中。一定注意字体文件路径的问题。

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

html 标签内添加小图标。

<span>'\e91b'</span>

给标签定义字体。

span {
    font-family: "icomoon";
}

务必保证这个字体和上面@font-face里面的字体保持一致。

三、网站 favicon 图标

favicon.ico 一般用于作为缩略的网站标志，它显示在浏览器的地址栏或者标签上。
目前主要的浏览器都支持 favicon.ico 图标。

1.制作favicon图标

把品优购图标切成 png 图片。
把 png 图片转换为 ico 图标，这需要借助于第三方转换网站，例如比特虫：http://www.bitbug.net/

2.favicon图标放到网站根目录下

3.HTML页面引入favicon图标

在html 页面里面的 <head> </head>元素之间引入代码。

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

四、网站TDK三大标签SEO优化

SEO（Search Engine Optimization）汉译为搜索引擎优化，是一种利用搜索引擎的规则提高网站在有关搜索引擎内自然排名的方式。
SEO 的目的是对网站进行深度的优化，从而帮助网站获取免费的流量，进而在搜索引擎上提升网站的排名，提高网站的知名度。
页面必须有三个标签用来符合 SEO 优化：title、description、keyword。
注册页面比较隐私，为了保护用户信息，我们不需要对其做SEO优化。

1.title 网站标题

title 具有不可替代性，是我们内页的第一个重要标签，是搜索引擎了解网页的入口和对网页主题归属的最佳判断点。
建议：网站名（产品名）- 网站的介绍（尽量不要超过30个汉字）

<title>简书 - 创作你的创作</title>

<title>当当网图书_小说传记_青春文学_成功励志_投资理财_各品类图书畅销榜</title>

2.description 网站说明

简要说明我们网站主要是做什么的。
我们提倡，description 作为网站的总体业务和主题概括，多采用“我们是…”、“我们提供…”、“×××网作为…”、“电话：010…”之类语句。

<meta name="description"  
      content="简书是一个优质的创作社区，在这里，你可以任性地创作，一篇短文、一张照片、一首诗、一幅画……我们相信，每个人都是生活中的艺术家，有着无穷的创造力。">

<meta name="description" 
      content="当当网图书频道-全球最大中文网上书店,专业提供小说传记,青春文学,成功励志,投资理财等各品类图书畅销榜最新报价、促销、评论信息,引领最新网上购书体验!" />

3.keywords 关键字

keywords 是页面关键词，是搜索引擎的关注点之一。
keywords 最好限制为 6～8 个关键词，关键词之间用英文逗号隔开，采用关键词1,关键词2 的形式。

<meta name="keywords"  
      content="简书,简书官网,图文编辑软件,简书下载,图文创作,创作软件,原创社区,小说,散文,写作,阅读">

<meta name="keywords" 
      content="小说传记,青春文学,童书,绘本,成功励志,投资理财,东野圭吾,考研英语,人类简史,当当网图书,网上购书" />