⼯具篇之HBuilderX使⽤教程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>
输⼊标签名⾃动补齐
p
然后按Tab键，然后⽣成如下代码
<p></p>
⽣成随机单词、⾏
（1）⽣成10个单词
然后按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. Tempor
<div>Natus quibusdam commodi at veniam illo harum. Maiores asperiores cupiditate expedita amet esse vel voluptatem suscipit laudantium aliquam ipsum atque  <div>Alias nesciunt optio modi deserunt cum neque autem provident incidunt ab iure nostrum ipsum debitis sequi distinctio expedita porro eum architecto totam q  <div>Officia accusantium voluptatum numquam molestias esse laudantium dolores minima perferendis modi tenetur recusandae hic soluta quam laborum laborio  <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! Adip  <div>Perferendis rem dicta recusandae rerum asperiores cumque similique et pariatur laboriosam voluptatum minima temporibus veritatis odit commodi asperna  <div>Sit fuga nemo ad maxime magni nobis mollitia quaerat suscipit perspiciatis placeat illo vel quidem! Debitis explicabo necessitatibus recusandae distinctio ips  <div>Dolor obcaecati aliquid adipisci nostrum optio molestias rerum distinctio pariatur omnis totam quaerat corrupti debitis deserunt. Neque labore sunt numquam  <div>Commodi numquam quod aspernatur adipisci a accusantium laborum tenetur cumque natus corporis iste odit dolorum inventore asperiores obcaecati
quia  <div>Nihil dicta blanditiis aperiam totam sit architecto mollitia repellat magni deleniti quos similique accusantium possimus cumque corporis delectus pariatur culp
（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是⾃定义的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>
hbuilder圣诞树代码
<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>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。