Sublime text 快速编写 HTML 代码 — Emmet插件

你可以使用标签名称为div、p等生成HTML标签,Emmet没有一组预定义可用的标记名称,您可以编写任何单词并把它转化为一个标签,例如:

  1. div → <div></div>, footer → <footer></footer>

Emmet代码虽然没有特定的标签,但编写时还是有一定的规则与技巧,下面我们就看一看:

1、生成HTML文件的初始结构:

之前我们会用软件直接新建一个HTML文档,初始结构就生成了,但有些编辑器是不带这个功能的,手动输入是件痛苦的事,有了Emmet一切变得如此简单。 生成HTML4(过渡)结构初始文档只需输入“html:4t”,HTML4(严格)结构初始文档只需输入“html:4s”,将生成标准的 HTML4(严格)标准结构:

  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  2. <html lang="en">
  3. <head>
  4.     <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
  5.     <title>Document</title>
  6. </head>
  7. <body>
  8. </body>
  9. </html>

2、而HTML5就更简单省事了,像HTML4的输入格式“html:5”,更狠的是HTML5只需输入“!”,就可以生成HTML5文档的初始结构:

  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6. </head>
  7. <body>
  8. </body>
  9. </html>

3、父子关系:>,使用>操作符在内部相互嵌套的标签:

  1. div>ul>li

将生成:

  1. <div>
  2.     <ul>
  3.         <li></li>
  4.     </ul>
  5. </div>

4、兄弟关系:+,使用+操作符将标签处于同一个层级:

  1. div+p+footer

将生成:

  1. <div></div>
  2. <p></p>
  3. <footer></footer>

5、生成兄弟关系时,像ul dl这样的列表标签,使用+操作符将生成一个标准的列表结构:

  1. ul+

将生成:

  1. <ul>
  2.     <li></li>
  3. </ul>
  1. dl+

将生成:

  1. <dl>
  2.     <dt></dt>
  3.     <dd></dd>
  4. </dl>

您可以选择一种方式赞助本站

支付宝扫一扫赞助

微信钱包扫描赞助

墨丶水瓶

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: