python26_Django入门_模板管理实现好看的HTML页面 常见的HTML标签

补充:常见的HTML标签

作为Web 框架, Django 需要一种很便利的方法以动态地生成HTML。最常见的做法是使用模板。
模板包含所需HTML 输出的静态部分,以及一些特殊的语法,描述如何将动态内容插入。

1. 模板语法: 变量

  • 变量输出语法
{ { var } }
  • 当模版引擎遇到一个变量,将计算这个变量,然后将结果输出。
  • 变量名必须由字母、数字、下划线(不能以下划线开头)和点组成。
  • 当模版引擎遇到点("."),会按照下列顺序查询:
    • 字典查询,例如: foo[“bar”]
    • 属性或方法查询,例如: foo.bar
    • 数字索引查询,例如: foo[bar]
  • 如果变量不存在, 模版系统将插入’’ (空字符串)。

2. 模板语法: 常用标签

2.1 语法

{ % tag % }
  • 作用
    • 在输出中创建文本。
    • 控制循环或逻辑。
    • 加载外部信息到模板中。

2.2 标题标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>标题</h1>
<h2>标题</h2>
<h3>标题</h3>
<h4>标题</h4>
<h5>标题</h5>
<h6>标题</h6>
</body>
</html>

在这里插入图片描述

2.3 列表标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
/* 无序列表 */
<ul>
    <li>book1</li>
    <li>book2</li>
    <li>book3</li>
    <li>book4</li>
</ul>

/* 有序列表 */
<ol>
    <li>book1</li>
    <li>book2</li>
    <li>book3</li>
    <li>book4</li>
</ol>
</body>
</html>

在这里插入图片描述

2.4 图片标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<img src="Lenovo.jpg">	# 和此HTML在同一个目录下
</body>
</html>

在这里插入图片描述

2.5 链接文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<a href="https://www.baidu.com">百度一下</a>
<a href="https://www.baidu.com"><img src="Lenovo.jpg"></a>
</body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1 style =  'color: deeppink'>图书管理系统</h1>
<ul>
    {% for book in books %}
        <li><a href="/book/{{ book.id }}/">{{ book.name }}</a></li>
    {% endfor %}
</ul>
</body>
</html>

在这里插入图片描述

2.6 表格标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
{# r: row #}
<table border="1">
    <tr>
        <td>主机名</td>
        <td>IP</td>
    </tr>
    <tr>
        <td>localhost</td>
        <td>127.0.0.1</td>
    </tr>
    <tr>
        <td>server1</td>
        <td>127.0.0.1</td>
    </tr>
</table>
</body>
</html>

在这里插入图片描述

2.7 表单标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form>
    用户名: <input type="text" placeholder="username"><br/>
    密码: <input type="password" placeholder="password"><br/>
    <input type="submit" value="登陆">
</form>
</body>
</html>

在这里插入图片描述

2.8 for标签

{% for ... in ... %}
循环逻辑
{% endfor %}

2.9 if标签

{% if ... %}
逻辑1
{% elif ... %}
逻辑2
{% else %}
逻辑3
{% endif %}

2.10 comment标签

{% comment %}
多行注释
{% endcomment %}

2.11 include标签

  • 加载模板并以标签内的参数渲染
{% include "base/left.html" %}

2.12 url :反向解析

{% url 'name' p1 p2 %}

2.13 csrf_token 标签

  • 用于跨站请求伪造保护
{% csrf_token %}
  • 2
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值