Emmet插件：可以用 emmet代码+Tap  写出更多并快捷的html代码，主流编辑器均可安装，安装方法也均不相同！

<!-- html:5或者!可以生成html5文档 -->
<!DOCTYPE html>
<html lang="en">
<head><!-- meta:utf --><meta http-equiv="Content-Type" content="text/html;charset=UTF-8"><!-- meta:vp --><meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><!-- meta:compat --><meta http-equiv="X-UA-Compatible" content="IE=edge"><!-- link --><link rel="stylesheet" href=""><!-- link:css --><link rel="stylesheet" href="style.css"><!-- script --><script></script>    <!-- script:src --><script src=""></script><title>Document</title>
</head>
<body>1,生成带类样式的标签<!-- P.info --><P class="info"></P><!-- div.red --><div class="red"></div><!-- .red --><div class="red"></div>2,生成带id的标签<!-- h2#header --><h2 id="header"></h2><!-- #header --><div id="header"></div>3,a标签<!-- a --><a href=""></a><!-- a:link --><a href="http://"></a><!-- a:mail --><a href="mailto:"></a>4,根据标签之间的位置来生成标签生成同级,兄弟标签
<!--     h2.header+p#info{信息} --><h2 class="header"></h2><p id="info">信息</p>后代标签<!-- ul>li --><ul><li></li></ul><!-- ul>li+li+li --><ul><li></li><li></li><li></li></ul><!-- ul>li*3 --><ul><li></li><li></li><li></li></ul>生成当前标签的父级,也叫上级标签<!-- h2>span^p --><h2><span></span></h2><p></p>5,你也可以在生成标签的时候,同时创建内部的文本<!-- ul>li.info{demo}*4+li.info{index} --><ul><li class="info">demo</li><li class="info">demo</li><li class="info">demo</li><li class="info">demo</li><li class="info">index</li></ul><!-- p[title="这是一段说明文字"] --><p title="这是一段说明文字"></p><!-- form[action="{:url('index/demo')}" method="post"]>input[type="text" name="info"]{内容} --><form action="{:url('index/demo')}" method="post"><input type="text" name="info">内容</input></form>6,快速生成一个有8个列表项的导航<!-- ul.list>li.item*8>a{导航} --><ul class="list"><li class="item"><a href="">导航</a></li><li class="item"><a href="">导航</a></li><li class="item"><a href="">导航</a></li><li class="item"><a href="">导航</a></li><li class="item"><a href="">导航</a></li><li class="item"><a href="">导航</a></li><li class="item"><a href="">导航</a></li><li class="item"><a href="">导航</a></li></ul>7,给标签自动添加编号和排序:$.@<!-- ul.list>li.item*4>a{导航$} --><ul class="list"><li class="item"><a href="">导航1</a></li><li class="item"><a href="">导航2</a></li><li class="item"><a href="">导航3</a></li><li class="item"><a href="">导航4</a></li></ul><!-- ul.list>li.item*4>a{导航$$} --><ul class="list"><li class="item"><a href="">导航01</a></li><li class="item"><a href="">导航02</a></li><li class="item"><a href="">导航03</a></li><li class="item"><a href="">导航04</a></li></ul>ul.list>li.item*4>a{导航$$@-}<ul class="list"><li class="item"><a href="">导航04</a></li><li class="item"><a href="">导航03</a></li><li class="item"><a href="">导航02</a></li><li class="item"><a href="">导航01</a></li></ul>ul.list>li.item*4>a{导航$$$$@100}<ul class="list"><li class="item"><a href="">导航0100</a></li><li class="item"><a href="">导航0101</a></li><li class="item"><a href="">导航0102</a></li><li class="item"><a href="">导航0103</a></li></ul>ul.list>li.item*4>a{导航$$@-100}<ul class="list"><li class="item"><a href="">导航103</a></li><li class="item"><a href="">导航102</a></li><li class="item"><a href="">导航101</a></li><li class="item"><a href="">导航100</a></li></ul></body>
</html>

转载于:https://www.cnblogs.com/cl94/p/9053748.html

