Linux练习小结_03

# HTML CSS JS

![image-20230309170412197.png](/static/img/4bd270f7e39608d122cf8c4fde819419.image-20230309170412197.webp)

- HTML：负责网页的结构（页面元素和内容）。

- CSS：负责网页的表现（页面元素的外观、位置等页面样式，如：颜色、大小等）。

- JavaScript：负责网页的行为（交互效果）。

# 标准HTML5基础模版
```html
<!DOCTYPE html>
<html lang="en">
<head>
    
    <meta charset="UTF-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <title>Document</title> 
</head>
<body>
    
    
</body>
</html>
```

# [html标签参考手册](https://www.w3school.com.cn/html/index.asp)



## HTML页面的基础结构标签
```html
<html>
    <head>
    	<title> </title>
    </head>
    <body>
       
    </body>
</html>
```
- &lt;title&gt;中定义标题显示在浏览器的标题位置，&lt;body&gt;中定义的内容会呈现在浏览器的内容区域

# HTML 超文本标记语言——HyperText Markup Language。 
- 超文本：链接
- 标记：标签，带尖括号的文本  

## **HTML中的标签特点**

- HTML标签不区分大小写
- HTML标签的属性值，采用单引号、双引号都可以
- HTML语法相对比较松散 (编写HTML标签的时候尽量严谨一些)

# HTML基本标签
## 标题标签`<h1>`
```html
<h1>1级标题</h1>
<h2>2级标题</h2>
<h3>3级标题</h3>
<h4>4级标题</h4>
<h5>5级标题</h5>
<h6>6级标题</h6>
```
* 文字加粗
* 字号逐渐减小
* 独占一行（换行）

> 经验
>
> 1. h1 标签在一个网页中只能用一次，用来放新闻标题或网页的 logo
> 2. h2 ~ h6 没有使用次数的限制

![image.png](/static/img/518e800652eab60b63aea9e2c285d13c.image.webp)

## `br`标签
```html
<br>
```
- 定义简单的折行(换行)
- 在HTML中,一个段落中的文字会从左到右依次排列,直到浏览器窗口的右端,然后才自动换行。如果希望 某段文本强制换行显示，就需要使用换行标签<br/>

## `hr`标签
```html
<hr>
```
- `<hr>` 元素通常显示为水平线，用于在 HTML 页面中分隔内容，或定义内容上的变化。

## `div`和`span`
```html
<div>山东蓝翔</div>
<div>挖掘机哪家强</div>
<span>山东蓝翔</span>
<span>挖掘机哪家强</span>
```
- div，一个人占一整行。【块级标签】
- span，自己多大占多少。【行内标签、内联标签】

## 段落标签`<p>`
```html
<p>大漠孤烟直, 长河落日圆</p>
```

## 文本格式化标签
- 加粗：`<strong>    </strong>`或者`<b>   </b>`
- 倾斜：`<em>    </em>`或者`<i>    </i>`
- 删除线：`<del>    </del>`或者`<s>    </s>`
- 下划线：`<ins>      </ins>`或者`<u>     </u>`

![1680314078647.png](/static/img/4f1a87109a44589f70fe6ddc45ec030b.1680314078647.webp)

- 推荐使用第一列的标签, 标签有具体含义

## 图像标签`img`
```html
<img  src="图片的 URL">
```
- src用于指定图像的位置和名称，是 <img> 的必须属性。 

### 图像属性

![1680314152822.png](/static/img/71f911c71ec30532a5b3c4bc42eaf056.1680314152822.webp)

### 属性语法

* 属性名="属性值"
* 属性写在尖括号里面，标签名后面，标签名和属性之间用空格隔开，不区分先后顺序

![1680314195951.png](/static/img/e4111babf378cd7fbd01b5661984af02.1680314195951.webp)

## 路径

概念：路径指的是查找文件时，从**起点**到**终点**经历的**路线**。 

路径分类：

* 相对路径：从当前文件位置出发查找目标文件
* 绝对路径：从盘符出发查找目标文件
  * Windows 电脑从盘符出发
  * Mac 电脑从根目录出发

### 相对路径

查找方式：从**当前文件位置**出发查找目标文件

特殊符号：

