零基础html5+div+css+js网页开发教程第006期网页快速开发技巧

刘金玉编程

发布于 2019-11-25 22:21:42

1K0

发布于 2019-11-25 22:21:42

文章被收录于专栏：编程创造城市编程创造城市

知识回顾：

上一节，我们学习了hbuilder的快速开发工具的简单实用，本机额，我们来介绍这个工具相关的快速开发技巧。

本节知识视频教程

哈罗哈罗，小伙伴们大家好！我们这一期就用hbuilder来做一个快速开发。我相信大家在下载的时候可能也已经看到了他的一个各种各样的快速开发的一个好处，使用它能够达到提高我们是办使我们事半功倍。

那么我们来看这个工具到底是如何使用？

一、新建项目

我们还是新建这每一个项目，我们来一步一步跟着我的步骤走下去，我们学会几个关键的步骤就可以。

二、开发过程

很多情况下，我们会发现很多标签都是类似的，这个时候，我们使用hbuilder来一次写多个标签，就显得非常爽啦。

1.多个标签技巧

这里，我们需要使用符号 *表示乘号

举例,写10个a标签

a*然后按tab，然后就会生成10个链接的标签代码。

2.多个光标技巧

多光标同时书写

按住ctrl键，鼠标点选各个位置，然后可以同时书写

3.结合css选择器技巧

Css标签基本对应方式

Id 对应 #

class 对应 .

如果写一个div带有class属性的

可以这样写 div.panel按住tab键，就会快速生成相应代码。

使用>表示下一层节点，使用+表示同层节点

div.panel>div.title+div.content+div.function按tab键后，生成如下：

</div>

三、总结

1、要有快速开发的意识

2、要学会利用一些好的工具，辅助我们开发

3、要会快速中用到的基本符号以及层次结构

本例html源代码：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>刘金玉编程</title>
  </head>
  <body>
    
    <div id="section1">
      <div class="p2"></div>
      <div class="panel">
        <div class="title"></div>
        <div class="content"></div>
        <div class="content"></div>
        <div class="content"></div>
        <div class="content"></div>
        <div class="function"></div>
      </div>
    </div>
    
  </body>
</html>

本文参与腾讯云自媒体分享计划，分享自微信公众号。

原始发表：2019-11-19，如有侵权请联系 cloudcommunity@tencent.com 删除

html

本文分享自编程创造城市微信公众号，前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体分享计划，欢迎热爱写作的你一起参与！

html

登录后参与评论

0 条评论

热度