常用的ement语法
先来介绍一下什么是Emmet语法——就是使用类似于 CSS 选择器的语法描述元素在生成的文档树中的位置及其属性。
缩写语法:
快速生成html模板:
在HBuilder空白的HTML页面 使用html:5 或者直接使用 !在按Tab键
html:5
将生成:
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
</head>
<body>
<!--code-->
</body>
</html>
使用元素名称生成html标签:
输入元素标签:例如 div 标签然后按下Tab键
div
将生成:
<div></div>
常见的CSS样式:
输入常用的css样式:例如:w120然后按下Tab键
w120
将生成:
width: 120px;
定义class 和 ID:
输入 标签名 .class名:例如:我要生成一个div class名为header的标签 div.header按下Tab
div.header
将生成:
<div class="header"></div>
嵌套:嵌套运算符用于在生成的树中定位缩写元素:是否应将其放置在context元素的内部或附近(摘自Emmet文档)。
子:> 使用运算符将元素嵌套在彼此内 例如:div>ul>li>a 按下Tab
div>ul>li>a
将生成:
<div>
<ul>
<li><a href=""></a></li>
</ul>
</div>
兄弟:+ 生成同级关系的元素 例如:div+p+span按下Tab标签
div+p+span
将生成:
<div></div>
<p></p>
<span></span>
生成重复的元素:* 使用 * 可以生成重复的元素 例如:li*10按下Tab标签
li*10
将生成:
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
文本: 使用 { } 把想要写的文本放入里面 例如:a{ 山不在高有仙则名 }按下Tab
a{山不在高有仙则名}
将生成:
<a href="">山不在高有仙则名</a>
组合:使用括号()内容对复杂缩写中的子树进行分组 例如:
div>(header>ul>li*2)+footer
将生成:
<div>
<header>
<ul>
<li></li>
<li></li>
</ul>
</header>
<footer></footer>
</div>
最新文章
- Building third-party products of OpenCascade
- python 跨模块实现按照文件大小,日期实现日志分割,反转
- Linux下安装Apache并以mod_wsgi方式部署django站点
- ASP.NET MVC 网站开发总结(五)——Ajax异步提交表单之检查验证码
- mac配置impala odbc
- sixsix团队“餐站”应用M2阶段发布报告
- SU Demos-02Filtering-05Suk1k2filter
- share干什么的
- 解决VS2005 VS2008 vs2010断点无效-源代码与原始版本不同
- 【转】JQUERY相关的几个网站
- FUDCon - FedoraProject
- Cross platform GUI for creating SSL certs with OpenSSL
- STM32驱动TEA5767收音机模块
- 利刃 MVVMLight 4:绑定和绑定的各种使用场景
- The Twin Towers zoj2059 DP
- 【前端】JavaScript中prototype和__proto__的区别
- bzoj2560串珠子(子集dp)
- SQL中查询前几条或者中间某几行数据limit
- VMware下ubuntu与Windows实现文件共享的方法 (转)
- 使用 docker 创建自己的镜像