* **/** 表示进入某个文件夹里面          → 文件夹名/
* **. ** 表示当前文件所在文件夹           → ./
* **..** 表示当前文件的上一级文件夹 → ../   

![1680314322997.png](/static/img/d8ced79aa5d2ad0234e1c33a27a1b34d.1680314322997.webp)
### 绝对路径

查找方式：Windows 电脑从盘符出发；Mac 电脑从根目录（/）出发

```html
<img  src="C:\images\mao.jpg">
```

> 提示
>
> 1. Windows 默认是 \ ，其他系统是 /，建议统一写为 / 
> 2. 特殊的绝对路径 → 文件的在线网址：<https://www.itheima.com/images/logo.png> "，应用场景：网页底部**友情链接**

![1680314503056.png](/static/img/2531297112ea5d78cb07bb084e1d79fe.1680314503056.webp)

## 超链接标签 `a`
作用：点击跳转到其他页面。 

```html
<a href="https://www.baidu.com">跳转到百度</a>
```
**href 属性值是跳转地址，是超链接的必须属性。**

超链接默认是在当前窗口跳转页面，添加 **target="_blank"** 实现**新窗口**打开页面。

拓展：开发初期，不确定跳转地址，则 href 属性值写为 **#**，表示**空链接**，页面不会跳转，在当前页面刷新一次。

```html
<a href="https://www.baidu.com/">跳转到百度</a>

 
 
<a href="./01-标签的写法.html" target="_blank">跳转到01-标签的写法</a>


<a href="#">空链接</a>
```

## 音频`audio`

```html
<audio src="音频的 URL"></audio>
```

常用属性

![1680314629860.png](/static/img/60db64ab715ef356761ac6d333b68eaf.1680314629860.webp)

> 拓展：书写 HTML5 属性时，如果属性名和属性值相同，可以简写为一个单词。 

```html

<audio src="./media/music.mp3" controls loop autoplay></audio>
```

## 视频`video`

```html
<video src="视频的 URL"></video>
```

常用属性

![1680314703735.png](/static/img/a53456c34ad6d70242e57ba9f46028b3.1680314703735.webp)

```html

<video src="./media/vue.mp4" controls loop muted autoplay></video>
```

## 列表

作用：布局内容排列整齐的区域。

列表分类：无序列表、有序列表、定义列表。

### 无序列表

作用：布局排列整齐的**不需要规定顺序**的区域。

标签：ul 嵌套 li，ul 是无序列表，li 是列表条目。

```html
<ul>
  <li>第一项</li>
  <li>第二项</li>
  <li>第三项</li>
  ……
</ul>
```

> 注意事项：
>
> * ul 标签里面只能包裹 li 标签
> * li 标签里面可以包裹任何内容

### 有序列表

作用：布局排列整齐的**需要规定顺序**的区域。

标签：ol 嵌套 li，ol 是有序列表，li 是列表条目。

```html
<ol>
  <li>第一项</li>
  <li>第二项</li>
  <li>第三项</li>
  ……
</ol>
```

> 注意事项：
>
> * ol 标签里面只能包裹 li 标签
> * li 标签里面可以包裹任何内容

### 定义列表

标签：dl 嵌套 dt 和 dd，dl 是定义列表，dt 是定义列表的标题，dd 是定义列表的描述 / 详情。

```html
<dl>
  <dt>列表标题</dt>
  <dd>列表描述 / 详情</dd>
   ……
</dl>
```

![1680315652403.png](/static/img/b578ec807c9ffc5f054d4fc71092316b.1680315652403.webp)

> 注意事项：
>
> * dl 里面只能包含dt 和 dd
> * dt 和 dd 里面可以包含任何内容

## 表格

网页中的表格与 Excel 表格类似，用来展示数据。 

![1680315690740.png](/static/img/63be719335dece5dbce2240a5651cecc.1680315690740.webp)

### 基本使用

标签：table 嵌套 tr，tr 嵌套 td / th。 

![1680315704565.png](/static/img/7e98b8694279fc3d203b2d5a3333cf73.1680315704565.webp)


提示：在网页中，**表格默认没有边框线**，使用 **border 属性**可以为表格添加边框线。 
```html
<table border="1">
  <tr>
    <th>姓名</th>
    <th>语文</th>
    <th>数学</th>
    <th>总分</th>
  </tr>
  <tr>
    <td>张三</td>
    <td>99</td>
    <td>100</td>
    <td>199</td>
  </tr>
  <tr>
    <td>李四</td>
    <td>98</td>
    <td>100</td>
    <td>198</td>
  </tr>
  <tr>
    <td>总结</td>
    <td>全市第一</td>
    <td>全市第一</td>
    <td>全市第一</td>
  </tr>
</table>
```

### 表格结构标签-了解

作用：用表格结构标签把内容划分区域，让表格结构更清晰，语义更清晰。

![1680315774950.png](/static/img/96af2d76e85af529b4de89e5937a7705.1680315774950.webp)

> 提示：表格结构标签可以省略。

### 合并单元格

作用：将多个单元格合并成一个单元格，以合并同类信息。 

![1680315812998.png](/static/img/6d8cccdb475908ded2abfcaca20b4dbd.1680315812998.webp) 

![1680315821325.png](/static/img/23a18a8f8613b99b0ab23142ffcde52c.1680315821325.webp)

合并单元格的步骤：

1. 明确合并的目标
2. 保留**最左最上**的单元格，添加属性（取值是**数字**，表示需要**合并的单元格数量**）
   * **跨行合并**，保留最上单元格，添加属性 **rowspan**
   * **跨列合并**，保留最左单元格，添加属性 **colspan**
3. 删除其他单元格

```html
<table border="1">
  <thead>
    <tr>
      <th>姓名</th>
      <th>语文</th>
      <th>数学</th>
      <th>总分</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>张三</td>
      <td>99</td>
      <td rowspan="2">100</td>
      <td>199</td>
    </tr>
    <tr>
      <td>李四</td>
      <td>98</td>
      
      <td>198</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>总结</td>
      <td colspan="3">全市第一</td>
      
    </tr>
  </tfoot>
</table>
```

> 注意：不能跨表格结构标签合并单元格（thead、tbody、tfoot）。

## 表单

作用：收集用户信息。

使用场景：

* 登录页面
* 注册页面
* 搜索区域

### input 标签

input 标签 type 属性值不同，则功能不同。 

```html
<input type="..." >
```

![1680315984539.png](/static/img/d31f3887036658c06a6600effbaae15e.1680315984539.webp)

### input 标签占位文本 

占位文本：提示信息，文本框和密码框都可以使用。 

```html
<input type="..." placeholder="提示信息">
```

### 单选框

常用属性

![1680316056402.png](/static/img/9159b724e4c4b8c188a5d9f9935c733e.1680316056402.webp)

```html
<input type="radio" name="gender" checked> 男
<input type="radio" name="gender"> 女
```

> 提示：name 属性值自定义。

### 上传文件 

默认情况下，文件上传表单控件只能上传一个文件，添加 multiple 属性可以实现文件多选功能。

```html
<input type="file" multiple>
```

### 多选框

多选框也叫复选框，默认选中：checked。

```html
<input type="checkbox" checked> 敲前端代码
```

### 下拉菜单

![1680316175031.png](/static/img/e7f896f837a6e2c5525dea8246b9e907.1680316175031.webp)

标签：select 嵌套 option，select 是下拉菜单整体，option是下拉菜单的每一项。

```html
<select>
  <option>北京</option>
  <option>上海</option>
  <option>广州</option>
  <option>深圳</option>
  <option selected>武汉</option>
</select>
```

> 默认显示第一项，**selected** 属性实现**默认选中**功能。

### 文本域

作用：多行输入文本的表单控件。 

![1680316238194.png](/static/img/bfdb2dd696b0f7699e0a11a122862f6c.1680316238194.webp)

```html
<textarea>默认提示文字</textarea>
```

> 注意点：
>
> * 实际开发中，使用 CSS 设置 文本域的尺寸
> * 实际开发中，一般禁用右下角的拖拽功能

### label 标签 

作用：网页中，某个标签的说明文本。 

![1680316296894.png](/static/img/42c8ef6d1dcf4c9979febe01b3a01e4e.1680316296894.webp)

经验：用 label 标签绑定文字和表单控件的关系，增大表单控件的点击范围。 

![1680316314721.png](/static/img/e9ad7ec4ff108e898389c053f5abbef3.1680316314721.webp)

* 写法一
  * label 标签只包裹内容，不包裹表单控件
  * 设置 label 标签的 for 属性值 和表单控件的 id 属性值相同

```html
<input type="radio" id="man">
<label for="man">男</label>
```

* 写法二：使用 label 标签包裹文字和表单控件，不需要属性 

```html
<label><input type="radio"> 女</label>
```

> 提示：支持 label 标签增大点击范围的表单控件：文本框、密码框、上传文件、单选框、多选框、下拉菜单、文本域等等。 

### 按钮

```html
<button type="">按钮</button>
```

![1680316426088.png](/static/img/c1c7c27afde9fbdb3885fa5ce8ebd68e.1680316426088.webp)

```html


<form action="">
  用户名：<input type="text">
  <br><br>
  密码：<input type="password">
  <br><br>

  
  <button type="submit">提交</button>
  <button type="reset">重置</button>
  <button type="button">普通按钮</button>
</form>
```

> 提示：按钮需配合 form 标签（表单区域）才能实现对应的功能。


## 语义化

### 无语义的布局标签 

作用：布局网页（划分网页区域，摆放内容）

* div：独占一行
* span：不换行

```html
<div>div 标签，独占一行</div>
<span>span 标签，不换行</span>
```

### 有语义的布局标签

![1680316535685.png](/static/img/d6b1b959fd0ae657fe793094ded93e4c.1680316535685.webp)

## 字符实体

![1680316551064.png](/static/img/945146a0b7717af9425a7f7438e86a55.1680316551064.webp)

## 页面布局
### 盒子模型

- 盒子：页面中所有的元素（标签），都可以看做是一个 盒子，由盒子将页面中的元素包含在一个矩形区域内，通过盒子的视角更方便的进行页面布局

- 盒子模型组成：内容区域（content）、内边距区域（padding）、边框区域（border）、外边距区域（margin）

![image-20230310092820616.png](/static/img/aa83df19b84a6abda9c8b23605ebe09f.image-20230310092820616.webp)

### 布局标签

- 布局标签：实际开发网页中，会大量频繁的使用 div 和 span 这两个没有语义的布局标签。

- 标签：<div> <span>

- 特点：

  - div标签：

    - 一行只显示一个（独占一行）

    - 宽度默认是父元素的宽度，高度默认由内容撑开

    - 可以设置宽高（width、height）

  - span标签：

    - 一行可以显示多个

    - 宽度和高度默认由内容撑开

    - 不可以设置宽高（width、height）


测试：

```html
<body>
    <div>
        A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A 
    </div>
    <div>
        A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A 
    </div>

    <span>
        A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A 
    </span>
    <span>
        A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A 
    </span>
</body>
```

浏览器打开后的效果:

1). div会独占一行，默认宽度为父元素 body 的宽度
    
![image-20230310094312355.png](/static/img/be8a27009200fb60e060ef3a85b8c58b.image-20230310094312355.webp)
    
2). span一行会显示多个，用来组合行内元素，默认宽度为内容撑开的宽度
    
![image-20230310094412539.png](/static/img/0bc942a7e2ac9f858ed59d21772106de.image-20230310094412539.webp)
    
### 盒子模型代码
    
代码如下: 

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>盒子模型</title>
    <style>
        div {
            width: 200px;  /* 宽度 */
            height: 200px;  /* 高度 */
            box-sizing: border-box; /* 指定width height为盒子的高宽 */
            background-color: aquamarine; /* 背景色 */
            
            padding: 20px 20px 20px 20px; /* 内边距, 上 右 下 左 , 边距都一行, 可以简写: padding: 20px;*/ 
            border: 10px solid red; /* 边框, 宽度 线条类型 颜色 */
            margin: 30px 30px 30px 30px; /* 外边距, 上 右 下 左 , 边距都一行, 可以简写: margin: 30px; */
        }
    </style>
