模板中不同注释语句的用法

发表于 | 分类于 ，
字数统计: 616 字

html中的注释

Djanog模板中的html我遇到过的两种注释,一种形式是< !– – >,另外一种是{ # # },刚开始并不清楚这两种的用法,所以用起来就很混乱,所以决定把所有的注释给归纳一下.

使用< !– – >来进行注释,被注释的语句或者语法从页面上是已经无法看见的,但是如果查看网页源码,依然可以从源码中看到被注释的内容.

这是html:

1
2
3
4
5
6
<body>
<!-- 这是内容 -->
<!-- {% for i in customer %} -->
    <!-- {{ i.u_name }} -->
<!-- {% endfor %} -->
</body>

这是源码:

1
2
3
4
5
6
7
8
9
<body>
<!-- 这是内容 -->

<!--  -->
    <!-- zsb -->
<!--  -->
    <!-- cjh -->
<!--  -->
</body>

可以看出,不光是被注释的内容在源码中显示出来了,被注释的语法也依然运行成功,在源码中显示出了结果.

使用{ # # }来进行注释的话,就相对注释的更彻底,在页面和网页源码中都不会出现被注释的内容,只有维护的程序员才能看到这种注释.

这是html:

1
2
3
4
5
6
7
8
<body>

{# 这是内容 #}
{#{% for i in customer %}#}
{#    {{ i.u_name }}#}
{# {% endfor %}#}

</body>

这是源码:

1
2
3
4
5
6
7
<body>





</body>

可以看出,所有被注释的内容都不会被查看到,无论是页面还是源码中

我还是习惯性的ctrl + /来进行注释,使用{ # # }对我来说,可以防止产生一些不必要的错误.

另外,查阅资料发现Django模板中还提供了第三种注释方式,刚才两种都是单行注释,使用 { % comment % }

{ % endcomment % } 能够进行多行注释,这种注释和{ # # }效果是一样的.

1
2
3
4
5
{% comment %}
{% for i in customer %}
    {{ i.u_name }}
 {% endfor %}
{% endcomment %}

CSS中的注释

因为html中会放入CSS和JS,所以会产生一种错觉,这三个东西使用的注释应该是同一种注释.

事实肯定不是我想的那样,CSS中的注释使用的是

1
2
/*font-weight: 100;*/
/*这是一条注释*/

使用该方法来添加我们的注释或者注释掉一些暂时不需要的代码

JS中的注释

1
2
// console.log(data);
// 这是一条注释

使用//来添加代码的注释或者注释掉一些暂时不需要的代码

所以总结一下,HTML中注释有两种,一种是可执行的注释< !– – >,一种是不可执行的注释{ # # },CSS中的注释是/**/,JS中的注释是//.