Hbuilder中编辑HTML的一些常用快捷方式，值得学习，推荐。

1、快速生成头文件：html:5 按Tab

<!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>Document</title>
</head>
<body>	
</body>
</html>

2、引入样式文件：link: 按enter或Tab

<link rel="stylesheet" type="text/css" href="css/css1.css"/>
			<link rel="stylesheet" href="" />
		**引入js文件：script:src 按Tab**
			<script src="js/script.js"></script>

3、输入标签名自动补齐如：p 按 Tab

<p></p>

4、随机英文文本的输入

<h1>Lorem随机生成一段文本，默认30个单词</h1>					
			<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio eius dolores enim accusantium modi atque minima libero harum animi nisi consequatur mollitia quis unde ut nesciunt ex ad a quidem.</div> 
			<h1>Lorem10生成是个单词</h1>
			<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis asperiores!</div>			
			<h1>Lorem*10生成十行</h1>
			<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis harum suscipit natus deleniti praesentium facilis quia qui modi cum nostrum veniam ullam nihil officia repellat accusamus maiores nisi pariatur et.</div>
			<div>Culpa vitae voluptatem sapiente facere reiciendis quam consequuntur illum ipsa dolorum a accusamus dolorem repudiandae dignissimos laborum aperiam maiores fugit quaerat exercitationem quidem porro corrupti veniam vero quas eaque maxime!</div>
			<div>Eaque hic et voluptatum temporibus eius recusandae sit reprehenderit! Iste voluptate pariatur officia asperiores facilis porro unde molestias ex et id earum eligendi ratione corporis exercitationem velit minus saepe aliquam.</div>
			<div>Ab accusantium laboriosam aspernatur deleniti enim quaerat ducimus consequuntur cum delectus dolorem incidunt id nihil. Natus unde amet nam non asperiores odit perspiciatis atque ratione similique provident ut veritatis dolores.</div>
			<div>Sapiente dolores molestias iure sit quo quisquam tenetur commodi placeat veniam temporibus ab animi sed praesentium unde et! Et eaque nostrum cum provident expedita maiores mollitia aspernatur odit cupiditate saepe.</div>
			<div>Non esse mollitia consequatur similique animi id quo nobis nam nisi ab quod atque saepe modi nostrum maxime veniam quidem eum repellendus pariatur officia. Fugit cupiditate ratione eveniet perspiciatis tempora?</div>
			<div>Molestias rem necessitatibus nam at distinctio non perferendis quia dolore. Error libero odit repellat dolore labore velit numquam reprehenderit quibusdam tempora non? Veniam sunt in inventore dolor illo dignissimos iste.</div>
			<div>Quia porro ipsum quod est odit necessitatibus amet consequuntur recusandae perspiciatis nihil commodi quidem nesciunt ea cupiditate quas eligendi enim dicta libero harum ipsam atque aut alias qui corrupti pariatur!</div>
			<div>Vero placeat tenetur nam magnam ad porro facilis quis reiciendis repellat ipsa minus commodi mollitia necessitatibus aperiam accusamus cumque illum tempora odit reprehenderit qui quas inventore quasi in quaerat a.</div>
			<div>Sequi minus labore velit ut fuga similique architecto. Dolor sed repudiandae neque nam optio odit autem natus voluptas ea libero pariatur quia asperiores sint molestias aspernatur beatae corporis? Ut magni.</div>
			<h1>Lorem10*10生成十行每行十个单词</h1>
			<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto id.</div>
			<div>Cum consequatur dignissimos facilis quas alias quia quis aliquam ex.</div>
			<div>Eaque odio quia provident consequatur delectus rem debitis laborum. Dolorum!</div>
			<div>Atque soluta odit impedit ut in nesciunt magnam alias! Minus.</div>
			<div>Velit laboriosam totam doloremque pariatur numquam soluta quam temporibus eveniet.</div>
			<div>Eveniet impedit nam illo laboriosam iusto perspiciatis distinctio rerum vero!</div>
			<div>Recusandae inventore beatae sequi ea aut accusamus vero consequuntur optio!</div>
			<div>Quibusdam illo suscipit quisquam deleniti reiciendis error quae totam aliquam.</div>
			<div>Mollitia numquam voluptatibus dolorem. Omnis facilis amet neque culpa quidem.</div>
			<div>Maxime tempora voluptas at aliquid dolores id quasi laboriosam error.</div>

5、使用"#“输入id，”.“输入class，”[]"输入属性，{}输入数据内容

 div#id.class[alt=属性]{数据}
 <div id="id" class="class" alt="属性">输入数据内容</div>

6、使用">“输入嵌套标签，”+" 输入并列的兄弟标签，"^"上级元素

div>ul+ul^div
	<div>
		<ul></ul>
		<ul></ul>
	</div>
	<div></div>
	div>div#div>p^h1
	<div>
		<div id="div">
			<p></p>
		</div>
		<h1></h1>
	</div>

7、使用（）对标签分组并生成多个标签

(div>div#id.class)(div>div#id.class)
	<div>
		<div id="id" class="class"></div>
	</div>
	<div>
		<div id="id1" class="class"></div>
	</div>

8、自增符号$

自增符号$
	ul>li*3>[alt=$.img]
	  <ul>
	  	<li>
	  		<div alt="1.img"></div>
	  	</li>
	  	<li>
	  		<div alt="2.img"></div>
	  	</li>
	  	<li>
	  		<div alt="3.img"></div>
	  	</li>
	  </ul>
	  ul>li*3>img[src=$.img][alt=img$]
	  <ul>
	  	<li><img src="1.img" alt="img1" /></li>
	  	<li><img src="2.img" alt="img2" /></li>
	  	<li><img src="3.img" alt="img3" /></li>
	  </ul>
	  ul>li*3>img[src=$$img][alt=img$$$]
	  <ul>
	  	<li><img src="01.img" alt="img001" /></li>
	  	<li><img src="02.img" alt="img002" /></li>
	  	<li><img src="03.img" alt="img003" /></li>
	  </ul>

Hbuilder中编辑HTML的一些常用快捷方式，值得学习，推荐。

猜你喜欢