vscode html快捷键

# id属性 div#id
. class属性 div.class
\^ 上级 div^p
> 下级 div>p
+ 同级 div+div
* 多少个 li*3
\$ 序号生成 li.item$*3
\@ 跳过或者倒叙 li.item$@-1*3
{} 内容

html

通用属性

class
id
style
预置属性
alt
title
src
ref
href
…
事件属性 on + click
onclick
onkeydown
onload
…
自定义属性
data-xxx

语义化标签

<header></header>
<main></main>
<footer></footer>
<nav></nav>
...

案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css">
    <script src="js" ></script>
</head>
<body>
    <header></header>
    <main>
        <!-- div>table#tid>tr.trclass$*3>td.tdclass$@-1{item$@5}*2+td>img[src]{预置属性}^td>p[style]{通用属性}^td>button[onclick="事件"]{事件属性}^td>div[data-omg]{自定义属性} -->
        <div>
            <table id="tid">
                <tr class="trclass1">
                    <td class="tdclass2">item5</td>
                    <td class="tdclass1">item6</td>
                    <td><img src="" alt="">预置属性</img></td>
                    <td>
                        <p style="">通用属性</p>
                    </td>
                    <td><button onclick="事件">事件属性</button></td>
                    <td>
                        <div data-omg="">自定义属性</div>
                    </td>
                </tr>
                <tr class="trclass2">
                    <td class="tdclass2">item5</td>
                    <td class="tdclass1">item6</td>
                    <td><img src="" alt="">预置属性</img></td>
                    <td>
                        <p style="">通用属性</p>
                    </td>
                    <td><button onclick="事件">事件属性</button></td>
                    <td>
                        <div data-omg="">自定义属性</div>
                    </td>
                </tr>
                <tr class="trclass3">
                    <td class="tdclass2">item5</td>
                    <td class="tdclass1">item6</td>
                    <td><img src="" alt="">预置属性</img></td>
                    <td>
                        <p style="">通用属性</p>
                    </td>
                    <td><button onclick="事件">事件属性</button></td>
                    <td>
                        <div data-omg="">自定义属性</div>
                    </td>
                </tr>
            </table>
        </div>
    </main>
    <footer></footer>
</body>
</html>

Correcting teacher：

autoload

Correction status：qualified

Teacher's comments：

Statement of this Website

The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!

All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement

0 comments

Author's latest blog post

html快捷键/属性/标签学习

2021-12-21 22:54:52

vscode html快捷键

html

通用属性

预置属性

事件属性 on + click

自定义属性

语义化标签

案例