Emmet
Emmet是一个快捷编写html元素、css样式的插件,很多主流IDE都自带得有。输入命令后,按Tab执行。
html
! #生成html文档基本骨架
link:css #生成引入css的<link />
link:favicon #生成设置网页图标的<link />,设置的是当前页面在浏览器标签页显示的图标
script:src #生成<script>
#生成标签直接输入标签名即可
p
div
# > 嵌套子元素
ul>li
ul>li>a
# + 生成兄弟元素
h3+p
h3+p+div
# 嵌套使用,不确定关系时可以加()
div>h3+p
# * 指定数量
ul>li*5
table>tr*3>td*5 #每个<tr>中都有5个<td>
# # 设置id属性
div#app
# . 设置class属性
p.red
p.red.show #class属性可设置多个值,class="red show"
#搭配使用
div#app.red.show
# [] 设置普通属性
input[name placeholder]
input[name=username placeholder=请输入用户名] #指定属性值,值引不引都行
# { } 设置标签体内容
p{ok}
ul>li{hello}*5
css
# margin
m30 #margin:30px,单位默认px
m20%
m20-30-20-15 #margin:20px 30px 20px 15px,设置多个值时短横分隔
mt20 #margin-top:20px
# padding用法类似
# 属性名都可简写
bg #backgroud
bgc #backgroud-color
posi #position
Markdown
markdown是一种纯文本、轻量级的标记语言,通过简单的标记,就可以使文本具有一定的格式,容易转化为html、pdf,常见的比如github上的README.md 。
# 标题 #几个#就是几级标题,一级最大,六级最小。#后面有一个空格
**加粗** #加粗
#分割线,3个及以上的-或者*
---
***
#空行、换行
  #空格
>内容 #引用
# 超链接,[ ]中写显示的文字,()中写链接地址
[百度](http://baidu.com)
# []中写图片描述,相当于<img />的alt
![荷花](http://........hehua.jpg)
# 无序列表,+ - *均可,符号后面有一个空格
+ 狮子
- 老虎
* 大象
# 有序列表,点后面有一个空格
1. 狮子
2. 老虎
3. 大象
# 待办列表,类似复选框,可勾选、取消勾选。- [ ]之间有一个空格,[ ]后面也有一个空格
- [ ] 跑步10km
- [ ] 俯卧撑50
- [ ] 深蹲50
# 表格
学号|姓名|成绩
--|--|-- #可用:指定对齐方式,默认居中对齐, :--表示左对齐
1|张三|100
2|李四|90
3|王五|95
# 1对反引号是行内代码,3对反引号是代码块
csdn markdown常用快捷键
Ctrl+B #加粗
Ctrl+Shif+C #待办列表
Ctrl+Shif+L #超链接
Ctrl+Shif+G #图片。这个快捷键可能被其它程序占用了