boxmoe_header_banner_img

⋅無⋅限⋅進⋅步⋅

加载中

POST
文章导读
前置知识

HTML基础（一）

avatar
yuhui 2025年10月24日 31
0 评论

HTML基础（一）

网页基本结构

1742967939681-f714b556-fd65-4bb5-aed5-d2e32d4cb0ae.png

`<!DOCTYPE html>







`

HTML常见标签

``元素可提供有关页面的元信息（meta-information），比如针对搜索引擎和更新频度的描述和关键词，有利于网站seo

meta name=”keywords” content=”网络安全，WEB渗透，数据安全，渗透厕所，安全培训“/>

# ``元素
`` 元素在 HTML 中用于提供关于文档的元数据，比如字符集声明、页面描述、关键词等。这些信息虽然不直接显示给用户，但对搜索引擎优化（SEO）、浏览器如何展示内容以及网页的其他方面有着重要作用。下面是一些常见的 `` 标签用法：

1. **定义字符编码**：

“`html

“`

这是告诉浏览器该文档使用的字符编码格式为 UTF-8，这是最常用的一种编码方式。

2. **设置视口（主要用于移动设备）**：

“`html

“`

使得网站能够响应式地适应不同尺寸的屏幕。`width=device-width` 表示宽度等于设备的实际宽度；`initial-scale=1.0` 设置初始缩放比例为 1。

3. **添加页面描述**：

“`html

“`

有助于提高搜索引擎排名，同时当你的链接被分享到社交媒体时，这段描述也会作为预览文本出现。

4. **指定关键词**：

“`html

“`

虽然现在搜索引擎不再主要依赖这个标签来进行索引了，但在某些情况下它仍然有用。

5. **控制缓存行为**：

“`html



“`

通过设置 HTTP headers 来指示浏览器不要缓存当前页面。

6. **防止从 iframe 加载页面**：

“`html

“`

增强安全性，防止点击劫持攻击。

7. **定义刷新时间或重定向**：

“`html

“`

页面将在 30 秒后自动跳转至指定 URL。不过这种方法通常不推荐使用，因为不利于用户体验和 SEO。

8. **Open Graph 协议** (用于 Facebook 等社交平台分享)：

“`html




“`

定义了当网页被分享到支持 Open Graph 的平台上时所使用的标题、描述和图片等信息。

9. **Twitter Card** (优化推特上的分享预览)：

“`html





“`

类似于 Open Graph，但专门为 Twitter 设计以优化分享卡片外观。
以上就是一些常用的 `` 标签的例子。根据具体需求，你还可以探索更多种类的 `` 标签来进一步定制你的网页。

# ``标签
``标签是HTML中的一个非常重要的元素，主要用于定义当前文档与外部资源之间的关系。它通常位于文档的``部分，不会在页面上直接显示任何内容，但对页面的加载、样式或功能有重要影响。以下是``标签的一些主要用途及属性说明：

### 1. 引入CSS样式表
这是``标签最常见的用法之一，用来链接外部的CSS文件到HTML文档中。

“`html “`

+ `rel` 属性指定了链接类型，在这里值为 `”stylesheet”` 表示这是一个样式表。
+ `href` 属性提供了所引用资源的位置。

### 2. 定义图标
可以用来指定网站的favicon（浏览器标签页上的小图标）。

“`html “`

### 3. 指定预加载资源
通过设置`rel`属性为`preload`来提前加载关键资源，以优化性能。

“`html “`

### 4. 链接其他文档
比如用于RSS订阅、下一章/前一章导航等。

“`html
“`

### 5. 支持SEO和社交媒体分享
通过添加特定的``标签，可以帮助搜索引擎更好地理解你的网页内容，并优化社交平台上的共享展示效果。

“`html












“`

注意：虽然这些元数据不是直接使用``标签定义的，但是它们与``标签一起工作来增强网页的表现形式。

### 常见属性
+ **rel**：定义了链接的目标对象与当前文档的关系。
+ **href**：指定被链接资源的位置。
+ **type**：指示资源的MIME类型。
+ **media**：定义了应用该样式的媒体类型或条件。
+ **sizes**：当`rel`为`icon`时使用，指定图标的尺寸。
+ **as**：配合`preload`使用，告知浏览器应该怎样处理即将加载的内容。
通过合理地利用``标签及其属性，开发者能够有效地管理和控制网页对外部资源的引用，从而提高网站性能、用户体验以及SEO友好度。

# `




```

### 放置在``底部
更常见的方式是把`

```

### 使用async或defer属性
对于外部脚本，还可以通过设置`async`或`defer`属性来改变其加载行为：

+ `async`：脚本异步加载，一旦加载完成就会立即执行，不保证按照文档中的顺序执行。
+ `defer`：脚本延迟执行，直到整个文档被解析后才会运行，并且会按照它们出现的顺序依次执行。

```html


```

选择哪种方法取决于你的具体需求以及对性能的考虑。如果脚本之间有依赖关系（比如后面定义的函数需要前面定义的变量），那么使用`defer`可能是更好的选择；如果没有这种依赖性，使用`async`可以更快地加载资源。

# ``注释标签
看起来像是HTML中的注释开始标签的一部分。在HTML中，完整的注释标签格式是这样的：

```html

```

+ `` 用来标记注释的结束。

# `

