# 1）获取到www.baidu.com 这个域名的IP地址，(方法不限，能获取到即可，不过需要说明这个域名是通过什么组件获取到IP地址的)
- 使用ping命令来获取www.baidu.com 域名的IP地址
```bash
gyc@GYC:~$ ping www.baidu.com
PING www.baidu.com (198.18.0.84) 56(84) bytes of data.
64 bytes from 198.18.0.84 (198.18.0.84): icmp_seq=1 ttl=63 time=0.894 ms
64 bytes from 198.18.0.84 (198.18.0.84): icmp_seq=2 ttl=63 time=0.203 ms
64 bytes from 198.18.0.84 (198.18.0.84): icmp_seq=3 ttl=63 time=0.199 ms
64 bytes from 198.18.0.84 (198.18.0.84): icmp_seq=4 ttl=63 time=0.199 ms
64 bytes from 198.18.0.84 (198.18.0.84): icmp_seq=5 ttl=63 time=0.161 ms
^C64 bytes from 198.18.0.84: icmp_seq=6 ttl=63 time=0.205 ms

--- www.baidu.com ping statistics ---
6 packets transmitted, 6 received, 0% packet loss, time 6131ms
rtt min/avg/max/mdev = 0.161/0.310/0.894/0.261 ms
```
www.baidu.com 域名IP地址为 198.18.0.84




# 2）使用你熟悉的工具，判断刚才获取到的IP地址是通的，http服务端口是正常的，访问https://www.baidu.com/ 的网页访问能够是正常获取到baidu返回的html页面(现阶段请使用命令行,不要用浏览器访问一下来回答我,你的虚拟机是没有浏览器的)
1. 使用ping命令来判断网络可达
```bash
gyc@GYC:~$ ping 198.18.0.84
PING 198.18.0.84 (198.18.0.84) 56(84) bytes of data.
64 bytes from 198.18.0.84: icmp_seq=1 ttl=63 time=0.387 ms
64 bytes from 198.18.0.84: icmp_seq=2 ttl=63 time=0.728 ms
64 bytes from 198.18.0.84: icmp_seq=3 ttl=63 time=0.587 ms
64 bytes from 198.18.0.84: icmp_seq=4 ttl=63 time=0.464 ms
64 bytes from 198.18.0.84: icmp_seq=5 ttl=63 time=0.348 ms
^C
--- 198.18.0.84 ping statistics ---
5 packets transmitted, 5 received, 0% packet loss, time 4181ms
rtt min/avg/max/mdev = 0.348/0.502/0.728/0.139 ms
```

2. 使用telnet检查http端口是否正常
```bash
gyc@GYC:~$ telnet 198.18.0.84 80
Trying 198.18.0.84...
Connected to 198.18.0.84.
Escape character is '^]'.
```

3. 使用curl 来获取baidu的html页面, 以此判断是否能够正常访问
```bash
gyc@GYC:~$ curl www.baidu.com -o baidu.html
  % Total    % Received % Xferd  Average Speed   Time    Time     Time  Current
                                 Dload  Upload   Total   Spent    Left  Speed
100  2381  100  2381    0     0  19046      0 --:--:-- --:--:-- --:--:-- 19201
gyc@GYC:~$ ls
Algorithm  baidu.html
# 显示的为格式化过的HTMl
gyc@GYC:~$ cat baidu.html
<!DOCTYPE html>

<html>
<head>
    <meta http-equiv=content-type content=text/html;charset=utf-8>
    <meta http-equiv=X-UA-Compatible content=IE=Edge>
    <meta content=always name=referrer>
    <link rel=stylesheet type=text/css href=http://s1.bdstatic.com/r/www/cache/bdorz/baidu.min.css>
    <title>百度一下，你就知道</title></head>
<body link=#0000cc>
<div id=wrapper>
    <div id=head>
        <div class=head_wrapper>
            <div class=s_form>
                <div class=s_form_wrapper>
                    <div id=lg><img hidefocus=true src=//www.baidu.com/img/bd_logo1.png width=270 height=129></div>
                    <form id=form name=f action=//www.baidu.com/s class=fm><input type=hidden name=bdorz_come value=1>
                        <input type=hidden name=ie value=utf-8> <input type=hidden name=f value=8> <input type=hidden
                                                                                                          name=rsv_bp
                                                                                                          value=1>
                        <input type=hidden name=rsv_idx value=1> <input type=hidden name=tn value=baidu><span
                                class="bg s_ipt_wr"><input id=kw name=wd class=s_ipt value maxlength=255
                                                           autocomplete=off autofocus></span><span
                                class="bg s_btn_wr"><input type=submit id=su value=百度一下 class="bg s_btn"></span>
                    </form>
                </div>
            </div>
            <div id=u1><a href=http://news.baidu.com name=tj_trnews class=mnav>新闻</a> <a href=http://www.hao123.com
                                                                                           name=tj_trhao123 class=mnav>hao123</a>
                <a href=http://map.baidu.com name=tj_trmap class=mnav>地图</a> <a href=http://v.baidu.com
                                                                                  name=tj_trvideo class=mnav>视频</a> <a
                        href=http://tieba.baidu.com name=tj_trtieba class=mnav>贴吧</a>
                <noscript><a
                        href=http://www.baidu.com/bdorz/login.gif?login&amp;tpl=mn&amp;u=http%3A%2F%2Fwww.baidu.com%2f%3fbdorz_come%3d1
                        name=tj_login class=lb>登录</a></noscript>
                <script>document.write('<a href="http://www.baidu.com/bdorz/login.gif?login&tpl=mn&u=' + encodeURIComponent(window.location.href + (window.location.search === "" ? "?" : "&") + "bdorz_come=1") + '" name="tj_login" class="lb">登录</a>');</script>
                <a href=//www.baidu.com/more/ name=tj_briicon class=bri style="display: block;">更多产品</a></div>
        </div>
    </div>
    <div id=ftCon>
        <div id=ftConw><p id=lh><a href=http://home.baidu.com>关于百度</a> <a href=http://ir.baidu.com>About Baidu</a>
        </p>
            <p id=cp>&copy;2017&nbsp;Baidu&nbsp;<a href=http://www.baidu.com/duty/>使用百 度前必读</a>&nbsp; <a
                    href=http://jianyi.baidu.com/ class=cp-feedback>意见反馈</a>&nbsp;京ICP证030173号&nbsp; <img
                    src=//www.baidu.com/img/gs.gif></p></div>
    </div>
</div>
</body>
</html>
```