</head>

<body>
    
    <div>
        A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A 
    </div>

</body>
</html>
```

代码编写好了, 可以通过浏览器打开该页面, 通过开发者工具,我们就可以看到盒子的大小, 以及盒子各个组成部分(内容、内边距、边框、外边距)：

![image-20230310094312355.png](/static/img/be8a27009200fb60e060ef3a85b8c58b.image-20230310094312355.webp)

我们也可以，通过浏览器的开发者工具，清晰的看到这个盒子，以及每一个部分的大小：

![image-20230310094412539.png](/static/img/0bc942a7e2ac9f858ed59d21772106de.image-20230310094412539.webp)

HTML_CSS_JS 基础汇总

Linux练习小结_02

# 效果:
- 结合BootStrap样式定义的分页组件

- 效果:

![image.png](/static/img/ab577efc3321b2a11d35222992c2375b.image.webp)



# 分页模板:

```Python
"""
自定义的分页组件，以后如果想要使用这个分页组件，你需要做如下几件事：

在视图函数中：
    def pretty_list(request):

        # 1.根据自己的情况去筛选自己的数据
        queryset = models.PrettyNum.objects.all()

        # 2.实例化分页对象
        page_object = Pagination(request, queryset)

        context = {
            "queryset": page_object.page_queryset,  # 分完页的数据
            "page_string": page_object.html()       # 生成页码
        }
        return render(request, 'pretty_list.html', context)

在HTML页面中

    {% for obj in queryset %}
        {{obj.xx}}
    {% endfor %}

    <ul class="pagination">
        {{ page_string }}
    </ul>

"""

