Web基础知识

13.4. Web基础知识#

13.4.1. HTML#

超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。

同学们可以使用 HTML 来建立自己的 WEB 站点，HTML 运行在浏览器上，由浏览器来解析。

代码示例#

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<h1>我的第一个标题</h1>
<p>我的第一个段落。</p>
</body>
</html>

代码解释#

  • <!DOCTYPE html> 声明为HTML5文档

  • <html> 是 HTML 页面的根元素

  • <head> 元素包含了文档的元数据，如 <meta charset="utf-8">表示网页编码格式为 utf-8

  • <title> 描述了文档的标题

  • <body> 包含了可见的页面内容

  • <h1> 定义一级标题

  • <p> 定义一个段落

推荐学习#

网上有很多免费的 HTML 教程，推荐如下：

13.4.2. CSS#

CSS 用于控制网页的样式和布局。

示例#

body
{
background-color:red;
}
h1
{
color:orange;
text-align:center;
}
p
{
font-family:"Times New Roman";
font-size:20px;
}

代码解释#

body
   {
   background-color:#d0e4fe;
   }

这段代码表示网页主题的背景色为红色。

h1
   {
   color:orange;
   text-align:center;
   }

这段代码表示标题1字体颜色为橘色，居中显示。

p
    {
    font-family:"Times New Roman";
    font-size:20px;
    }

这段代码表示段落文字的字体为 Times New Roman，字体大小为 20px。

推荐学习#

网上有很多免费的 CSS 教程，推荐如下：

13.4.3. jinja2#

如想对主题增添内容，那我们需要使用 jinja2 语言， jinja2 是 Flask 作者开发的一个模板系统，起初是仿 django 模板的一个模板引擎，为 Flask 提供模板支持，由于其灵活，快速和安全等优点被广泛使用。

Jinja 模版是一个文本文件，通过它可以生成任何文本格式的文件，例如 .html、.xml、.csv 等等。一个 Jinja 模版并不需要有一个特定的扩展名，完全可以自定义或是不定义.

Jinja 模版包含了变量、表达式和标签，当模版被渲染时，变量和表达式会被替换为特定的值，标签用来控制模版的逻辑。

代码示例#

<!DOCTYPE html>
<html lang="en">
<head>
<title>My Webpage</title>
</head>
<body>
<ul id="navigation">
{% for item in navigation %}
     <li><a href="{{ item.href }}">{{ item.caption }}</a></li>
{% endfor %}
</ul>

<h1>My Webpage</h1>
{{ a_variable }}

{# a comment #}
</body>
</html>

代码解释#

  • {% ... %} 表示循环结构

  • {{...}} 里内含变量，需要对其进行赋值

  • {#...#} 用于注释，方便理解代码，并不会输出到结果文件中

  • {% endfor %} 表示循环体的结束

  • {{ item.href }} 表示访问 item 这个变量的 href 属性

推荐学习#

网上有很多免费的 HTML 教程，推荐如下：

目录