html快速写法,HTML的快速写法:Emmet和Haml

2023-10-07 21:20

本文主要是介绍html快速写法,HTML的快速写法:Emmet和Haml,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

HTML代码写起来很费事,因为它的标签多。

L3Byb3h5L2h0dHAvd3d3LnFpbmdkb3UubWUvd3AtY29udGVudC91cGxvYWRzLzIwMTQvMDQvYmcyMDEzMDYxMTAxLmpwZw==.jpg

一种解决方法是采用模板, 在别人写好的骨架内,填入自己的内容。还有一种就是我今天想要介绍的方法—-简写法。

常用的简写法,目前主要是Emmet和Haml两种,本文都将加以介绍。

L3Byb3h5L2h0dHAvd3d3LnFpbmdkb3UubWUvd3AtY29udGVudC91cGxvYWRzLzIwMTQvMDQvYmcyMDEzMDYxMTAyLmpwZw==.jpg

L3Byb3h5L2h0dHAvd3d3LnFpbmdkb3UubWUvd3AtY29udGVudC91cGxvYWRzLzIwMTQvMDQvYmcyMDEzMDYxMTAzLmpwZw==.jpg

这两种简写法,功能相近,各有特点。考虑到Haml基于Ruby语言,我建议Ruby/Rails项目使用Haml,其他项目使用Emmet。

L3Byb3h5L2h0dHAvd3d3LnFpbmdkb3UubWUvd3AtY29udGVudC91cGxvYWRzLzIwMTQvMDQvYmcyMDEzMDYxMTA0LmpwZw==.jpg

一、Emmet的用法

Emmet是一个编辑器插件,官方网站提供多编辑器支持。我一般使用vim,下面就以vim插件举例。

首先,按照vim插件文档进行安装。然后,新建一个文本文件,键入

按一下”,”(先按ctrl键+y键,然后再按逗号键,不同的编辑器有不同的转化键),这一行就立刻变成下面的样子。

这就是Emmet的基本用法:先写简写形式,然后用”,”将其转成HTML代码。

Emmet支持的简写规则,类似于CSS选择器(大写的E代表一个HTML标签):

1. E 代表HTML标签。

2. E#id 代表id属性。

3. E.class 代表class属性。

4. E[attr=foo] 代表某一个特定属性。

5. E{foo} 代表标签包含的内容是foo。

6. E>N 代表N是E的子元素。

7. E+N 代表N是E的同级元素。

8. E^N 代表N是E的上级元素。

请看下面的例子。

p

p#main.item