from django.utils.safestring import mark_safe


class Pagination(object):

    def __init__(self, request, queryset, page_size=10, page_param="page", plus=5):
        """
        :param request: 请求的对象
        :param queryset: 符合条件的数据（根据这个数据给他进行分页处理）
        :param page_size: 每页显示多少条数据
        :param page_param: 在URL中传递的获取分页的参数，例如：/etty/list/?page=12
        :param plus: 显示当前页的 前或后几页（页码）
        """

        from django.http.request import QueryDict
        import copy
        query_dict = copy.deepcopy(request.GET)
        query_dict._mutable = True
        self.query_dict = query_dict

        self.page_param = page_param
        page = request.GET.get(page_param, "1")

        if page.isdecimal():
            page = int(page)
        else:
            page = 1

        self.page = page
        self.page_size = page_size

        self.start = (page - 1) * page_size
        self.end = page * page_size

        self.page_queryset = queryset[self.start:self.end]

        total_count = queryset.count()
        total_page_count, div = divmod(total_count, page_size)
        if div:
            total_page_count += 1
        self.total_page_count = total_page_count
        self.plus = plus

    def html(self):
        # 计算出，显示当前页的前5页、后5页
        if self.total_page_count <= 2 * self.plus + 1:
            # 数据库中的数据比较少，都没有达到11页。
            start_page = 1
            end_page = self.total_page_count
        else:
            # 数据库中的数据比较多 > 11页。

            # 当前页<5时（小极值）
            if self.page <= self.plus:
                start_page = 1
                end_page = 2 * self.plus + 1
            else:
                # 当前页 > 5
                # 当前页+5 > 总页面
                if (self.page + self.plus) > self.total_page_count:
                    start_page = self.total_page_count - 2 * self.plus
                    end_page = self.total_page_count
                else:
                    start_page = self.page - self.plus
                    end_page = self.page + self.plus

        # 页码
        page_str_list = []

        self.query_dict.setlist(self.page_param, [1])
        page_str_list.append('<li><a href="?{}">首页</a></li>'.format(self.query_dict.urlencode()))

        # 上一页
        if self.page > 1:
            self.query_dict.setlist(self.page_param, [self.page - 1])
            prev = '<li><a href="?{}">上一页</a></li>'.format(self.query_dict.urlencode())
        else:
            self.query_dict.setlist(self.page_param, [1])
            prev = '<li><a href="?{}">上一页</a></li>'.format(self.query_dict.urlencode())
        page_str_list.append(prev)

        # 页面
        for i in range(start_page, end_page + 1):
            self.query_dict.setlist(self.page_param, [i])
            if i == self.page:
                ele = '<li class="active"><a href="?{}">{}</a></li>'.format(self.query_dict.urlencode(), i)
            else:
                ele = '<li><a href="?{}">{}</a></li>'.format(self.query_dict.urlencode(), i)
            page_str_list.append(ele)

        # 下一页
        if self.page < self.total_page_count:
            self.query_dict.setlist(self.page_param, [self.page + 1])
            prev = '<li><a href="?{}">下一页</a></li>'.format(self.query_dict.urlencode())
        else:
            self.query_dict.setlist(self.page_param, [self.total_page_count])
            prev = '<li><a href="?{}">下一页</a></li>'.format(self.query_dict.urlencode())
        page_str_list.append(prev)

        # 尾页
        self.query_dict.setlist(self.page_param, [self.total_page_count])
        page_str_list.append('<li><a href="?{}">尾页</a></li>'.format(self.query_dict.urlencode()))

        search_string = """
            <li>
                <form style="float: left;margin-left: -1px" method="get">
                    <input name="page"
                           style="position: relative;float:left;display: inline-block;width: 80px;border-radius: 0;"
                           type="text" class="form-control" placeholder="页码">
                    <button style="border-radius: 0" class="btn btn-default" type="submit">跳转</button>
                </form>
            </li>
            """

        page_str_list.append(search_string)
        page_string = mark_safe("".join(page_str_list))
        return page_string
