HTML简介

    模板是一个文件，它可以让我们使用一致的格式来展示不同的信息— —例如，您可以使用模板来帮助你写一封信，虽然每封信可以包含不同的消息和发送给不同的人，但他们使用相同的格式。

    Django模板的格式是由HTML（也就是我们在第一章 互联网是如何工作的 中提到的 HTML ）语言来描述的。).

    HTML 是一种简单的代码，由 Web 浏览器解释—如 Chrome、 火狐或Safari—为用户显示一个网页。

    HTML代表“HyperText Markup Language（超文本标记语言）”。 超文本 是指它是一种支持网页之间的超链接的文本。 标记 是指我们将一份文件用代码标记组织起来，然后告诉某个东西（在这种情况下，浏览器中） 如何解释网页。 HTML 代码是由 标记构成的，每一个都是由 开始，由结束 >. 这些标签表示标记 元素.

    创建一个模板是指创建一个模板文件。一切都是文件，对吧？你可能已经注意到这点了。

    模板保存在 blog/templates/blog 目录中。 因此，首先在您的 blog 目录内创建一个称为 templates 的目录。 然后创建另一个称为 blog 的目录到你的 templates 目录：

    （你可能会疑惑为什么我们需要两个目录都叫的 blog — 你以后会发现这是简单有效的命名规则，使生活更容易，当事情开始变得更加复杂的时候。）

    现在创建一个叫做 post_list.html 的文件 （现在是空的，别管它）到 blog/templates/blog 目录下。

    看看你的网站现在是什么样子： /

    再也没有错误了 ！祝贺 :) 然而，您的网站实际上并没有展现任何东西除了一个空白页，因为您的模板也是空。我们需要解决这个问题。

    在您的模板文件中添加以下内容：

    1. <html>
    2.     <p>Hi there!</p>
    3.     <p>It works!</p>
    4. </html>

    你的网站现在看这样怎么样？单击去查找： http://127.0.0.1:8000/ /

    它工作了 ！很好地完成了:)

    • 最基本的标记，<html>，始终是任何网页的开始， </html> 始终是最后。 正如你所看到的，整个网站的内容是在 <html> 开始标记和结束标记之间 </html>的
    • <p> 一种用于段落元素标记 ；</p> 关闭每个段落

    每个 HTML 页面也分为两个元素： head 和 body.

    • body 是包含 web 页中所有显示的元素。

    我们使用 <head> 告诉浏览器这个页面的配置，以及 来告诉它什么实际上是在页面上。

    例如，你可以把网页标题元素放到 <head>里，像这样：

    1. <html>
    2.     <head>
    3.         <title>Ola's blog</title>
    4.     </head>
    5.     <body>
    6.         <p>Hi there!</p>
    7.         <p>It works!</p>
    8.     </body>
    9. </html>

    保存该文件并刷新您的网页。

    图 11.3

    注意浏览器怎么理解”Ola’s blog”是你的网页的标题的呢？ 它解释了 <title> Ola's blog </title> 并将其放置到您的浏览器 （它也用于书签，等等） 的标题栏中。

    可能你也注意到每个开始标记匹配的 结束标记，用 /） 和元素是 嵌套 （即只有您不能关闭特定标记，直到在里面的所有标记都关闭了）。

    这就像把东西放进盒子里。 你有一个大箱子里，<html></html> ；在它里面还有 <body></body>，并包含更小盒： <p></p>.

    你需要遵循这些规则即 关闭 标签和 嵌套 的元素 — — 如果你不这样做，浏览器可能不能正确地解释它们以及您的页面将显示不正确。

    现在，你可以找点乐子，尝试自定义您的模板 ！为此这里有几个有用的标签：

    • <h1>A heading</h1> -为你最重要的标题
    • <h2>A sub-heading</h2> 为下一层级的标题！
    • <h3>A sub-sub-heading</h3> … 同样，直到 <h6>
    • 强烈强调您的文本
    • <br /> 跳转到下一行（你不能放任何东西在br里面）
    • <a href="https://djangogirls.org">link</a> 创建一个链接
    • <ul><li>first item</li><li>second item</li></ul> 产生一个列表，就像这样！
    • <div></div> 定义页面上的一个段

    下面是模板的一个完整示例：

    • 第一个 div 元素包含我们的博客的标题 — — 这是一个标题和链接
    • 另两个 div 元素包含我们博客文章发表的日期，h2 是可点击文章标题和两个 p （段落） 的文本、 日期和我们的博客。

    它给了我们这种效果：

    耶！ 但到目前为止，我们的模板永远只显示完全 相同的信息 — — 而我们早些时候谈到模板作为使我们能够以 相同的格式 显示 不同 的信息.

    我们想要的真正想要做的是的显示实际添加到我们Django admin里面的文章：这是我们接下来要做的。

    我们把这些成果放到网上一定很棒，对吧？让我们再来一次 PythonAnywhere 部署：

    首先，让我们看看上次部署之后什么文件改变了（运行这些本地命令，不是在 PythonAnywhere 上）：

    1. $ git status

    请确保你在 djangogirls 目录中，让我们告诉 git 包括此目录内的所有更改：

    1. $ git add --all .

    在我们上传的所有文件之前，让我们检查git 将上传什么（所有git 将上传的文件现在应以绿色显示）：

    我们已经差不多完成了，现在是时候告诉它要在它的历史记录中保存此更改。 我们将要给它附上一条”提交消息”用来描述我们做了什么改动。 您可以在这个阶段键入任何您想要的东西，但写一些描述性的东西更有用，因为它能在将来使你记起你做了什么。

    1. $ git commit -m "Changed the HTML for the site."

    做完这些，我们上传（push）改动到 GitHub ：

    1. git push

    Pull 把你的新代码拉到 PythonAnywhere，然后重新加载你的 web 应用程序

    • 打开 并转到你的 Bash console（或启动一个新的）。然后，运行：

    然后观察你的代码被下载下来。如果你想要检查他是否正确下载，你可以跳转到Files Tab 并在PythonAnywhere上查看代码。

    • 最后，跳到 Web tab 并点击对应你的 Web 应用程序的 Reload 。

    你的更新应已上线！刷新你的浏览器，看到更新了吧 :)