# 在配置静态IP后我犯了一个错误，但误打误撞安按照教程改对了😅
- 错误是:
```bash
IPADDR="192.168.12.128"
NETMASK="255.255.255.0"
GATEWAY="192.168.12.1"
```
```powershell
以太网适配器 VMware Network Adapter VMnet8:

   连接特定的 DNS 后缀 . . . . . . . :
   本地链接 IPv6 地址. . . . . . . . : fe80::dd0a:4db6:b2f:870f%6
   IPv4 地址 . . . . . . . . . . . . : 192.168.12.1
   子网掩码  . . . . . . . . . . . . : 255.255.12.0
   默认网关. . . . . . . . . . . . . :
```

- VMware虚拟机的网卡IP地址和我自己配置的网关地址冲突, 所以导致无法ping通DNS服务器IP




# 使用VMware配置DNS时出现的问题
- **问题描述**:  
    配置好静态IP后, 由于没有配置DNS服务, 因此只能ping通本地电脑, 而无法ping通外网域名。

- 本机IP地址(部分):
```powershell
PS C:\Users\30372> ipconfig

Windows IP 配置

以太网适配器 vEthernet (Default Switch):

   连接特定的 DNS 后缀 . . . . . . . :
   本地链接 IPv6 地址. . . . . . . . : fe80::4f4b:fa03:5473:244%28
   IPv4 地址 . . . . . . . . . . . . : 172.21.112.1
   子网掩码  . . . . . . . . . . . . : 255.255.240.0
   默认网关. . . . . . . . . . . . . :

以太网适配器 以太网:

   连接特定的 DNS 后缀 . . . . . . . :
   本地链接 IPv6 地址. . . . . . . . : fe80::e554:5589:7d62:6a5%14
   IPv4 地址 . . . . . . . . . . . . : 192.168.0.251
   子网掩码  . . . . . . . . . . . . : 255.255.255.0
   默认网关. . . . . . . . . . . . . : 192.168.0.1

以太网适配器 以太网 3:

   连接特定的 DNS 后缀 . . . . . . . :
   本地链接 IPv6 地址. . . . . . . . : fe80::8f20:c02b:d42b:7587%12
   IPv4 地址 . . . . . . . . . . . . : 192.168.56.1
   子网掩码  . . . . . . . . . . . . : 255.255.255.0
   默认网关. . . . . . . . . . . . . :
```

```bash
[root@centos ~]# ping 192.168.56.1
PING 192.168.56.1 (192.168.56.1) 56(84) bytes of data.
64 bytes from 192.168.56.1: icmp_seq=1 ttl=128 time=0.498 ms
64 bytes from 192.168.56.1: icmp_seq=2 ttl=128 time=0.517 ms
64 bytes from 192.168.56.1: icmp_seq=3 ttl=128 time=0.673 ms
64 bytes from 192.168.56.1: icmp_seq=4 ttl=128 time=0.528 ms
^C
--- 192.168.56.1 ping statistics ---
4 packets transmitted, 4 received, 0% packet loss, time 3000ms
rtt min/avg/max/mdev = 0.498/0.554/0.673/0.069 ms
[root@centos ~]# ping www.baidu.com
ping: www.baidu.com: Name or service not known
```
- 发现可以ping通本地ip
- 由于没有配置DNS所以无法解析域名.

- 在此没有什么问题, 但此时ping DNS服务器IP地址,发现仍然无法ping通; 显示网络超时。

```bash
[root@centos ~]# ping 114.114.114.114
PING 114.114.114.114 (114.114.114.114) 56(84) bytes of data.
From 192.168.226.2 icmp_seq=1 Destination Host Unreachable
From 192.168.226.2 icmp_seq=2 Destination Host Unreachable
From 192.168.226.2 icmp_seq=3 Destination Host Unreachable
From 192.168.226.2 icmp_seq=4 Destination Host Unreachable
From 192.168.226.2 icmp_seq=5 Destination Host Unreachable
^C
--- 114.114.114.114 ping statistics ---
5 packets transmitted, 0 received, +5 errors, 100% packet loss, time 4000ms
```
- 这时出现了问题, 在IP地址、网关和子网掩码配置正确的情况下, 而且能够ping通本地主机的情况下,仍然无法ping通DNS服务器 IP地址。
 
- 在这里尝试了许多办法, 包括但不限于重新配置IP、配置DNS解析、重启虚拟机和电脑等, 都是在虚拟机系统上操作~~~