```

## 使用示例:
### 后端:
```python
def admin_list(request):
    ''' 管理员 '''

    # 构造搜索
    data_dict = {}
    search_data = request.GET.get('q', "")
    if search_data:
        data_dict["username__contains"] = search_data

    # 根据搜索条件去数据库获取
    queryset = models.Admin.objects.filter(**data_dict)

    # 分页
    page_object = Pagination(request, queryset)
    context = {
        'queryset': page_object.page_queryset,
        'page_string': page_object.html(),
        'search_data': search_data
    }

    return render(request, 'admin_list.html', context)
```


### 前端:
```python
<div class="clearfix">
    <ul class="pagination">
        {{ page_string }}
    </ul>

</div>
```

Django 中的自定义分页组件(BootStrap)

Django 中的 `Form` 和 `ModelForm` 都用于处理表单，但它们有显著的区别。下面通过表格以及示例进行说明。

### 区别对比

| **特性**             | **Form**                                           | **ModelForm**                                      |
|----------------------|----------------------------------------------------|----------------------------------------------------|
| **定义方式**         | 手动定义所有字段。                                  | 自动生成字段，基于与模型（Model）的对应关系。       |
| **字段与模型的关联** | 不与数据库模型（Model）相关。                        | 直接与数据库模型相关，字段映射到模型的字段。        |
| **使用场景**         | 自定义表单，不需要与数据库模型交互的场景。             | 当需要基于数据库模型创建或更新记录时使用。          |
| **表单验证**         | 需要手动定义字段验证规则。                            | 自动继承模型中的字段验证规则，可以自定义额外规则。  |
| **表单保存**         | 需要手动编写保存逻辑。                                | 提供 `save()` 方法，直接保存到数据库。              |
| **代码量**           | 需要手动定义字段、验证和保存逻辑，代码量较多。          | 自动生成字段，代码量较少，尤其在处理复杂模型时。    |



### 示例

#### 1. `Form` 示例
`Form` 通常用于不需要直接与模型交互的场景，比如用户反馈表单。

```python
from django import forms

