发表更新前端16 分钟读完 (大约2458个字)0次访问

前端入门教程

概述

前端入门教程

基础内容

配置开发环境

  • vscode安装HTML CSS Support、Live Server 、Auto Rename Tag三个插件
  • 图形编辑软件可以选择GIMP 、Figma 、Paint.NET 、Photoshop 、Sketch 或 XD
  • CSS生成软件enjoycss
  • 图标下载

常见文本标签练习

1.标题标签
html提供了六个等级的网页标题 

1
<h1></h1><h2></h2><h3></h3><h4></h4><h5></h5><h6></h6>

2.段落和文本样式 

1
2
3
4
5
<p>这是一个段落: </p>
<p>
    文本处理: <b>加粗</b> <i>斜体</i> <u>下划线</u> <s>删除线</s>
</p>

3.列表 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!-- 无序列表 unordered list -->
    <ul>
        <li>无序列表元素1</li>
        <li>无序列表元素2</li>
        <li>无序列表元素3</li>
        <li>无序列表元素4</li>
    </ul>
<!-- 有序列表 ordered list -->
    <ol>
        <li>有序列表元素1</li>
        <li>有序列表元素2</li>
        <li>有序列表元素3</li>
        <li>有序列表元素4</li>
    </ol>

4.表格

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<table border="1">
    <tr>
        <th>列标题1</th>
        <th>列标题2</th>
        <th>列标题3</th>
    </tr>
    <tr>
        <td>元素1</td>
        <td>元素2</td>
        <td>元素3</td>
    </tr>
    <tr>
        <td>元素11</td>
        <td>元素12</td>
        <td>元素13</td>
    </tr>
    <tr>
        <td>元素21</td>
        <td>元素22</td>
        <td>元素23</td>
    </tr>
</table>

HTML属性

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
    <a href="https://galendu.github.io">这是一个超链接</a>
    <br>
    <!-- <a target=""> target指定在何处显示链接的 URL,默认_self, 将 URL 加载到与当前浏览上下文相同的浏览上下文中
    _blank: 使用新窗口
    _parent: 将 URL 加载到当前浏览上下文的父浏览上下文中。 如果没有父级，则其行为与 _self 相同。
    _top: 将 URL 加载到顶级浏览上下文（即，“最高”浏览上下文，是当前浏览上下文的祖先，并且没有父级）。 如果没有父级，则其行为与 _self 相同。
-->
    <a href="https://galendu.github.io" target="_top">这是第二个超链接</a>
    <hr>
    <img src="01.png" alt="">
<!-- img 当src地址无法访问时,显示alt中的内容 -->
    <img src="https://img0.baidu.com/it/u=256816879,771155532&fm=253&fmt=auto&app=120&f=JPEG?w=1204&h=800" alt="">
    <img src="https://xxximg0.baidu.com/it/u=256816879,771155532&fm=253&fmt=auto&app=120&f=JPEG?w=1204&h=800"
        alt="该图片无法显示">
    <img src="https://img0.baidu.com/it/u=256816879,771155532&fm=253&fmt=auto&app=120&f=JPEG?w=1204&h=800" alt="该图片无法显示"
        width="400" height="360">

HTML区块

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<div class="nav">
    <a href="#">链接 1</a>
    <a href="#">链接 2</a>
    <a href="#">链接 3</a>
    <a href="#">链接 4</a>
</div>

<div class="content">
    <h1>文章标题</h1>
    <p>文章内容</p>
    <p>文章内容</p>
    <p>文章内容</p>
    <p>文章内容</p>
    <p>文章内容</p>
</div>
<span>这是第1个span标签</span>
<span>这是第2个span标签</span>
<span>这是第3个span标签</span>
<span>这是第4个span标签</span>
<hr>
<span>链接点击这里 <a href="#">链接</a></span>

