sublime生成html快捷方式

最新推荐文章于 2023-06-28 16:25:50 发布

shirley云

最新推荐文章于 2023-06-28 16:25:50 发布

阅读量1k

点赞数

CC 4.0 BY-SA版权

分类专栏： sublime

本文链接：https://blog.youkuaiyun.com/linda_417/article/details/51581027

sublime 专栏收录该内容

4 篇文章

订阅专栏

本文介绍如何使用Emmet插件快速编写HTML代码。通过简单的缩写语法，Emmet能够即时展开为完整的HTML标记，大幅提升前端开发效率。文章展示了多种实用的Emmet语法，包括生成不同版本的HTML文档类型声明、快速创建导航列表以及布局结构。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

首先要给sublime text安装一个emmet的插件：官网：http://emmet.io/

说明文档：http://docs.emmet.io/abbreviations/syntax/

开始体验：输入以下简写，按ctrl+E

html:5 或者!

<!DOCTYPE html>
<html lang="en">
<head>
    <meta 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: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>

ul#nav>li.itemS*4>a{Item $}

<ul id="nav">
    <li class="itemS"><a href="">Item 1</a></li>
    <li class="itemS"><a href="">Item 2</a></li>
    <li class="itemS"><a href="">Item 3</a></li>
    <li class="itemS"><a href="">Item 4</a></li>
</ul>

.container>(.header)(.foooter)

    <div class="container">
        <div class="header"></div>
        <div class="foooter"></div>
    </div>