文章目录
补充：常见的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 %}