html-Font Awesome

Font Awesome:
一款为您提供可缩放的矢量图标,您可以使用CSS所提供的所有特性对它们进行更改,包括:大小、颜色、阴影或者其它任何支持的效果。
后期展示效果如下

一、html导入font awesome链接
1.在线导入

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">

2.本地导入
下载font awesome到网站的tempate/static目录下后在传入路径链接

<link href="/static/fontawesome/fontawesome-all.css" rel="stylesheet">

二、使用font awesome
1.在你需要的地方添加喜欢的icons

 <i class="fas fa-camera-retro"></i>

2.修改font awesome 的大小

<i class="fas fa-camera-retro fa-xs"></i>

文本内容来自
https://fontawesome.com 还有很多的icons
 
 

Emmet

Emmet:
是一款编辑器插件,支持多种编辑器支持。在前端开发中,Emmet 使用缩写语法快速编写 HTML、CSS 以及实现其他的功能,极大的提高前端开发效率。
使用方法:
一、进入.html后缀的文件
二、在文件中v选中,ctrl+y后出现tag:这个框,后在tag中输入emmet的缩写即可。
该方法方便快捷。

html-bootstrap

Bootstrap:
是最受欢迎的HTML、CSS、JS框架,用于开发响应式布局、移动设备优先的WEB目。
一、my-zsh中设置html文本的脚本
优点:每次编辑.html的文件,都会出现html的现成模板。
二、进入.vim、创建template文件夹、创建simple.html的html模板

1.cd .vim 
2.mkdir template
3.vim simple.html
在simple.html编辑如下信息
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
</head>
<body>
</body>

完成以上操作后,后期只要编辑.html后缀的脚本就能自动生成html格式的文件
 

html–bootstrap、emmet

Bootstrap:
是最受欢迎的HTML、CSS、JS框架,用于开发响应式布局、移动设备优先的WEB项目。
一、如何自动生成html模板脚本
1.cd .vim
2.mkdir template
3.vim simple.html
 

<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script>
</script>
</body>

后期只要编辑.html后缀的脚本就能自动生成html格式的文件
Emmet:
使用于编写HTML/XML和CSS代码的前端开发人员,可以设置CSS形式的能够动态被解析的表达式,根据你所输入的缩写来得到相应的内容。
使用方式:

vim test.html  #打开.html后缀的文件
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script>
Hhh
Xxx
</script>
</body>

V选中Hhh、Xxx按住ctrl + y +逗号(,)
需要什么样的格式在tag后面输入即可!
eg: