我们这一章节所说的标题标签，和我们之前讲的 title 标签并不是同一个意思，我们这一章节说的标题标签，是指在网页上定义标题，如文章的标题，段落的标题等，而 title 标签特指网页的标题。所有，当我们需要给文章或者段落定义标题时，就需要用到 H 标签了。 H 标签分为 H1、H2、H3、H4、H5、H6，H1 位超大标题，然后依次递减，H6 为最小的标题。

在 HTML 的 head 标签内被用来定义页面文档的标题。标题标签的好坏，在搜索引擎的排名中占有不小的比重。好的关键词排名网站，一般是这个网页或网站的标题标签（Title Tag）中包含着搜索关键词。所以，要让自己网页或网站排到搜索结果的前列，网页的标题标签（Title Tag）就要好好写写。在网页中，标题更是为您提供了一个合理使用重要关键词的好机会。更重要的是，搜索引擎爬虫还会考虑标题标签中的文字是否与其正文内容相符。title 标签主要的作用有两点，一是告诉访客该篇文章的主题是什么，网站的 title 标签则告诉该网站的主题是什么。二就是给搜索引擎索引，告诉搜索引擎蜘蛛该篇文章是以什么内容为主题。综合来说，无论对于普通访客还是搜索引擎的蜘蛛， title 标签都是起到索引指路的作用，人们对你网站或文章是否有兴趣很大程度也要看你的 title 标签描述效果。而且对于搜索引擎来说会根据此标签将你的网站或文章合理归类，所以对于搜索引擎来说，title 标签起到了很大的作用。

用于标题的 HTML 标签包括<h1> - <h6> 来定义。标题类似于 Word 中的标题，其作用是为了对文章进行排版，而不是只为了放大字号。良好的标题排版对搜索引擎比较友好。<h1>一级标题</h1><h2>二级标题</h2><h3>三级标题</h3><h4>四级标题</h4><h5>五级标题</h5><h6>六级标题</h6>展示效果如下：标题标签元素在 HTML5 使用较少，一般使用 css 样式控制文字大小。

H 标签和 P 标签一样，也是块级元素，所以也会默认占一整行；H 标签有默认样式：字体大小和字体粗细，所有标题标签的字体均为加粗的字体，且字体大小会随 H6-H1 逐渐增大；H 标签上下也有间距（CSS 中的外边距）。例如：

除了表格、行、单元格之外，表格还有一些其他的标签可使用。这些标签是非必须的，但是可以增强表格的内容丰富度和视觉效果。2.5.1 thead tbody tfoot 标签thead 用于定义表格的表头，同样命名为表头，它和 th 表头单元格有本质的区别。thead 实质上是用于对表格的内容进行分组，用于告诉开发者或者搜索引擎表格的哪部分是头，哪部分是内容，哪部分是尾部。所以说 thead 需要和 tbody 、tfoot 结合使用才有效果，正常情况下定义 thead 不会影响到表格的样式和布局，除非你强制定义 thead 的 css 样式。目前主流的浏览器大都支持 thead、tbody、tfoot 标签，例如：9882.5.2 col 和 colgroup 标签col 标签用来为表格中的列统一设置属性值，使用它主要用来节省代码量。它是一个单标签，无需结束标签，colgroup 标签是 col 的升级版，不同于 col 的是 colgroup 主要以组合的方式对列设置属性样式，而且 col 可以嵌入到 colgroup 内部进行细化的设置。989例如以上代码使用 col 对列进行居中设置，由于 colgroup 和 col 这两个标签存在严重的浏览器兼容问题，如上图所示，在 Chrome、FireFox、Safari和 ie8+ 等浏览器中不再支持 COL 及 COLGROUP 元素的部分属性，所以建议最好不要使用。2.5.3 caption 标签caption 用于定义表格的标题。每个表格只能声明一个标题，默认显示在表格的正上方，仅仅起到一个展示的作用，实际上跟 table 关联不大，完全可以用一个文本类型的标签元素替代:990上述代码展示效果

