技术控

    今日:82| 主题:49211
收藏本版 (1)
最新软件应用技术尽在掌握

[其他] 利用Emmet快速编写HTML标签

[复制链接]
這裏沒有天使 发表于 2016-10-3 10:06:43
88 1

立即注册CoLaBug.com会员,免费获得投稿人的专业资料,享用更多功能,玩转个人品牌!

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
Emmet is a web-developer’s toolkit that can greatly improve your HTML & CSS workflow
      Emmet是一个介于标记性语言和规范之外的一种逻辑方式,它的前身是    zen coding,    Emmet可以大幅度提高前端开发的一个小工具,并不是开发工具,在其他IDE里面称之为插件,他可以根据你提供的逻辑快速生成HTML代码片段。  
  官网:    http://emmet.io/  
  引示符号  

                    符号        描述                                      html:5 or !                快速生成一段HTML标准文档标签                              .                Class Name                              #                ID Name                              []                标签的内部属性                              {}                标签的内容                              ()                分组标签              
       
  • 快速生成一段HTML标准文档标签  
  1. html:5
复制代码
OR  
            !
        生成的HTML标签
  1. <!doctype html>
  2. <htmllang="en">
  3. <head>
  4. <metacharset="UTF-8">
  5. <metaname="viewport"
  6. content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  7. <metahttp-equiv="X-UA-Compatible"content="ie=edge">
  8. <title>Document</title>
  9. </head>
  10. <body>
  11. </body>
  12. </html>
复制代码

       
  • Class  
  1. ul>li.ClassName
复制代码
生成的HTML标签
  1. <ul>
  2. <liclass="ClassName"></li>
  3. </ul>
复制代码

       
  • ID  
  1. ul>li#ClassName
复制代码
生成的HTML标签
  1. <ul>
  2. <liid="ClassName"></li>
  3. </ul>
复制代码

       
  • 标签的内部属性  
  1. ul>li>a[href="https://www.ansheng.me"]
复制代码
生成的HTML标签
  1. <ul>
  2. <li><ahref="https://www.ansheng.me"></a></li>
  3. </ul>
复制代码

       
  • 标签的内容  
  1. div>{Hello World}
复制代码
生成的HTML标签
  1. <div>Hello World</div>
复制代码

       
  • 分组标签  
  1. <!doctype html>
  2. <htmllang="en">
  3. <head>
  4. <metacharset="UTF-8">
  5. <metaname="viewport"
  6. content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  7. <metahttp-equiv="X-UA-Compatible"content="ie=edge">
  8. <title>Document</title>
  9. </head>
  10. <body>
  11. </body>
  12. </html>
  13. 0
复制代码
生成的HTML标签
  1. <!doctype html>
  2. <htmllang="en">
  3. <head>
  4. <metacharset="UTF-8">
  5. <metaname="viewport"
  6. content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  7. <metahttp-equiv="X-UA-Compatible"content="ie=edge">
  8. <title>Document</title>
  9. </head>
  10. <body>
  11. </body>
  12. </html>
  13. 1
复制代码
关系符号  

                    符号        描述                                      >                嵌套元素                              +                同级元素                              ^                上级元素                              *                同级多少个元素                              $                数字通配符正序                              @                数字通配符倒序              
       
  • 嵌套元素  
  1. <!doctype html>
  2. <htmllang="en">
  3. <head>
  4. <metacharset="UTF-8">
  5. <metaname="viewport"
  6. content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  7. <metahttp-equiv="X-UA-Compatible"content="ie=edge">
  8. <title>Document</title>
  9. </head>
  10. <body>
  11. </body>
  12. </html>
  13. 2
复制代码
生成的HTML标签
  1. <!doctype html>
  2. <htmllang="en">
  3. <head>
  4. <metacharset="UTF-8">
  5. <metaname="viewport"
  6. content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  7. <metahttp-equiv="X-UA-Compatible"content="ie=edge">
  8. <title>Document</title>
  9. </head>
  10. <body>
  11. </body>
  12. </html>
  13. 3
复制代码

       
  • 同级元素  
  1. <!doctype html>
  2. <htmllang="en">
  3. <head>
  4. <metacharset="UTF-8">
  5. <metaname="viewport"
  6. content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  7. <metahttp-equiv="X-UA-Compatible"content="ie=edge">
  8. <title>Document</title>
  9. </head>
  10. <body>
  11. </body>
  12. </html>
  13. 4
