Python教程

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

本文主要是介绍python26_Django入门_模板管理实现好看的HTML页面 常见的HTML标签，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

文章目录

  • 补充：常见的HTML标签
  • 1. 模板语法: 变量
  • 2. 模板语法: 常用标签
    • 2.1 语法
    • 2.2 标题标签
    • 2.3 列表标签
    • 2.4 图片标签
    • 2.5 链接文件
    • 2.6 表格标签
    • 2.7 表单标签
    • 2.8 for标签
    • 2.9 if标签
    • 2.10 comment标签
    • 2.11 include标签
    • 2.12 url ：反向解析
    • 2.13 csrf_token 标签

补充：常见的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 %}
这篇关于python26_Django入门_模板管理实现好看的HTML页面 常见的HTML标签的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
您可能喜欢
栏目导航