H 标签直观的告诉用户，网页哪部分是重要的，哪些是不那么重要的。H 标签通常用来为用户展现网页的结构，由于 H 标签通常会使某些文字比普通的文字大，对于用户来说，便于他们更直观地看出这些文字的重要性，而且可以帮助他们理解标题文字下方的内容。多种渐变大小的标题一开始主要为网页的内容创建分层结构，便于用户直观地浏览网站。当我们需要在页面上，特别是为文章或段落定义标题时，我们就需要用 H 标签了。例如：而 HTML 给我们提供了从 H1 - H6 6 个选择，让我们可以超大标题到超小标题自由选择，可以适应各种场景。

与 host 模式类似，container 模式可以使一个容器共享另一个已存在容器的网络，此时这两个容器共同使用同一网卡、主机名、IP 地址，容器间通讯可直接通过本地回环 lo 接口通讯。新运行一个 busybox 的容器 b1，设定它共享已存在的容器 b0 的网络：docker run -d -t --network container:b0 --name b1 busyboxTips：端口转发设定以已存在的容器为准，出于安全和权限控制的角度，container 模式下运行的容器设定端口转发不生效。查看 b0，b1 的网络配置，验证两者的网络配置是否相同：docker exec b0 ifconfigdocker exec b1 ifconfig此时的网络拓扑图如下：container 网络拓扑不再使用的容器记得删除掉，释放资源和空间docker rm -f b0 b1nginx 镜像自带的网络命令非常少，查看网络不方便，而 busybox 的网络命令比较齐全，使用 container 模式，可以快速解决这个问题。我们新运行一个名为 n0 的 nginx 容器，再将它的网络共享给 busybox 容器 n0-net：docker run -d -t --name n0 nginxdocker run -d -t --network container:n0 --name n0-net busybox使用 n0-net 容器，执行 docker exec n0-net ip a 进行网络状态查看自身网络信息，也就是 nginx 的网络信息执行如下命令，通过 localhost 访问 n0 的 web 服务，说明通过 container 模式下，共享的网络中的容器能够使用 lo 访问其他容器的服务。docker exec n0-net telnet localhost 80# 在交互中输入# GET /#不再使用的容器记得删除掉，释放资源和空间：docker rm -f n0 n0-net

标签的内容写在头标签和尾标签之间， 代表这段内容由特定的标签修饰。 <p> 这是一段话 <!-- 这段为p标签的内容 --> </p>Tips：单标签没有内容，因为它没有尾标签，通常我们指的是双标签之间的内容。

标签的属性，如果是标签为双标签，则属性写在头标签中（头标签的<>内）， 如果是单标签，则写在标签的<>内。 <a href='https://www.baidu.com'>百度</a> <!-- 双标签的属性写在头标签的<>内 --> <img src='https://www.imooc.com/static/img/index/logo.png' alt='慕课logo'> <!-- 单标签的属性写在标签的<>内 -->总结：标签的属性有三部分构成，属性名，等号，属性值，等号左边的为属性名，等号右边的为属性值，属性值必须由引号引起来，单引号和双引号都可以。标签的属性用来给标签添加属性，让标签有特点的作用。

我们在很多应用场景需要点击标签而跳转到一个新的网页，比如点击文章标题进入到文章详情，点击商品名称进入到商品详情，这个时候我们就需要用到超链接标签 a 标签了， a 标签页成为了我们在实际网站开发过程中，用的比较多的标签。注意：本章节只能展示 a 标签在网页上呈现的效果，实际跳转效果需自己编写代码操作。

1. div 标签是块级元素，默认占一整行，可以设置宽高。如我们写两个 div 标签，会呈现以下效果：2. div 没有任何的默认样式，所以它不会像 P 标签和 H 标签一样，有上下间距。3. div 标签里面可以嵌套其他任意标签，例如：<div> <p>我是div标签里面的p标签</p></div>4. 我们可以给 div 设置任意的样式。

