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>

批改老师：

autoload

批改状态：合格

老师批语：

本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！

全部评论文明上网理性发言，请遵守新闻评论服务协议

0条评论

作者最新博文

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

2021-12-21 22:54:52

vscode html快捷键

html

通用属性

预置属性

事件属性 on + click

自定义属性

语义化标签

案例