RIOT通过构建自定义的，可重复使用的html标签来工作。这些标记类似于Web组件，并且可以在页面和Web应用程序之间重用。当您在HTML页面中包含RIOT框架时，导入的js将创建一个指向防暴对象的防暴变量。该对象包含与RIOT.js交互所需的功能，例如创建和安装标签。
我们可以通过两种方式创建和使用标签。
- 内联HTML-通过调用riot.tag（）函数。此功能使用标签名称和标签定义来创建标签。标签定义可以包含HTML，JavaScript和CSS等。
- 单独的标签文件-通过将标签定义存储在标签文件中。该标签文件包含用于创建标签的标签定义。需要导入此文件来代替riot.tag（）调用。
<script src = "/riotjs/src/messageTag.tag" type = "riot/tag"></script>
以下是内联标签的示例。
例子
<!DOCTYPE html>
<html>
<head>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/riot/3.13.2/riot+compiler.min.js"></script>
</head>
<body>
<messageTag></messageTag>
<script>
var tagHtml = "<h1>Hello World!</h1>";
riot.tag("messageTag", tagHtml);
riot.mount("messageTag");
</script>
</body>
</html>这将产生以下结果：
Hello World!以下是外部文件标签的示例。
例子
messageTag.tag
<messageTag> <h1>Hello World!</h1> </messageTag>
index.htm
<!DOCTYPE html>
<html>
<head>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/riot/3.13.2/riot+compiler.min.js"></script>
</head>
<body>
<messageTag></messageTag>
<script src = "messageTag.tag" type = "riot/tag"></script>
<script>
riot.mount("messageTag");
</script>
</body>
</html>这将产生以下结果：
Hello World!作者：terry，如若转载，请注明出处：https://www.web176.com/riotjs/2205.html