`标签
是HTML（超时文本标记语言）中用于定义段落的一个基本元素。当你在网页上看到一段文字被单独分隔出来，通常这段文字就是用`

`标签包裹起来的。它的基本用法如下：

```html

这是一个段落。

```

+ `

` 开始标签标志着一个新段落的开始。
+ `

` 结束标签表示这个段落的结束。
+ 在这两个标签之间的任何内容都将被视为该段落的一部分，并且浏览器会自动在这个段落前后添加一些空白区域来与其他内容区分开来，从而提高文档的可读性。
此外，还可以通过CSS（层叠样式表）给`

`标签设置样式，比如改变字体颜色、大小等，以增强视觉效果或满足设计需求。例如：

```css
p {
color: blue; /* 改变文字颜色为蓝色 */
font-size: 16px; /* 设置字体大小为16像素 */
}
```

这样的CSS规则可以放在HTML文档的`


章节标题

这是第一节的内容。

这里是第二节的内容。


```

在这个例子中，我们首先清除了默认的边框样式，然后设置了高度和背景颜色，并且应用了一个从左到右的颜色渐变效果给水平线。

### 注意事项
+ 当使用 `

` 时，请确保它是出于语义目的而不仅仅是装饰性的，这样可以帮助屏幕阅读器用户更好地理解页面结构。
+ 对于复杂的布局需求或者需要高度定制化的分割线，建议直接使用 CSS 或者其他 HTML 元素配合 CSS 来实现，而不是仅仅依赖于 `

` 标签。
希望这些信息对你有所帮助！如果你有更多关于 HTML 或 Web 开发的问题，欢迎继续提问。

# `文本属性`标签
在HTML中，文本属性标签用于控制文本的显示样式，包括字体加粗、斜体、下划线等。这里是一些常用的HTML文本属性标签以及它们的作用简介：

1. `` 和 ``：这两个标签都可以使文本加粗显示。其中，``还额外赋予了语义上的强调意义，表明这部分内容是重要的或紧急的。
2. `` 和 ``：两者均能使文本呈现为斜体。<`em>`同样具备语义强调的功能，意味着这段文字需要被特别关注或以特定情感来理解。
3. ``：此标签会在文本下方添加一条直线（即下划线）。虽然历史上曾广泛用于表示链接，但现代网页设计更倾向于通过CSS实现相同效果，并保留``作为非链接用途下的下划线标记。
4. ``：给选中的文本加上删除线，常用来表示信息已失效或不再适用。
5. `` 和 ``：分别用于创建下标和上标文本，适用于科学公式或脚注等场景。
6. ``：减小指定区域内文本的尺寸，常见于版权说明或法律条款的小字部分。
7. ``：高亮显示文本，类似于用荧光笔标注文档内的重要部分。
8. ``：定义代码片段。浏览器通常会采用等宽字体展示这些内容，适合于编程代码示例等场合。
9. `

`：预格式化文本标签，保持原始文本内的空格与换行符不变，非常适合展示程序代码或其他对格式敏感的信息。

10. `` 和 `


`：用来引用其他来源的文字。<`q>`适用于短引文，而`


`则更适合长篇引用，通常还会自动缩进显示。

记得，在当前最佳实践中，很多原本依靠特定HTML标签实现的效果现在推荐使用CSS来进行设置，这样不仅可以提高网站布局的灵活性，还能增强代码的可维护性。例如，应避免直接使用``标签来改变颜色或大小，而是通过定义CSS类达到目的。此外，像``, `
`这样的旧式标签已被视为过时，建议改用CSS替代其功能。


![1743010100746-ee14c6b5-7f52-4f68-93b8-3bfd708b2b30.png](https://cdn.picui.cn/vip/2025/10/24/68faea7fafc1b.png)


![1743010121350-141b0c0b-76ab-4fe5-a747-5257550979eb.png](https://cdn.picui.cn/vip/2025/10/24/68faea824eacd.png)


# `


` 标签

+ **用途**：`

`标签定义了一个表单，它是一个容器，用来包裹各种表单控件（如文本框、按钮等），使得这些控件能够作为一个整体被提交给服务器。

+ **属性**：

    - `action`：指定接收并处理表单数据的服务器端脚本或页面URL。

    - `method`：定义发送表单数据时使用的HTTP方法，常用值为`GET`（将数据附加到URL）和`POST`（将数据放在请求体中）。

    - `enctype`：当使用`POST`方法时，此属性定义了编码类型。默认值为`application/x-www-form-urlencoded`，但如果是文件上传，则应设置为`multipart/form-data`。

    - `target`：指定在哪里显示响应，例如新窗口(`_blank`)、当前窗口(`_self`)等。

    - `autocomplete`：开启或关闭表单字段自动完成功能。

    - `novalidate`：若设置该属性，则浏览器不会验证表单输入是否合法。


示例：


```html


  




```


GET方式就是在浏览器上显示出来，POST是不会在浏览器显示出来的


# `` 标签

+ **用途**：``标签是最常用的表单控件之一，用于创建多种类型的输入字段，如文本框、密码框、复选框等。

+ **主要属性**：

    - `type`：定义输入域的类型，如`text选择框`、`password密码框`、`checkbox`、`radio多选框`、`submit提交框`、`file文件上传`、`reset重置`、`hidden隐藏域`等。

    - `name`：定义与表单数据一起发送到服务器的数据名称。

    - `value`：设置输入元素的初始值。

    - `placeholder`：提供简短提示，描述输入字段期望的信息。

    - `required`：指示用户必须填写某个字段才能提交表单。

    - `disabled`：禁用输入字段。

    - `readonly`：使输入字段只读。

    - `size` 和 `maxlength`：分别控制输入框的可见宽度和最大字符数。

    - `textarea`：文本域


示例：


```html







