html快捷键/属性/标签学习
程序员文章站
2022-05-26 12:45:37
...
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>