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

最新推荐文章于 2022-07-15 16:03:39 发布

Hey_Coder

最新推荐文章于 2022-07-15 16:03:39 发布

阅读量768

点赞数 4

分类专栏：【Emmet 使用手册】文章标签： emmet语法 emmet缩写 emmet的html缩写 html缩写语法

本文链接：https://blog.csdn.net/VickyTsai/article/details/87894389

版权

【Emmet 使用手册】专栏收录该内容

6 篇文章 4 订阅

订阅专栏

按照字母排序
- html 代码的注释部分,不进行注释,注释会变成灰色,看不清晰
- 参考速查表

HTML 标签缩写

A
B
C
D
E
F
H
I
K
L
M
O
P
S
T
V
+ 常用的嵌套结构
! 文档类型

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
- 来源：CSDN
- 原文：https://blog.csdn.net/VickyTsai/article/details/87894389
- 版权声明：本文为博主原创文章，转载请附上博文链接！

Hey_Coder

关注

4
点赞
踩
7

收藏

觉得还不错? 一键收藏
2
评论
【Emmet 的 HTML 缩写介绍 ( 快速检索 )】

按照字母排序html 注释部分,不进行注释了,这样看得更清晰些,注释的话,会变成灰色,看得不清楚上面是缩写和解释,下面是缩写的展开片段HTML 标签缩写ABCEFHILMOSAa 自带href的属性 &amp;amp;amp;amp;lt;a href=&amp;amp;amp;quot;&amp;amp;amp;quot;&amp;amp;amp;amp;gt;&amp;amp;amp;amp;lt;/a&
复制链接

扫一扫

专栏目录