```


在HTML中，`` 标签

`


```


+ **属性**:

    - `name`: 指定选择框的名称。

    - `size`: 定义可见选项的数量（默认为1）。

    - `multiple`: 允许用户从列表中选择多个选项。

    - `disabled`: 禁用整个选择框。

    - `required`: 表单提交前必须选择一个选项。


# `` 标签

`` 标签定义了一个超链接，用来从一个页面跳转到另一个页面或文件。


+ **基本语法**:


```html

Link Text


```


+ **属性**:

    - `href`: 必需，指定链接的目标 URL。

    - `target`: 指定在哪里打开链接文档。例如，`_blank` 在新窗口/标签页打开链接。

    - `title`: 提供关于链接的信息，当鼠标悬停时显示提示文本。

    - `download`: 设置此属性后，浏览器会下载链接资源而不是导航到它。


# `` 标签

`` 标签用于嵌入图像。它是空元素，不需要闭合标签。


+ **基本语法**:


```html

Description of image

```


+ **属性**:

    - `src`: 必需，指定图像文件的路径。

    - `alt`: 图像无法显示时的替代文本。

    - `width` 和 `height`: 分别设置图像的宽度和高度。

    - `title`: 鼠标悬停时显示的额外信息。


# `


` 标签

`


` 标签用于创建表格。它通常与其他几个标签如 `
`, `
`: 定义表格中的行。

    - `
`, `
`, `
`: 分别定义表格头部、主体和脚部区域。

+ **属性**:

    - `border`: 设置边框宽度。

    - `cellpadding` 和 `cellspacing`: 控制单元格内容与其边框之间的空间以及相邻单元格边框间的距离。

    - `width` 和 `height`: 设定表格的整体尺寸。
HTML中的`
    `标签用于创建无序列表，而`
    

  • `标签则定义了列表中的每个项目。无序列表通常用点、圆圈或其他标记来表示列表项。下面我将更详细地介绍这两个标签及其使用方法。

    # `
    

      ` 标签
      
+ **用途**：用来定义一个无序（非排序）的项目列表。
      
+ **属性**：
      
    - `type`：设置列表项标志类型，可以是`disc`（实心圆）、`circle`（空心圆）或`square`（方形）。不过，推荐通过CSS样式来控制这些效果，因为这更加灵活且符合现代网页设计标准。
      
    - `compact`：使列表呈现得更加紧凑。但此属性在HTML5中已被废弃，建议使用CSS来调整间距。
      

      # `
      

    • ` 标签
      
+ **用途**：用来定义列表中的一个项目。
      
+ **嵌套**：可以在一个`
      

    • `元素内放置另一个`

        `或`
        

          `（有序列表）来创建子列表。
          
+ **属性**：
          
    - `value`：对于有序列表`
          

            `中的`
            

          1. `元素有效，指定该列表项的起始值。对`

              `无效。
              
    - `type`：同样适用于有序列表内的`
              

            • `，设置单个列表项的标志样式。不建议在无序列表中使用。

              ### 示例代码
              
#### 基本示例
              
```html
              

                

              • 苹果
                • 

              • 香蕉

                  

                • 黄香蕉
                  • 

                • 绿香蕉
                  • 

                

                • 

              • 樱桃
                • 

              

              ```
              

              这段代码显示了一个包含三个主项目的无序列表，其中“香蕉”项下还有一个二级子列表。
              

              #### 自定义样式
              
若想改变默认的列表项符号，可以通过CSS进行设置。例如：
              

              ```css
              
/* 将所有无序列表项的符号改为方块 */
              
ul {
              
  list-style-type: square;
              
}
              
/* 为特定类别的列表应用不同的样式 */
              
.custom-list {
              
  list-style-type: disc; /* 实心圆 */
              
  color: blue;          /* 文字颜色 */
              
}
              
```
              

              结合上述CSS与HTML如下所示：
              

              ```html
              

                

              • 苹果
                • 

              • 香蕉
                • 

              • 樱桃
                • 

              

              ```
              

              # `frameset`框架
              
HTML中的框架（Frames）是一种允许网页被分割成多个独立区域的技术，每个区域可以显示不同的网页。这种技术在早期的Web设计中非常流行，因为它可以让用户在一个浏览器窗口内同时查看多个文档。不过，随着更现代和灵活的布局技术的发展，比如CSS Flexbox、Grid以及JavaScript等，使用框架的情况已经大大减少了。
              

              ### 框架的基本组成
              
1. ** 标签**：定义了如何将浏览器窗口分割为多个部分。
              
2. ** 标签**：用于定义每个框架内的内容。
              
3. ** 标签**：当浏览器不支持框架时，提供给用户的替代内容。
              
4. frameset不能在body中使用
              
5. frame一般在frameset中使用
              
6. cols定义框架集中列的数目和尺寸
              
7. rows定义框架集中行的数目和尺寸
              
8. scrolling滚动条
              
9. auto 这需要的情况下出现滚动条（Default）
              
10. yes 始终显示滚动条（即便不需要）
              
11. no 从不显示滚动条（即便需要）
              

              ### 示例代码
              
以下是一个简单的例子，展示了如何创建一个包含两个垂直排列框架的页面：
              

              ```html
              

              

              

              
    框架示例
              

              

              
  
              
  
              
  <br />
    <body></p>