我们可以在 Debugger 标签中指定调试选项。对于 C 和 C++ 代码，Android Studio 会使用 LLDB 调试程序。除了普通的 Android Studio 界面，调试程序窗口还有一个 LLDB 标签，让我们可以在调试过程中输入 LLDB 命令。我们可以输入与 Android Studio 用于在调试程序界面中显示信息的命令相同的命令，还可以执行其他操作。对于 C 和 C++ 项目，我们可以在 Debugger 标签中添加符号目录，以及 LLDB 启动与连接后命令。Debug typeJava：仅调试 Java 代码；Auto：让 Android Studio 为我们的项目选择最合适的调试类型；Native：调试原生 C 或 C++ 代码；Dual：在两个单独的调试会话中调试 Java 和原生代码；Symbol Directories如果要添加符号文件来为调试程序提供在 Android Studio 外部生成的 C 或 C++ 代码的信息，我们可以在此处添加一个或多个目录。LLDB Startup Commands添加要在调试程序连接到进程之前执行的 LLDB 命令。LLDB Post Attach Commands添加要在调试程序连接到进程之后立即执行的 LLDB 命令。Logging：Target channels指定 LLDB 日志选项。Android Studio 会根据团队的经验设置默认选项，所以速度不会太慢，但却包含问题排查所需的信息。Android Studio 错误报告经常需要请求日志。Before Launch定义启动之前的操作。

1. span 标签为行内元素，行内元素和块级元素（p标签）不同，默认是在同一排排列，如我们写两个 span 标签，会呈现以下效果：2. span 不能使用 CSS 为其设置宽高，即使设置了宽高也会无效。3. span 标签里也可以嵌套其他标签。例如： <span> <p> 我是span标签里的p标签 </p> </span>4. span 标签的应用场景多数为为某些内容单独设置样式，我们可以用 span 标签将这些包裹起来，这样既单独设置了样式，也不会影响其他内容。当然，如果你想内容在同一排排列，也可以使用 span 标签包裹这些内容。

如果在含有文字滚动的网页中查看过源码的同学们应该见过这个标签。 marquee 标签。它是一个标准的 HTML 标签。也是成对出现的。很多人将其文字滚动效果称为跑马灯或走马灯。HTML 很早就加入了跑马灯效果，以至于在早期的纯静态网页中就可以看到相关的实践与应用。从语法角度讲，在一组成对出现的 HTML marquee 标签中间的文字，就会被设置为滚动效果。说起滚动，这里就要引导同学们思考一个问题：滚动可能的属性有哪些？在这里统一回答一下，首先，滚动肯定不是只能一个方向滚动的，W3C 标准组织根据我们人类的视觉习惯，习惯上将滚动方向分为两个方向，也就是我们都能想到的左右滚动方向，和上下滚动方向。其次，滚动如果可以随便滚动，那么是不是会覆盖到其他元素，导致文字重叠，反而降低了网站的实际观感？当然不能这样设置，因此，W3C 标准组织在设计之初，就为 marquee 这个 HTML 元素提供了 width 和 height 属性，让元素只能在我们规定的一块区域里滚动。然后，既然是动，物理好的同学或许会考虑到：文字动的速度怎么办？ Good Job！真是个好问题！这个问题不用我们操心，因为 W3C 组织在制定标准的时候，还提供了一个设置滚动速度的 scrollamount 属性。那么这些具体如何控制我们在本小节下一个知识点中会介绍，此处只作思维发散性的引导。

标签在很多场景都有使用。也很容易理解。比如浏览器标签最常见了。Vim 中也有这样功能。主要用于表示不同类型文件。不同的窗口组成同一个类型的工作区，通过标签来标识不同工作区。标签：容纳一系列窗口的容器。

