【Emmet 的 HTML 缩写介绍 ( 快速检索 )】

最新推荐文章于 2022-07-12 17:59:58 发布
最新推荐文章于 2022-07-12 17:59:58 发布
阅读量772 收藏 7
点赞数 4
分类专栏： 【Emmet 使用手册】 文章标签： emmet语法 emmet缩写 emmet的html缩写 html缩写语法
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/VickyTsai/article/details/87894389
版权
  • 按照字母排序
    • html 代码的注释部分,不进行注释,注释会变成灰色,看不清晰
    • 参考 速查表

HTML 标签缩写

A

a	 自带href的属性
    <a href=""></a>

a:link  自动添加了http 
    <a href="http://"></a>

a:mail  自动添加了mailto 
    <a href="mailto:"></a>

abbr  自带空值的 title 属性 
    <abbr title=""></abbr>

acronym 自带空值的 title 属性
    <acronym title=""></acronym>

acronym = acr
★ acr
	<acronym title=""></acronym>

★ address = adr
	<address></address>

area
	<area shape="" coords="" href="" alt="" />

area:d
	<area shape="default" href="" alt="" />

area:c
	<area shape="circle" coords="" href="" alt="" />

area:r
	<area shape="rect" coords="" href="" alt="" />
area:p
	<area shape="poly" coords="" href="" alt="" />


★ article = art
	<article></article>


audio
	<audio src=""></audio>

在这里插入图片描述

B


base 自带空值的 href 属性少结束符号 
 <base href="">

basefont 少结束符号 /
 <basefont>

base 自动闭合了，带/ 
 <base href="" />

basefont 自动闭合了，带/ 
 <basefont />

br  自动闭合了
 <br />


bdo 自带空值dir 属性
 <bdo dir=""></bdo>

bdo:r 自带 带属性值的dir属性 .定义属性值用冒号 :
 <bdo dir="rtl"></bdo>

bdo:l 自带 带属性值的dir 属性 
 <bdo dir="ltr"></bdo>


★ blockquote = bq
 <blockquote></blockquote>



★ button = btn
 <button></button>

 
btn:b = button[type=button]
 <!-- 应该生成下方的代码,在测试的时候,没有生成,可以使用原来的 
 button[type=button]来生成 -->

 <!-- 用:来定义type属性的属性值 -->
button[type=button]
 <button type="button"></button>		

btn:r			
 <button type="reset"></button>

btn:s			
 <button type="submit"></button>

C


col 
    <col />
    
★ colgroup = colg
	<colgroup></colgroup>    


★ command = cmd
	<command />


★ caption = cap
	<caption></caption>


c
	<!--  -->

cc:ie6
	<!--[if lte IE 6]>
		
	<![endif]-->

cc:ie
	<!--[if IE]>
		
	<![endif]-->

cc:noie
	<!--[if !IE]><!-->
		
	<!--<![endif]-->

D

★ dialog = dlg
	<dialog></dialog>


★ datagrid = datag
	<datagrid></datagrid>

★ datalist = datal
	<datalist></datalist>

★ details = det
	<details></details>

doc
	<!-- 一个charset属性 -->
	<html>
	<head>
		<meta charset="UTF-8" />
		<title>Document</title>
	</head>
	<body>
		
	</body>
	</html>

doc4
	<!-- 3个属性,http=equiv/content/charset -->
	<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
		<title>Document</title>
	</head>
	<body>

	</body>
	</html>

E

★ embed = emb
	<embed src="" type="" />

F

★ figure = fig
	<figure></figure>
		
★ figcaption = figc
	<figcaption></figcaption>


★ fieldset = fst = fset
	<fieldset></fieldset>



frame 
    <frame />
form
	<form action=""></form>

form:get
	<form action="" method="get"></form>

form:post
	<form action="" method="post"></form>
	
★ footer = ftr
	<footer></footer>

H

hr 
    <hr />
★ header = hdr
	<header></header>
	
doc
	<!-- 一个charset属性 -->
	<html>
	<head>
		<meta charset="UTF-8" />
		<title>Document</title>
	</head>
	<body>
		
	</body>
	</html>

doc4
	<!-- 3个属性,http=equiv/content/charset -->
	<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
		<title>Document</title>
	</head>
	<body>

	</body>
	</html>

html:4t

	<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
	<html lang="en">
	<head>
		<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
		<title>Document</title>
	</head>
	<body>


	</body>
	</html>

html:4s

	<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
	<html lang="en">
	<head>
		<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
		<title>Document</title>
	</head>
	<body>

	</body>
	</html>

