你可以使用标签名称为div、p等生成HTML标签,Emmet没有一组预定义可用的标记名称,您可以编写任何单词并把它转化为一个标签,例如:
- div → <div></div>, footer → <footer></footer>
Emmet代码虽然没有特定的标签,但编写时还是有一定的规则与技巧,下面我们就看一看:
1、生成HTML文件的初始结构:
之前我们会用软件直接新建一个HTML文档,初始结构就生成了,但有些编辑器是不带这个功能的,手动输入是件痛苦的事,有了Emmet一切变得如此简单。 生成HTML4(过渡)结构初始文档只需输入“html:4t”,HTML4(严格)结构初始文档只需输入“html:4s”,将生成标准的 HTML4(严格)标准结构:
- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
- <html lang="en">
- <head>
- <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
- <title>Document</title>
- </head>
- <body>
- </body>
- </html>
2、而HTML5就更简单省事了,像HTML4的输入格式“html:5”,更狠的是HTML5只需输入“!”,就可以生成HTML5文档的初始结构:
- <!doctype html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>Document</title>
- </head>
- <body>
- </body>
- </html>
3、父子关系:>,使用>操作符在内部相互嵌套的标签:
- div>ul>li
将生成:
- <div>
- <ul>
- <li></li>
- </ul>
- </div>
4、兄弟关系:+,使用+操作符将标签处于同一个层级:
- div+p+footer
将生成:
- <div></div>
- <p></p>
- <footer></footer>
5、生成兄弟关系时,像ul dl这样的列表标签,使用+操作符将生成一个标准的列表结构:
- ul+
将生成:
- <ul>
- <li></li>
- </ul>
- dl+
将生成:
- <dl>
- <dt></dt>
- <dd></dd>
- </dl>
您可以选择一种方式赞助本站
支付宝扫一扫赞助
微信钱包扫描赞助