# 3）请说明从你的那台虚拟机，访问到www.baidu.com，并获拿到那个html内容，如下或者请使用HTTP状态码判断（成功或者失败的状态码，在讲义应用层部分），这里边都经历了哪些过程。

1. DNS解析, 像DNS服务器发起请求, 找到www.baidu.com 域名的IP地址（198.18.0.84）.
2. 建立TCP连接，虚拟机与 198.18.0.84 建立一个 TCP 连接，使用三次握手（SYN、SYN-ACK、ACK）来确保连接的建立.
3. 发送 HTTP 请求, TCP 连接建立成功后，虚拟机会向 Baidu 服务器发送一个 HTTP GET 请求，以请求获取 www.baidu.com 的 HTML 内容。
4. 服务器处理请求
    - Baidu 服务器接收到 GET 请求后，会处理请求并生成相应的 HTML 页面内容。
    - 服务器返回 HTTP 响应，其中包含状态码、响应头和 HTML 内容。
5. 接收 HTTP 响应, 使用curl将响应接受到的html页面保存到虚拟机中并使用cat命令查看

# 常见的HTTP状态码
## 一、状态码大类

| 状态码分类 | 说明                                                         |
| ---------- | ------------------------------------------------------------ |
| 1xx        | **响应中**——临时状态码，表示请求已经接受，告诉客户端应该继续请求或者如果它已经完成则忽略它 |
| 2xx        | **成功**——表示请求已经被成功接收，处理已完成                 |
| 3xx        | **重定向**——重定向到其它地方：它让客户端再发起一个请求以完成整个处理。 |
| 4xx        | **客户端错误**——处理发生错误，责任在客户端，如：客户端的请求一个不存在的资源，客户端未被授权，禁止访问等 |
| 5xx        | **服务器端错误**——处理发生错误，责任在服务端，如：服务端抛出异常，路由出错，HTTP版本不支持等 |





## 二、常见的响应状态码

| 状态码  | 英文描述                               | 解释                                                         |
| ------- | -------------------------------------- | ------------------------------------------------------------ |
| ==200== | **`OK`**                               | 客户端请求成功，即**处理成功**，这是我们最想看到的状态码     |
| 302     | **`Found`**                            | 指示所请求的资源已移动到由`Location`响应头给定的 URL，浏览器会自动重新访问到这个页面 |
| 304     | **`Not Modified`**                     | 告诉客户端，你请求的资源至上次取得后，服务端并未更改，你直接用你本地缓存吧。隐式重定向 |
| 400     | **`Bad Request`**                      | 客户端请求有**语法错误**，不能被服务器所理解                 |
| 403     | **`Forbidden`**                        | 服务器收到请求，但是**拒绝提供服务**，比如：没有权限访问相关资源 |
| ==404== | **`Not Found`**                        | **请求资源不存在**，一般是URL输入有误，或者网站资源被删除了  |
| 405     | **`Method Not Allowed`**               | 请求方式有误，比如应该用GET请求方式的资源，用了POST          |
| 428     | **`Precondition Required`**            | **服务器要求有条件的请求**，告诉客户端要想访问该资源，必须携带特定的请求头 |
| 429     | **`Too Many Requests`**                | 指示用户在给定时间内发送了**太多请求**（“限速”），配合 Retry-After(多长时间后可以请求)响应头一起使用 |
| 431     | **` Request Header Fields Too Large`** | **请求头太大**，服务器不愿意处理请求，因为它的头部字段太大。请求可以在减少请求头域的大小后重新提交。 |
| ==500== | **`Internal Server Error`**            | **服务器发生不可预期的错误**。服务器出异常了，赶紧看日志去吧 |
| 503     | **`Service Unavailable`**              | **服务器尚未准备好处理请求**，服务器刚刚启动，还未初始化好   |

# 拓展
可以使用`curl -I [URL]`命令查看 HTTP响应头信息, 以此来查看是否可以成功请求http响应
```bash
gyc@GYC:~$ curl -I www.baidu.com
HTTP/1.1 200 OK
Accept-Ranges: bytes
Cache-Control: private, no-cache, no-store, proxy-revalidate, no-transform
Connection: keep-alive
Content-Length: 277
Content-Type: text/html
Date: Fri, 17 May 2024 04:52:30 GMT
Etag: "575e1f71-115"
Last-Modified: Mon, 13 Jun 2016 02:50:25 GMT
Pragma: no-cache
Server: bfe/1.0.8.18
```
- `HTTP/1.1 200 OK`：状态码表明请求成功。
- `Accept-Ranges: bytes`：服务器支持按字节范围请求。
- `Cache-Control: private, no-cache, no-store, proxy-revalidate, no-transform`：控制缓存行为的指令。
- `Connection: keep-alive`：表示客户端和服务器之间的连接持久保持。
- `Content-Length: 277`：返回内容的长度为 277 字节。
- `Content-Type: text/html`：返回内容的类型为 HTML。
- `Date: Fri, 17 May 2024 04:52:30 GMT`：响应的日期时间。
- `Etag: "575e1f71-115"`：用于标识资源版本的标记。
- `Last-Modified: Mon, 13 Jun 2016 02:50:25 GMT`：资源的最后修改时间。
- `Pragma: no-cache`：控制缓存行为的指令。
- `Server: bfe/1.0.8.18`：服务器软件信息。

Linux练习小结_04

## 比较 `rsync` 和 `rm` 在大量文件删除中的效率

在处理大量文件的删除操作时，经常面临性能挑战。尽管 `rm` 命令在 Linux 系统中非常常见，但 `rsync` 也可以在特定情况下提供更高效的删除操作。



### `rm` 命令的工作原理

`rm` 命令用于从文件系统中删除文件或目录。每当 `rm` 删除一个文件或目录时，它都需要执行以下操作：

1. **文件系统调用**：每个文件或目录的删除都需要进行文件系统调用。这包括修改目录项、更新文件系统的元数据等。
2. **元数据更新**：文件系统中的每个条目在删除时都要更新其元数据，这可能涉及到目录结构的更改。
3. **I/O 开销**：对于大量小文件，`rm` 需要逐个处理，每个操作都涉及到对磁盘的 I/O 访问，这导致删除过程变得非常缓慢。

这种逐个处理的方式使得 `rm` 在删除大量文件时效率较低，特别是在文件数量极其庞大的情况下。

### `rsync` 命令的工作原理

`rsync` 是一个广泛用于文件同步的工具，但它也可以用来高效地删除文件。其工作原理与 `rm` 有显著不同：

1. **空目录替换**：`rsync` 可以将目标目录与一个空目录进行同步。这个过程实际上是通过将目标目录替换为一个新的空目录来实现删除操作。
2. **批量操作**：`rsync` 在执行删除操作时，首先在内存中构建一个需要删除的文件列表，然后一次性执行删除操作，这大大减少了对文件系统的访问次数。
3. **优化的文件系统操作**：由于 `rsync` 批量处理删除请求，它可以减少对文件系统的频繁调用，从而提高效率。

### 为什么 `rsync` 删除速度更快？

1. **减少文件系统调用**：`rsync` 将删除操作批量处理，减少了对文件系统的调用次数，这比逐个删除的 `rm` 更高效。
2. **优化的 I/O 操作**：通过减少 I/O 操作次数，`rsync` 能够更快地完成大量文件的删除任务。
3. **批量处理**：`rsync` 能够在内存中批量处理文件删除任务，减少了实际的磁盘 I/O 开销。

### 实践中的应用

要使用 `rsync` 高效地删除文件，可以利用 `rsync` 的 `--delete` 选项。例如，以下命令将目标目录 `/path/to/target/` 与一个空目录进行同步，从而删除目标目录中所有不在源目录中的文件：

```sh
rsync --delete -av /empty/dir/ /path/to/target/
```

通过这种方式，`rsync` 可以更快速地处理大量文件的删除操作，尤其是在删除整个目录时。

### 总结

在删除大量文件时，`rsync` 的效率通常高于 `rm`。这主要归功于 `rsync` 的批量处理和优化的文件系统操作，而 `rm` 由于逐个处理文件和频繁的文件系统调用，可能会导致性能瓶颈。了解这些差异可以帮助系统管理员和开发人员选择最适合他们需求的工具，从而优化文件管理任务的效率。

比较 rsync 和 rm 在大量文件删除中的效率

# 在配置静态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)

1）获取到www.baidu.com 这个域名的IP地址，(方法不限，能获取到即可，不过需要说明这个域名是通过什么组件获取到IP地址的)

比较 rsync 和 rm 在大量文件删除中的效率

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

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

HTML CSS JS

标准HTML5基础模版

html标签参考手册

比较 `rsync` 和 `rm` 在大量文件删除中的效率