html中埃米特语法规则的示例分析

　　介绍

这篇文章给大家分享的是有关的html中埃米特语法规则的示例分析的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。

蚂蚁——写html/CSS快到飞起

在前端开发的过程中,最费时间的工作就是写html, CSS代码。一堆的标签,属性,括号等,头疼。这里推荐一个埃米特语法规则,让你写的时候爽到飞起,能大大提高代码书写,只需要敲一行代码就能生成你想要的完整的html结构,下面会介绍如何使用。

蚂蚁是一款插件,只要能安装他的编辑器都能使用,大部分编辑器都可以使用该语法规则,我们平时开发的崇高文本,Eclipse, notepad++, VS代码,原子,Dreamweaver等等编辑器都可以使用。

安装方式和平时安装插件一样搜索这个蚂蚁插件安装,每个编辑器安装方式不同,请各自尝试

<强> 1:html初始结构

下图中的结构,偷懒的都会直接一个!=比;选项卡解决,这样可以快速生成基础的结构,同时防止手写时忘记某个代码块,输入错误的代码。
html中埃米特语法规则的示例分析

<强> 2:id(#),类(。)

id指令:#;类指令:。

<李>

p #测试

& lt; p  id=皌est"祝辞& lt;/p> <李>

p。李测试

& lt; p 类=皌est"祝辞& lt;/p>

<强> 3:子节点(在),兄弟节点(+),上级节点(^)

子节点指令:比;;兄弟节点指令:+;上级节点:^

<李>

p> ul> li> p

& lt; p> 　　,,& lt; ul> 　　,,,,& lt; li> 　　,,,,,,& lt; p> & lt;/p> 　　,,,,& lt;/li> 　　,,& lt;/ul> 　　,& lt;/p> <李>

p + ul + p

& lt; p> & lt;/p> 　　& lt; ul> & lt;/ul> 　　& lt; p> & lt;/p> <李>

p> ul>李^ p(这里的^是接在李后面所以在李的上一级,与ul成了兄弟关系,当然两个^ ^就是上上级)

& lt; p> 　　,,& lt; ul> 　　,,,,& lt; li> & lt;/li> 　　,,& lt;/ul> 　　,,& lt; p> & lt;/p> 　　,& lt;/p>

<强> 4:重复(*)

重复指令:*

<李>

p * 5(*号后面添加数字表示重复的元素个数)

,,,& lt; p> & lt;/p> 　　,,& lt; p> & lt;/p> 　　,,& lt; p> & lt;/p> 　　,,& lt; p> & lt;/p> 　　,,& lt; p> & lt;/p>

<强> 5:分组(())

分组指令:()

<李>

p> (ul> li>) + p> p
(括号里面的内容为一个代码块,表示与括号内部嵌套和外面的的层级无关)

& lt; p> 　　,,& lt; ul> 　　,,,,& lt; li> & lt; https://www.yisu.com/zixun/a  href=" "> 　　 　　

　　

　　

　　

解释:这里如果不加括号的话,猜想下,a + p这样p就是和一个是兄弟关系了,会包含在李里面。懂了吧哈哈

,& lt; p> 　　,,& lt; ul> 　　,,,,& lt; li> 　　,,,,,,& lt; https://www.yisu.com/zixun/a  href=" "> 　　

　　

　　

　　李 　　

<强> 6:属性([attr])——id、类都有怎么能少了属性呢

属性指令:[]

<李>

[href=https://www.yisu.com/zixun/? # #”name=' xiaoA '](中括号内填写属性键值对的形式,并且空格隔开)

& lt; a  href=https://www.yisu.com/zixun/? # #”name=" xiaoA ">

# # # 6:编号($)
编号指令:$

<李>

ul>李。测试* 3美元(美元的代表一位数,后面更上*数字就代表从1递增到填写的数字)

,& lt; ul> 　　,,& lt; li 类=皌est1"祝辞& lt;/li> 　　,,& lt; li 类=皌est2"祝辞& lt;/li> 　　,,& lt; li 类=皌est3"祝辞& lt;/li> 　　,& lt;/ul>

注意:

<李>

一个美元的代表一位数,$ $就是两位数了,以此类推就可以形成美元(1),$ $ (01),$ $ $ (001)

<李>

如果想自定义从几开始递增的话就利用:$ @ +数字*数字
例如:ul>李* 3。李测试美元@3

,& lt; ul> 　　,,& lt; li 类=皌est3"祝辞& lt;/li> 　　,,& lt; li 类=皌est4"祝辞& lt;/li> 　　,,& lt; li 类=皌est5"祝辞& lt;/li> 　　,& lt;/ul>

html中埃米特语法规则的示例分析