• 直接返回字符串信息

• Flask框架支持通过模版返回信息

2.1 设置编码（head）

2.2 设置title（head）

2.3 标题

2.4 div和span

• div，一个人占一整行。【块级标签】

• span，自己多大占多少。【行内标签、内联标签】

注意：这两个标签比较素 + CSS样式。

示例

2.4.5 超链接

2.4.6 图片

关于设置图片的高度和宽度

小结

• html的标签

• 划分

• 嵌套

案例：商品列表（超链接+图片）

2.4.7 列表

2.4.8 表格

2.4.9 input系列（7个）

2.4.10 下拉框

2.4.11 多行文本

案例：用户注册

知识点回顾和补充

2. 一大堆的标签

3. 网络请求

   • 在浏览器的URL中写入地址，点击回车，访问。

   • 浏览器向后端发送请求时

     • GET请求【URL方法 / 表单提交】

       • 现象：GET请求、跳转、向后台传入数据数据会拼接在URL上。

         注意：GET请求数据会在URL中体现。

     • POST请求【表单提交】

       • 现象：提交数据不在URL中而是在请求体中。

案例：用户注册

• 新创建项目

• 创建Flask代码

• HTML代码

案例：登录

见代码示例。

页面上的数据，想要提交到后台：

• form标签包裹要提交的数据的标签。
  • 提交方式：
  • 提交的地址：
  • 在form标签里面必须有一个submit标签。
• 在form里面的一些标签：input/select/textarea
  • 一定要写name属性

总结

1. 称呼

2. HTML标签（默认格式样式、以后通过手段可以修改）

3. HTML标签与编程语言无关

   • java + HTML
   • c# + HTML
   • php + HTML
   • python + HTML

4. 提醒：HTML标签比较多，标签还有很多很多，不必逐一学会。

css，专门用来“美化”标签。

• 基础CSS，写简单页面 & 看懂 & 改。
• 模块，调整和修改。

3.1 快速了解

3.2 CSS应用方式

1. 在标签上

2. 在head标签中写style标签（常用）

3.写到文件中（常用）

4.用Flask框架开发弊端

• 每次都需要重启
• 规定有些文件必须要放在特定的文件夹
• 新创建一个页面
  • 函数
  • HTML文件

有没有一种方式，可以让我快速的编写前端的代码并查看效果呢，最后再讲页面集成到Flask中。

Pycharm为我们提供了一种非常便捷开发前端页面的工具。

3.3 选择器

• ID选择器

• 类选择器（最多）

• 标签选择器

• 属性选择器

• 后代选择器

关于选择器：

关于多个样式 & 覆盖的问题：

补充：下面的不要覆盖我。

3.4 样式

1. 高度和宽度

注意事项：

• 宽度，支持百分比。
• 行内标签：默认无效
• 块级标签：默认有效（霸道，右侧区域空白，也不给你占用）

2. 块级和行内标签

• 块级
• 行内
• css样式：标签 ->

示例：行内&块级特性

示例：块级和行内标签的设置

注意：块级 + 块级&行内。

3.字体设置

• 颜色
• 大小
• 加粗
• 字体格式

4.文字对齐方式

5.浮动

div默认块级标签（霸道），如果浮动起来，就不一样了。

如果你让标签浮动起来之后，就会脱离文档流。

6.内边距

内边距，我自己的内部设置一点距离。

7.外边距

外边距，我与别人加点距离。

案例：小米商场

• body标签，默认有一个边距，造成页面四边都有白色间隙，如何去除呢？

• 内容居中

  • 文本居中，文本会在这个区域中居中。

  • 区域居中，自己要有宽度 +

• 父亲没有高度或没有宽度，被孩子支撑起来。