HTML表单

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!-- form 用来收集用户输入,action属性定义在提交表单时执行的动作(提交参数到后端服务) -->
<form action="">
    <label for="username">用户名:</label>
    <input type="text" id="username" placeholder="请输入用户名"><br><br>
    <label for="pwd">密码:</label>
    <input type="password" id="pwd" placeholder="请输入密码"><br><br>

    <label>性别</label>
    <input type="radio" name="gender" id="">男
    <input type="radio" name="gender" id="">女
    <input type="radio" name="gender" id="">其他<br><br>

    <label for="">爱好:</label>
    <input type="checkbox" name="hobby" id="">唱歌
    <input type="checkbox" name="hobby" id="">跳舞
    <input type="checkbox" name="hobby" id="">RAP
    <input type="checkbox" name="hobby" id="">篮球
    <input type="checkbox" name="hobby" id="">足球<br><br>

    <input type="submit" value="上传">

</form>
<form action="#"></form>

CSS导入方式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS 导入方式</title>
    <link rel="stylesheet" href="./css/style.css">
    <style>
        p {
            color: blue;
            font-size: 26px;
        }

        h2 {
            color: green;
        }


        h1 {
            color: white;
        }
    </style>
</head>

<body>

    <p>这是一个应用了css样式的文本</p>
    <h1 style="color: red;">这是一个一级标题标签</h1>
    <h2>这是一个二级标题,应用内部样式</h2>
    <h3>这是一个三级标题,应用外部样式</h3>
</body>

</html>
1
2
3
4
/* css/style.css */
h3{
    color: brown;
}

CSS选择器

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS 选择器</title>
    <style>
        /* 元素选择器 */
        h2 {
            color: aqua;
        }

        /* 类选择器 类名前加点 */
        .highlight {
            background-color: yellow;
        }

        /* ID选择器 */
        #header {
            font-size: 35px;
        }

        /* 通用选择器 */
        * {
            font-family: 'KaiTi';
            font-weight: bolder;
        }

        /* 子元素选择器 */
        .father>.son {
            color: yellowgreen;

        }

        /* 后代选择器 */
        .father p {
            color: brown;
            font-size: larger;
        }

        /* 相邻元素选择器 */
        h3+p {
            background-color: red;
        }

        /* 伪类选择器 */
        #element:hover {
            background-color: blueviolet;
        }

        /* 选中第一个子元素: :first-child
                         :nth-child
                         :active 
        */

        /* 伪元素选择器
        ::after
        ::before
        */

        /* id>类>标签名 */
    </style>
</head>

<body>
    <h1>不同类型的 CSS 选择器 </h1>

    <h2>这是一个元素选择器示例</h2>
    <h3 class="highlight">这是一个类选择器示例</h3>
    <h3>这是另一个类选择器示例</h3>

    <h4 id="header">这是一个 ID 选择器示例</h4>

    <div class="father">
        <p class="son">这是一个子元素选择器示例</p>
        <div>
            <p class="grandson">这是一个后代选择器示例</p>
        </div>
    </div>
    <p>这是一个普通的 p 标签</p>
    <h3>这是一个相邻兄弟选择器示例</h3>
    <p>这是另一个 p 标签</p>

    <h3 id="element">这是一个伪类选择器示例</h3>

</body>

</html>

CSS常用属性

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS常用属性</title>
    <style>
        /* 块元素 */
        .block {
            background-color: aqua;
            width: 150px;
            height: 100px;
        }

        /* 行内元素 */
        .inline {
            background-color: brown;
        }

        /* 行内块元素 */
        .inline-block {
            width: 100px;
            height: 100px;
        }

        .div-inline {
            display: inline;
            background-color: aquamarine;
        }

        .span-inline-block {
            display: block;
            background-color: blueviolet;
            width: 300px;
        }
    </style>
</head>