- 最后, 百度了许久才发现`如果在VMWare虚拟机中，把CentOS7修改为静态IP后，可能无法上网`
- 问题出在了VMware虚拟机上😅
- 原文链接: [Centos7配置IP地址和DNS](https://zhuanlan.zhihu.com/p/130741056)

### 本地虚拟机设置静态IP后不能上网的解决方法(部分引用教程)
- 问题描述:  
    在VMWare中安装的本地虚拟机CentOS7操作系统，动态IP地址会经常变化，设置成静态IP地址后，本地局域网可以互相访问，但CentOS7系统无法访问互联网，按以下步骤解决这个问题。

- 解决步骤:
1. 打开VMware:

2. 选择虚拟网络编辑器菜单
![image.png](/static/img/228120119fee7fc1f64bab14b55aebd3.image.webp)
 
3. 选择VMnet8这一行

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

4. 还原VMnet8的默认设置

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

5. 修改VMnet8的参数

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

- 虚拟机子网IP地址段和子网掩码由您自己来定，如果你不熟练，就按上图中的内容来设置也没有问题。

6. NAT设置

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

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

7. 保存设置

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

8. 确认虚拟机为NAT模式

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

9. 重新启动虚拟机

10. 重新配置IP
```bash
[root@centos ~]# cd /etc/sysconfig/network-scripts/
[root@centos network-scripts]# vim ifcfg-ens33
TYPE="Ethernet"
PROXY_METHOD="none"
BROWSER_ONLY="no"
BOOTPROTO="static"
DEFROUTE="yes"
IPV4_FAILURE_FATAL="no"
IPV6INIT="yes"
IPV6_AUTOCONF="yes"
IPV6_DEFROUTE="yes"
IPV6_FAILURE_FATAL="no"
IPV6_ADDR_GEN_MODE="stable-privacy"
NAME="ens33"
UUID="b766b55c-6498-4c6c-99d4-c4a1c63d3869"
DEVICE="ens33"
ONBOOT="yes"
IPADDR="192.168.226.128"
NETMASK="255.255.255.0"
GATEWAY="192.168.226.2"
```

11. 重启网络服务使修改生效
```bash
[root@centos network-scripts]# systemctl restart network
```

12. 查看当前系统网络信息
```bash
[root@centos network-scripts]# ip addr
1: lo: <LOOPBACK,UP,LOWER_UP> mtu 65536 qdisc noqueue state UNKNOWN group default qlen 1000
    link/loopback 00:00:00:00:00:00 brd 00:00:00:00:00:00
    inet 127.0.0.1/8 scope host lo
       valid_lft forever preferred_lft forever
    inet6 ::1/128 scope host
       valid_lft forever preferred_lft forever
2: ens33: <BROADCAST,MULTICAST,UP,LOWER_UP> mtu 1500 qdisc pfifo_fast state UP group default qlen 1000
    link/ether 00:0c:29:da:a6:0b brd ff:ff:ff:ff:ff:ff
    inet 192.168.226.128/24 brd 192.168.226.255 scope global noprefixroute ens33
       valid_lft forever preferred_lft forever
    inet6 fe80::2108:92a:618e:5960/64 scope link noprefixroute
       valid_lft forever preferred_lft forever
```

13. 再次尝试ping DNS服务器IP地址
```bash
[root@centos network-scripts]# ping 114.114.114.114
PING 114.114.114.114 (114.114.114.114) 56(84) bytes of data.
64 bytes from 114.114.114.114: icmp_seq=1 ttl=128 time=8.03 ms
64 bytes from 114.114.114.114: icmp_seq=2 ttl=128 time=0.781 ms
64 bytes from 114.114.114.114: icmp_seq=3 ttl=128 time=0.515 ms
64 bytes from 114.114.114.114: icmp_seq=4 ttl=128 time=0.639 ms
^C
--- 114.114.114.114 ping statistics ---
4 packets transmitted, 4 received, 0% packet loss, time 3002ms
rtt min/avg/max/mdev = 0.515/2.492/8.034/3.201 ms
```
- 发现ping通, 问题解决😀👍

**我是笨蛋**😅

VMware下CentOS_7将dhcp改为static后出现的问题

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>
```

在配置静态IP后我犯了一个错误，但误打误撞安按照教程改对了😅

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

HTML CSS JS

标准HTML5基础模版

html标签参考手册

磁盘管理部分：

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

效果: