HBuilderX快速上手

简介: HBuilderX快速上手

HBuilderX是当前最快的HTML开发工具,强大的代码助手帮你快速完成开发,最全的语法库和浏览器兼容性数据让浏览器碎片化不再头痛,非常适合新手上手,这里总结了最常见的快捷键,欢迎观看收藏。



1.快捷键


这里集合了一些比较常用的快捷键,如果掌握效率翻倍


Ctrl+C 复制文本

Ctrl+V 粘贴文本

Ctrl+Z 撤回/返回上一步操作

Ctrl+Y 取消上一步撤销操作

Ctrl+B 文本加粗

Ctrl+K 格式化文本/让文本更漂亮

Ctrl+T 新建一个文档

Ctrl+R 使用浏览器预览

Ctrl+S 保存文件

Ctrl+A 全选文本

Ctrl+D 删除光标所在行

Ctrl+L 选中此行文本

Ctrl+/ 注释选中区域

Ctrl+E 选中全部已选中内容



2.形成一个基础的html结构


首先建立一个html文件,然后输入


!+ Tab 键

THML+enter(回车键)

html>(head>title>{标题})+body>{内容} +Tab键


生成结果如图:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title></title>
  </head>
  <body>
  </body>
</html>



3.任何标签+Tab键,创建一个普通标签


img + Tab键

<img src="" alt="">


a + Tab键

<a href=""></a>




4.特殊符号


星号键 代表多个


*

p*5 + Tab键结果如下:

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


> 代表子集

tr>td + Tab键结果如下:

<tr>
    <td></td>
  </tr>


+ 代表兄弟

a+img + Tab键

<a href=""></a>
<img src="" alt="">


() 代表群组

tr>(th+td) + Tab键

<tr>
      <th></th>
      <td></td>
    </tr>


{} 代表文本

p>{您好,我是宁静和致远} + Tab键

<p>您好,我是宁静和致远</p>


$ 代表序列

p*5>{第$行} + Tab键

<p>第1行</p>
    <p>第2行</p>
    <p>第3行</p>
    <p>第4行</p>
    <p>第5行</p>```


@ 代表起始位置

p*5>{第$@100行} + Tab键

<p>第100行</p>
    <p>第101行</p>
    <p>第102行</p>
    <p>第103行</p>
    <p>第104行</p>


p*5>{第$@-行} + Tab键 逆序

<p>第5行</p>
    <p>第4行</p>
    <p>第3行</p>
    <p>第2行</p>
    <p>第1行</p>
相关文章
|
NoSQL Linux Apache
brpc最新安装上手指南
brpc最新安装上手指南
1055 1
brpc最新安装上手指南
|
3月前
|
移动开发 小程序 数据可视化
HBuilderX 小白上手指南
HBuilderX 小白上手指南
93 0
|
8月前
|
小程序 开发工具 Android开发
微信小程序开发工具的使用,各个配置文件详解,小程序开发快速入门(二)
微信小程序开发工具的使用,各个配置文件详解,小程序开发快速入门(二)
624 0
|
8月前
|
小程序 JavaScript 开发工具
微信小程序开发工具的使用,各个配置文件详解,小程序开发快速入门(一)
微信小程序开发工具的使用,各个配置文件详解,小程序开发快速入门(一)
353 1
|
8月前
|
JSON 小程序 数据格式
|
小程序
webstorm开发微信小程序
webstorm开发微信小程序
442 0
|
小程序 IDE 安全
UniAPP HBuilderX 运行到各个小程序开发工具
UniAPP HBuilderX 运行到各个小程序开发工具
573 0
|
开发框架 移动开发 小程序
快速上手小程序框架Taro,安装及使用教程(一)
快速上手小程序框架Taro,安装及使用教程(一)
174 0
|
开发框架 小程序 JavaScript
微信小程序wepy框架入门教程-搭建开发环境(一)
微信小程序wepy框架入门教程-搭建开发环境(一)
251 0
|
JSON 小程序 JavaScript
微信小程序 - VSCode 插件支持
微信小程序 - VSCode 插件支持
600 0