<body>
    <h1 style="font: bolder 50px 'KaiTi';">这是一个 font复合属性示例</h1>
    <p style="line-height: 40px;">
        这是一段长文本这是一段长文本这是一段长文本这是一段长文本这是一段长文本这是一段长文本这是一段长文本这是一段长文本这是一段长文本这是一段长文本这是一段长文本这是一段长文本这是一段长文本这是一段长文本这是一段长文本这是一段长文本这是一段长文本这是一段长文本这是一段长文本这是一段长文本这是一段长文本这是一段长文本这是一段长文本这是一段长文本这是一段长文本这是一段长文本这是一段长文本这是一段长文本这是一段长文本这是一段长文本这是一段长文本这是一段长文本这是一段长文本这是一段长文本这是一段长文本这是一段长文本这是一段长文本这是一段长文本这是一段长文本这是一段长文本这是一段长文本这是一段长文本这是一段长文本
    </p>
    <div class="block">这是一个块级元素</div>
    <span class="inline">这是一个行内元素</span>
    <img src="001.png" alt="" class="inline-block">
    <img src="001.png" alt="" class="inline-block">
    <img src="001.png" alt="" class="inline-block">
    <img src="001.png" alt="" class="inline-block">
    <h2>display</h2>
    <div class="div-inline">这是一个转换成行内元素的div标签</div>
    <span class="span-inline-block">这是一个转换成行内块元素的span标签</span>
</body>

</html>

CSS盒子模型

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS盒子模型</title>
    <style>
        .demo {
            background-color: aqua;
            display: inline-block;

            /* border(边界/边框) 上右下左 */
            border: 50px solid yellowgreen;
            /* padding(内边距) 内容与边框的距离 */
            padding: 50px 10px 30px 100px;
            /* margin(外边距) 盒子与浏览器之间的距离 */
            margin: 40px 10px 30px 100px;
        }

        .border-demo {
            background-color: yellow;
            width: 300px;
            height: 200px;

            padding: 50px 10px 30px 100px;
            border-style: solid;
            border-width: 10px 20px 20px 40px;
            border-color: blueviolet;
            margin: 40px 10px 30px 100px;
        }
    </style>
</head>

<body>
    <div class="demo">galendu 站搜索galendu</div>
    <div class="demo">github.com 搜索galendu</div>
    <div class="border-demo">这是一个边框示例</div>
</body>

</html>

CSS浮动

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS浮动</title>
    <style>
        .father {
            background-color: aquamarine;
            border: 10px solid brown;
        }

        .father::after {
            display: table;
            clear: both;
        }

        .left-son {
            width: 100px;
            height: 100px;
            background-color: yellowgreen;
            float: left;
        }

        .right-son {
            width: 100px;
            height: 100px;
            background-color: yellowgreen;
            float: right;
        }
    </style>
</head>

<body>
    <div class="father">
        <div class="left-son">左浮动</div>
        <div class="right-son">右浮动</div>
    </div>
    <p>这是一段文本这是一段文本这是一段文本这是一段文本这是一段文本这是一段文本这是一段文本这是一段文本这是一段文本这是一段文本</p>
</body>

</html>

定位

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>定位</title>
    <style>
        .box1 {
            height: 350px;
            background-color: aqua;
        }

        .box-normal {
            width: 100px;
            height: 100px;
            background-color: purple;
        }

        .box-relative {
            width: 100px;
            height: 100px;
            background-color: pink;
            /* position 属性设置元素在文档中的定位方式 */
            position: relative;
            left: 120px;
            top: 40px;
        }

        .box2 {
            height: 350px;
            background-color: yellow;
            margin-bottom: 300px;
        }

        .box-absolute {
            width: 100px;
            height: 100px;
            background-color: red;
            position: absolute;
            left: 220px;
            top: 400px;
        }

        .box-fixed {
            width: 100px;
            height: 100px;
            background-color: brown;
            position: fixed;
            right: 0;
            top: 300px;
        }
    </style>
</head>

<body>
    <h1>相对定位</h1>
    <div class="box1">
        <div class="box-normal"></div>
        <div class="box-relative"></div>
        <div class="box-normal"></div>
    </div>
    <h1>绝对定位</h1>
    <div class="box2">
        <div class="box-normal"></div>
        <div class="box-absolute"></div>
        <div class="box-norma"></div>
    </div>
    <h1>固定定位</h1>
    <div class="box-fixed"></div>