a[href=http://wikipedia.org]{维基百科}

div>p

div+p

p>span^div

对应的HTML代码为:

维基百科

Emmet还提供了连写(E*N)和自动编号(E$*N)功能。

li*3>a

div#item$.class$$*3

对应的HTML代码为

下面是另外一些简写的例子,读者可以自行测试,看看它们转化成怎样的HTML代码。

header+main+footer

table>(thead>tr>th*5)(tbody>tr>td*5)

nav>ul>(li>a[href=#]{Link})*5

Emmet使用按键”/”,让一个代码块变成HTML注释。更多功能请参考以下链接:

* Zeno Rocha, Goodbye, Zen Coding. Hello, Emmet!

* Sergey Chikuyonok, Zen Coding: A Speedy Way To Write HTML/CSS Code

* Joshua Johnson, 7 Awesome Emmet HTML Time-Saving Tips

* Zen-coding vim tutorial

二、Haml的用法

Haml不同于emmet,它是一个命令行工具。需要先安装Ruby语言,再安装Haml。

gem install haml

使用时,用命令行将haml文件一次性转为html文件。

haml input.haml output.html

haml的简化规则如下:

1. !!! 5 代表

2. %E 代表HTML标签。

3. %E#id 代表id属性。

4. %E.class 代表class属性。

5. %E(attr="xxx") 代表某一个特定属性。

6. %E XXX 代表插入标签的内容。

7. %E %N 代表N是E的子元素。N如果写在第二行,需要缩进。

下面是Haml的代码示例,代码块的层级关系用缩进表示。

!!! 5

%html{lang: 'en'}

%head

%title Haml Demo

%body

%h1 Hello World

%a(href="http://wikipedia.org" title="Wikipedia") 维基百科

对应的HTML代码为:

Haml Demo

Hello World

维基百科

在Haml中,”/ “起首的行表示HTML注释,”-# “起首的行表示Haml注释。

HTML代码简写法:Emmet和Haml

http://www.ruanyifeng.com/blog/2013/06/emmet_and_haml.html?bsh_bid=657901854 HTML代码简写法:Emmet和Haml   ...

HTML代码简写法:Emmet和Haml(转)

HTML代码写起来很费事,因为它的标签多. 一种解决方法是采用模板, 在别人写好的骨架内,填入自己的内容.还有一种就是我今天想要介绍的方法----简写法. 常用的简写法,目前主要是Emmet和Haml ...

emmet,jade,haml, slim,less,sass,coffeescript等的实战优缺点

摘要: 文章背景,来自于群内周五晚上的一次头脑风暴式的思维碰撞交流活动. 随着前端技术的蓬勃发展, 各种新技术随着生产力的需要不断的涌入我们的视野, 那今天探讨的话题是这些新时代的前端兵器谱: 一. ...

ios 几种快速写法

//NSString .... NSString *str1 = @"str1"; NSLog(@"str %@",str1); //NSArray NSArr ...

今天发现新大陆:haml和Emmet

其实一开始小渣渣我只是想接触一下(css预处理器)sass,可是突然冒出一个haml. 原文是酱紫的. Sass 是采用 Ruby 语言编写的一款 CSS 预处理语言,它诞生于2007年,是最大的成熟 ...

使用Emmet 快速生成HTML代码

在前端开发的过程中,一个最繁琐的工作就是写 HTML.CSS 代码.数量繁多的标签.属性.尖括号.标签闭合等,让前端们甚是苦恼.于是,我向大家推荐 Emmet,它提供了一套非常简单的语法规则,书写起来 ...

工欲善其事必先利其器,用Emmet提高HTML编写速度

HTML代码写起来很费事,因为它的标签多. 一种解决方法是采用模板,在别人写好的骨架内,填入自己的内容.还有一种很炫的方法----简写法. 常用的简写法,目前主要是Emmet和Haml两种.这两种简写 ...

前端学习笔记之HTML/CSS 速写神器 Emmet

HTML/CSS 速写神器:Emmet 在前端开发的过程中,一个最繁琐的工作就是写 HTML.CSS 代码.数量繁多的标签.属性.尖括号.标签闭合等,让前端们甚是苦恼.于是,我向大家推荐 Emmet, ...

转载:HTML/CSS 速写神器:Emmet

转载在http://bubkoo.com/2014/01/04/emmet-a-toolkit-for-improving-html-css-workflow/ 在前端开发的过程中,一个最繁琐的工作就 ...

随机推荐

JavaScript系列文章:自动类型转换-续

在上一篇文章中,我们详细讲解了JavaScript中的自动类型转换,由于篇幅限制,没能覆盖到所有的转换规则,这次准备详细讲解一下. 上次我们提到了对象类型参与运算时转换规则: 1). 在逻辑环境中执行 ...

android 腾讯x5内核 浏览器

1.浏览器内核: 主流浏览器内核介绍(前端开发值得了解的浏览器内核历史) 浏览器内核历史介绍: 在android 4.4之前,浏览器用的还是webkit 在android 4.4之后,google就抛 ...

如何获取byte的各个bit值以及常见位操作

项目中通过信号采集板的数据获取车上仪表盘指示灯的信息,将接收到的数据转成byte后,还要将每一个Byte的各个Bit值分离出来,这样才知道每个bit的值代表的具体信息.这里记录下如何获取byte的各个 ...

Html5 学习系列(五)Canvas绘图API快速入门(1)

引言:Canvas绘图API快速入门 在接触HTML5的初学者包括我都在很多地方见到非常炫的一些页面,甚至好多学习HTML5的开发者都是冲着Web端的页游去的,那么HTML5那么绚丽的页面效果以及游戏 ...

在Apache+php中使用json来通讯

示例代码: <?php // 获取输入的内容 $request = http_get_request_body(); // 按json格式解析成一个 php对象 $json_obj = json ...

ZOJ1463

题意:给一个括号字符串,求解最少添加的字符能使整个字符串匹配. 输入: s(未匹配的字符串) 输出: S(匹配后的字符串) 思路:绝壁超级坑的一道题,格式我不想说什么了,特坑,然后就是对给定的字符串, ...

VB6之写注册表

难免会遇到写注册表的情况,写了个实用点的RegWrite函数.为了减少代码量,用WScript.Shell取代了API来实现. 使用方式就在注释中了,就不再过多解释了.PS:注释比实现代码要丰富多了, ...

新概念英语(1-25)Mrs&period; Smith&&num;39&semi;s Kitchen

What colour is the electric cooker? Mrs. Smith's Kitchen is small. There is a refrigerator in the ki ...

基本数据类型 异常 数组排序 JVM区域划分

Day01 1.基本数据类型各占几个字节 Byte 1 short2 int4 long8 float4 double6 char2 boolean1 Byte b1=3,b2= ...

QT出现应用程序无法正常启动0xc000007b的错误

最近做了一个成绩管理系统,打包好后,运行他的exe可执行文件时,出现了如下图的错误提示: 在网上查阅了很多资料,其中有篇文章给了我很大的启示和帮助,文章地址http://www.cnblogs.com ...

这篇关于html快速写法,HTML的快速写法:Emmet和Haml的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/160511

相关文章

Vue3 的 shallowRef 和 shallowReactive:优化性能

大家对 Vue3 的 ref 和 reactive 都很熟悉,那么对 shallowRef 和 shallowReactive 是否了解呢? 在编程和数据结构中,“shallow”(浅层)通常指对数据结构的最外层进行操作,而不递归地处理其内部或嵌套的数据。这种处理方式关注的是数据结构的第一层属性或元素,而忽略更深层次的嵌套内容。 1. 浅层与深层的对比 1.1 浅层(Shallow) 定义

这15个Vue指令,让你的项目开发爽到爆

1. V-Hotkey 仓库地址: github.com/Dafrok/v-ho… Demo: 戳这里 https://dafrok.github.io/v-hotkey 安装: npm install --save v-hotkey 这个指令可以给组件绑定一个或多个快捷键。你想要通过按下 Escape 键后隐藏某个组件,按住 Control 和回车键再显示它吗?小菜一碟: <template

【 html+css 绚丽Loading 】000046 三才归元阵

前言:哈喽,大家好,今天给大家分享html+css 绚丽Loading!并提供具体代码帮助大家深入理解,彻底掌握!创作不易,如果能帮助到大家或者给大家一些灵感和启发,欢迎收藏+关注哦 💕 目录 📚一、效果📚二、信息💡1.简介:💡2.外观描述:💡3.使用方式:💡4.战斗方式:💡5.提升:💡6.传说: 📚三、源代码,上代码,可以直接复制使用🎥效果🗂️目录✍️

【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画(下)

【课程链接】 AntV G6:深入图形与图形分组、自定义节点、节点动画(下)_哔哩哔哩_bilibili 本章十吾老师讲解了一个复杂的自定义节点中,应该怎样去计算和绘制图形,如何给一个图形制作不间断的动画,以及在鼠标事件之后产生动画。(有点难,需要好好理解) <!DOCTYPE html><html><head><meta charset="UTF-8"><title>06

电脑桌面文件删除了怎么找回来?别急,快速恢复攻略在此

在日常使用电脑的过程中,我们经常会遇到这样的情况:一不小心,桌面上的某个重要文件被删除了。这时,大多数人可能会感到惊慌失措,不知所措。 其实,不必过于担心,因为有很多方法可以帮助我们找回被删除的桌面文件。下面,就让我们一起来了解一下这些恢复桌面文件的方法吧。 一、使用撤销操作 如果我们刚刚删除了桌面上的文件,并且还没有进行其他操作,那么可以尝试使用撤销操作来恢复文件。在键盘上同时按下“C

计算机毕业设计 大学志愿填报系统 Java+SpringBoot+Vue 前后端分离 文档报告 代码讲解 安装调试

🍊作者:计算机编程-吉哥 🍊简介:专业从事JavaWeb程序开发,微信小程序开发,定制化项目、 源码、代码讲解、文档撰写、ppt制作。做自己喜欢的事,生活就是快乐的。 🍊心愿:点赞 👍 收藏 ⭐评论 📝 🍅 文末获取源码联系 👇🏻 精彩专栏推荐订阅 👇🏻 不然下次找不到哟~Java毕业设计项目~热门选题推荐《1000套》 目录 1.技术选型 2.开发工具 3.功能

hdu 4565 推倒公式+矩阵快速幂

题意 求下式的值: Sn=⌈ (a+b√)n⌉%m S_n = \lceil\ (a + \sqrt{b}) ^ n \rceil\% m 其中: 0<a,m<215 0< a, m < 2^{15} 0<b,n<231 0 < b, n < 2^{31} (a−1)2<b<a2 (a-1)^2< b < a^2 解析 令: An=(a+b√)n A_n = (a +

Vue3项目开发——新闻发布管理系统(六)

文章目录 八、首页设计开发1、页面设计2、登录访问拦截实现3、用户基本信息显示①封装用户基本信息获取接口②用户基本信息存储③用户基本信息调用④用户基本信息动态渲染 4、退出功能实现①注册点击事件②添加退出功能③数据清理 5、代码下载 八、首页设计开发 登录成功后,系统就进入了首页。接下来,也就进行首页的开发了。 1、页面设计 系统页面主要分为三部分,左侧为系统的菜单栏,右侧

v0.dev快速开发

探索v0.dev:次世代开发者之利器 今之技艺日新月异,开发者之工具亦随之进步不辍。v0.dev者,新兴之开发者利器也,迅速引起众多开发者之瞩目。本文将引汝探究v0.dev之基本功能与优势,助汝速速上手,提升开发之效率。 何谓v0.dev? v0.dev者,现代化之开发者工具也,旨在简化并加速软件开发之过程。其集多种功能于一体,助开发者高效编写、测试及部署代码。无论汝为前端开发者、后端开发者

Codeforces Beta Round #47 C凸包 (最终写法)

题意慢慢看。 typedef long long LL ;int cmp(double x){if(fabs(x) < 1e-8) return 0 ;return x > 0 ? 1 : -1 ;}struct point{double x , y ;point(){}point(double _x , double _y):x(_x) , y(_y){}point op