html:xt

	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
	<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
	<head>
		<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
		<title>Document</title>
	</head>
	<body>

	</body>
	</html>

html:xs

	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
	<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
	<head>
		<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
		<title>Document</title>
	</head>
	<body>

	</body>
	</html>

html:xxs

	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
	<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
	<head>
		<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
		<title>Document</title>
	</head>

	<body>
		
	</body>
	</html>

html:xml
	<html xmlns="http://www.w3.org/1999/xhtml"></html>
	
html:5 = !
	<!DOCTYPE html>
	<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<title>Document</title>
	</head>
	<body>
		
	</body>
	</html>
	
	</body>

I

img 自带两个空值的属性 
	<img src="" alt="" />


★ iframe = ifr
	<iframe src="" frameborder="0"></iframe>	


isindex
	<isindex />
	
input
	<input type="text" />

input:hidden = input:h(简写)
	<!-- 这两个缩写 展开时同一个代码片段,都是同时包含两个属性-->

	<!-- input 可以直接使用 : 来默认定义type的属性值,
	共 32 个缩写 ,有的同一代码片段,有两个缩写,
	采用的是属性值的首字母-->
input:hidden
	<input type="hidden" name="" />

input:h
	<input type="hidden" name="" />
 
★ input:text = input:t = inp(简写)
	<!-- 三个缩写是同一个展开片段,都是同时包含三个属性 -->
	<input type="text" name="" id="" />

input:search
	<input type="search" name="" id="" />

input:email
	<input type="email" name="" id="" />

input:url
	<input type="url" name="" id="" />

input:password = input:p(简写)
	<input type="password" name="" id="" />


input:datetime
	<input type="datetime" name="" id="" />

input:date
	<input type="date" name="" id="" />

input:datetime-local
	<input type="datetime-local" name="" id="" />

input:month
	<input type="month" name="" id="" />

input:week
	<input type="week" name="" id="" />

input:time
	<input type="time" name="" id="" />

input:number
	<input type="number" name="" id="" />

input:color
	<input type="color" name="" id="" />

input:checkbox = input:c
	<!-- 记不住缩写的,就直接写全写,也可以偶尔试下首字母,使用次数多了,就记住了 -->
	<input type="checkbox" name="" id="" />

input:radio = input:r
	<input type="radio" name="" id="" />

input:range
	<input type="range" name="" id="" />

input:file = input:f
	<input type="file" name="" id="" />

input:submit = input:s                                         
	<input type="submit" value="" />

input:s                                          
	<input type="submit" value="" />

input:image = input:i                   
	<input type="image" src="" alt="" />

input:i                                          
	<input type="image" src="" alt="" />

input:button = input:b
	<input type="button" value="" />

input:b
<input type="button" value="" />

input:reset
	<input type="reset" value="" />

在这里插入图片描述

K


★ keygen = kg
	<keygen />

L

label
	<label for=""></label>
★ lengend = leg
	<legend></legend>	
	
link  自带两个常用属性值 
    <link rel="stylesheet" href="" />

link:css 自带两个属性,并指定为css文件 
    <link rel="stylesheet" href="style.css" />

link:print  自带三个属性,并指定media属性值 
    <link rel="stylesheet" href="print.css" media="print" />

link:favicon 自带三个属性,并指定类型的属性值 
    <link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
    
link:touch 自带两个属性 
    <link rel="apple-touch-icon" href="favicon.png" />

link:rss 自带4个属性 
    <link rel="alternate" type="application/rss+xml" title="RSS" href="rss.xml" />

 link:atom 自带4个属性 
    <link rel="alternate" type="application/atom+xml" title="Atom" href="atom.xml" />

M

map
	<map name=""></map>


meta 
    <meta />
    
meta:utf 自带三个属性,指明编码格式 
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />

meta:win  
	<meta http-equiv="Content-Type" content="text/html;charset=windows-1251" />

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  
	<!-- 超文本传输协议标题信息,
	两个属性,指定页面兼容 支持的IE版本-->
	<meta http-equiv="X-UA-Compatible" content="IE=7" />


menu:context = menu:c
	<menu type="context"></menu>

menu:c
	<menu type="context"></menu>

menu:toolbar = menu:t
	<menu type="toolbar"></menu>

O


★ object = obj
	<object data="" type=""></object>


★ option = opt
	<option value=""></option>
★ optgroup = optg		
	<optgroup></optgroup>	

★ output = out
	<output></output>

P

param
	<param name="" value="" />
	
★ progress = prog
	<progress></progress>

S


style 
	<style></style>

