Django开发WEB项目的 HTML学习

HTML模板的写法

注释的写法

{# 注释的写法， 这种写法，在浏览器里是显示不出来的， 而下面的写法是会显示出来 #}
{% comment %}
多行注释
这里是多行注释
而且不会在浏览器检查里显示出来
{% endcomment %}
<!--这种注释是会被加载到浏览器中。-->

for 循环中的空置（传入的空字典）的替代

{% for student in students %}
        <li>{{ student.s_name }}</li>
    {% empty %}
        <h2>当传入的字典时空的时候显示这个</h2>
    {% endfor %}

forloop计数序号以及索引的使用方法

{% for student in students %}
        <li>显示从1开始的序号:{{ forloop.counter }}——倒着数从0开始的序号:{{ forloop.revcounter0 }}:{{ student.get_name }}</li>
    {% endfor %}
    <hr>
    <!--此处的.充当的是索引功能， 获取指定字典中的第几个键值对-->

    <h3>{{ students.5.s_name }}</h3>

forloop的first/last 以及divisbleby的用法举例

利用 forloop的first、last实现头尾的不同颜色设置。注意返回的是布尔值类型

{% for student in students %}
        {% if forloop.first %}
            <li style="color: red">forloop.first的用法，返回的是布尔值，注意if语句的写法{{ student.s_name }}</li>
        {% elif forloop.last %}
            <li style="color: green">forloop.last的用法，注意<font color="#a52a2a"> elif</font>语句的写法{{ student.s_name }}</li>
        {% else %}
            <li>{{ student.s_name }}</li>
        {% endif %}
    {% endfor %}

利用整除运算实现各行颜色等设置

{# 利用运算实现奇偶变色 #}
    {% for student in students %}
        {% if forloop.counter|divisibleby:2 %}
            <li style="color: #f3ff6a">{{ student.s_name }}</li>
            {% else %}
            <li style="background: brown">{{ student.s_name }}</li>
        {% endif %}

    {% endfor %}

其他的加减乘除的运算

<h3>html 竖线称为过滤器
        <li>传递的常数：{{ s_var }}</li>
        <li>运算，分子在前，分母在后。相当于除以1/5常数乘以5:{%widthratio s_var 1 5 %} </li>
        <li>常数除以5:{%widthratio s_var 5 1 %} </li>
        <li>加法运算，{{ s_var|add:2 }}</li>
        <li>减法运算，{{ s_var|add:-2 }}</li>
        <h3>全部转为大写{{ student_dict.name|upper }}</h3>
    	<h3>全部转为小写{{ student_dict.name|lower }}</h3>
    </h3>