HTML 常用快捷方式

Wesley13
• 阅读 916

###tab 补全所有标签 ###元素

1.在编辑器中输入元素名称,即可自动补全生成 HTML 标签,即使不是标准的 HTML 标签。 
2.输入:! 或者 html:5 或者 html:4s 或者 html:4t 将自动补全html基本结构

###嵌套操作

1.使用“>”生成子元素
// 输入
div>ul>li
// 按下TAB键
<div>
    <ul>
        <li></li>
    </ul>
</div>

2.使用“+”生成兄弟元素
// 输入
div+p+bq
// 按下TAB键
<div></div>
<p></p>
<blockquote></blockquote>

3.使用“^”生成父元素
// 输入
div+div>p>span+em^bq
// 按下TAB键
<div></div>
<div>
    <p><span></span><em></em></p>
    <blockquote></blockquote>
</div>

4.使用“*”生成多个相同元素
// 输入
div>ul>li*5
// 按下TAB键
<div>
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</div>

5.使用“()”将元素分组
// 输入
// "+" 后面的元素与括号中的第一个元素属于兄弟关系
div>(header>ul>li*2)+footer>p
//按下TAB键
<div>
    <header>
        <ul>
            <li></li>
            <li></li>
        </ul>
    </header>
    <footer>
        <p></p>
    </footer>
</div>

###属性操作

1.id与class:元素与 id 属性值之间用 “#” 分隔,与 class 属性值之间用 “.” 分隔
// 输入
div#header+div.page+div#footer.class1.class2.class3
// 按下TAB键
<div id="header"></div>
<div class="page"></div>
<div id="footer" class="class1 class2 class3"></div>

2.使用“[]”标记其他属性
// 输入
td[title='hello' colspan=3]
// 按下TAB键
<td title="hello" colspan="3"></td>

3.用“$”符号实现1到n的自动编号(“*”实现多个元素)
// 输入
li.item$*3
// 按下TAB键
<li class="item1"></li>
<li class="item2"></li>
<li class="item3"></li>

可在 “$” 后添加 “@n” 修改编号的起始值为n。
// 输入
li.item$@3*3
// 按下TAB键
<li class="item3"></li>
<li class="item4"></li>
<li class="item5"></li>

可在 “$” 后添加 “@-” 修改编号的方向。
// 输入
li.item$@-3*3
// 按下TAB键
<li class="item5"></li>
<li class="item4"></li>
<li class="item3"></li>

4.用“{}”添加文本内容
// 输入
a[href=me.htm]{click me}
// 按下TAB键
<a href="me.htm">click me</a>
点赞
收藏
评论区
推荐文章
blmius blmius
3年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
Android Studio 的一些高级使用技巧
代码补全1.使用TAB键进行代码补全,输入first.,选择提示的方法,直接键入TAB可直接补全代码2.使用CtrlShiftSpace智能补全,如输入Bitmapbitmap后,使用该组合键智能补全,可以按两次显示更多补全内容。也可以使用newBitmap().var的形式。选择操作1.Ctrlw选中,继续操作会扩大选中
Karen110 Karen110
3年前
一篇文章带你了解JavaScript htmldom 元素
这篇文章将教会大家如何查找和访问网页中的HTML元素。一、找到HTML元素通常,使用JavaScript,想操作HTML元素。要做到这一点,必须先找到元素。有几种方法可以做到这一点。找到DOM中的HTML元素的最简单的方法,是利用元素的id。使用id"intro"找到元素:varmyElementdocument.getElementById("in
皕杰报表之UUID
​在我们用皕杰报表工具设计填报报表时,如何在新增行里自动增加id呢?能新增整数排序id吗?目前可以在新增行里自动增加id,但只能用uuid函数增加UUID编码,不能新增整数排序id。uuid函数说明:获取一个UUID,可以在填报表中用来创建数据ID语法:uuid()或uuid(sep)参数说明:sep布尔值,生成的uuid中是否包含分隔符'',缺省为
待兔 待兔
5个月前
手写Java HashMap源码
HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程22
陈占占 陈占占
2年前
PHP 利用confirm删除指定数据库的数据
完整的效果图方法一a标签href中的是你要删除记录html<ahref"PHPtest.php?name1"onclick"returnconfirm('是否要移除该小说?')"方法二下面这个方法是js代码,点击获取id,弹出提示框,确定是否删除,confirm好像可以返回true或者falsejavascriptfunctiond
Stella981 Stella981
3年前
Less 嵌套
本节我们学习Less中的嵌套,嵌套应该很容易理解,HTML语言中就支持标签的嵌套。我们在使用CSS时,如果想要为多层嵌套的元素设置样式,要么给元素加上一个类选择器或ID选择器,要么使用后代选择器。例如:.xkd{fontsize:14px;}.xkdp{lineheight:25
Stella981 Stella981
3年前
PhoneGap设置Icon
参考:http://cordova.apache.org/docs/en/latest/config\_ref/images.html通过config.xml中的<icon标签来设置Icon<iconsrc"res/ios/icon.png"platform"ios"width"57"height"57"densi
Wesley13 Wesley13
3年前
IDEA配置
快捷键自动补全:Alt回車快速输入main函数:键入main再按CtrlJ键(或者键入psvm再按Tab键)快速输入System.out.println:键入sout再按Tab键(对应Eclipse中的syso)快速生成普通for循环:键入fori再按Tab键或Ct
Stella981 Stella981
3年前
Linux下的快捷键整理
20191026   00:37:25今天上网整理了相关资料,希望对大家有用:1.关于终端的快捷键:Tab:tab键是比较常用的一个快捷键,它的作用是补全文件名或者路径。举例来说,输入”cd /ho”在按一下tab键,终端里就会显示”cd /home”了。如果您的文件夹下,有两个名字开头部分相同的文件,比如