Question

我正在编写一些HTML代码，如果这是正确的多行代码，我在尝试“总结”时遇到了麻烦。基本上我有一个选择标记，我想在HTML代码中多次放置，但我不想重写和重复。这个动作的名称是什么？这是一个宏吗？一个片段？一个HTML函数？

基本上：

<select>
<option value="default">-Select an Attribute-</option>
<option value="animal">animal</option>
<option value="person">person/human</option>
<option value="cat">cat</option>
<option value="dog">dog</option>
<option value="open">open space</option>
<option value="closed">closed space </option>
<option value="natural">natural</option>
<option value="artificial">artificial</option>
<option value="explicit">explicit</option>
<option value="sexual">sexual</option>
<option value="innocent">innocent</option>
<option value="fearful">fearful</option>
<option value="religious">religious</option>
</select>

我是否可以在每次使用选择标记代码段时定义快捷方式或宏？这个过程在HTML术语中调用了什么，所以我可以记住它以供将来参考？

我不能做类似的事情：

<select id="snippet">
</select>

在执行第一次定义后为我节省了代码行？

Answer 1

这在纯HTML中是不可能的。您需要使用Javascript来完成客户端，或者使用PHP，Python，Perl等为您执行此操作的服务器端脚本...

作为如何使用Javascript执行此操作客户端的示例，请查看以下代码：（请参阅此JSFiddle的操作：http://jsfiddle.net/TZ2gV/）

options = {
    'default':'Select an Attribute',
    'animal':'animal',
    'person':'person/human'
};
$.each(options, function(key, value) {
    $('#mySelect')
    .append($("<option></option>")
            .attr("value",key)
            .text(value)); 
});

使用此HTML：

<form>
    Select: <select id="mySelect">
    </select>
</form>

或者使用此服务器端 PHP代码，您可以获得相同的结果（您可以在此处看到它：http://codepad.org/O5zZ65tZ）

<form>
    Select: <select id="mySelect">
        <?php
            $options = array(
                   'default'=>'Select an Attribute',
                   'animal'=>'animal',
                   'person'=>'person/human'
            );
            foreach ($options as $key => $value) {
                echo "<option value='".$key."'>".$value."</option>\n";
            }
        ?>
    </select>
</form>

但是在这两种情况下，你都不会为了自己制作HTML而保存自己的许多击键。您最好提出一个新问题来解释您的实际情况以及您要做的事情。

Answer 2

正如Lego所说，你不能用纯HTML做到这一点。如果您使用JavaScript，可以使用一些模板库。我建议的一对夫妇是：

http://mustache.github.io/ - 所有关于模板
http://underscorejs.org/ - 具有简单易用的模板功能

这篇文章可能会有所帮助How to use underscore.js as a template engine?

如何为重复的HTML标记创建宏或代码段？

2 个答案: