webstorm 高效开发 (html)
Sublime Text、webstorm等编译器,如果你从事Web前端开发的话,对这几款软件一定不会陌生。它使用仿CSS选择器的语法来生成代码,大大提高了HTML/CSS代码编写的速度,比如下面的演示:
一、快速编写HTML代码
1. 初始化
HTML文档需要包含一些固定的标签,比如<html>、<head>、<body>等,现在你只需要1秒钟就可以输入这些标签。比如输入“!”或“html:5”,然后按Tab键:
- html:5 或!:用于HTML5文档类型
- html:xt:用于XHTML过渡文档类型
- html:4s:用于HTML4严格文档类型
2. 轻松添加类、id、文本和属性
连续输入元素名称和ID,编译器会自动为你补全,比如输入p#foo:
连续输入类和id,比如p.bar#foo,会自动生成:
<p class="bar" id="foo"></p>
下面来看看如何定义HTML元素的内容和属性。你可以通过输入h1{foo}和a[href=#],就可以自动生成如下代码:
<h1>foo</h1> <a href="#"></a>
3. 嵌套
现在你只需要1行代码就可以实现标签的嵌套。
- >:子元素符号,表示嵌套的元素
- +:同级标签符号
- ^:可以使该符号前的标签提升一行
效果如下图所示:
4. 分组
你可以通过嵌套和括号来快速生成一些代码块,比如输入(.foo>h1)+(.bar>h2),会自动生成如下代码:
<div class="foo"> <h1></h1> </div> <div class="bar"> <h2></h2> </div>
5. 隐式标签
声明一个带类的标签,只需输入div.item,就会生成<div class="item"></div>。
在过去版本中,可以省略掉div,即输入.item即可生成<div class="item"></div>。现在如果只输入.item,编译器会根据父标签进行判定。比如在<ul>中输入.item,就会生成<li class="item"></li>。
下面是所有的隐式标签名称:
- li:用于ul和ol中
- tr:用于table、tbody、thead和tfoot中
- td:用于tr中
- option:用于select和optgroup中
6. 定义多个元素
要定义多个元素,可以使用*符号。比如,ul>li*3可以生成如下代码:
<ul> <li></li> <li></li> <li></li> </ul>
7. 定义多个带属性的元素
如果输入 ul>li.item$*3,将会生成如下代码:
<ul> <li class="item1"></li> <li class="item2"></li> <li class="item3"></li> </ul>
二、CSS缩写
1. 值
比如要定义元素的宽度,只需输入w100,即可生成
width: 100px;
除了px,也可以生成其他单位,比如输入h10p+m5e,结果如下:
height: 10%; margin: 5em;
单位别名列表:
- p 表示%
- e 表示 em
- x 表示 ex
2. 附加属性
可能你之前已经了解了一些缩写,比如 @f,可以生成:
@font-face { font-family:; src:url(); }
一些其他的属性,比如background-image、border-radius、font、@font-face,text-outline、text-shadow等额外的选项,可以通过“+”符号来生成,比如输入@f+,将生成:
@font-face { font-family: 'FontName'; src: url('FileName.eot'); src: url('FileName.eot?#iefix') format('embedded-opentype'), url('FileName.woff') format('woff'), url('FileName.ttf') format('truetype'), url('FileName.svg#FontName') format('svg'); font-style: normal; font-weight: normal; }
3. 模糊匹配
如果有些缩写你拿不准,编译器会根据你的输入内容匹配最接近的语法,比如输入ov:h、ov-h、ovh和oh,生成的代码是相同的:
overflow: hidden;
4. 供应商前缀
如果输入非W3C标准的CSS属性,Emmet会自动加上供应商前缀,比如输入trs,则会生成:
-webkit-transform: ; -moz-transform: ; -ms-transform: ; -o-transform: ; transform: ;
你也可以在任意属性前加上“-”符号,也可以为该属性加上前缀。比如输入-super-foo:
-webkit-super-foo: ; -moz-super-foo: ; -ms-super-foo: ; -o-super-foo: ; super-foo: ;
如果不希望加上所有前缀,可以使用缩写来指定,比如-wm-trf表示只加上-webkit和-moz前缀:
-webkit-transform: ; -moz-transform: ; transform: ;
前缀缩写如下:
- w 表示 -webkit-
- m 表示 -moz-
- s 表示 -ms-
- o 表示 -o-
5. 渐变
输入lg(left, #fff 50%, #000),会生成如下代码:
background-image: -webkit-gradient(linear, 0 0, 100% 0, color-stop(0.5, #fff), to(#000)); background-image: -webkit-linear-gradient(left, #fff 50%, #000); background-image: -moz-linear-gradient(left, #fff 50%, #000); background-image: -o-linear-gradient(left, #fff 50%, #000); background-image: linear-gradient(left, #fff 50%, #000);
=========================================================================================
如在 “网络开发方面“ 遇到问题的 或 有项目需求,可加我微信:
(专注:SEO优化营销、网站定制【PC站、微站、手机站、商城】、网络系统定制、微信小程序开发;10年技术经验)
转载于:https://www.cnblogs.com/yeYu168/p/9424957.html
webstorm 高效开发 (html)相关推荐
- 在 WebStorm 中开发 uni-app - 用vue2实现手机APP(apk) + 微信小程序项目开发方案
主要是跟vue2相关的开发环境与框架. 本人选型方案 结合自身知识系统(vue2,webstorm),综上相关框架了解,选择了以下方案: 开发环境:HBuilder X + Webstorm 框 ...
- python高效开发实战
Django.Tornado.Flask.Twisted 作者:刘长龙 出版社:电子工业出版社 出版时间:2016年10月 python高效开发实战
- iOS 高效开发-----实现description 方法 (续)
在 "iOS 高效开发-----实现description 方法"这篇文章的最后,我留下了一个问题,就是,如果要给每个自定义的类覆写description方法和debugDescr ...
- mysql数据库应用与开发姜桂洪 课后答案_一站式打卡“云原生”时代的高效开发...
这个周末,古都金陵,人文璀璨.一场人气爆满的DevRun开发者沙龙悄然拉开了帷幕. 在这场近90分钟脑力风暴,与近2小时实战修炼中,主题直奔当下火热的"云原生",并结合云原生时代的 ...
- 帮助你高效开发Ajax应用的超酷jQuery插件 - AjaxML
日期:2012-4-20 来源:GBin1.com 如果你使用jQuery进行Ajax开发的话,你一定要试试今天我们这里介绍的这一款jQuery插件 - AjaxML.它是一款能够帮助你提高ajax ...
- 蚂蚁研发流程大公开:上百个开发者也能同时在一个 App 环境内进行高效开发
简介:mPaaS 研发流程和线上运维介绍 在日常运维过程中发现,我们大部分用户对蚂蚁的研发流程比较感兴趣,特别是在上百个开发者同时在一个app的环境内进行高效开发,技术选型.研发流程还有线上运维是怎么 ...
- Android高效开发:
Android高效开发: 原则:1.不要做不必要的事情,2尽可能节省内存使用 尽可能避免创建对象 使用自身的方法, 如string.indexOf(),String.lastIndexOf(),乘虚自 ...
- 限时团购,6.9折:《微信开发深度解析:公众号、小程序高效开发秘籍》推荐序
全书由目 Senparc.Weixin SDK 作者苏震巍历时 2 年完成,涵盖了开发微信公众号及小程序需要用的的各项后端开发技能.技巧.避坑提示,以及 Senparc.Weixin SDK 微信公众 ...
- 【转】带你玩转Visual Studio——04.带你高效开发
上一篇文章带你玩转Visual Studio--带你了解VC++各种类型的工程一文中讲了各种类型VC++工程的主要功能和用途.现在将带你一起快速开发c++程序. 有过Java开发经验的人都知道Java ...
- python实战演练_《Python高效开发实战》实战演练——
在完成Django项目和应用的建立后,即可以开始编写网站应用代码,这里通过为注册页面显示一个欢迎标题,来演示Django的路由映射功能. 1)首先在djangosite/app/views.py中建立 ...
最新文章
- 《Pro ASP.NET MVC 3 Framework》学习笔记之十七【示例项目SportsStore】
- sql server 2008 远程连接配置
- 正确理解Spring AOP中的Around advice
- 适用于单片机的数据加密算法:xxtea
- python中如何打印两行代码间的空行_python 打印几行空行、 打印不换行
- 移动端UC /QQ 浏览器的部分私有Meta 属性
- python编程入门课_程序设计入门—Python
- 100层楼扔2个鸡蛋、3个鸡蛋……
- Python2 和 pip2 存在, Python3 也存在,但是 pip3 不存在的解决办法
- python做购物系统的实训报告_网上购物系统实训总结
- python高级篇----网络编程与爬虫
- 基于Python的高校网络课程数据分析
- 玩转IE之自动切换代理服务器
- 如何知道某个IP是不是局域网的IP
- 一篇小论文:VGGish-BiGRU网络
- 文章摘要生成(Summarizing Text with Amazon Reviews)
- [转]浅说软件需求分析
- 数组No1团队成立了!
- 边缘计算:电信运营商5G时代战略转型的关键一步
- 自己开发了一个SmartPhone用的手机归属地软件SmartPhone
热门文章
- 计算机网络之网络层服务和网络层服务模型
- git报错之fatal: protocol error: bad line length character: No This
- vb.net它SqlHelper制备及应用
- VC++、MFC Sqlite3数据库的使用
- iOS下载文件,保存路径. 防止加到iCloud备份
- 学计算机不管干哪行,语言是必备的基本素质(认真学习C++)
- 性能分析工具Linux perf使用经验
- cortex a7 a53_最美轿跑之一的奥迪A7,究竟有何魅力令人一眼定心
- c语言上机作业题及答案,2017计算机二级C语言上机测试题附答案
- 编写一个java程序在屏幕上输出,编写一个Java程序在屏幕上输出“This is java!”。...