script 
	<script></script>

script:src 带空值的 src 属性 
	<script src=""></script>
select
	<select name="" id=""></select>

★ section = sect
	<section></section>

★ source = src
	<source></source>
	
★ strong = str
	<strong></strong>

T

textarea = tarea
	<textarea name="" id="" cols="30" rows="10"></textarea>

V

video
	<video src=""></video>

+ 常用的嵌套结构

  • 常用的嵌套,一层一个后代
    • 使用 + 展开出,常用的嵌套结构
	<!-- 使用+ 展开出常用的嵌套结构 -->

★ ol+ = ol>li
	<ol>
		<li></li>
	</ol>


★ ul+ = ul>li
	<ul>
		<li></li>
	</ul>


★ dl+ = dl>dt+dd
	<dl>
		<dt></dt>
		<dd></dd>
	</dl>


★ map+ = map>area
	<map name="">
		<area shape="" coords="" href="" alt="" />
	</map>


★ table+ = table>tr>td
	<table>
		<tr>
			<td></td>
		</tr>
	</table>


★ colgroup+ = colg+ = colgroup>col
	<colgroup>
		<col />
	</colgroup>

★ tr+ = tr>td
	<tr>
		<td></td>
	</tr>

★ select+ = select>option
	<select name="" id="">
		<option value=""></option>
	</select>

★ optgroup+ = optg+ = optgroup>option
	<optgroup>
		<option value=""></option>
	</optgroup>

! 文档类型

  • 3 个感叹号:!!!
<!-- 文档类型 -->
!!!
	<!DOCTYPE html>

!!!4t
	<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

!!!4s
	<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

!!!xt
	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

!!!xs
	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

!!!xxs
	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
  • 感谢：♥♥♥ 如果这篇文章对您有帮助的话，可以点赞、评论、关注，鼓励下作者哦，感谢阅读 O(∩_∩)O哈哈~
  • ★ 转载 请注明出处 ,Thanks♪(･ω･)ﾉ
