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>
