2021-10-26 HTML结构常见快捷键汇总

前端OnTheRun

已于 2023-04-18 09:48:24 修改

阅读量281

点赞数

CC 4.0 BY-SA版权

分类专栏：笔记知识点文章标签： html 前端 css

于 2021-10-26 22:53:54 首次发布

本文链接：https://blog.youkuaiyun.com/rowlet/article/details/120983259

知识点同时被 2 个专栏收录

96 篇文章

订阅专栏

笔记

83 篇文章

订阅专栏

本文汇总了HTML结构编辑的快捷键技巧，包括嵌套、并列、重复、返回、分组、属性设置以及添加序号等，帮助前端开发者快速生成复杂的HTML结构。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文章目录

1.嵌套(>):快速生成父子结构的HTML

示例:输入ul>li,回车/tab


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

2.并列(+):生成并列结构的HTML

示例:输入p+div,tab

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

3.重复(*):生成相同的HTML结构

示例:li*3

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

4.返回(^):生成父元素的兄弟元素HTML结构

示例:ul>li*3^p


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

5.分组(()):括号包起来代表这是一组元素

示例:(ul>li*3)+p

结构同上例

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

6.属性一(#和.):"#“代表生成一个id,”."代表生成一个class

示例:div#header+div.container

<div id="header"></div>
<div class="container"></div>

7.属性二([]和{}):"[]“用于填充属性值,”{}"用于填充文本内容

示例:input[name=user]+ul>li{我是li标签}*3

<input type="text" name="user">
<ul>
	<li>我是li</li>
	<li>我是li</li>
	<li>我是li</li>
</ul>

8.添加序号($):配合*使用,用于区分生成的重复HTML结构

示例一:ul>li.light-$*3


<ul>
	<li class="light-1"></li>
	<li class="light-2"></li>
	<li class="light-3"></li>
</ul>

示例二:ul>li{$}*3

<ul>
	<li>1</li>
	<li>2</li>
	<li>3</li>
</ul>

示例三:select>option[value=‘北京’]{$}*5>a[href=‘#’]{北京}

<select name="" id="">
	<option value="北京">1<a href="#">北京</a></option>
	<option value="北京">2<a href="#">北京</a></option>
	<option value="北京">3<a href="#">北京</a></option>
	<option value="北京">4<a href="#">北京</a></option>
	<option value="北京">5<a href="#">北京</a></option>
</select>