<p>您的浏览器不支持框架。</p>
<p>    </body><br />
  
              

              

              

              ```
              

              在这个例子中：
              

              + `rows="50%,50%"` 将浏览器窗口分为上下两半。
              
+ 第一个 `` 显示 `page1.html` 的内容。
              
+ 第二个 `` 显示 `page2.html` 的内容。
              
+ 如果浏览器不支持框架，则会显示 `` 内部的内容。</p>
<p>### 使用框架的注意事项<br />
+ **SEO问题**：搜索引擎爬虫可能难以正确索引通过框架加载的内容。<br />
+ **用户体验**：框架可能会导致导航困难，并且不是所有设备或屏幕尺寸都能很好地适应。<br />
+ **安全性**：某些情况下，使用框架可能导致安全风险，如点击劫持等问题。<br />
由于这些原因，目前推荐使用更现代化的方法来实现类似的功能，例如使用CSS布局技术和响应式设计。对于需要动态加载内容的情况，可以考虑使用AJAX或者单页应用(SPA)技术。</p>
<p>> 更新: 2025-03-27 10:28:00<br />
> 原文: <https://www.yuque.com/yuhui.net/network/nkchvwhg4ormx4yk></p>
<div class="post-views content-post post-798 entry-meta load-static">
				<span class="post-views-icon dashicons dashicons-chart-bar"></span> <span class="post-views-label">Post Views:</span> <span class="post-views-count">32</span>
			</div>                    </div>

                      <div class="single-tags mt-7">
                      <a target="_blank" title="字体有1个相关" href="https://www.youvii.site/index.php/archives/tag/%e5%ad%97%e4%bd%93" class="tag-cloud"><i class="tagfa fa fa-dot-circle-o"></i>字体</a> <a target="_blank" title="java有1个相关" href="https://www.youvii.site/index.php/archives/tag/java" class="tag-cloud"><i class="tagfa fa fa-dot-circle-o"></i>java</a> <a target="_blank" title="密码有1个相关" href="https://www.youvii.site/index.php/archives/tag/%e5%af%86%e7%a0%81" class="tag-cloud"><i class="tagfa fa fa-dot-circle-o"></i>密码</a> <a target="_blank" title="网络安全有1个相关" href="https://www.youvii.site/index.php/archives/tag/wangluoanquan" class="tag-cloud"><i class="tagfa fa fa-dot-circle-o"></i>网络安全</a> <a target="_blank" title="BFD有1个相关" href="https://www.youvii.site/index.php/archives/tag/bfd" class="tag-cloud"><i class="tagfa fa fa-dot-circle-o"></i>BFD</a>                       
                      </div>
                      <div class="post-actions mt-4">
                                                  <button class="action-btn like-btn" title="点赞" data-post-id="798">
                              <i class="fa fa-thumbs-up"></i>
                              <span class="like-count">0</span>
                          </button>
                                                                                                    </div>
                                            <hr class="horizontal dark">
                      <div class="post-next-previous">
                        <nav class="post-navigation thw-sept">
                          <div class="row no-gutters">
                            <div class="col-12 col-md-6">
                              <div class="post-previous">
                                                                  <a href="https://www.youvii.site/index.php/archives/htmljichuer" rel="prev">
                                    <span><i class="fa fa-angle-left"></i>上一篇</span>
                                    <h4 class="post-title-ellipsis">HTML基础（二）</h4>
                                  </a>
                                                              </div>
                            </div>
                            <div class="col-12 col-md-6">
                              <div class="post-next">
                                                                  <a href="https://www.youvii.site/index.php/archives/dtdjichu" rel="next">
                                    <span>下一篇<i class="fa fa-angle-right"></i></span>
                                    <h4 class="post-title-ellipsis">DTD基础</h4>
                                  </a>
                                
                              </div>
                            </div>
                          </div>
                        </nav>
                      </div>
                      <hr class="horizontal dark">
                </div>
                                                <div class="post-comments" id="comments-container">
                                        <h2>评论（0）</h2>
                                                            <div class="comments-toggle">
                        <i class="fa fa-chevron-down"></i>
                        <span>查看评论列表</span>
                    </div>
                    <div class="comments-list">
                        <div class="comment-item"><div class="comment-content"><div class="comment-text"><p>暂无评论</p></div></div></div>                    </div>
                    <hr class="horizontal dark">
                                        <div id="respond" class="comment-respond">
                        <div class="comment-new" style="display: none;">
                            <div class="new-content comment-level-1"></div>
                        </div>
                        <div class="comment-message">
                            <div class="message-content"></div>
                        </div>                                   
                        <h3 id="reply-title" class="comment-reply-title">
                            发表评论
                            <small><a rel="nofollow" id="cancel-comment-reply-link" href="#respond" style="display:none;">取消回复</a></small>
                        </h3>             
                        <form action="https://www.youvii.site/wp-comments-post.php" method="post" id="commentform" class="comment-form">
                            <input type="hidden" id="comment_nonce_field" name="comment_nonce_field" value="7e431db197" /><input type="hidden" name="_wp_http_referer" value="/index.php/archives/htmljichuyi" />                            <input type='hidden' name='comment_post_ID' value='798' id='comment_post_ID' />
<input type='hidden' name='comment_parent' id='comment_parent' value='0' />
                            <div class="comment-user-info">
                            <div class="user-info-ck">
                                                                                                            <div class="user-meta">
                                        <img loading="lazy" decoding="async" src="https://cravatar.cn/avatar/d41d8cd98f00b204e9800998ecf8427e" class="avatar" alt="avatar" />                                        <div class="user-info">
                                            <span class="user-name">访客</span>
                                            <span class="user-email">未填写邮箱</span>
                                        </div>
                                        <div class="user-start">
                                           [填写昵称邮箱后可以评论] 
                                        </div>
                                    </div>    
                                                                                                                                                <button type="button" class="switch-account-btn">
                                        <i class="fa fa-refresh"></i>
                                        输入信息                                    </button>
                                                                                                        </div>
                                                                                                <div class="guest-inputs" >                                   
                                    <div class="input-group">
                                        <span class="input-group-text" id="author"><i class="fa fa-user"></i></span>
                                        <input id="author" class="form-control" name="author" type="text" tabindex="1" 
                                            value="" 
                                            placeholder="昵称 *">
                                    </div>
                                    <div class="input-group">
                                        <span class="input-group-text" id="email"><i class="fa fa-envelope"></i></span>
                                        <input id="email" class="form-control" name="email" type="email" tabindex="2" 
                                            value="" 
                                            placeholder="邮箱 *">
                                    </div>
                                    <div class="input-group">
                                        <span class="input-group-text" id="url"><i class="fa fa-link"></i></span>
                                        <input id="url" class="form-control" name="url" type="url" tabindex="3" 
                                            value="" 
                                            placeholder="网址(选填)">
                                    </div>
                                </div>
                                                                                            </div>
                                                        <div class="comment-form-comment">
                                <textarea id="comment" name="comment" tabindex="4" placeholder="写下您的评论..." rows="4" required></textarea>                                
                                <div class="comment-toolbar">
                                    <div class="toolbar-left">
                                        <button type="button" class="toolbar-btn emoji-btn" title="插入表情">
                                            <i class="fa fa-smile-o"></i>
                                        </button>
                                        <div class="emoji-panel">
                                            <div class="emoji-tabs">
                                                <span data-tab="emoji" class="active">表情</span>
                                                <span data-tab="custom">颜文字</span>
                                            </div>
                                            <div class="emoji-content"></div>
                                        </div>
                                        <button type="button" class="toolbar-btn code-btn" title="插入代码">
                                            <i class="fa fa-code"></i>
                                        </button>
                                    </div>
                                    <div class="toolbar-right">
                                        <label class="private-comment">
                                            <input class="form-check-input" type="checkbox" name="private_comment" id="private_comment">
                                            <label class="form-check-label" for="private_comment">仅作者可见</label>
                                        </label>
                                        <div class="form-submit">
                                             <p style="display: none;"><input type="hidden" id="akismet_comment_nonce" name="akismet_comment_nonce" value="45218aa725" /></p><p style="display: none !important;" class="akismet-fields-container" data-prefix="ak_"><label>&#916;<textarea name="ak_hp_textarea" cols="45" rows="8" maxlength="100"></textarea></label><input type="hidden" id="ak_js_1" name="ak_js" value="17"/><script>document.getElementById( "ak_js_1" ).setAttribute( "value", ( new Date() ).getTime() );</script></p>                                            <button type="submit" name="submit" type="submit" id="submit" tabindex="5" class="submit-btn">
                                                <i class="fa fa-paper-plane"></i> 发表评论
                                            </button>
                                        </div>
                                    </div>
                                </div>
                                <div class="code-panel">
                                    <div class="code-header">
                                        <h5>插入代码</h5>
                                        <button type="button" class="close-btn">&times;</button>
                                    </div>
                                    <div class="code-body">
                                        <textarea class="code-input form-control" rows="6" placeholder="输入代码..."></textarea>
                                    </div>
                                    <div class="code-footer">
                                        <button type="button" class="insert-code-btn btn btn-primary btn-sm">插入</button>
                                    </div>
                                </div>
                            </div>
                                                      
                        </form>  
                    </div>
                                    </div>



            </div>
        </div>
    <div class="col-lg-4 blog-sidebar">
          <div class="position-sticky top">
            <div class="offcanvas-lg offcanvas-end" id="blog-sidebar" tabindex="-1" aria-labelledby="blog-sidebar">
              <div class="offcanvas-header">
                <h5 class="offcanvas-title h4" id="blog-sidebar">
                <img loading="lazy" decoding="async" class="logo" src="https://www.youvii.site/wp-content/uploads/2025/11/logo.webp" alt="徽记"></h5>
                <button type="button" class="btn-close" data-bs-dismiss="offcanvas" data-bs-target="#blog-sidebar"></button>
              </div>
              <div class="offcanvas-body flex-column">
              <div class="widget blog-lines widget-search"><h4 class="widget-title">搜索</h4>        <div class="widget-content">
            <form role="search" method="get" class="search-form" action="https://www.youvii.site/">
                <div class="search-wrap">
                    <input type="search" class="search-input" placeholder="搜索..." 
                           value="" name="s" required>
                    <button type="submit" class="search-submit">
                        <i class="fa fa-search"></i>
                    </button>
                </div>
            </form>
        </div>
        </div><div class="widget blog-lines widget-tag"><h4 class="widget-title">标签</h4><div class="widget-tag"><a title="[学习]有9个相关"  href="https://www.youvii.site/index.php/archives/tag/study-c" class="tag-cloud"><i class="tagfa fa fa-dot-circle-o"></i>学习</a><a title="[记录]有33个相关"  href="https://www.youvii.site/index.php/archives/tag/%e8%ae%b0%e5%bd%95" class="tag-cloud"><i class="tagfa fa fa-dot-circle-o"></i>记录</a><a title="[GitHub]有15个相关"  href="https://www.youvii.site/index.php/archives/tag/github" class="tag-cloud"><i class="tagfa fa fa-dot-circle-o"></i>GitHub</a><a title="[Windows]有35个相关"  href="https://www.youvii.site/index.php/archives/tag/windows" class="tag-cloud"><i class="tagfa fa fa-dot-circle-o"></i>Windows</a><a title="[ENSP]有24个相关"  href="https://www.youvii.site/index.php/archives/tag/ensp" class="tag-cloud"><i class="tagfa fa fa-dot-circle-o"></i>ENSP</a><a title="[kali]有18个相关"  href="https://www.youvii.site/index.php/archives/tag/kali" class="tag-cloud"><i class="tagfa fa fa-dot-circle-o"></i>kali</a><a title="[java]有22个相关"  href="https://www.youvii.site/index.php/archives/tag/java" class="tag-cloud"><i class="tagfa fa fa-dot-circle-o"></i>java</a><a title="[Install]有10个相关"  href="https://www.youvii.site/index.php/archives/tag/install" class="tag-cloud"><i class="tagfa fa fa-dot-circle-o"></i>Install</a><a title="[密码]有49个相关"  href="https://www.youvii.site/index.php/archives/tag/%e5%af%86%e7%a0%81" class="tag-cloud"><i class="tagfa fa fa-dot-circle-o"></i>密码</a><a title="[算法]有10个相关"  href="https://www.youvii.site/index.php/archives/tag/%e7%ae%97%e6%b3%95" class="tag-cloud"><i class="tagfa fa fa-dot-circle-o"></i>算法</a><a title="[CTF]有25个相关"  href="https://www.youvii.site/index.php/archives/tag/ctf" class="tag-cloud"><i class="tagfa fa fa-dot-circle-o"></i>CTF</a><a title="[Python]有15个相关"  href="https://www.youvii.site/index.php/archives/tag/python" class="tag-cloud"><i class="tagfa fa fa-dot-circle-o"></i>Python</a><a title="[C #]有37个相关"  href="https://www.youvii.site/index.php/archives/tag/csharp" class="tag-cloud"><i class="tagfa fa fa-dot-circle-o"></i>C #</a><a title="[数据库]有20个相关"  href="https://www.youvii.site/index.php/archives/tag/shujuku" class="tag-cloud"><i class="tagfa fa fa-dot-circle-o"></i>数据库</a><a title="[网络安全]有16个相关"  href="https://www.youvii.site/index.php/archives/tag/wangluoanquan" class="tag-cloud"><i class="tagfa fa fa-dot-circle-o"></i>网络安全</a><a title="[风险评估]有13个相关"  href="https://www.youvii.site/index.php/archives/tag/fengxianpinggu" class="tag-cloud"><i class="tagfa fa fa-dot-circle-o"></i>风险评估</a><a title="[路由与交换]有23个相关"  href="https://www.youvii.site/index.php/archives/tag/luyouyujiaohuan" class="tag-cloud"><i class="tagfa fa fa-dot-circle-o"></i>路由与交换</a><a title="[实验]有107个相关"  href="https://www.youvii.site/index.php/archives/tag/shiyan" class="tag-cloud"><i class="tagfa fa fa-dot-circle-o"></i>实验</a><a title="[SDN]有18个相关"  href="https://www.youvii.site/index.php/archives/tag/sdn" class="tag-cloud"><i class="tagfa fa fa-dot-circle-o"></i>SDN</a><a title="[软件定义网络]有16个相关"  href="https://www.youvii.site/index.php/archives/tag/ruanjiandingyiwangluo" class="tag-cloud"><i class="tagfa fa fa-dot-circle-o"></i>软件定义网络</a><a title="[数通]有17个相关"  href="https://www.youvii.site/index.php/archives/tag/shutong" class="tag-cloud"><i class="tagfa fa fa-dot-circle-o"></i>数通</a><a title="[Cisco]有84个相关"  href="https://www.youvii.site/index.php/archives/tag/cisco" class="tag-cloud"><i class="tagfa fa fa-dot-circle-o"></i>Cisco</a><a title="[路由]有14个相关"  href="https://www.youvii.site/index.php/archives/tag/luyou" class="tag-cloud"><i class="tagfa fa fa-dot-circle-o"></i>路由</a><a title="[Crypto]有22个相关"  href="https://www.youvii.site/index.php/archives/tag/crypto" class="tag-cloud"><i class="tagfa fa fa-dot-circle-o"></i>Crypto</a></div></div><div class="widget blog-lines widget-postlist"><h4 class="widget-title">最新文章</h4><div class="widget-content"><article class="widget-post">
		               <div class="info">
                        <a href="https://www.youvii.site/index.php/archives/english_s_cc"  class="thumb">
                          <span class="fullimage" style="background-image: url(https://imgapi.xl0408.top/index.php?qvLd6l);"></span>
                        </a>
                        <div class="right">
                          <h4 class="title">
                            <a  href="https://www.youvii.site/index.php/archives/english_s_cc">英语词根词缀法</a></h4>
                          <time datetime="2025-10-16">2025-10-16</time>
						  </div></article><article class="widget-post">
		               <div class="info">
                        <a href="https://www.youvii.site/index.php/archives/help_buy_mouse"  class="thumb">
                          <span class="fullimage" style="background-image: url(https://free.picui.cn/free/2025/10/17/68f191e6d56ab.png?ZOSk0t);"></span>
                        </a>
                        <div class="right">
                          <h4 class="title">
                            <a  href="https://www.youvii.site/index.php/archives/help_buy_mouse">帮助挑选鼠标的网站</a></h4>
                          <time datetime="2025-10-17">2025-10-17</time>
						  </div></article><article class="widget-post">
		               <div class="info">
                        <a href="https://www.youvii.site/index.php/archives/0x16_color"  class="thumb">
                          <span class="fullimage" style="background-image: url(https://imgapi.xl0408.top/index.php?rs8liR);"></span>
                        </a>
                        <div class="right">
                          <h4 class="title">
                            <a  href="https://www.youvii.site/index.php/archives/0x16_color">十六进制取色轮_调色器</a></h4>
                          <time datetime="2025-10-17">2025-10-17</time>
						  </div></article><article class="widget-post">
		               <div class="info">
                        <a href="https://www.youvii.site/index.php/archives/draw_gif_cartoon"  class="thumb">
                          <span class="fullimage" style="background-image: url(https://free.picui.cn/free/2025/10/17/68f191dae4ec0.png?3qb8u1);"></span>
                        </a>
                        <div class="right">
                          <h4 class="title">
                            <a  href="https://www.youvii.site/index.php/archives/draw_gif_cartoon">画画线条动图的网站</a></h4>
                          <time datetime="2025-10-17">2025-10-17</time>
						  </div></article><article class="widget-post">
		               <div class="info">
                        <a href="https://www.youvii.site/index.php/archives/datacenter_network_design"  class="thumb">
                          <span class="fullimage" style="background-image: url(https://free.picui.cn/free/2025/10/17/68f1971552449.png?v6iCwT);"></span>
                        </a>
                        <div class="right">
                          <h4 class="title">
                            <a  href="https://www.youvii.site/index.php/archives/datacenter_network_design">数据中心网络设计指南</a></h4>
                          <time datetime="2025-10-17">2025-10-17</time>
						  </div></article><article class="widget-post">
		               <div class="info">
                        <a href="https://www.youvii.site/index.php/archives/windowsfont"  class="thumb">
                          <span class="fullimage" style="background-image: url(https://free.picui.cn/free/2025/10/17/68f196fa825aa.png?jY23Bd);"></span>
                        </a>
                        <div class="right">
                          <h4 class="title">
                            <a  href="https://www.youvii.site/index.php/archives/windowsfont">Windows字体修改</a></h4>
                          <time datetime="2025-10-17">2025-10-17</time>
						  </div></article></div></div>              </div>
            </div>
          </div>
        </div>
        </div>
        </section>
<footer class="mt-7">
    <hr class="horizontal dark">
      <div class="container pb-4">
        <div class="row align-items-center">
                  <div class="col-md-4 text-center text-md-start">
            <a class="mb-2 mb-lg-0 d-block" href="https://www.youvii.site">
            <img loading="lazy" decoding="async" class="logo" src="https://www.youvii.site/wp-content/uploads/2025/11/logo.webp" alt="徽记"></a>
          </div>
          <div class="col-md-8 col-lg-4 ">
            <div class="small mb-3 mb-lg-0 text-center">
                                    <ul class="nav flex-row align-items-center mt-sm-0 justify-content-center nav-footer">
                        <li class="nav-item"><a href="https://www.youvii.site/sitemap.xml" target="_blank" class="nav-link"><b>网站地图</b></a></li>
<li class="nav-item"><a href="https://www.youvii.site/index.php/mzsm-html/" target="_blank" class="nav-link"><b>免责声明</b></a></li>
<li class="nav-item"><a href="https://www.youvii.site/index.php/yszc-html/" target="_blank" class="nav-link"><b>隐私政策</b></a></li>
<li class="nav-item"><a href="https://www.youvii.site/index.php/youqinglianjie" target="_blank" class="nav-link"><b>友情链接</b></a></li>
                    </ul>
                            </div>
          </div>
          <div class="col-md-4">
            <div class="d-flex align-items-center justify-content-center justify-content-md-end" id="social-links">
              <div class="text-center text-md-end">
                                                                                <a href="https://wpa.qq.com/msgrd?v=3&amp;uin=1738378184&amp;site=qq&amp;menu=yes" class="text-reset btn btn-social btn-qq" target="_blank">
                  <i class="fa fa-qq"></i>
                </a>

                                                                                <a href="http://mail.qq.com/cgi-bin/qm_share?t=qm_mailme&email=yuhui.net@petalmail.com" class="text-reset btn btn-social btn-email" target="_blank">
                  <i class="fa fa-envelope"></i>
                </a>
                              </div>
            </div>
          </div>
          <div class="col-lg-12 text-center mt-3 copyright">
          <span>Copyright © 2026 <a href="https://www.youvii.site">徽记</a> <a target="_blank" href="https://beian.miit.gov.cn/" style="center">鄂ICP备2025151711号</a>
<a href="https://beian.mps.gov.cn/#/query/webSearch?code=42062502000135" rel="noreferrer" target="_blank"><img loading="lazy" decoding="async" src="https://www.youvii.site/wp-content/uploads/2025/11/备案编号图标.png" />鄂公网安备42062502000135号</a> </span>
          <span>Theme by <a href="https://www.boxmoe.com" target="_blank">Boxmoe</a></span>
           
          本站已稳定运行了<span id="running-days" style="display:inline-block;">0</span>天                              <span style="display:none;"></span>
           </div>
      </div>
    </footer>
    <div class="body-background"></div>
    <div class="floating-action-menu">
      <nav class="floating-menu-items">
        <ul>
                    <li class="d-lg-none">
            <button class="float-btn" title="打开侧栏" data-bs-toggle="offcanvas" href="#blog-sidebar" aria-controls="blog-sidebar">
              <i class="fa fa-outdent"></i>
            </button>
          </li>
                              <li>
            <a id="lolijump" href="#" title="返回顶部">
              <img loading="lazy" decoding="async" src="https://www.youvii.site/wp-content/themes/lolimeow-lolimeowV13.13/assets/images/top/meow.gif" alt="返回顶部"></a>
          </li>
                  </ul>
      </nav>
    </div>
    <script type="speculationrules">
    {"prefetch":[{"source":"document","where":{"and":[{"href_matches":"/*"},{"not":{"href_matches":["/wp-*.php","/wp-admin/*","/wp-content/uploads/*","/wp-content/*","/wp-content/plugins/*","/wp-content/themes/lolimeow-lolimeowV13.13/*","/*\\?(.+)"]}},{"not":{"selector_matches":"a[rel~=\"nofollow\"]"}},{"not":{"selector_matches":".no-prefetch, .no-prefetch a"}}]},"eagerness":"conservative"}]}
    </script>
    		<script>
    			(function () {
    				var HLFP_loadImagesTimer = setTimeout(HLFP_loadImages, 3 * 1000);
    				var HLFP_userInteractionEvents = ["mouseover", "keydown", "touchmove", "touchstart"];
    
    				HLFP_userInteractionEvents.forEach(function (event) {
    					window.addEventListener(event, HLFP_triggerImageLoader, {passive: true});
    				});
    
    				function HLFP_triggerImageLoader() {
    					HLFP_loadImages();
    					clearTimeout(HLFP_loadImagesTimer);
    					HLFP_userInteractionEvents.forEach(function (event) {
    						window.removeEventListener(event, HLFP_triggerImageLoader, {passive: true});
    					});
    				}
    
    				function HLFP_loadImages() {
    					document.querySelectorAll("img[data-type='lazy'], source").forEach(function (elem) {
    						elem.setAttribute("srcset", elem.getAttribute("data-srcset"));
    					});
    				}
    			})();
    		</script>
    		<script type="text/javascript" src="https://www.youvii.site/wp-content/themes/lolimeow-lolimeowV13.13/assets/js/jquery.min.js?ver=13.12" id="jquery-script-js"></script>
    <script type="text/javascript" id="theme-script-js-extra">
    /* <![CDATA[ */
    var ajax_object = {"ajaxurl":"https://www.youvii.site/wp-admin/admin-ajax.php","themeurl":"https://www.youvii.site/wp-content/themes/lolimeow-lolimeowV13.13","is_user_logged_in":"false","posts_per_page":"5","nonce":"f0cc578169","running_days":"2025-10-15","hitokoto":"k"};
    //# sourceURL=theme-script-js-extra
    /* ]]> */
    </script>
    <script type="text/javascript" src="https://www.youvii.site/wp-content/themes/lolimeow-lolimeowV13.13/assets/js/theme.min.js?ver=13.12" id="theme-script-js"></script>
    <script type="text/javascript" src="https://www.youvii.site/wp-content/themes/lolimeow-lolimeowV13.13/assets/js/lib.min.js?ver=13.12" id="theme-lib-script-js"></script>
    <script type="text/javascript" src="https://www.youvii.site/wp-content/themes/lolimeow-lolimeowV13.13/assets/js/comments.js?ver=13.12" id="comments-script-js"></script>
    <script type="text/javascript" src="https://www.youvii.site/wp-content/themes/lolimeow-lolimeowV13.13/assets/js/boxmoe.js?ver=13.12" id="boxmoe-script-js"></script>
    <script defer type="text/javascript" src="https://www.youvii.site/wp-content/plugins/akismet/_inc/akismet-frontend.js?ver=1763455794" id="akismet-frontend-js"></script>
          </body>
</html>
<style>
.toast {
  transition: transform .3s ease-out !important;
    transform: translateX(100%);
}

.toast.fade.show {
    transform: translateX(0);
}
</style>




`, `

` 结合使用来定义行、单元格以及表头。


+ **基本语法**:


```html





Header 1
Header 2




Row 1, Cell 1
Row 1, Cell 2




Row 2, Cell 1
Row 2, Cell 2





```


+ **相关标签**:

    - `



`: 定义标准单元格。

    - `

`: 定义表头单元格。

    - `