工具篇之HBuilderX使用教程

最新推荐文章于 2024-09-23 13:16:35 发布

二木成林

最新推荐文章于 2024-09-23 13:16:35 发布

阅读量9.4k

点赞数 11

分类专栏：工具文章标签： HBuilder

本文链接：https://blog.csdn.net/cnds123321/article/details/109383317

版权

工具专栏收录该内容

4 篇文章 0 订阅

订阅专栏

HBuilderX快速生成HTML代码

快速生成html5结构代码

html:5

然后按Tab键，就会生成html代码了

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title></title>
</head>
<body>
	
</body>
</html>

快速生成引入CSS代码

link

然后按Tab键，然后生成如下代码

<link rel="stylesheet" href="">

快速生成引入JS代码

script:src

然后按Tab键，然后生成如下代码

<script src=""></script>

输入标签名自动补齐

然后按Tab键，然后生成如下代码

<p></p>

生成随机单词、行

（1）生成10个单词

Lorem10

然后按Tab键，然后生成如下代码

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae impedit.

（2）生成10行

Lorem*10

然后按Tab键，然后生成如下代码

        <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam vel quia illo sapiente doloremque deserunt deleniti sit nulla nisi velit. Temporibus facere similique fuga ipsam rerum sunt deserunt! Doloribus corporis.</div>
	<div>Natus quibusdam commodi at veniam illo harum. Maiores asperiores cupiditate expedita amet esse vel voluptatem suscipit laudantium aliquam ipsum atque quae velit a veritatis officia quisquam quidem. Cumque est excepturi.</div>
	<div>Alias nesciunt optio modi deserunt cum neque autem provident incidunt ab iure nostrum ipsum debitis sequi distinctio expedita porro eum architecto totam quia labore maiores temporibus molestias vel doloremque unde!</div>
	<div>Officia accusantium voluptatum numquam molestias esse laudantium dolores minima perferendis modi tenetur recusandae hic soluta quam laborum laboriosam ea incidunt ducimus sunt odio rerum quia assumenda totam doloremque praesentium eaque!</div>
	<div>Ullam fugit tenetur tempora provident ipsam omnis illum ea id totam enim mollitia nisi possimus laboriosam aut at qui fugiat veritatis ut deleniti iusto hic! Adipisci dolorum incidunt accusamus saepe?</div>
	<div>Perferendis rem dicta recusandae rerum asperiores cumque similique et pariatur laboriosam voluptatum minima temporibus veritatis odit commodi aspernatur eum ipsam reiciendis dolore totam assumenda beatae cupiditate sunt placeat suscipit illum.</div>
	<div>Sit fuga nemo ad maxime magni nobis mollitia quaerat suscipit perspiciatis placeat illo vel quidem! Debitis explicabo necessitatibus recusandae distinctio ipsam cum facilis nam numquam similique amet sint esse tempora.</div>
	<div>Dolor obcaecati aliquid adipisci nostrum optio molestias rerum distinctio pariatur omnis totam quaerat corrupti debitis deserunt. Neque labore sunt numquam maiores repellat at id quibusdam natus libero nesciunt deleniti iste!</div>
	<div>Commodi numquam quod aspernatur adipisci a accusantium laborum tenetur cumque natus corporis iste odit dolorum inventore asperiores obcaecati quia illo eveniet quaerat quo magnam sunt sit repellat nesciunt cum nobis.</div>
	<div>Nihil dicta blanditiis aperiam totam sit architecto mollitia repellat magni deleniti quos similique accusantium possimus cumque corporis delectus pariatur culpa dolor aut ullam quam alias dolores non fuga exercitationem nobis?</div>

（3）生成10行每行10个单词

Lorem10*10

然后按Tab键，然后生成如下代码

	<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe neque.</div>
	<div>Nulla rerum accusamus autem veritatis quae ratione cumque saepe omnis.</div>
	<div>Similique esse fugit necessitatibus atque aperiam illum deleniti saepe eius.</div>
	<div>Perferendis illum repellendus! Neque optio non sit expedita dignissimos modi.</div>
	<div>Ea nisi nam unde repellat ex. Veritatis nisi nostrum debitis!</div>
	<div>Tenetur neque eaque nam consequatur aliquam libero atque a ducimus!</div>
	<div>Dolore voluptates consequuntur corporis asperiores. In fugit asperiores eos deserunt!</div>
	<div>Sunt consectetur doloremque labore mollitia quia quod sed illum magni.</div>
	<div>Corporis nulla quibusdam dolore fugiat totam quaerat harum quisquam ullam.</div>
	<div>Velit ipsa unde obcaecati quaerat dolorum fuga quos dignissimos maiores.</div>

生成带属性内容

（1）生成带ID的代码

div#app

其中div是元素名称，而app是自定义的ID名称，然后按Tab键，然后生成如下代码

<id id="app"></id>

（2）生成带class的代码

div.app

其中div是元素名称，而app是自定义的class名称，然后按Tab键，然后生成如下代码

<div class="app"></div>

（3）生成带属性的代码

img[src]

其中img是元素名称，而src是属性，然后按Tab键，然后生成如下代码

<img src="" alt="">

（3）指定内容

div{Hello World}

其中div是元素名称，而{}内是元素所包括的内容，好像输入中文会出现乱码，然后按Tab键，然后生成如下代码

<div>Hello World</div>

（4）可联合使用

div#idName.className[alt='img']{abcd}

其中div是元素名称，而#idName是设置id，.className是设置class，[alt='img']是设置alt属性的值为img，{abcd}是元素所包含的内容。

然后按Tab键，然后生成如下代码

<div id="idName" class="className" alt="img">abcd</div>

生成嵌套标签

（1）嵌套

div>p

然后按Tab键，然后生成如下代码

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

（2）并列

div+p

然后按Tab键，生成如下代码

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

（3）上级元素

div^h1

然后按Tab键，生成如下代码

<div></div>
<h1></h1>

生成N个标签

li*10

然后按Tab键，生成如下代码

<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>

自增符号$

ul>li*10>[id=$]

然后按Tab键，生成如下代码

<ul>
  <li>
    <div id="1"></div>
  </li>
  <li>
    <div id="2"></div>
  </li>
  <li>
    <div id="3"></div>
  </li>
  <li>
    <div id="4"></div>
  </li>
  <li>
    <div id="5"></div>
  </li>
  <li>
    <div id="6"></div>
  </li>
  <li>
    <div id="7"></div>
  </li>
  <li>
    <div id="8"></div>
  </li>
  <li>
    <div id="9"></div>
  </li>
  <li>
    <div id="10"></div>
  </li>
</ul>