class ContactForm(forms.Form):
    name = forms.CharField(max_length=100)
    email = forms.EmailField()
    message = forms.CharField(widget=forms.Textarea)

    # 自定义验证规则
    def clean_name(self):
        name = self.cleaned_data.get('name')
        if 'spam' in name:
            raise forms.ValidationError('Invalid name')
        return name
```

#### 2. `ModelForm` 示例
`ModelForm` 用于基于模型生成表单，比如用户注册表单。

```python
from django import forms
from .models import UserProfile

class UserProfileForm(forms.ModelForm):
    class Meta:
        model = UserProfile  # 绑定的模型
        fields = ['username', 'email', 'bio']  # 自动生成这些字段

    # 可以自定义字段验证
    def clean_email(self):
        email = self.cleaned_data.get('email')
        if not email.endswith('@example.com'):
            raise forms.ValidationError('Please use a valid example.com email')
        return email
```

### 总结
- `Form` 用于手动定义表单，适用于任何需要自定义表单的场景。
- `ModelForm` 自动生成表单，适合需要与数据库模型交互的场景。

1. 安装一个全新的虚拟机

HTML CSS JS

标准HTML5基础模版

html标签参考手册

磁盘管理部分：

1、在vmware上给虚拟机新增一块磁盘设备

效果:

区别对比