Emmet插件比较实用常用的写法-html教程-PHP中文网

首页

web前端

html教程

Emmet插件比较实用常用的写法

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Sep 01, 2016 am 12:00 AM

看了一些关于Emmet插件写法的文档，港真，怎么可以写这么长啊。其实知道几个大概要点加上实践基本就能上手写了啊

杂话

我前面有一篇【今天发现新大陆：haml和Emmet 】，其实一开始的想法是写给自己看的。

有人去阅读我的博客和评论，虽然不算多，但是对于我这种刚入门的小白渣渣还是受宠若惊的。我这大喜的蠢样子也是经常被男票说四不四傻……ㄟ(⊙ω⊙ㄟ)

嗯，跑偏了。总之，以后写东西不管是给自己看也好，给别人看都好。秉持着分享的精神一定认真好好的写(~Q~)

关于Emmet

Emmet插件的前身是Zen coding，可以大幅度提高前端开发效率的一个工具，也有人说类似于jade（高性能的模板引擎,它深受 Haml 影响,它是用 JavaScript 实现的,并且可以供 Node 使用）。再官方一些的官方语言的叽叽喳喳我就不详写了，直接百度可以找到。

Emmet支持的编辑器：

Sublime Text 2
TextMate 1.x
Eclipse/Aptana
Coda 1.6 and 2.x
Espresso
Chocolat （通过“Install Mixin”对话框添加)
Komodo Edit/IDE （通过Tools → Add-ons菜单添加)
Notepad++
PSPad
CodeMirror2/3
Brackets

第三方插件的支持

下面这些编辑器的插件都是由第三方开发者所提供的，所以可能并不支持所有Emmet的功能和特性。

SynWrite
WebStorm
PhpStorm
Vim
HTML-Kit
HippoEDIT
CodeLobster PHP Edition
TinyMCE