复制代码
生成的HTML标签
  1. <!doctype html>
  2. <htmllang="en">
  3. <head>
  4. <metacharset="UTF-8">
  5. <metaname="viewport"
  6. content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  7. <metahttp-equiv="X-UA-Compatible"content="ie=edge">
  8. <title>Document</title>
  9. </head>
  10. <body>
  11. </body>
  12. </html>
  13. 5
复制代码

       
  • 上级元素  
  1. <!doctype html>
  2. <htmllang="en">
  3. <head>
  4. <metacharset="UTF-8">
  5. <metaname="viewport"
  6. content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  7. <metahttp-equiv="X-UA-Compatible"content="ie=edge">
  8. <title>Document</title>
  9. </head>
  10. <body>
  11. </body>
  12. </html>
  13. 6
复制代码
生成的HTML标签
  1. <!doctype html>
  2. <htmllang="en">
  3. <head>
  4. <metacharset="UTF-8">
  5. <metaname="viewport"
  6. content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  7. <metahttp-equiv="X-UA-Compatible"content="ie=edge">
  8. <title>Document</title>
  9. </head>
  10. <body>
  11. </body>
  12. </html>
  13. 7
复制代码
  1. <!doctype html>
  2. <htmllang="en">
  3. <head>
  4. <metacharset="UTF-8">
  5. <metaname="viewport"
  6. content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  7. <metahttp-equiv="X-UA-Compatible"content="ie=edge">
  8. <title>Document</title>
  9. </head>
  10. <body>
  11. </body>
  12. </html>
  13. 8
复制代码
生成的HTML标签
  1. <!doctype html>
  2. <htmllang="en">
  3. <head>
  4. <metacharset="UTF-8">
  5. <metaname="viewport"
  6. content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  7. <metahttp-equiv="X-UA-Compatible"content="ie=edge">
  8. <title>Document</title>
  9. </head>
  10. <body>
  11. </body>
  12. </html>
  13. 9
复制代码
  1. ul>li.ClassName
  2. 0
复制代码
生成的HTML标签
  1. ul>li.ClassName
  2. 1
复制代码

       
  • 同级多少个元素  
  1. ul>li.ClassName
  2. 2
复制代码
生成的HTML标签
  1. ul>li.ClassName
  2. 3
复制代码

       
  • 数字通配符  
  1. ul>li.ClassName
  2. 4
复制代码
生成的HTML标签
  1. ul>li.ClassName
  2. 5
复制代码
  1. ul>li.ClassName
  2. 6
复制代码
生成的HTML标签
  1. ul>li.ClassName
  2. 7
复制代码
  1. ul>li.ClassName
  2. 8
复制代码
生成的HTML标签
  1. ul>li.ClassName
  2. 9
复制代码
  1. <ul>
  2. <liclass="ClassName"></li>
  3. </ul>
  4. 0
复制代码
生成的HTML标签
  1. <ul>
  2. <liclass="ClassName"></li>
  3. </ul>
  4. 1
复制代码
占位标记  

                    符号        描述                                      lorem                生成多端文字              
       
  • 实例  
  1. <ul>
  2. <liclass="ClassName"></li>
  3. </ul>
  4. 2
复制代码
生成的HTML标签
  1. <ul>
  2. <liclass="ClassName"></li>
  3. </ul>
  4. 3
复制代码
  1. <ul>
  2. <liclass="ClassName"></li>
  3. </ul>
  4. 4
复制代码
生成的HTML标签
  1. <ul>
  2. <liclass="ClassName"></li>
  3. </ul>
  4. 5
复制代码
友荐云推荐




上一篇:How Beginners Get It Wrong In Machine Learning
下一篇:Electric Pair Mode In Emacs
酷辣虫提示酷辣虫禁止发表任何与中华人民共和国法律有抵触的内容!所有内容由用户发布,并不代表酷辣虫的观点,酷辣虫无法对用户发布内容真实性提供任何的保证,请自行验证并承担风险与后果。如您有版权、违规等问题,请通过"联系我们"或"违规举报"告知我们处理。

elwyn 发表于 2016-10-7 03:27:05
趁今日埋头苦干,免他日仰慕求人.
回复 支持 反对

使用道具 举报

*滑动验证:
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

我要投稿

推荐阅读

扫码访问 @iTTTTT瑞翔 的微博
回页顶回复上一篇下一篇回列表手机版
手机版/CoLaBug.com ( 粤ICP备05003221号 | 文网文[2010]257号 )|网站地图 酷辣虫

© 2001-2016 Comsenz Inc. Design: Dean. DiscuzFans.

返回顶部 返回列表