1.3.1 标签属性每一个 html 标签都可以定义很多属性，用来标识这个 标签，也方便后面我们使用属性定位方式找到这个标签。属性是卸载标签内部的，比如下面的 <a> 标签中定义了一个 href 属性：<a href="www.baidu.com">百度一下，你就知道</a>这个是链接属性，当点击这个 百度一下 文本时会跳转到百度的主页。当然标签中比较重要和常用的属性有：id：用于表示元素的唯一性，方便 css 选择器或者 js 找到该元素；class：给元素添加一个或者多个样式，多个样式使用空格隔开，比如下面定义了两个 class 样式，div 元素中包含这两个样式：...<style type="text/css">.margin-lass { margin-left:10px text-align: center}.text-class { font-size: 12px}</style>...<div class="margin-class text-class" ></div>...style：规定元素的行内样式：<div style="color:red; float:left"></div>title：当鼠标移到该元素上时，显示的提示信息<div title="这是提示信息">包含提示的文本</div>1.3.2 链接元素HTML 中的链接元素为 <a>，它能让我们从一个网页链接到另一个网页或者锚位置，只需要设置 href 属性即可。在互联网中各种网站上的链接的地址都是用的 <a> 标签。如淘宝网站上的各种商品链接：淘宝首页商品链接<a> 元素的两个重要属性分别为：href：点击该元素时，链接的地址；target：值有 _blank|_parent|_self|_top，它规定了跳转到新页面的位置；1.3.3 容器元素HTML 中的容器元素为 <div>，它是一个块级元素，会自动开启一个新行，主要是用来固定一块区域。示例：<div id="node" style="color:#FF0000" class="test">这是一个div容器</div>1.3.4 标题元素HTML 中的标题元素有 <h1>-<h6>，它们规定了网页主体或者段落的标题，而且是从大到小的顺序。示例：<h1>这是h1标题</h1><h2>这是h2标题</h2><h3>这是h3标题</h3><h4>这是h4标题</h4><h5>这是h5标题</h5><h6>这是h6标题</h6>效果图：实例效果图1.3.5 表格元素HTML 中 <table> 标签用来在网页上绘制表格。简单的 HTML 表格由 table 元素以及一个或多个 tr、th 或 td 元素组成。tr 元素定义表格行，th 元素定义表头，td 元素定义表格单元。示例：<table border="1" width="400px" style="text-align: center;"> <thead> <th>列1</th> <th>列2</th> <th>列3</th> <th>列4</th> </thead> <tbody> <tr style="background-color: red"> <td>行1值1</td> <td>行1值2</td> <td>行1值3</td> <td>行1值4</td> </tr> <tr> <td>行2值1</td> <td>行2值2</td> <td>行2值3</td> <td>行2值4</td> </tr> </tbody></table>我们使用 <thead> 定义表头部，用 <tbody> 定义表格的内容。在 <table> 标签中定义了整个表格的属性，包括表格宽度为 400px，单元格内文字居中显示，以及单元之间的间距为 1px。此外在第一行的表格中设置背景颜色为空色，最终得到的结果图如下：表格效果图1.3.6 列表元素HTML 中的列表标签有 <ul> 和 <ol>，分别表示无序和有序列表，列表元素的标签有 li。示例：<ul><li>老虎</li><li>狮子</li><li>蛇</li></ul><ol start="20"><li>老虎</li><li>狮子</li><li>蛇</li></ol>效果图：列表效果图1.3.7 表单元素表单元素是网页布局中非常重要的一个元素。比如我们可以在各种论坛、填写个人信息、登录等网页上看到 <form> 元素。比如慕课网的登录页面：慕课网登录页面示例在 <form> 表单中我们会包含许多元素，比如输入框元素 <input>、按钮元素 <button> 等等。现在我们来简单实现一个登录表单，示例代码如下：<form><div><span>账号：</span><input type="text" style="margin-bottom: 10px" placeholder="请输入登录手机号/邮箱" /></div><div><span>密码：</span><input type="password" style="margin-bottom: 10px" placeholder="请输入密码" /></div><div><label style="float: left;font-size: 10px; color: grey"><input type="checkbox" checked="checked"/>7天自动登录</label></div></form>效果图：登录注册效果图除了上面这些常用元素之外，还有许多其他的 HTML 元素以及元素对应的属性值，需要在使用的时候去搜索相关资料。有了这些知识，对网页会有一个初步的认识，接下来学习如何让静态的网页变得丰富多彩。

