Sublime / vscode quick implementation of generating HTML code

Sublime / vscode quick implementation of generating HTML code

Basic HTML structure

Input !+Enter

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

Generate shortcut keys for div plus class name

Input div.list>div.item_$*6

<div class="list">
    <div class="item_1"></div>
    <div class="item_2"></div>
    <div class="item_3"></div>
    <div class="item_4"></div>
    <div class="item_5"></div>
    <div class="item_6"></div>
</div>

Div with class name

Enter div.wrapper

<div class="wrapper"></div>

div with id

div#wrapper

<div id="wrapper"></div>

property[]

span[title="test"]

<span title="test"></span>

Descendants>

Type div>span>a

<div><span><a href=""></a></span></div>

Brothers+

div+p+span

<div></div>
<p></p>
<span></span>

Superior^

div>span^i

<div><span></span></div>
<i></i>

multiplication*

ul>li*2

<ul>
    <li></li>
    <li></li>
</ul>

text{}

div>span{this is test}

<div><span>this is test</span></div>

Self-increment symbol $

ul>li.list_${list $}*3

<ul>
    <li class="list_1">list 1</li>
    <li class="list_2">list 2</li>
    <li class="list_3">list 3</li>
</ul>

ul>li.item$@3*3 “@3” (indicates counting starts from 3)

<ul>
    <li class="item3">list 1</li>
    <li class="item4">list 2</li>
    <li class="item5">list 3</li>
</ul>

Implicit Conversion

.class

<div class="class"></div>

ul>.item

<ul>
    <li class="item"></li>
</ul>

table>.row>.col

<table>
    <tr class="row">
        <td class="col"></td>
    </tr>
</table>

This is the end of this article about how to quickly generate HTML code in Sublime/VSCode. For more information about how to quickly generate HTML in VSCode, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future!

<<:  Sample code for displaying a scroll bar after the HTML page is zoomed out

>>:  Implementation of HTML sliding floating ball menu effect

Recommend

WeChat applet realizes the effect of swiping left to delete list items

This article shares the specific code for WeChat ...

Do you know the meaning of special symbols in URL?

1.# # represents a location in a web page. The ch...

Pure CSS free implementation code for websites to have dark mode switching function

Preface The concept of dark mode originated from ...

Docker installs redis 5.0.7 and mounts external configuration and data issues

Redis is an open source NoSQL database written in...

Steps to initialize the password after the first successful installation of MySQL

Unzip the file into a directory This is the direc...

Specific usage of Vue's new toy VueUse

Table of contents Preface What is VueUse Easy to ...

How to solve the problem of Ubuntu 18.04 looping login/stuck on the boot interface/unable to enter the graphical interface

Cause: NVIDIA graphics card driver is damaged Sol...

MySQL 5.7.24 installation and configuration graphic tutorial

This article shares the installation and configur...

Webpack builds scaffolding to package TypeScript code

Create a folder Directory structure: dabaots Init...

An article to understand Linux disks and disk partitions

Preface All hardware devices in the Linux system ...

Vue Element-ui implements tree control node adding icon detailed explanation

Table of contents 1. Rendering 2. Bind data and a...

A complete guide to clearing floats in CSS (summary)

1. Parent div defines pseudo-classes: after and z...

Detailed explanation of three methods of JS interception string

JS provides three methods for intercepting string...

How to use cookies to remember passwords for 7 days on the vue login page

Problem Description In the login page of the proj...

Detailed explanation of mysql permissions and indexes

mysql permissions and indexes The highest user of...