前端开发工具 —— VSCode - Snipaste - Photoshop - Fireworks - Icomoon字库

视频参考：https://www.bilibili.com/video/av80149248
笔记参考：https://www.bilibili.com/video/av78942920/?spm_id_from=333.788.b_636f6d6d656e74.6评论区

1 VSCode

1.1 VSCode前端开发工具

在这里插入图片描述

1.1.1 VSCode生成html骨架

新建文件
保存为：文件，命名.html
生成页面骨架结构
- !+tab键
- !，出现框，选择一个叹号

在浏览器中预览页面：右键

\to

Open In Default Browser

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>

1.1.2 插件

在这里插入图片描述

推荐安装的插件：JS-CSS-HTML这个插件不要安装了，非常不好用
在这里插入图片描述

1.1.3 生成骨架标签新增代码

1. 文档类型声明标签<!DOCTYPE>

<!DOCTYPE> 声明位于文档中的最前面的位置，处于<html>标签之前
<!DOCTYPE>不是一个HTML标签，它就是文档类型声明标签
作用是告知浏览器文档使用哪种 HTML版本

<!DOCTYPE html>：当前页面采取的是HTML5版本来显示网页

2. 页面语言lang
lang语言种类：用来定义当前文档显示的语言.

en：定义语言为英语
zh-CN：定义语言为中文

简单来说定义为en就是英文网页，定义为zh-CN就是中文网页
<html lang="zh-CN"> 告诉浏览器或者搜索引擎这是一个中文网站，本页面采取中文来显示
其实对于文档显示来说，定义成en的文档也可以显示中文，定义成zh-CN的文档可以显示英文
这个属性对浏览器和搜索引擎(百度谷歌等)还是有作用的

@拓展阅读：
简单来说，可能对于程序来说没有太大的作用，但是它可以告诉浏览器，搜索引擎，一些处理Html的程序对页面语言内容来做一些对应的处理或者事情。
比如可以

根据根据lang属性来设定不同语言的css样式，或者字体
告诉搜索引擎做精确的识别
让语法检查程序做语言识别
帮助翻译工具做识别
帮助网页阅读程序做识别
……
3. charset字符集
字符集(Character set)是多个字符的集合。计算机要准确的处理各种字符集文字，需要进行字符编码，以便计算机能够识别和存储各种文字。
在<head>标签内，可以通过<meta>标签的charset属性来规定HTML文档应该使用哪种字符编码

<meta charset="UTF-8">：html 文件是以 UTF-8 编码保存的，浏览器根据编码去解码对应的html内容。
utf-8是目前最常用的字符集编码方式：

GB2312：简单中文，包括6763个汉字 GUO BIAO
BIG5：繁体中文，港澳台等用
GBK：包含简体繁体全部中文字符，是GB2312的扩展，兼容GB2312
UTF-8：也被称为万国码，则基本包含全世界所有国家需要用到的字符

注意： 上面语法是必须要写的代码，否则可能引起乱码的情况。一般情况下，统一使用"UTF-8"编码，尽量统一写成标准的"UTF-8”，不要写成"utf8"或"UTF8"。

1.2 Vscode快捷操作

快捷键	说明
View $\to$ Toggle Word Wrap	自动换行显示
ctrl + c	复制光标所在行
ctrl + /	注释

1.3 Emmet语法

Emmet 语法的前身是 Zen coding它使用缩写，来提高html/css的编写速度，Vscode内部已经集成该语法

1.3.1 快速生成HTML结构语法

生成标签：直接输入标签名+tab键即可，比如 div+tab 键，就可以生成 <div></div>
生成多个相同标签：标签名*num+tab键，比如 div*3，就可以快速生成3个<div></div>
生成父子级关系的标签：父标签名(*num)+>+子标签名(*num) 比如 ul > li 就可以了
生成兄弟关系的标签：标签名1+标签名2，比如 div+p
生成带有类名xx或者id名字的标签：标签.xx+tab键或者标签#xx+tab键键就可以了；.xx+tab键或者#xx+tab键默认生成导航栏<div></div>
生成的div 类名是有顺序的：可以用自增符号 $

.demo$*3
<div class="demo1"></div>
<div class="demo2"></div>
<div class="demo3"></div>

如果想要在生成的标签内部写内容可以用{ }表示

p{第一段}+tab键
    <p>第一段</p>

p{第二段}*3+tab键
    <p>第二段</p>
    <p>第二段</p>
    <p>第二段</p>

1.3.2 快速生成CSS样式语法

CSS基本采取简写形式即可

比如w200+tab：可以生成width: 200px;
比如h100+tab：可以生成height: 100px;
比如lh26+tab：可以生成line-height: 26px;

1.4 快速格式化代码

方法一：VScope快速格式化代码：shift+alt+f
在这里插入图片描述

方法二：可以设置当保存页面的时候自动格式化代码

文件 $\to$ [首选项] $\to$ [设置]
搜索 emmet.include
在 settings. json下的[用户]中添加以下语句

"editor.formatOnType": true,    
"editor.formatOnSave": true

只需要设置一次即可，以后都可以自动保存格式化代码

2 Snipaste

一个简单但强大的截图工具，可以让截图贴回到屏幕上。

常用快捷方式：

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

3 Photoshop

3.1 ps基本操作以及常用快捷键

因为网页美工大部分效果图都是利用ps来做的，所以以后我们大部分切图工作都是在PS里面完成。

文件 $\to$ 打开：打开要测量的图片
ctrl+r：打开标尺或者视图 $\to$ 标尺
右击标尺，把里面的单位改为像素
ctrl+ 加号：放大视图；ctrl+ 减号：缩小视图
按住空格键：鼠标可以变成小手，拖动 ps 视图
用选区拖动：可以测量大小
ctrl+ d：取消选区或者旁边空白处点击一下也可以取消选区

3.2 ps切图

常见的图片格式

jpg图像格式：JPEG（.JPG）对色彩的信息保留较好，高清，颜色较多，产品类的图片经常用jpg格式的。
gif图像格式：GIF格式最多只能储存256色，所以通常用来显示简单图形及字体，但是可以保存透明背景和动画效果，实际经常用于一些图片小动画效果。
png图像格式：一种新兴的网络图形格式，结合了GIF和JPEG的优点，具有存储形式丰富的特点，能够保持透明背景，如果想要切成背景透明的图片，请选择png格式。
PSD图像格式：Photoshop的专用格式，里面可以存放图层、通道、遮罩等多种设计草稿。对前端人员来说，最大的优点是可以直接从上面复制文字，获得图片，还可以测量大小和距离。