Django 第四课 【标签】

## 常用的模板标签

快捷键：Tab --》 自动补齐  

            common + /  --》注销代码

            common + D  --》复制上一句代码到下面去

# if 语句标签

1：所有的标签都是在 ’{%%}‘之间。

2：if标签有闭合标签，就是 ’{%endif%}‘

3：if标签的判断运算符，就是跟python中的判断符是一样的，’ == , != ,  <  ,  > ,  <=  , in , not in , is , is not  ‘这些都可以使用

4：还可以使用 ’elif‘ 以及 ’else‘ 等标签。

# for...in...标签

1：可以遍历列表，元组，字符串，字典等一切可以遍历的对象，示例代码：

<table>
 <thead>
    <tr>
        <td>序号</td>
        <td>书名</td>
        <td>作者</td>
        <td>价格</td>
    </tr>
  </thead>
    <tbody>
    {% for book in books %}
        {% if forloop.first %}
            <tr style="background:red;">
        {% elif forloop.last %}
            <tr style="background:pink;">
        {% else %}
            <tr>
        {% endif %}
            <td>{{ forloop.counter }}</td>
            <td>{{ book.name }}</td>
            <td>{{ book.author }}</td>
            <td>{{ book.price }}</td>
        </tr>
    {% endfor %}

    </tbody>
</table>

如果想要反向遍历，那么在遍历的时候就加上一个 ’reversed‘。示例代码如下：

 {% for book in books reversed %}
           
            <p>{{ forloop.counter }}</p>
         
        {% endfor %}

在for循环中，‘DTL’提供了一些变量可供使用。这些变量如下：

* ‘forloop.cointer’：当前循环的下标。以1作为起始值。

* ‘forloop.cointer0’：当前循环的下标。以0作为起始值。

* ‘forloop.revcounter’：当前循环的反向下标值。比如列表有5个元素，那么遍历就从 5，4，3，2，1

* ‘forloop.revcounter0’：当前循环的反向下标值。比如列表有5个元素，那么遍历就从 4，3，2，1，0

* ‘forloop.first’：是否是第一次遍历。

* ‘forloop.last’：是否是最后一次遍历。

* ‘forloop.parentloop’：如果有多个循环嵌套，那么这个属性代表的是上一级的for循环。

** 模板中的 ‘for.. in...’ 没有continue和break语句，这一点和python中有很大的不同，一点要记清楚

## ‘for..in...empty..’标签：

这个标签使用跟 ‘for...in...’是一样的，只不过实在遍历的对象如果没有元素的情况下，会执行empty中的内容。示例代码如下：

 {% for book in books reversed %}
           
       <li>{{ forloop.counter }}</li>

 {% empty %}

       <li>{{ 暂时还没有任何数据 }}</li>
         
  {% endfor %}

## url标签

 url标签：在模板中，我们经常要写一些 ‘url’，比如某个 ‘a’ 标签中需要定义 ‘href’ 属性。当然如果通过硬编码的方式直接将这个 ‘url’ 写死在里面也是可以的。但是这样对于以后的项目维护可能不是一件好事。因为建议使用这种反转的方式来实现，类似于 ‘django’中的 ‘reverse’ 一样。示例代码如下：

<li><a href="{% url 'book' %}">读书</a></li>

如果 ‘url’ 反转的时候需要传递参数，那么可以在后面传递。但是参数分位置参数和关键字参数。位置参数和关键字参数不能同时使用。示例代码如下：

#path部分
 path('book/detail/<book_id>/<category>/', views.book_detail, name='detail')

#url反转，使用位置参数
 <li><a href="{% url 'book:city' 1 %}">同城页面</a></li>

#url反转，使用关键字参数
 <li><a href="{% url 'book:city' city_id=1 %}">同城页面</a></li>

如果想要在使用 ‘url’标签反转的时候要传递查询字符串的参数，那么必须要动手在后面添加。示例代码如下：

 <li><a href="{% url 'book:city' city_id=1 %}？page=1">同城页面</a></li>

如果需要传递多个参数，那么通过空格的方式进行分隔。示例代码如下：

<li><a href="{% url 'book:city' city_id=1 page=1 %}">同城页面</a></li>

## a标签

a标签的作用：就是用于控制界面与页面之间的跳转的

a标签的格式：<a href="指定要跳转的目标界面的链接">需要展示给用户看见的内容</a>

 

<a href="http://www.baidu.com">百度</a>

a标签中有一个target属性，这个属性的作用就是专门用于控制如何跳转

self：用于在当前选项卡中跳转，也就是不新建页面跳转

默认就是self

_blank ：用于在新的选项卡中跳转，也就是新建页面跳转

 

<a href="http://www.baidu.com" target="self">百度</a>
<a href="http://www.baidu.com" target="_blank">百度</a>

a标签中还有一个属性，叫做tiele，a标签中的title和img标签中title一样，都是用来控制鼠标悬停时显示的提示文本内容的

 

<a href="http://www.baidu.com" target="_blank" title="点击会跳转到百度首页喔">百度</a>

注意点：

1.a标签不仅可以让文字可以点击，还可以让图片也能够被点击。

2.一个a标签必须有一个href属性，否则a标签不知道要跳转到什么地方

3.如果通过a标签的href属性指定一个URL地址，那么必须在地址前面加上http://或https://。 

4.a标签的href属性除了可以绑定一个网络地址以外，还可以指定一个本地的地址

## 列表标签

1.列表标签的作用：给一堆数据添加列表语义，也就是告诉搜素引擎告诉浏览器这一堆数据是一个整体。

2.HTML中列表标签的分类

　　2.1无序列表（最多人用）（unordered list）

　　2.2有序列表（最少人用）（ordered list）

　　2.3定义列表（其次）（definition list）

3无序列表作用：

给一堆数据添加列表语义，并且这一堆数据所有的数据都没有先后之分

什么叫先后之分？

例如：排行榜

什么叫没有先后之分？

例如：中国的所有城市

4.无序列表格式：

 

<ul>
    <li>需要显示的条目内容</li>
</ul>

li其实是英文list item的缩写

list是列表的意思

item是条目的意思

所以结合起来就是列表条目的意思

例子：

<h2>中国的城市：</h2>
<ul>
    <li>北京</li>
    <li>上海</li>
    <li>广州</li>
    <li>武汉</li>
</ul>

5.注意点

　　5.1一定要记住ul标签是用来给一堆数据添加列表语义的，而不是用来给他们添加小圆点的

　　5.2ul标签和li标签是一个整体，是一个组合，所有一般情况下ul标签和li标签都是一起出现，不会单个出现，也就是说不会单独使用一个ul标签或者单独使用一个li标签，都是结合在一起使用的

　　5.3由于ul标签和li标签是一个组合，所有ul标签中不推荐包含其他标签，也就是说以后你在ul标签中只会看到li标签

 

## img标签

　　1.img标签中的img其实就是英文image的缩写

　 　　img标签的作用就是告诉浏览器我们需要显示一张图片。

　　2.img标签格式：<img src="">

　　　　其实img标签中的src是英文source的缩写

　　　　所以img标签中的src就是用来img标签，需要显示的图片名称

 

<img src="当前电脑图片的路径" />

　　3.注意点

　　　　-和h系列标签/p标签还有hr标签不一样，img标签不会独占一行

　　　　-如果我们手动指定了img标签显示的图片的宽度和高度，

　　　　有可能会导致图片变形，那么如果又想指定宽度和高度，

 

<img src="当前电脑图片的路径" width="200px" height="200px" />

　　　　又不想让图片发生变形，我们可以只指定宽度或者高度其中的一个值即可

　　　　-只要指定了宽度，系统会自动根据宽度计算出高度，

　　　　只要指定了高度，系统会自动根据高度计算出宽度，

　　　    并且都是等比拉伸的，也就是说不会变形

 

<img src="当前电脑图片的路径" width="200px" />
<img src="当前电脑图片的路径" height="200px" />

　　4.width：宽度

　　height：高度

　　所以在img标签中width/height这两个属性的作用，

　　  就是用来告诉img标签将来需要显示的图片有多宽有多高

　　如果img标签没有指定需要显示的图片的宽高，

　　  那么系统就会按照图片默认的宽高来显示

　　如果img标签指定了宽高，那么系统会按照指定的宽高在显示

　　5.title：用于告诉浏览器，当鼠标悬停在图片上时

　　需要弹出的描述框中显示什么内容。

　　6.alt：其实是英文alternate的缩写，它的作用就是用于告诉浏览器

　　当需要显示的图片找不到时显示什么内容