</body>

</html>

JS导入方式

  • 内联样式 
    1
    2
    3
    <script>
        console.log('Hello, Head 标签的内联样式')
    </script>
  • 外联样式 
    1
    <script src="./js/myscript.js"></script>
    1
    2
    // js/myscript.js
    console.log('Hello, 外联样式')

JS基础语法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
<script>
    // 1. 定义变量 
    var x;
    let y = 5;
    const PI = 3.14
    console.log(x, y, PI); 
    // 2. 打印  
    let name = '如花';
    console.log(name);
    let empty_value = null;
    console.log(empty_value);

    // 3. 控制语句  
    let age = 18;
    if (age > 18) {
        console.log('你已经成年了')
    } else {
        console.log('未成年')
    }

    // let time = 18;
    // if (time < 12) {
    //     alert('上午好')
    // } else if (time < 18) {
    //     alert('下午好')
    // } else {
    //     alert('晚上好')
    // }

    console.log('for 循环')
    for (let i = 1; i < 10; i++) {
        console.log(i)
    }

    console.log('while 循环')
    let count = 1
    while (count <= 10) {
        console.log(count)
        count++;
    }

    for (var i = 0; i < 5; i++) {
        if (i == 2) {
            continue;
        }
        if (i == 4) {
            break;
        }
        console.log(i);
    }

</script>

JS函数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<script>
    function hello() {
        console.log('Hello, world');
    }
    hello()

    function hello_with_return() {
        return "hello, world - 返回值"
    }
    let a = hello_with_return()
    console.log(a)

    function hello_with_params(name) {
        console.log('hello, ' + name);
    }
    hello_with_params('如花')

    // 作用域
    let global_var = '全局变量'
    function local_var_function() {
        let local_var = '局部变量'
        console.log('函数内打印全局变量: ' + global_var);
        console.log('函数内打印局部变量: ' + local_var);
    }
    local_var_function()
    console.log('函数内打印全局变量: ' + global_var);
    console.log('函数内打印局部变量: ' + local_var);
</script>

JS事件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS 事件</title>
</head>

<body>
    <button onclick="click_event()">这是一个点击事件按钮</button>
    <input type="text" onfocus="focus_event()" onblur="blur_event()" name="" id="">
    <script>
        // 点击事件
        function click_event() {
            alert('点击事件触发了');
        }

        // 聚焦事件
        function focus_event() {
            console.log('获取焦点')
        }
        // 失去焦点事件
        function blur_event() {
            console.log('失去焦点')
        }
    </script>

</body>

</html>


JS DOM

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DOM</title>
</head>

<body>
    <div id="box1">这是一个ID选择器标签</div>
    <div class="box2">这是一个类选择器标签</div>
    <div>普通的div 标签</div>

    <button>点击按钮</button>
    <script>
        var element_id = document.getElementById('box1');
        console.log(element_id);

        var element_class = document.getElementsByClassName('box2')[0];
        console.log(element_class);

        var element_tag = document.getElementsByTagName('div')[2];
        console.log(element_tag)

        element_id.innerHTML = '<a href="#">跳转链接</a>';
        element_class.innerText = '<a href="#">跳转链接</a>';

        element_tag.style.color = "red"
        element_tag.style.fontSize = '20px'

        // DOM 属性绑定事件  
        var button_element = document.getElementsByTagName('button')[0];
        console.log(button_element);

        // button_element.onclick = function () {
        //     alert('DOM 属性 按键触发');
        // }

        button_element.addEventListener('click', click_event)

        function click_event() {
            alert('通过 addEventListener 触发按键');
        }

    </script>
</body>

</html>

练习-表格的增删改查

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>练习-表格的增删改查</title>
    <style>
        table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 20px;
        }

        th,
        td {
            border: 1px solid #ddd;
            text-align: center;
            padding: 8px;
        }

        th {
            background-color: #ddd;
        }

        button {
            margin-left: 5px;
        }
    </style>
</head>

<body>
    <h1 style="text-align:center;">表格的增删改查</h1>
    <button onclick="addRow()">新增数据</button>
    <table id="table">
        <tr>
            <th>姓名</th>
            <th>联系方式</th>
            <th>操作</th>
        </tr>
        <tr>
            <td>杜潇</td>
            <td>12345678901</td>
            <td>
                <button onclick="editRow(this)">编辑</button><button onclick="deleteRow(this)">删除</button>
            </td>
        </tr>
    </table>
    <script src="./js/table.js"></script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
//新增数据函数
function addRow() {
    var table = document.getElementById('table');
    // console.log(table);
    //获取插入的位置
    var length = table.rows.length;
    // console.log(length);
    //插入行节点
    var newRow = table.insertRow(length);
    console.log(newRow);
    // newRow.innerHTML = '123456'

    // 插入列节点对象
    var nameCol = newRow.insertCell(0);
    var phoneCol = newRow.insertCell(1);
    var actionCol = newRow.insertCell(2);

    nameCol.innerHTML = '未命名';
    phoneCol.innerHTML = '无联系方式';
    actionCol.innerHTML = '<button onclick="editRow(this)">编辑</button><button onclick="deleteRow(this)">删除</button>';
    console.log(newRow);

}

// 删除数据函数
function deleteRow(button) {
    var row = button.parentNode.parentNode;
    console.log(row)
    row.parentNode.removeChild(row);
}

// 编辑数据

function editRow(button) {
    var row = button.parentNode.parentNode;
    var name = row.cells[0];
    var phone = row.cells[1];

    var inputName = prompt('请输入名字：');
    var inputPhone = prompt('请输入联系方式: ');
    name.innerHTML = inputName;
    phone.innerHTML = inputPhone;

}

移动端适配及rem

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>移动端适配及rem</title>
    <style>
        /* html {
            font-size: 50px;
        } */

        .box-px {
            width: 300px;
            height: 100px;
            background-color: blueviolet;
            margin-bottom: 50px;
        }

        .box-rem {
            width: 5rem;
            height: 3rem;
            background-color: aqua;

        }
    </style>
</head>

<body>
    <div class="box-px"></div>
    <div class="box-rem"></div>
    <script>
        // 根据社保宽度计算 HTML标签的 font-size 的属性值
        function resetHtmlFontSize() {
            document.documentElement.style.fontSize = screen / 10 + 'px';
        }
        resetHtmlFontSize()

        // 绑定事件
        window.onresize = resetHtmlFontSize;
    </script>
</body>

</html>

Flex 弹性盒子与容器属性

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flex 盒子模型</title>
    <style>
        html {
            font-size: 10px;
        }

        .container {
            display: flex;
            height: 40rem;
            background-color: aqua;
            /* flex-direction: column-reverse; */
            flex-wrap: wrap;
            /* justify-content: space-evenly; */
            align-items: center;
            align-content: center;
        }

        .item {
            width: 20rem;
            font-size: 8rem;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="item" style="background-color: yellowgreen;">1</div>
        <div class="item" style="background-color: whitesmoke;">2</div>
        <div class="item" style="background-color: rebeccapurple;">3</div>
        <div class="item" style="background-color: blanchedalmond">4</div>
        <div class="item" style="background-color: purple;">5</div>
        <div class="item" style="background-color: yellow;">6</div>
    </div>
</body>

</html>

前端入门教程

https://galendu.github.io/posts/38645.html

作者

Galen Du

发布于

2024-03-17

更新于

2025-02-17

许可协议

#

喜欢这篇文章？打赏一下作者吧

评论

关注我

分类

标签

AI1
ChatGPT1
grpc1
hexo1
kubernetes1
shell1
terraform1
tools1
web3
windows1
养花1
土1
嫁接1
扦插1
油画1
生活1
虚拟化1
×