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

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

知识回顾:



上一节,我们学习了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 class="panel">

<div class="title"></div>

<div class="content"></div>

<div class="function"></div>

</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>
相关文章
|
5天前
|
移动开发 前端开发 JavaScript
前端高效开发JavaScript库!
前端高效开发JavaScript库!
|
5天前
|
前端开发 JavaScript UED
深入理解 JavaScript 同步和异步,让网页灵动起来!
深入理解 JavaScript 同步和异步,让网页灵动起来!
|
3天前
|
监控 安全 NoSQL
采用java+springboot+vue.js+uniapp开发的一整套云MES系统源码 MES制造管理系统源码
MES系统是一套具备实时管理能力,建立一个全面的、集成的、稳定的制造物流质量控制体系;对生产线、工艺、人员、品质、效率等多方位的监控、分析、改进,满足精细化、透明化、自动化、实时化、数据化、一体化管理,实现企业柔性化制造管理。
25 3
|
4天前
|
缓存 前端开发 JavaScript
React和Next.js开发常见的HTTP请求方法
React和Next.js开发常见的HTTP请求方法
7 0
|
4天前
|
JavaScript
js中如何使用工厂方式和构造函数创建对象,web开发项目实例
js中如何使用工厂方式和构造函数创建对象,web开发项目实例
|
5天前
|
设计模式 存储 前端开发
JS的几种设计模式,Web前端基础三剑客学习知识分享,前端零基础开发
JS的几种设计模式,Web前端基础三剑客学习知识分享,前端零基础开发
|
5天前
|
前端开发 JavaScript UED
CSS顶部与JS后写:网页渲染的奥秘
CSS顶部与JS后写:网页渲染的奥秘
|
6天前
|
JSON JavaScript API
使用 Node.js 开发一个简单的 web 服务器响应 HTTP post 请求
使用 Node.js 开发一个简单的 web 服务器响应 HTTP post 请求
19 1
|
6天前
|
JSON JavaScript 中间件
使用 Node.js 开发一个简单的 web 服务器响应 HTTP get 请求
使用 Node.js 开发一个简单的 web 服务器响应 HTTP get 请求
10 2
|
6天前
|
存储 JSON JavaScript
Node.js 上开发一个 HTTP 服务器,监听某个端口,接收 HTTP POST 请求并处理传入的数据
Node.js 上开发一个 HTTP 服务器,监听某个端口,接收 HTTP POST 请求并处理传入的数据
14 0