div 标签，称为区隔标记。作用是设定字、画、表格等的摆放位置。可定义文档中的分区或节。div 标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具，并且不使用任何格式与其关联。如果用 id 或 class 来标记 div，那么该标签的作用会变得更加有效。div 就相当于一个区域，我们把我们网页内容的都放在这个区域里面。div 元素，是用来为HTML文档内大块（block-level）的内容提供结构和背景的元素。div 的起始标签和结束标签之间的所有内容都是用来构成这个块的，其中所包含元素的特性由 div 标签的属性来控制，或者是通过使用样式表格式化这个块来进行控制。

表格在我们的网页中是非常常见的，比如我们要展示商品信息，工作安排，产品参数等都需要用到表格。那么在 html 中，使用表格就需要用到 table 标签了。但是表格不仅是 table 一个标签，需要用到和表格相关的一组标签，这一小节我们就来学习这些标签吧。

我们在之前的章节中介绍过，理论上标签与标签之间是可以任意嵌套的。但是 ol 和 li 标签比较特殊，ol 标签里只能嵌套 li 标签。ol 代表整个列表，li 标签代表有序列表的每一个选项。我们可以把 ol 标签 理解为一个壳，里面嵌套着 li 代表的选项。如下图所示：<ol> <li>吃饭</li> <li>睡觉</li> <li>打豆豆</li></oL>

当我们打开一个网站时，每个网站都会有自己的专属标题。比如百度的标题为“百度一下，你就知道”，淘宝的标题为“淘宝网 - 淘宝!我喜欢”。那么我们怎么样设置自己网站的专属标题呢？我们就需要用到 title 标签了。

H1 - H6 标签都为双标签，所以必须有首尾标签。例如： <h1>我是h1标签</h1> <h2>我是h2标签</h2> <h3>我是h3标签</h3> <h4>我是h4标签</h4> <h5>我是h5标签</h5> <h6>我是h6标签</h6>那么在页面上会呈现以下效果：

在 Lambda 表达式出现之前，一个 Java 程序的行为总是与对象关联，以标识、状态和行为为特征。然而 Lambda 表达式则违背了这个规则。虽然 Lambda 表达式可以共享对象的一些属性，但是表示行为是其唯一的用处。由于没有状态，所以表示问题也就不那么重要了。在 Java 语言的规范中对 Lambda 表达式唯一的要求就是必须计算出其实现的相当的函数接口的实例类。如果 Java 对每个 Lambda 表达式都拥有唯一的表示，那么 Java 就没有足够的灵活性来对系统进行优化。