Emmet安装方法(Sublime text 3安装emmet插件的方法：http://blog.csdn.net/mengke1124/article/details/41696779)

因为我用的是Sublime text 3，其他编辑器安装的方法可能要根据自己的需要在网上搜刮了

Emmet插件实用常用方法

（http://www.w3cplus.com/tools/emmet-cheat-sheet.html）

这篇文档写的很清晰，也有安装插件的方法。但是介绍的方法太多，感觉有点冗长，我汇总了一些我个人觉得比较实用常用的方法。

略写版：

div>(header>ul>li*2>a)+footer>p(+号连接下一个兄弟元素)
(div>dl>(dt+dd)*3)+footer>p(括号内为一个组)
ul>li$[title=item$]{hhh $}*5(li$,表示li自增+1)
h.item${hhh $}*5({}括号内为显示文本)
ul>li.item$$$*5($为自增,三个$为三位数字)
ul>li.item$@3*5(@从3开始自增+1)
ul>li.item$@-*5(@-,自减)
ul>li.item$@-3*5(@-3,自减最小数字为3)
form#search.wide(#为id,.为类)
p[title='hello word'](自定义属性)

(隐式标签)

.class
em>.class
ul>.class
table>.row>.col
!(页面html开始代码缩写)
(缩写)
a
a:link
hr
link
link.css
meta:utf
script:src
img

详写版：

div+div>p>span+em^bq(^为上级元素)

<span style="color: #0000ff;"><span style="color: #800000;">div</span><span style="color: #0000ff;">></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><span style="color: #800000;">p</span><span style="color: #0000ff;">><span style="color: #800000;">span</span><span style="color: #0000ff;">></span><span style="color: #800000;">span</span><span style="color: #0000ff;">><span style="color: #800000;">em</span><span style="color: #0000ff;">></span><span style="color: #800000;">em</span><span style="color: #0000ff;">></span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><span style="color: #800000;">blockquote</span><span style="color: #0000ff;">></span><span style="color: #800000;">blockquote</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span></span></span></span></span></span></span>

div+div>p>span+em^^bq

<span style="color: #0000ff;"><span style="color: #800000;">div</span><span style="color: #0000ff;">></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><span style="color: #800000;">p</span><span style="color: #0000ff;">><span style="color: #800000;">span</span><span style="color: #0000ff;">></span><span style="color: #800000;">span</span><span style="color: #0000ff;">><span style="color: #800000;">em</span><span style="color: #0000ff;">></span><span style="color: #800000;">em</span><span style="color: #0000ff;">></span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><span style="color: #800000;">blockquote</span><span style="color: #0000ff;">></span><span style="color: #800000;">blockquote</span><span style="color: #0000ff;">></span></span></span></span></span></span></span>

ul>li*5(>为后代缩写,*表示有几个)

<span style="color: #0000ff;"><span style="color: #800000;">ul</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><span style="color: #800000;">li</span><span style="color: #0000ff;">></span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><span style="color: #800000;">li</span><span style="color: #0000ff;">></span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><span style="color: #800000;">li</span><span style="color: #0000ff;">></span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><span style="color: #800000;">li</span><span style="color: #0000ff;">></span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><span style="color: #800000;">li</span><span style="color: #0000ff;">></span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></span><span style="color: #800000;">ul</span><span style="color: #0000ff;">></span></span></span></span></span></span></span>

div>(header>ul>li*2>a)+footer>p(+号连接下一个兄弟元素)

<span style="color: #0000ff;"><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><span style="color: #800000;">header</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"><span style="color: #800000;">ul</span><span style="color: #0000ff;">></span>
            <span style="color: #0000ff;"><span style="color: #800000;">li</span><span style="color: #0000ff;">><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">=""</span><span style="color: #0000ff;">></span><span style="color: #800000;">a</span><span style="color: #0000ff;">></span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
            <span style="color: #0000ff;"><span style="color: #800000;">li</span><span style="color: #0000ff;">><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">=""</span><span style="color: #0000ff;">></span><span style="color: #800000;">a</span><span style="color: #0000ff;">></span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"></span><span style="color: #800000;">ul</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"></span><span style="color: #800000;">header</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><span style="color: #800000;">footer</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"><span style="color: #800000;">p</span><span style="color: #0000ff;">></span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"></span><span style="color: #800000;">footer</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span></span></span></span></span></span></span></span></span></span>

(div>dl>(dt+dd)*3)+footer>p(括号内为一个组)

<span style="color: #0000ff;"><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><span style="color: #800000;">dl</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"><span style="color: #800000;">dt</span><span style="color: #0000ff;">></span><span style="color: #800000;">dt</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"><span style="color: #800000;">dd</span><span style="color: #0000ff;">></span><span style="color: #800000;">dd</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"><span style="color: #800000;">dt</span><span style="color: #0000ff;">></span><span style="color: #800000;">dt</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"><span style="color: #800000;">dd</span><span style="color: #0000ff;">></span><span style="color: #800000;">dd</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"><span style="color: #800000;">dt</span><span style="color: #0000ff;">></span><span style="color: #800000;">dt</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"><span style="color: #800000;">dd</span><span style="color: #0000ff;">></span><span style="color: #800000;">dd</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"></span><span style="color: #800000;">dl</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><span style="color: #800000;">footer</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><span style="color: #800000;">p</span><span style="color: #0000ff;">></span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></span><span style="color: #800000;">footer</span><span style="color: #0000ff;">></span></span></span></span></span></span></span></span></span></span></span>

ul>li$[title=item$]{hhh $}*5(li$,表示li自增+1)

<span style="color: #0000ff;"><span style="color: #800000;">ul</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><span style="color: #800000;">li1 </span><span style="color: #ff0000;">title</span><span style="color: #0000ff;">="item1"</span><span style="color: #0000ff;">></span>hhh 1<span style="color: #0000ff;"></span><span style="color: #800000;">li1</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><span style="color: #800000;">li2 </span><span style="color: #ff0000;">title</span><span style="color: #0000ff;">="item2"</span><span style="color: #0000ff;">></span>hhh 2<span style="color: #0000ff;"></span><span style="color: #800000;">li2</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><span style="color: #800000;">li3 </span><span style="color: #ff0000;">title</span><span style="color: #0000ff;">="item3"</span><span style="color: #0000ff;">></span>hhh 3<span style="color: #0000ff;"></span><span style="color: #800000;">li3</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><span style="color: #800000;">li4 </span><span style="color: #ff0000;">title</span><span style="color: #0000ff;">="item4"</span><span style="color: #0000ff;">></span>hhh 4<span style="color: #0000ff;"></span><span style="color: #800000;">li4</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><span style="color: #800000;">li5 </span><span style="color: #ff0000;">title</span><span style="color: #0000ff;">="item5"</span><span style="color: #0000ff;">></span>hhh 5<span style="color: #0000ff;"></span><span style="color: #800000;">li5</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></span><span style="color: #800000;">ul</span><span style="color: #0000ff;">></span></span></span></span></span></span></span>

h.item${hhh $}*5({}括号内为显示文本)

<span style="color: #0000ff;"><span style="color: #800000;">h </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="item1"</span><span style="color: #0000ff;">></span>hhh 1<span style="color: #0000ff;"></span><span style="color: #800000;">h</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><span style="color: #800000;">h </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="item2"</span><span style="color: #0000ff;">></span>hhh 2<span style="color: #0000ff;"></span><span style="color: #800000;">h</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><span style="color: #800000;">h </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="item3"</span><span style="color: #0000ff;">></span>hhh 3<span style="color: #0000ff;"></span><span style="color: #800000;">h</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><span style="color: #800000;">h </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="item4"</span><span style="color: #0000ff;">></span>hhh 4<span style="color: #0000ff;"></span><span style="color: #800000;">h</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><span style="color: #800000;">h </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="item5"</span><span style="color: #0000ff;">></span>hhh 5<span style="color: #0000ff;"></span><span style="color: #800000;">h</span><span style="color: #0000ff;">></span></span></span></span></span></span>

ul>li.item$$$*5($为自增,三个$为三位数字)

<span style="color: #0000ff;"><span style="color: #800000;">ul</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><span style="color: #800000;">li </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="item001"</span><span style="color: #0000ff;">></span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><span style="color: #800000;">li </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="item002"</span><span style="color: #0000ff;">></span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><span style="color: #800000;">li </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="item003"</span><span style="color: #0000ff;">></span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><span style="color: #800000;">li </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="item004"</span><span style="color: #0000ff;">></span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><span style="color: #800000;">li </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="item005"</span><span style="color: #0000ff;">></span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></span><span style="color: #800000;">ul</span><span style="color: #0000ff;">></span></span></span></span></span></span></span>

ul>li.item$@3*5(@从3开始自增+1)

<span style="color: #0000ff;"><span style="color: #800000;">ul</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><span style="color: #800000;">li </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="item3"</span><span style="color: #0000ff;">></span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><span style="color: #800000;">li </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="item4"</span><span style="color: #0000ff;">></span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><span style="color: #800000;">li </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="item5"</span><span style="color: #0000ff;">></span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><span style="color: #800000;">li </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="item6"</span><span style="color: #0000ff;">></span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><span style="color: #800000;">li </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="item7"</span><span style="color: #0000ff;">></span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></span><span style="color: #800000;">ul</span><span style="color: #0000ff;">></span></span></span></span></span></span></span>

ul>li.item$@-*5(@-,自减)

<span style="color: #0000ff;"><span style="color: #800000;">ul</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><span style="color: #800000;">li </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="item5"</span><span style="color: #0000ff;">></span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><span style="color: #800000;">li </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="item4"</span><span style="color: #0000ff;">></span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><span style="color: #800000;">li </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="item3"</span><span style="color: #0000ff;">></span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><span style="color: #800000;">li </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="item2"</span><span style="color: #0000ff;">></span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><span style="color: #800000;">li </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="item1"</span><span style="color: #0000ff;">></span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></span><span style="color: #800000;">ul</span><span style="color: #0000ff;">></span></span></span></span></span></span></span>

ul>li.item$@-3*5(@-3,自减最小数字为3)

<span style="color: #0000ff;"><span style="color: #800000;">ul</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><span style="color: #800000;">li </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="item7"</span><span style="color: #0000ff;">></span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><span style="color: #800000;">li </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="item6"</span><span style="color: #0000ff;">></span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><span style="color: #800000;">li </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="item5"</span><span style="color: #0000ff;">></span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><span style="color: #800000;">li </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="item4"</span><span style="color: #0000ff;">></span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><span style="color: #800000;">li </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="item3"</span><span style="color: #0000ff;">></span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></span><span style="color: #800000;">ul</span><span style="color: #0000ff;">></span></span></span></span></span></span></span>

form#search.wide(#为id,.为类)

<span style="color: #0000ff;"><span style="color: #800000;">form </span><span style="color: #ff0000;">action</span><span style="color: #0000ff;">=""</span><span style="color: #ff0000;"> id</span><span style="color: #0000ff;">="search"</span><span style="color: #ff0000;"> class</span><span style="color: #0000ff;">="wide"</span><span style="color: #0000ff;">></span><span style="color: #800000;">form</span><span style="color: #0000ff;">></span></span>

p[title='hello word'](自定义属性)

<span style="color: #0000ff;"><span style="color: #800000;">p </span><span style="color: #ff0000;">title</span><span style="color: #0000ff;">="hello word"</span><span style="color: #0000ff;">></span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span></span>

(隐式标签)
.class

<span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="class"</span><span style="color: #0000ff;">></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span></span>

em>.class

<span style="color: #0000ff;"><span style="color: #800000;">em</span><span style="color: #0000ff;">><span style="color: #800000;">span </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="class"</span><span style="color: #0000ff;">></span><span style="color: #800000;">span</span><span style="color: #0000ff;">></span><span style="color: #800000;">em</span><span style="color: #0000ff;">></span></span></span>

ul>.class

<span style="color: #0000ff;"><span style="color: #800000;">ul</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><span style="color: #800000;">li </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="class"</span><span style="color: #0000ff;">></span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></span><span style="color: #800000;">ul</span><span style="color: #0000ff;">></span></span></span>

table>.row>.col

<span style="color: #0000ff;"><span style="color: #800000;">table</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><span style="color: #800000;">tr </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="row"</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"><span style="color: #800000;">td </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="col"</span><span style="color: #0000ff;">></span><span style="color: #800000;">td</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"></span><span style="color: #800000;">tr</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></span><span style="color: #800000;">table</span><span style="color: #0000ff;">></span></span></span></span>

!(页面html开始代码缩写)

<span style="color: #0000ff;"><span style="color: #ff00ff;">doctype html</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><span style="color: #800000;">html </span><span style="color: #ff0000;">lang</span><span style="color: #0000ff;">="en"</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><span style="color: #800000;">head</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><span style="color: #800000;">meta </span><span style="color: #ff0000;">charset</span><span style="color: #0000ff;">="UTF-8"</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><span style="color: #800000;">title</span><span style="color: #0000ff;">></span>Document<span style="color: #0000ff;"></span><span style="color: #800000;">title</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></span><span style="color: #800000;">head</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>
    
<span style="color: #0000ff;"></span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></span><span style="color: #800000;">html</span><span style="color: #0000ff;">></span></span></span></span></span></span></span>

(缩写)
a

<span style="color: #0000ff;"><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">=""</span><span style="color: #0000ff;">></span><span style="color: #800000;">a</span><span style="color: #0000ff;">></span></span>

a:link

<span style="color: #0000ff;"><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">="http://"</span><span style="color: #0000ff;">></span><span style="color: #800000;">a</span><span style="color: #0000ff;">></span></span>

<span style="color: #0000ff;"><span style="color: #800000;">hr</span><span style="color: #0000ff;">></span></span>

link

<span style="color: #0000ff;"><span style="color: #800000;">link </span><span style="color: #ff0000;">rel</span><span style="color: #0000ff;">="stylesheet"</span><span style="color: #ff0000;"> href</span><span style="color: #0000ff;">=""</span><span style="color: #0000ff;">></span></span>

link.css

<span style="color: #0000ff;"><span style="color: #800000;">link </span><span style="color: #ff0000;">rel</span><span style="color: #0000ff;">="stylesheet"</span><span style="color: #ff0000;"> href</span><span style="color: #0000ff;">=""</span><span style="color: #ff0000;"> class</span><span style="color: #0000ff;">="css"</span><span style="color: #0000ff;">></span></span>

meta:utf

<span style="color: #0000ff;"><span style="color: #800000;">meta </span><span style="color: #ff0000;">http-equiv</span><span style="color: #0000ff;">="Content-Type"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="text/html;charset=UTF-8"</span><span style="color: #0000ff;">></span></span>

script:src

<span style="color: #0000ff;"><span style="color: #800000;">script </span><span style="color: #ff0000;">src</span><span style="color: #0000ff;">=""</span><span style="color: #0000ff;">></span><span style="color: #800000;">script</span><span style="color: #0000ff;">></span></span>

img

<span style="color: #0000ff;"><span style="color: #800000;">img </span><span style="color: #ff0000;">src</span><span style="color: #0000ff;">=""</span><span style="color: #ff0000;"> alt</span><span style="color: #0000ff;">=""</span><span style="color: #0000ff;">></span></span>

官方api：http://docs.emmet.io/cheat-sheet/

api表：http://www.w3cplus.com/sites/default/files/baiyaimages/CheatSheet.jpg

(●-●) 真心讨厌弄文本格式，感觉好浪费时间……

声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

如何验证您的HTML代码？Apr 24, 2025 am 12:04 AM

HTML代码可以通过在线验证器、集成工具和自动化流程来确保其清洁度。1)使用W3CMarkupValidationService在线验证HTML代码。2)在VisualStudioCode中安装并配置HTMLHint扩展进行实时验证。3)利用HTMLTidy在构建流程中自动验证和清理HTML文件。

