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>
相关文章
|
设计模式 前端开发 JavaScript
观察者模式 vs 发布-订阅模式:两种设计模式的对决!
欢迎来到前端入门之旅!这个专栏是为那些对Web开发感兴趣、刚刚开始学习前端的读者们打造的。无论你是初学者还是有一些基础的开发者,我们都会在这里为你提供一个系统而又亲切的学习平台。我们以问答形式更新,为大家呈现精选的前端知识点和最佳实践。通过深入浅出的解释概念,并提供实际案例和练习,让你逐步建立起一个扎实的基础。无论是HTML、CSS、JavaScript还是最新的前端框架和工具,我们都将为你提供丰富的内容和实用技巧,帮助你更好地理解并运用前端开发中的各种技术。
|
计算机视觉
使用计算机视觉实战项目精通 OpenCV:1~5
使用计算机视觉实战项目精通 OpenCV:1~5
562 0
|
4月前
|
监控 Java Linux
Apache NiFi项目的编译与部署于CentOS服务器
总而言之,Apache NiFi的编译和部署虽然涉及多个步骤,但这些操作步骤简明扼要,即使是不太熟悉Java或Maven的用户也能跟随指南完成。通过遵循上述步骤,您将能够在CentOS服务器上成功部署Apache NiFi,为您的数据流处理任务建立一个功能强大的平台。
347 16
|
9月前
|
数据可视化 关系型数据库 MySQL
ELK实现nginx、mysql、http的日志可视化实验
通过本文的步骤,你可以成功配置ELK(Elasticsearch, Logstash, Kibana)来实现nginx、mysql和http日志的可视化。通过Kibana,你可以直观地查看和分析日志数据,从而更好地监控和管理系统。希望这些步骤能帮助你在实际项目中有效地利用ELK来处理日志数据。
700 90
|
PyTorch Linux 算法框架/工具
pytorch学习一:Anaconda下载、安装、配置环境变量。anaconda创建多版本python环境。安装 pytorch。
这篇文章是关于如何使用Anaconda进行Python环境管理,包括下载、安装、配置环境变量、创建多版本Python环境、安装PyTorch以及使用Jupyter Notebook的详细指南。
1771 1
pytorch学习一:Anaconda下载、安装、配置环境变量。anaconda创建多版本python环境。安装 pytorch。
|
10月前
|
运维 网络协议 Linux
网络故障排除的7个关键维度
网络故障排除是确保网络稳定运行的关键,能减少停机时间、提升服务质量。本文介绍7个排查步骤:1. 检查硬件连接;2. 使用ipconfig检查IP配置;3. 进行DNS检查;4. 验证网络配置;5. 用其他设备测试;6. 检查IP冲突;7. 测试网络带宽和延迟。通过这些方法,可快速定位并解决问题,保障网络顺畅运行。
1057 5
|
移动开发 小程序 数据可视化
HBuilderX 小白上手指南
HBuilderX 小白上手指南
860 0
|
资源调度 算法 固态存储
在集群计算的时候,集群的主要瓶颈
在集群计算的时候,集群的主要瓶颈
|
JavaScript
在Vue中使用Swiper轮播图、同时解决点击轮播图左右切换按钮不生效的问题、同时将轮播图抽离出为一个公共组件
这篇文章介绍了在Vue中如何使用Swiper插件创建轮播图,解决Swiper左右切换按钮不生效的问题,并展示了如何将Swiper轮播图抽离成一个可复用的公共组件,同时提供了详细的安装、配置和优化建议。
在Vue中使用Swiper轮播图、同时解决点击轮播图左右切换按钮不生效的问题、同时将轮播图抽离出为一个公共组件