用Emmet写前端代码相关推荐

  1. 转程序员，都去写一写前端代码吧

    转自: http://www.oschina.net/news/36972/programmer-write-frond-end-code 你可以认为我是一个极端的人,就像有许多人专注于自己的领域而不 ...

  2. 一个后端程序员如何被公司逼的开始写前端代码！奉劝各位最好选择前后端分离的公司...

    hello~各位读者好,我是鸭血粉丝(大家可以称呼我为「阿粉」),在特殊的日子里,大家要注意安全,尽量不要出门,无聊的话,就像阿粉一样,把时间愉快的花在学习上吧. 事情起因 阿粉自从学会Java以来, ...

  3. 我用尽了洪荒之力，解开了ChatGPT 写前端代码的封印，结果...

    我用尽了洪荒之力,解开了ChatGPT 写前端代码的封印 介绍 ChapGPT 听起来好得令人难以置信,所以让我们让它为我们编写一些 JS 代码.我想看看它是否可以解决我作为前端开发人员每天所做的任务 ...

  4. python写前端代码_python学习之路前端-JavaScript

    JavaScript是一种属于网络的脚本语言,已经被广泛用于Web应用开发,常用来为网页添加各式各样的动态功能,为用户提供更流畅美观的浏览效果.通常JavaScript脚本是通过嵌入在HTML中来实现 ...

  5. VScode实现分屏显示浏览器（一边写前端代码一边可以实时查看结果）

    写在开始前:闲来无事自己开发了一个网站,需要进行前端的开发,希望可以方便的实时查看生成的效果,于是找到了以下的方法: 第1步 安装live server插件 第2步 在文件->设置->首选 ...

  6. python写前端代码_python前端学习之移动端和bootstrap

    我们为什么要写自适应的页面(响应式页面) 众所周知,电脑.平板.手机的屏幕是差距很大的,假如在电脑上写好了一个页面,在电脑上看起来不错,但是如果放到手机上的话,那可能就会乱的一塌糊涂,这时候怎么解决呢 ...

  7. python写前端代码_哪种ide能同时写java和前端代码？

    该楼层疑似违规已被系统折叠 隐藏此楼查看此楼 著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处. 我想你们都听过它的传说. 它是唯一的上古神器,什么idea,eclipse,atom ...

  8. 认识CSS之如何提高写前端代码的效率

  9. Erupt Framework：开源神器，助你无需前端代码搞定企业级后台管理系统

    Gitee:https://gitee.com/erupt/erupt GitHub:https://github.com/erupts/erupt 前言:后台重要吗? 刚开始工作时,我对后台管理系统 ...

最新文章

  1. 使用Maven运行Java main的方法（转）
  2. jmeter 高并发测试报告_使用 JMeter 进行压力测试
  3. Mentor PADS 9.5下载安装及破解指南
  4. 微信支付配置参数：支付授权目录、回调支付URL
  5. linux之readelf命令
  6. 洛谷 P1736 创意吃鱼法
  7. 12.混淆——介绍，傅里叶变换抽样对，采样和重建_1
  8. 入门第十课 Python语句的编写之while
  9. AOP下的权限控制实现
  10. iOS 版微信可以改微信号；传腾讯计划入股爱奇艺；Qt 6.0 发布首个预览版本| 极客头条...
  11. python交互式shell之jupyter notebook初步安装使用
  12. python中不同类型的数据不能相互运算_python语法入门（数据类型、运算）
  13. Atitit. js mvc 总结(2)----angular 跟 Knockout o99 最佳实践
  14. 深圳中技物流有限公司软件测试,国际空运
  15. ezcad旋转轴标刻参数_激光打标机软件ezcad中的曲线圆弧排文本参数说明及设置...
  16. Qt开发 之 Windows资源管理器模仿 并 小超越
  17. Android httpclient、json
  18. php代码上传工具,php中文网重磅推出“php程序员工具箱” v0.1版本！
  19. Coablt strike官方教程中文版
  20. Luogu 3206 [HNOI2010]城市建设

热门文章

  1. tp mysql 去重
  2. 初步学习nodejs，业余用node写个一个自动创建目录和文件的小脚本，希望对需要的人有所帮助...
  3. android热门消息推送横向测评！[转]
  4. 什么是程序员的优良品质
  5. Blend学习（2） 从对象创建控件
  6. linux 测试网络端口通不通_【干货】网络中的各种互通与不通
  7. 常见的锁策略、synchronized中的锁优化机制
  8. Linux启动syslog进程,linux – 使用systemd启动的进程正在记录到/ var / log / syslog和/var/log/daemon.log...
  9. VS创建第一个程序hello(跨文件)
  10. python建立sqlite数据库_5分钟快速入门，用Python做SQLite数据库开发，附代码适合初学...