响应式网站无法做联盟广告,注册了域名之后应该怎么做,html制作一个个人主页网站,专业 网站设计Emmet 使用笔记小结
最近在跟视频走 CSS 的教程#xff0c;然后要写很多的 HTML 结构#xff0c;就想着总结一下 Emmet 的语法。
Emmet 是一个工具可以用来加速 HTML 和 CSS 的开发过程#xff0c;不过 emmet 只支持 HTML XML 文件结构#xff0c;所以我个人觉得对…Emmet 使用笔记小结
最近在跟视频走 CSS 的教程然后要写很多的 HTML 结构就想着总结一下 Emmet 的语法。
Emmet 是一个工具可以用来加速 HTML 和 CSS 的开发过程不过 emmet 只支持 HTML XML 文件结构所以我个人觉得对 CSS 的帮助不是特别大VSCode 本身就有 CSS 的缩写支撑用起来也挺方便的。
下面快捷键全都基于 VSCode。
基本语法
生成 HTML 框架
生成 HTML5 的基础框架用 !就要一个 doctype 可以用超过一个但是不多于三个 ! 生成 tag
所有的 tag 都可以直接输入 tag 然后按 tab 生成VSCode 也会对缩写进行提示比如 section可以打 section也可以用 sect 一些比较特殊的缩写会赘一些常见的属性比如说导入 JS 可以直接用 script:src导入 CSS 可以用 link:cssinput 默认是 text但也可以跟 :b 生成按钮:tel 生成电话等 生成带类名
class name 直接用 tag name. 即可有个比较特殊的 tag 是 div它可以直接通过 . 生成一个带空 class 的 div 想要让同一个类生成多个 id可以用 tag-name.class name 1.class name 2 的方法嵌套比如说一些常见的 fontawesome 的 icon会通过一个 class 控制形状另一个控制 icon这时候就可以用这个技巧i.fa-solid.fa-house
生成带 id 的 tag
和类差不多不过这里使用 #如i.fa-solid.fa-house#house-icon 会生成 id 具有唯一性所以没什么必要 overload就算是 overloademmet 也只会用最后一个 生成带属性的 tag
这个用 []我个人用的比较多的是图片和 input如 img[srcimages/example]: 或者 input:password[placeholderYour Password]: attributes 这块不太好说如果是 input 这种直接用 input:p 生成 tab然后到里面根据自动提示操作减少 typo 的同时也少打一些字从效率上来说我觉得反而会比 emmet 快。
数字占位符
$如 img[srcimages/exaple$] 会生成
这个单用不好用搭配下面的这个功能好用
生成多个同样的 tag
可以用 *num 来生成多个同样的 tag这里搭配数占位符好用比如说我有多个 list每个 list 中的内容都一样但是 list 的类名不一样
li.list-$*10 生成 或是需要生成多个图片slideshow的时候
img[srcimg/slideshows/slideshow-$]*6 生成 向 tag 中添加内容
这有两个一个是 这会形成一个父子结构后面说结构的时候会说另一个是 {}这会直接向当前 tag 里面添加内容。如果是一个扁平化的结构两者没什么太大区别比较好用的就是前者可以直接加 lorem
plorem 会生成
p{lorem} 会生成
嵌套结构
这里讲点嵌套的事情
平级结构
使用 连接如生成两个 input 这种
input:tinput:emailinput:submit 会生成 父子结构向下
使用 上面简单的提了一下这里会形成一个父子结构如
ulliai.fa.fas-home 会生成 父子结构向上
使用 ^这里能够回到上一个节点 会生成 ullia hrefi classfa fas-home/i/aimg src alt //li
/ul这个时候可以看到emmet 对于行内结构的排版其实看起来不太方便
刚找到一个 | 说是可以实现这个功能不过我在 VSCode 上试了一下不支持。如果用其他的 ide/editor 可以试试看
节点分组
使用 ()这里将括号内的部分生成一个整体如
(liai.fa)*10 会生成
这也是最近才看到的之前都会不断回到上一层然后去实现比起使用 grouping 麻烦好多。
总结
其实 emmet 对 inline 的结构设置的不太好不会默认换行所以有的时候用 a*ni 的时候再自动排版结构会不太舒服不过总体来说比一个个 cv 方便很多……
顺便丢一个之前跟着教程时用的结构
h1.section-heading{Teams}.team-wrapper.team-member*3img.team-member-img[srcimages/team-member-$.jpg]h2.team-member-name{Nick Smith}span{ Designer}^ul.team-member-skillsli{Ps}li{Figma}li{HTML5}li{CSS3}li{Ai}^a.projects-btn[href$].story-btn[titleMy Story].story-btn-line^.storyh4.story-heading{About Me}p.story-paragraphlorem 大概是这样一个三重式的结构 我觉得一个个 cv 太麻烦了所以就用 emmet 写了……不过好像还是出了点问题挠头
现在想来其实还是应该使用 () 进行 grouping 实现会方便不少。
所以不太推荐 emmet 写太长除非你知道自己想要做什么。