HTML与CSS和JavaScript：比较Web技术Apr 23, 2025 am 12:05 AM

HTML、CSS和JavaScript是构建现代网页的核心技术：1.HTML定义网页结构，2.CSS负责网页外观，3.JavaScript提供网页动态和交互性，它们共同作用，打造出用户体验良好的网站。

HTML作为标记语言：其功能和目的Apr 22, 2025 am 12:02 AM

HTML的功能是定义网页的结构和内容，其目的在于提供一种标准化的方式来展示信息。1）HTML通过标签和属性组织网页的各个部分，如标题和段落。2）它支持内容与表现分离，提升维护效率。3）HTML具有可扩展性，允许自定义标签增强SEO。

HTML，CSS和JavaScript的未来：网络开发趋势Apr 19, 2025 am 12:02 AM

HTML的未来趋势是语义化和Web组件，CSS的未来趋势是CSS-in-JS和CSSHoudini，JavaScript的未来趋势是WebAssembly和Serverless。1.HTML的语义化提高可访问性和SEO效果，Web组件提升开发效率但需注意浏览器兼容性。2.CSS-in-JS增强样式管理灵活性但可能增大文件体积，CSSHoudini允许直接操作CSS渲染。3.WebAssembly优化浏览器应用性能但学习曲线陡，Serverless简化开发但需优化冷启动问题。