Hey_Coder
关注
专栏目录
Emmet文档缩写语法
tqy903的博客
01-28 510
缩写语法 缩略语法 Emmet使用类似CSS选择器的语法来描述元素在生成的树中的位置和元素的属性。 元素 可以使用div或p等元素的名称来生成HTML标记。Emmet没有预定义的可用标记名集。可以编写任何单词并将其转换为标记：div、foo等。 嵌套运算符 嵌套运算符用于在生成的树中定位缩写元素：是否应该将其放置在上下元素内部或附近。 1. 单个元素：元素+tab键 <!-- p 按下tab键扩展后得到下面代码 --> <p></p> 2. 子元素：> 可以使
初识HTML
qq_57126801的博客
07-15 743
HTML是HyperTextMarkupLanguage(超文本标记语言)的缩写（超文本”就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素），html不是一种编程语言，而是一种，用于告诉浏览器如何去构造网页。HTML也是一种规范，一种标准，它通过标记符号来标记要显示的网页中的各个部分。网页文件本身是一种文本文件，通过在文本文件中添加标记符，可以告诉浏览器如何显示其中的内容（如文字如何处理，画面如何安排，图片如何显示等）。可以使用.html与.htm作为HTML文件的后缀名（扩展名）........
【翻译】Emmet (ZenCoding) 缩写语法
weixin_30901729的博客
04-10 186
缩写语法 Emmet 使用类似于 CSS 选择器的语法描述元素在生成的文档树中的位置及其属性。 元素 可以使用元素名（如 div 或者 p）来生成 HTML 标签。Emmet 没有预定义的有效元素名的集合，可以把任何单词当作标签来生成和使用：div→<div></div>,foo→<foo></foo>等。 嵌套运算符 嵌套运算...
Emmet的HTML语法（敲代码的快捷方式）
热门推荐
G笔记
09-23 2万+
Emmet的html语法所有操作按下“tab”键即可瞬间完成元素1.在编辑器中输入元素名称，即可自动补全生成 HTML 标签，即使不是标准的 HTML 标签。 2.输入：! 或者 html:5 或者 html:4s 或者 html:4t 将自动补全html基本结构嵌套操作1.使用“>”生成子元素// 输入 div>ul>li// 按下TAB键 <div> <ul>
Sublime Text生成html标签快捷键
weixin_30251587的博客
10-30 426
Emmet Documentation Syntax Child: > nav>ul>li<nav> <ul> <li></li> </ul> </nav> Sibling: + div+p+bq<div></div> <p></p> &...
emmet的html缩写示例
03-09
在学习emmet语法的时候, 写的各种示例,有需要可以下载,方便在sublime text中快速检索到
emmet的css缩写示例
03-09
在学习emmet的过程中, 写的许多示例代码, 在sublime中打开的话,可以快速检索
h5(html5)+css3+移动端前端
weixin_58997863的博客
07-12 6399
h5(html5)+css3+移动端前端 知识点详细总结
HTML基础知识汇总
qq_43544490的博客
08-03 3418
------------------------------------ ????操作小技巧 ❗PS操作小技巧????????❕????????????✅ 1、视图–标尺：可测量像素尺寸感叹号 2、吸管工具可吸取颜色值 3、左侧移动工具–点击侧边标尺，按住不放拖至图片边缘-----方便测量 ❗vscode快捷码字 ul>li*4{$} 得到如下 <ul> <li>1</li> <li>2</li> <li>
emmet缩写格式
10-25 155
2016年5月30日 10:10 标准网页<!DOCTYPEhtml> <htmllang="zh-CN"> <head> <metacharset="UTF-8"> <title>Document</title> <linkrel...
2020-12-13【web前端HTML5（emmet插件）篇】
tudouzibututou的博客
12-13 846
@[Emmet—写HTML/CSS快到飞起] Emmet—写HTML/CSS快到飞起 在前端开发的过程中，最费时间的工作就是写 HTML、CSS 代码。一堆的标签、属性、括号等，头疼。这里推荐一个Emmet语法规则，让你写的时候爽到飞起，能大大提高代码书写，只需要敲一行代码就能生成
emmet的缩写
al62230266的博客
04-17 169
语法:产生随机测试字符 p>lipsum100 后代：>缩写：nav>ul>li <nav> <ul> <li></li> </ul></nav>兄弟：+缩写：div+p+bq <div></div><p></p>&...
使用Emmet时的HTML以及CSS缩写
钢铁鸭
03-20 351
语法: 后代：&gt; 缩写：nav&gt;ul&gt;li &lt;nav&gt; &lt;ul&gt; &lt;li&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/nav&gt; 兄弟：+ 缩写：div+p+bq &lt;div&gt;&lt;/div&gt; &lt;p&gt;&lt;/p&am
常用Emmet的HTML缩写语法
m0_47723181的博客
05-18 190
常用Emmet的HTML缩写语法 子级：> <!-- div>ul>li --> <div> <ul> <li></li> </ul> </div> 平级：+ //div+p <div></div> <p></p> 乘法：* //ul>li*3 <ul> <li>
emmet html缩写预览,HTML代码简写法：Emmet和Haml
weixin_42516490的博客
07-11 194
HTML代码写起来很费事，因为它的标签多。一种解决方法是采用模板， 在别人写好的骨架内，填入自己的内容。还有一种就是我今天想要介绍的方法----简写法。常用的简写法，目前主要是Emmet和Haml两种，本文都将加以介绍。这两种简写法，功能相近，各有特点。考虑到Haml基于Ruby语言，我建议Ruby/Rails项目使用Haml，其他项目使用Emmet。一、Emmet的用法Emmet是一个编辑器插件...
HTML代码简写法：Emmet和Haml
csuyyt的专栏
01-08 849
作者： 阮一峰 日期： 2013年6月11日 HTML代码写起来很费事，因为它的标签多。 一种解决方法是采用模板， 在别人写好的骨架内，填入自己的内容。还有一种就是我今天想要介绍的方法----简写法。 常用的简写法，目前主要是Emmet和Haml两种，本文都将加以介绍。 这两种简写法，功能相近，各有特点。考虑到Haml基于Ruby语言，我建议Ruby/Rails项
Emmet缩写语法
卜亚风
12-08 195
生成 HTML 文档初始结构 只需要输入一个 “!” ，然后摁下 ctrl+E 键，就会生成 HTML 文档初始结构（如下）： &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Document&lt;/title&a
【Emmet 的 CSS 缩写字母表 ( 快速检索 )】
Hey_Coder
03-03 1064
Emmet 的 CSS 缩写表BFlpRTz B bottom : b F float : fl l left: l p position : pos R right : r T top : t z z-index : z clear : cl display : d visibility : v overflow : ov overflow-x : ovx o...
Emmet插件教程：HTML/CSS快速开发指南
7. **学习资源**：如果官网无法访问，可以从速查表或百度云下载Emmet的官方文档和HTML标签缩写介绍，以便更好地掌握和运用Emmet。 Emmet使用手册是一份实用的教程，涵盖了如何安装、理解和运用Emmet的各个方面，...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值