文章目录
前言
在Web开发过程中，频繁创建HTML结构是一项常见任务。而使用HBuilder工具和Emmet缩写+tab快捷键，则可以快速生成HTML结构，从而大大提高开发效率。通过使用HBuilder的强大功能和Emmet缩写的便利性，您可以快速而准确地生成各种常见的HTML元素，如表格、div、链接和图片等。
1、创建table语句
在Hbuilder以创建table为例：
table是标签名。border为标签内部的属性，且可以直接写入属性值。- 可以用
*来表示要创建几个元素。
table[border="1"]>tr*4>td*4
之后加tab键 。
可以快速创建一个4*4的表格。
2、案例
2.1、生成table
为了效果更明显，给tr和td加上距离。（一般使用CSS去进行，宽高的设置）
- 使用如下语句在
body标签的内部。
table[border="2"]>tr[height="50px"]*4>td[width="100px"]*4
- 使用Tab键
- 得到下列代码。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<table border="2">
<tr height="50px">
<td width="100px"></td>
<td width="100px"></td>
<td width="100px"></td>
<td width="100px"></td>
</tr>
<tr height="50px">
<td width="100px"></td>
<td width="100px"></td>
<td width="100px"></td>
<td width="100px"></td>
</tr>
<tr height="50px">
<td width="100px"></td>
<td width="100px"></td>
<td width="100px"></td>
<td width="100px"></td>
</tr>
<tr height="50px">
<td width="100px"></td>
<td width="100px"></td>
<td width="100px"></td>
<td width="100px"></td>
</tr>
</table>
</body>
</html>
2.2、结果展示
效果图如下：
根据HTML的多层次的结构，可以快速创建多行的HTML结构。
3、补充
是的，在HBuilder中，除了表格之外，您还可以使用Emmet缩写来快速生成其他常见的HTML结构。以下是一些示例：
3.1、创建 div 元素
-
div：生成一个空的 div 元素。 -
div.classname：生成带有类名的 div 元素。 -
div#idname：生成带有id的div元素。
3.2、创建列表元素
-
ul>li*3：生成一个包含 3 个 li 元素的无序列表。 -
ol>li*3：生成一个包含 3 个 li 元素的有序列表。
3.3、创建链接元素
-
a：生成一个空的链接元素。 -
a[href="#"]：生成一个带有href属性的链接元素。 -
a[href="https://example.com"]：生成一个带有指定 URL 的链接元素。
3.4、创建图片元素
-
img：生成一个空的图片元素。 -
img[src="image.jpg"]：生成一个带有指定图片路径的图片元素。
3.5、创建表单元素
-
form：生成一个空的表单元素。 -
input[type="text"]：生成一个文本输入框元素。 -
button：生成一个按钮元素。
总结
使用HBuilder工具和Emmet缩写+tab快捷键，则可以快速生成HTML结构，从而大大提高开发效率：
table为例：
table[border="1"]>tr*4>td*4
之后加tab键 。
3102
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