DTL 中标签的写法为： {% 标签 %}，常用的标签有 for 循环标签，条件判断标签 if/elif/else。部分标签在使用时，需要匹配对应的结束标签。Django 中常用的内置标签如下表格所示：标签描述{% for %}for 循环，遍历变量中的内容{% if %}if 判断{% csrf_token %}生成 csrf_token 的标签{% static %}读取静态资源内容{% with %}多用于给一个复杂的变量起别名{% url %}反向生成相应的 URL 地址{% include 模板名称 %}加载指定的模板并以标签内的参数渲染{% extends 模板名称 %}模板继承，用于标记当前模板继承自哪个父模板{% block %}用于定义一个模板块1.2.1 for 标签的用法：{# 遍历列表 #}<ul>{% for person in persons %}<li>{{ person }}</li>{% endfor %}</ul>{# 遍历字典 #}<ul>{% for key, value in data.items %}<li>{{ key }}:{{ value }}</li>{% endfor %}</ul>在 for 循环标签中，还提供了一些变量，供我们使用：变量描述forloop.counter当前循环位置，从1开始forloop.counter0当前循环位置，从0开始forloop.revcounter反向循环位置，从n开始，到1结束forloop.revcounter0反向循环位置，从n-1开始，到0结束forloop.first如果是当前循环的第一位，返回Trueforloop.last如果是当前循环的最后一位，返回Trueforloop.parentloop在嵌套for循环中，获取上层for循环的forloop实验：(django-manual) [root@server first_django_app]# cat templates/test_for.html 遍历列表:<ul>{% spaceless %}{% for person in persons %}{% if forloop.first %}<li>第一次:{{ forloop.counter }}:{{ forloop.counter0 }}:{{ person }}:{{ forloop.revcounter }}:{{ forloop.revcounter }}</li>{% elif forloop.last %}<li>最后一次:{{ forloop.counter }}:{{ forloop.counter0 }}:{{ person }}:{{ forloop.revcounter }}:{{ forloop.revcounter }}</li>{% else %}</li>{{ forloop.counter }}:{{ forloop.counter0 }}:{{ person }}:{{ forloop.revcounter }}:{{ forloop.revcounter }}</li>{% endif %}{% endfor %}{% endspaceless %}</ul>{% for name in name_list %} {{ name }}{% empty %} <p>name_list变量为空</p>{% endfor %} 倒序遍历列:{% spaceless %}{% for person in persons reversed %}<p>{{ person }}:{{ forloop.revcounter }}</p>{% endfor %}{% endspaceless %}遍历字典:{% spaceless %}{% for key, value in data.items %}<p>{{ key }}:{{ value }}</p>{% endfor %}{% endspaceless %}(django-manual) [root@server first_django_app]# python manage.py shellPython 3.8.1 (default, Dec 24 2019, 17:04:00) [GCC 4.8.5 20150623 (Red Hat 4.8.5-39)] on linuxType "help", "copyright", "credits" or "license" for more information.(InteractiveConsole)>>> from django.template.loader import get_template>>> tp = get_template('test_for.html')>>> content = tp.render(context={'persons':['张三', '李四', '王二麻子'], 'name_list': [], 'data': {'key1': 'value1', 'key2': 'value2', 'key3': 'value3'}})>>> print(content)遍历列表:<ul><li>第一次:1:0:张三:3:3</li></li>2:1:李四:2:2</li><li>最后一次:3:2:王二麻子:1:1</li></ul> <p>name_list变量为空</p> 倒序遍历列:<p>王二麻子:3</p><p>李四:2</p><p>张三:1</p>遍历字典:<p>key1:value1</p><p>key2:value2</p><p>key3:value3</p>1.2.2 if 标签：支持嵌套，判断的条件符号与变量之间必须使用空格隔开，示例如下。(django-manual) [root@server first_django_app]# cat templates/test_if.html{% if spyinx.sex == 'male' %}<label>他是个男孩子</label>{% else %}<label>她是个女孩子</label>{% endif %}(django-manual) [root@server first_django_app]# python manage.py shellPython 3.8.1 (default, Dec 24 2019, 17:04:00) [GCC 4.8.5 20150623 (Red Hat 4.8.5-39)] on linuxType "help", "copyright", "credits" or "license" for more information.(InteractiveConsole)>>> from django.template.loader import get_template>>> tp = get_template('test_if.html')>>> tp.render(context={'spyinx': {'age':29, 'sex': 'male'}})'\n<label>他是个男孩子</label>\n\n'>>> tp.render(context={'spyinx': {'age':29, 'sex': 'male'}})1.2.3 csrf_token 标签：这个标签会生成一个隐藏的 input 标签，其值为一串随机的字符串。这个标签通常用在页面上的 form 标签中。在渲染模块时，使用 RequestContext，由它处理 csrf_token 这个标签。下面来做个简单的测试：# 模板文件[root@server first_django_app]# cat templates/test_csrf.html <html><head></head><body><form enctype="multipart/form-data" method="post">{% csrf_token %}<div><span>账号：</span><input type="text" style="margin-bottom: 10px" placeholder="请输入登录手机号/邮箱" /></div><div><span>密码：</span><input type="password" style="margin-bottom: 10px" placeholder="请输入密码" /></div><div><label style="font-size: 10px; color: grey"><input type="checkbox" checked="checked"/>7天自动登录</label></div><div style="margin-top: 10px"><input type="submit"/></div></form></body></html># 定义视图：hello_app/views.py[root@server first_django_app]# cat hello_app/views.py from django.shortcuts import render# Create your views here.def test_csrf_view(request, *args, **kwargs): return render(request, 'test_csrf.html', context={})# 配置URLconf：hello_app/urls.py[root@server first_django_app]# cat hello_app/urls.pyfrom django.urls import pathurlpatterns = [ path('test-csrf/', views.test_csrf_view),]# 最后激活虚拟环境并启动django工程[root@server first_django_app] pyenv activate django-manual(django-manual) [root@server first_django_app]# python manage.py runserver 0:8881Watching for file changes with StatReloaderPerforming system checks...System check identified no issues (0 silenced).You have 17 unapplied migration(s). Your project may not work properly until you apply the migrations for app(s): admin, auth, contenttypes, sessions.Run 'python manage.py migrate' to apply them.March 27, 2020 - 04:10:05Django version 2.2.11, using settings 'first_django_app.settings'Starting development server at http://0:8881/Quit the server with CONTROL-C.现在通过外部请求这个URL，效果图如下。通过右键的检查功能，可以看到 {% csrf_token %} 被替换成了隐藏的 input 标签，value 属性是一个随机的长字符串：csrf_token标签1.2.4 with 标签：对某个变量重新命名并使用：(django-manual) [root@server first_django_app]# cat templates/test_with.html {% spaceless %}{% with age1=spyinx.age %}<p>{{ age1 }}</p>{% endwith %}{% endspaceless %}{% spaceless %}{% with spyinx.age as age2 %}<div>{{ age2 }} </div>{% endwith %}{% endspaceless %}(django-manual) [root@server first_django_app]# python manage.py shellPython 3.8.1 (default, Dec 24 2019, 17:04:00) [GCC 4.8.5 20150623 (Red Hat 4.8.5-39)] on linuxType "help", "copyright", "credits" or "license" for more information.(InteractiveConsole)>>> from django.template.loader import get_template>>> tp = get_template('test_with.html')>>> content = tp.render(context={'spyinx': {'age': 29}})>>> print(content)<p>29</p><div>29 </div>1.2.5 spaceless 标签：移除 HTML 标签中的空白字符，包括空格、tab键、换行等。具体示例参见上面的示例；1.2.6 cycle 标签：循环提取 cycle 中的值，用法示例如下# 假设模板如下：{% for l in list %}<tr class="{% cycle 'r1' 'r2' 'r3'%}">{{l}}</tr>{% endfor %}# 对于传入的 list 参数为：['l1', 'l2', 'l3']，最后生成的结果如下：<tr class="r1">l1</tr><tr class="r2">l2</tr><tr class="r3">l3</tr>1.2.7 include 标签：加载其他模板进来。{% include "base/base.html" %}除了加载模板进来外，include 标签还可以像加载进来的模板传递变量。假设我们有个 base/base.html 模板文件，其内容为：{# base/base.html #}Hello {{ name|default:"Unknown" }}此时，我们引入 base.html 模板文件时，可以给 name 传递变量值：{% include "base/base.html" with name="test" %}

标签有两种定义方式：闭合型标签：<标签>内容</标签>自闭合标签： <标签 />或者<标签>标签不区分大小写，工作中通常使用小写，因为日常写代码的时候 IDE 通常设置小写。912自闭合标签通常是一些不需要包含具体 HTML 内容的的标签，例如表单、图片、换行符、css 样式等等。913从上述例子看得出来，通常自闭和标签是不包含实际的文本内容，通常是用来引入文件、图片、样式等作用，而闭合标签是包含内容，既然包含内容所以后边的闭合标签相当于起到一个结束符的作用。实际开发中，如果忘记将标签闭合，通常来说日常的浏览器（例如在 chrome v81） 中不会报语法错误，而是自动闭合，但是不建议这么做，因为浏览器并非完全的智能，有可能会引起排版错误，例如：914这段代码中，定义了一个段落，并设置了字体为红色，当忘记使用闭合标签时915在浏览器的展示效果如下：可以看到，样式出现了错乱。TIPS: 所以在日常项目开发中，尽量选择带有语法检测的 IDE，可以避免大部分的语法错误。

在之前的章节中，我们学习了块级元素（ p 标签，h 标签， div 标签），行内元素（span 标签），块级元素的特点是默认占一整行，会自动换行，行内元素默认是在同一行排列，如果我们想让两个行内元素换行显示，除了设置 CSS 样式之外，就是使用 换行标签 br 标签了。

Top Down 标签显示一个调用列表，在该列表中展开方法或函数节点会显示它的被调用方。如下图所示，在 Top Down 标签页中展开方法 A 的节点会显示它的被调用方，即方法 B 和 D。在此之后，展开方法 D 的节点会显示它的被调用方，即方法 B 和 C，依此类推。与 Flame chart 标签页类似， Top Down 树也汇总了具有相同调用堆栈的完全相同的方法的跟踪信息。也就是说，Flame chart 标签页提供了 Top down 标签页的图形表示方式。Top Down 标签提供以下信息来帮助说明在每个调用上所花的 CPU 时间（时间也可表示为在选定范围内占线程总时间的百分比）：Self：方法或函数调用在执行自己的代码（而非被调用方的代码）上所花的时间；Children：方法或函数调用在执行它的被调用方（而非自己的代码）上所花的时间；Total：方法的 Self 时间和 Children 时间的总和。这表示应用在执行调用时所用的总时间。Bottom Up 标签页显示一个调用列表，在该列表中展开函数或方法的节点会显示它的调用方。如下图，提供了方法 C 的 Bottom Up 树。在该 Bottom Up 树中打开方法 C 的节点会显示它独有的各个调用方，即方法 B 和 D。请注意，尽管 B 调用 C 两次，但在“Bottom Up”树中展开方法 C 的节点时，B 仅显示一次。在此之后，展开 B 的节点会显示它的调用方，即方法 A 和 D。Bottom Up 标签页用于按照占用的 CPU 时间由多到少（或由少到多）的顺序对方法或函数排序。我们可以检查每个节点以确定哪些调用方在调用这些方法或函数上所花的 CPU 时间最多。 与 Top Down 树相比， Bottom Up 树中每个方法或函数的时间信息参照的是每个树顶部的方法（顶部节点）。 CPU 时间也可表示为在该记录期间占线程总时间的百分比。

hr 标签是块级元素，宽度默认为100%，既整个屏幕的宽度，自带换行效果；hr 标签表现为一条水平线，默认为黑色；hr 标签为单标签，没有尾标签；可以给 hr 标签设置width属性来改变 hr 标签的宽度；可以给 hr 标签设置color属性来改变 hr 标签的颜色。

标题，和我们语文中学习的文章标题一样，网页也需要一个属于自己的标题。标题可以是文字，可以是图片。但大多数情况下，我们所说的还是和语文作文中的标题一样，即文字标题。那么如何利用 Dreamweaver CC 2018 设置网页的标题呢？原理很简单，代码层面你可以手写 h 标签，注意， h 标签也是成对出现的标签哦！而利用 Dreamweaver CC 2018 我们可以使用它自带的插入面板来实现。具体实现我们可以看下面的动态图片。大致的操作过程就是：在新建的空白 HTML 页面上点击右侧的插入面板，找到标题这个选项，我们可以发现它里面有 h1-h5 等多个选项，任选一个点击它，（ h 后面的数字越小，代表标题大小越大）然后你就可以看到页面中插入了不同大小的标题。我们可以双击左侧插入的标题去修改你想设置的标题内容。怎么样？是不是很 easy ？ 其实这对于熟悉 HTML 的同学很简单。只不过今天我们要在 Dreamweaver CC 2018 里给它一个完美的答案。好了，以上就是我们应该掌握的在 Dreamweaver CC 2018 中插入标题的方法。似曾相识而且很简单？大家只要仔细观察上面的动态图片，相信可以在5秒种都不到就彻底掌握它！

<!DOCTYPE HTML><HTML lang="en"> <head> <meta charset="UTF-8"> <title>这是我们的专属网站</title> </head> <body> </body></HTML>直接写在 title 标签之间。 title 标签的内容既为我们网站的标题。效果如下图所示：淘宝网Title百度Title京东Title

指令含义:tabnew新建标签页:tabfind查找并在新标签页中打开文件:tabs显示已经打开的标签页列表:tabclose关闭当前标签页:tabonly仅保留当前标签页打开:tabn/p/first/last移动到下/上/第一/最后一个标签页