HTML：结构，CSS：样式，JavaScript：行为Apr 18, 2025 am 12:09 AM

HTML、CSS和JavaScript在Web开发中的作用分别是：1.HTML定义网页结构，2.CSS控制网页样式，3.JavaScript添加动态行为。它们共同构建了现代网站的框架、美观和交互性。

HTML的未来：网络设计的发展和趋势Apr 17, 2025 am 12:12 AM

HTML的未来充满了无限可能。1)新功能和标准将包括更多的语义化标签和WebComponents的普及。2)网页设计趋势将继续向响应式和无障碍设计发展。3)性能优化将通过响应式图片加载和延迟加载技术提升用户体验。

HTML与CSS vs. JavaScript：比较概述Apr 16, 2025 am 12:04 AM

HTML、CSS和JavaScript在网页开发中的角色分别是：HTML负责内容结构，CSS负责样式，JavaScript负责动态行为。1.HTML通过标签定义网页结构和内容，确保语义化。2.CSS通过选择器和属性控制网页样式，使其美观易读。3.JavaScript通过脚本控制网页行为，实现动态和交互功能。

HTML：是编程语言还是其他？Apr 15, 2025 am 12:13 AM

HTMLISNOTAPROGRAMMENGUAGE; ITISAMARKUMARKUPLAGUAGE.1）htmlStructures andFormatSwebContentusingtags.2）itworkswithcsssforstylingandjavascript for Interactivity，增强WebevebDevelopment。

See all articles