C1认证学习笔记（第四章）_结构 c1认证，GitHub标星50k的网络安全全栈技术知识

用户08045119012
49 阅读17分钟

熟悉BOM结构
掌握window对象及其常用方法属性
掌握window的子对象常用属性和方法

任务背景:

通过上一节学习了常用的DOM获取方法和属性后，我们就可以对DOM节点进行操作以达到交互效果，交互效果主要涉及修改，删除，添加三种DOM操作。

任务内容：
DOM修改：
名称描述
innerHTMLinnerHTML除了获取元素内容，也可通过赋值用于修改元素中内容。如果修改内容中包含html字符串会被解析成html元素
setAttribute(name,value)设置指定元素上的某个属性值。如果属性已经存在，则更新该值；否则，使用指定的名称和值添加一个新的属性
通过属性名更改属性对元素属性重新赋值可更改对应属性值

1.1 innerHTML代码示例：

  • 改变p元素内容
// 更改为文字
document.querySelector('p').innerHTML = '测试项目' 
// 更改为html内容（p元素中内容替换为span元素）
document.querySelector('p').innerHTML = '<span>测试项目</span>'

1.2 setAttribute(name, value)代码示例：

参数：name为属性名，value为属性值

改变input的type属性

document.querySelector('input').setAttribute('type', 'button')

1.3 通过属性名更改属性：

改变input的type属性

document.querySelector('input').type = 'button'
DOM添加：
名称描述
createElement(tagName)创建一个由标签名称tagName指定的HTML元素
appendChild(node)将一个节点插入到指定父节点的子节点列表的末尾处
insertAdjacentHTML(position, text)将指定文本解析为HTML字符串，插入到指定位置（IE不友好）

2.1 createElement(tagName)代码示例：

创建一个<div>元素

newDiv = document.createElement('div')
// 可以直接对创建完的元素进行操作，如：修改元素内文字
newDiv.innerHTML = '我是新元素'

2.2 appendChild(node)代码示例：

创建一个新元素 <p>，然后添加到 <div> 的最尾部：
在这里插入图片描述

var p = document.createElement('p');
document.querySelector('div').appendChild(p)

在这里插入图片描述
2.3 insertAdjacentHTML(position, text)代码示例：

  • position（内容相对当前元素位置）：
  • ‘beforebegin’：元素自身的前面
  • ‘afterbegin’：插入元素内部的第一个子节点之前
  • ‘beforeend’：插入元素内部的最后一个子节点之后
  • ‘afterend’：元素自身的后面

将一个新元素 <p> 插入到 <div> 的最尾部：

在这里插入图片描述

// 执行添加
var div =  document.querySelector('div')
div.insertAdjacentHTML('beforeend', '<p></p>')

在这里插入图片描述

DOM删除：
名称描述
removeChild(child)删除选定的子节点，需要指定其父元素
remove()删除选定节点（IE不友好）

3.1 removeChild(child)：

<div>
    <p>项目1</p>
    <p>项目2</p>
<div>
<script>
    // 删除div中的第一个p元素
    var parent = document.querySelector('div')
    var child = document.querySelector('p')
    parent.removeChild(child)
</script>

3.2 remove()：

<div>
    <p>项目1</p>
    <p>项目2</p>
<div>
<script>
    // 删除div中的第一个p元素
    var p1 = document.querySelector('p')
    p1.remove()
</script>
任务练习：

①：删除类名为disable的元素，补全横线处代码

var disbaleItem = document.querySelector('.disable')
disbaleItem.parentNode.\_\_\_\_\_\_\_\_(disbaleItem)

removeChild

②：在ul中的最后一个li元素后添加一个新的li元素，li元素文字内容为input元素的输入值，请补全横线处代码（依次填写答案，使用中文逗号「，」隔开）

<ul>
  <input type="text" value="任务3" />
  <li class="item">任务1</li>
  <li class="item">任务2</li>
</ul>
<script>
  var ul = document.querySelector ('ul')
  var val = document.querySelector('input').value
  var lastItem = document.\_\_\_\_\_\_\_\_('li')
  lastItem.innerHTML = val
  ul.\_\_\_\_\_\_\_\_(lastItem)
</script>

在这里插入图片描述
③：将内容为第一名的元素插入到ol元素内的第一行，请补全横线处代码

<ol>
    <li>第二名</li>
    <li>第三名</li>
</ol>
<script>
  var ol = document.querySelector('ol')
    ol.insertAdjacentHTML('\_\_\_\_\_\_\_\_', '<li>第一名</li>')
</script>

思路：insertAdjacentHTML方法的第一个参数为插入位置，题目要求要插入元素内第一行，也就是元素内部的第一个子节点之前，这里应使用对应的位置参数

afterbegin

④：将内容为第二名的元素插入到ol元素中，成为第二个li元素，请补全横线处代码

<ol>
    <li>第一名</li>
    <li>第三名</li>
</ol>
<script>
  var item = document.querySelectorAll('li')[1]
  item.insertAdjacentHTML('\_\_\_\_\_\_\_\_', '<li>第二名</li>')
</script>

beforebegin

⑤：将不属于国内的城市删除，请选择正确的选项

<ul>
    <li>石家庄</li>
    <li>秦皇岛</li>
    <li>伊拉克</li>
    <li>哈尔滨</li>
</ul>
<script>
  var item = document.querySelectorAll('li')[________]
  item.remove()
</script>

2

DOM控制CSS样式：

任务目标:

掌握通过style属性控制样式
掌握通过classList属性及其方法控制样式

任务背景:

为了实现网页交互效果，我们经常需要控制DOM的CSS样式，了解并掌握如何控制CSS是Web开发中的重要技能之一。

通过style属性控制样式：

style属性可以设置或返回元素的内联样式

  • 语法：element.style.property = value
  • property为CSS属性名，如：color，margin。如果属性名原来包含“-”，则需转换为小驼峰形式，如：backgroundColor，marginLeft。
var box = document.querySelector('div')
box.style.color = "#fff" // 将元素中文字设置为白色 
box.style.marginLeft = "100px" // 将元素左外边距设置为100px
通过classList控制样式：

classList属性返回一个元素类属性集合（这里可以简单理解为类名的集合），通过使用classList中的方法可以方便的访问和控制元素类名，达到控制样式的目的

classList常用方法介绍

名称描述
add(class1, class2, …)添加一个或多个类名
remove(class1, class2, …)移除一个或多个类名
replace(oldClass, newClass)替换类名
contains(class)判定类名是否存在，返回布尔值
toggle(class, truefalse)如果类名存在，则移除它，否则添加它，第二个参数代表无论类名是否存在，强制添加（true）或删除（false）
<div class="box">classList test</div>
<script>
  var box = document.querySelector('.box')
  box.classList.add('box1', 'box2')    // [box] => [box, box1, box2]
  box.classList.remove('box1', 'box2') // [box, box1, box2] => [box]
  box.classList.replace('box', 'box2')  // [box] => [box2]
  box.classList.contains('box1')  // 当前元素不包含类名box1，返回false
  box.classList.toggle('active')   // [box2] => [box2, active]
</script>
任务练习：

①：将div元素背景颜色设置为蓝色，请补全横线处代码

var box = document.querySelector('div')
box.style.________ = 'blue'

backgroundColor

②：将div设置为隐藏，请补全横线处代码

<style>
  .hidden {
    display: none;
  } 
</style>
<div class="box">看不见我</div>
<script>
  var box = document.querySelector('.box')
  box.classList.\_\_\_\_\_\_\_\_('hidden')
</script>

add

③：将包含disabled类名的按钮设置为禁用，请补全横线处代码

<button class="delete disabled">删除</button>
<script>
  var delBtn = document.querySelector('.delete')
    if (delBtn.classList.\_\_\_\_\_\_\_\_ ('disabled')) {
        delBtn.setAttribute('disabled', true)
    }
</script>

思路：该题用到了 if 语句，需要判断 button 元素中是否包含 disabled类名，此处应使用classList中的 contains对应的判断类名是否存在。

contains

④：将span元素文字颜色设置为绿色，请补全横线处代码

<style>
    .pass {
        color: green;
    }
    .loading {
        color: orange;
    }
</style>
<span class="pass loading">考试通过</span>
<script>
  var item = document.querySelector('span')
  item.classList.remove('\_\_\_\_\_\_\_\_')
</script>

loading

⑤：span元素的文字颜色是红色

<style>
    .active {
        color: red;
    }
</style>
<span>逢考必过</span>
<script>
  var item = document.querySelector('span')
  item.style.color = 'blue'
  item.classList.add('active')
</script>

在这里插入图片描述

节点写入：

任务目标:

掌握节点写入的常用方式
掌握通过classList属性及其方法控制样式

任务背景:

当我们需要更改一个标签的文字或内容时，这时就需要了解节点写入的知识，学会节点写入可以帮助我们更加精确的控制网页内容，节点写入的方式有很多种，这里介绍常用的几种方法。

节点写入常用方式：
名称描述
innerHTML返回元素中的html内容，通过赋值，可设置元素中的html内容
innerText返回元素中的文本内容，通过赋值，可设置元素中的文本内容
document.write()将html字符串写入到文档中

1.1 innerHTML：

在div中写入h1元素

<body>
  <div></div>
</body>
<script>
	document.querySelector('div').innerHTML = '<h1>我是新内容</h1>'
</script>

在这里插入图片描述

如果写入内容中包含html标签字符串，会被解析成对应的html标签

1.2 innerText：

  • 在div中写入字符串
<body>
  <div></div>
</body>
<script>
	document.querySelector('div').innerText = '<h1>我是新内容</h1>'
</script>

在这里插入图片描述

html标签字符串不会被解析，会被当作普通字符串写入

1.3 document.write():

document.write('我是新内容')
document.write('<h1>我是新内容</h1>')

和innerHTML类似，写入内容如果包含html标签字符串，会被解析成对应的html标签。document.write()根据运行时机，会写入文档不同的位置

任务练习：

①：在div中插入文字内容为“加油，我要通过C认证”的p元素，请补全横线处代码

<div></div>
<script>
  var box = document.querySelector('div')
  box.________ = '<p>加油，我要通过C认证</p>'
</script>

innerHTML

②：使如下代码运行后输出字符串sky，请补全横线处代码

<div>
    <span>s</span><span>k</span><span>y</span>
</div>
<script>
  var word = document.querySelector('div').________
  console.log(word)
</script>

innerText

③：在第一行元素后插入第二行元素，请补全横线处代码

<div>第一行</div>
<script>
    document.\_\_\_\_\_\_\_\_ ('<div>第二行</div>')
</script>

write

④：将ul中的span元素改为li元素，文字内容不变，请补全横线处代码

<ul>
  <span>第一梯队</span>
  <li>第二梯队</li>
</ul>
<script>
  var box = document.querySelector('ul')
  box._______ = box.innerHTML.replace('span', 'li')
</script>

innerHTML

⑤：代码运行后，页面中所有数字之和是________

<ul>
    <script>
        document.write('<li>5</li>')
    </script>
    <li>6</li>
    <script>
        var box = document.querySelector('ul')
        box.innerHTML = '<li>7</li>'
    </script>
</ul>

7

事件基础：

任务目标:

掌握节点写入的常用方式
掌握通过classList属性及其方法控制样式

任务背景:

当我们需要更改一个标签的文字或内容时，这时就需要了解节点写入的知识，学会节点写入可以帮助我们更加精确的控制网页内容，节点写入的方式有很多种，这里介绍常用的几种方法。

节点写入常用方式：

1.1 事件定义：

用户与浏览器交互的方法，规定了浏览器在什么时刻执行什么事情

事件举例：鼠标单击，双击，键盘输入，页面或图像载入

1.2 事件三要素（事件源，事件，事件处理程序）

  • 事件源：谁触发的，一般指某个元素节点
  • 事件：怎么触发的
  • 事件处理程序：触发后发生了什么事

在这里插入图片描述

事件绑定：

事件源要与事件绑定后，才能触发对应事件。下面以鼠标点击事件为例，介绍事件的三种绑定方式。

2.1 方式一：行内事件属性赋值：

<button onclick="alert('行内事件属性赋值')">点击按钮</button>

2.2 方式二：事件属性赋值：

var btn = document.querySelector('button');
btn.onclick = function() {
  alert('事件属性赋值')
}

2.3 方式三：事件监听：

addEventListener(type, listener, useCapture)

  • type: 事件类型
  • listener: 监听器（处理程序）
  • useCapture: 默认为false，设置为true时，不会因冒泡触发监听器
const btn = document.querySelector('button');
btn.addEventListener('click', function() {
  alert('事件监听')
})

事件属性赋值与事件监听区别：

  • 事件属性多次赋值，只会执行最后一次事件处理程序；事件监听可以添加多个监听器，执行多个事件处理程序；
  • 事件属性赋值兼容IE8及以下浏览器，而事件监听最低兼容到IE9浏览器
任务练习：

①：实现点击按钮，更改按钮内容效果，请补全横线处代码

<button class="btn">点击我</button>
<script>
document.querySelector('.btn').\_\_\_\_\_\_\_\_ ('click', function() {
    this.innerText = '我被点击了'
})
</script>

addEventListener

②：实现点击按钮，更改按钮内容效果，请补全横线处代码

<div class="box">点击这个盒子</div>
<script>
    document.querySelector('.box').________ = function() {
        this.style.backgroundColor = '#000'
        this.style.color = '#fff'
        this.innerText = '盒子黑了'
    }
</script>

onclick

③：实现点击变身按钮，弹出变身台词，请补全横线处代码

<button>变身</button>
<script>
    var btn = document.querySelector('button')
    btn.addEventListener('click', ________)

    function rider() {
        alert("胜利的法则已经确定了！")
    }
</script>

rider

④：点击输出数字按钮，最终输出的数字是________

<button>输出数字</button>
<script>
    var btn = document.querySelector('button')
    btn.onclick = foo2
    btn.onclick = foo1
    
    function foo1() {
        console.log(111)
    }
    function foo2() {
        console.log(222)
    }
</script>

思路：使用事件属性绑定两个事件处理程序，只会执行最后一个。

111

⑤：代码如下，点击一次按钮，p元素中显示的数字是________

<button >按钮</button>
<p>0</p>
<script>
  var btn = document.querySelector('button')
  var num = 0
  btn.addEventListener('click', function() {
    num++
    document.querySelector('p').innerHTML = num
  })
  btn.addEventListener('click', function() {
    num++
    document.querySelector('p').innerHTML = num
  })
</script>

2

鼠标及键盘事件：

任务目标:

掌握常用鼠标事件
掌握常用键盘事件及键盘事件属性

任务背景:

我们与网页的交互大多是通过鼠标和键盘来触发的，了解并掌握鼠标及键盘事件可以帮助我们实现许多常用的交互效果。

常用鼠标事件：
名称描述
click单击鼠标左键触发。焦点在按钮并按了Enter键时，也会触发
contextmenu右键点击（右键菜单显示前触发）
dblclick双击左键触发
mouseenter指针移至元素范围内触发一次
mouseleave指针移出元素范围外触发一次
mouseover指针移至元素或其子元素内，可能触发多次
mouseout指针移出元素，或者移至其子元素内，可能触发多次

代码示例：

var btn = document.querySelector('button')
btn.addEventListener('mouseenter', function() { // 鼠标移入文字为红色
  this.style.color = 'red'
})
btn.addEventListener('click', function() {  // 鼠标单击文字为蓝色
  this.style.color = 'blue'
})
btn.addEventListener('mouseleave', function() { // 鼠标移出文字为黑色
  this.style.color = 'black'
})

事件处理程序中的this指代当前操作元素

常用键盘事件:
名称描述
keyCodekeyCode属性返回keypress事件触发的键的值的字符代码，或者keydown或keyup事件的键盘代码。字符代码 - 表示ASCII字符的数字键盘代码 - 表示键盘上真实键的数字
charCode返回keypress事件触发时按下的字符键的字符Unicode值，用于keydown或keyup时总是返回0
key返回按键的标识符(字母区分大小写)。keypress，keyup，keydown返回值相同

代码示例：

// 以输入a为例，分别查看三种事件返回结果
var input = document.querySelector('input')
input.addEventListener('keydown', function(event) {
  console.log(event.keyCode)      // 65
  console.log(event.charCode)	  // 0
  console.log(event.key)           // a
})
input.addEventListener('keypress', function(event) {
  console.log(event.keyCode)      // 97
  console.log(event.charCode)     // 97
  console.log(event.key)           // a
})
input.addEventListener('keyup', function(event) {
  console.log(event.keyCode)      // 65
  console.log(event.charCode)     // 0
  console.log(event.key)           // a
})

可以看到，三种事件中，只有key属性返回的结果保持统一，如果不考虑IE8以下浏览器兼容性，推荐使用key来代替keyCode和charCode

任务练习：

①：实现点击按钮，弹出“已点击”提示，补全代码

var btn = document.querySelector('button');
btn.addEventListener('\_\_\_\_\_\_\_\_', showPublish);
function showPublish() {
  alert('已点击');
}

click

②：点击按钮，弹框显示对应按钮中文字，补全代码

<button>按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
<script>
  var btns = document.querySelectorAll('button')
  for (var idx = 0; idx < btns.length; idx++) {
    btns[idx].addEventListener('click', function() {
      alert(________.innerHTML)
    })
  }
</script>

this

③：鼠标移出span元素时，字体大小是________px

<span>五谷丰登</span>
<script>
    var span = document.querySelector('span')
    span.addEventListener('mouseenter', function() {
        this.style.fontSize = '16px'
    })
    span.addEventListener('mouseleave', function() {
        this.style.fontSize = '14px'
    })
</script>

mouseleave代表鼠标移出事件

14

④：补全代码 ，实现在文本框中输入内容时，唐僧先于白龙马输出

<input type="text" />
<script>
  var input = document.querySelector('input')
  input.addEventListener('\_\_\_\_\_\_\_\_', function() {
    console.log('白龙马')
  })
  input.addEventListener('keypress', function() {
    console.log('唐僧')
  })
</script>

思路：常用键盘事件执行顺序为：keydown->keypress->keyup

keyup

⑤：在input输入框中点击回车后，弹出登录成功提示，补全代码

<input type="text">
<script>
  var input = document.querySelector('input')
  input.addEventListener('keyup', function(event) {
    if (event.key=== '\_\_\_\_\_\_\_\_') {
      alert('登录成功')
    }
  })
</script>

Enter

窗口事件：

任务目标:

掌握常用的窗口事件
掌握常用键盘事件及键盘事件属性

任务背景:

窗口事件在浏览器窗口发生变化时触发，其中包括窗口大小更改，加载窗口，关闭窗口，窗口滚动等，掌握如何处理窗口事件可以帮助我们实现更加丰富的交互效果。

常用鼠标事件：
名称描述
load当整个页面及所有依赖资源（如样式表和图片）都已完成加载时，将触发load事件
beforeunloadwindow、document 和它们的资源即将卸载时触发。当事件属性 returnValue 被赋值为非空字符串时，会弹出一个对话框，让用户确认是否离开页面（示例如下）。否则，事件被静默处理。一些浏览器实现仅在框架或内置框架接收到用户手势或交互时才显示对话框
resize窗口大小改变时触发
scroll元素内发生滚动时触发
3.1.1 load事件代码示例:
<script>
/\* 输出div中文字内容 \*/
// 方式一
window.addEventListener('load', function() {
  console.log(document.querySelector('.box').innerHTML)
})
// 方式二
window.onload = function() {
  console.log(document.querySelector('.box').innerHTML)
}
</script>
<div class="box">主要内容</div>

此处JS代码在元素之前，所以应该将代码放在load事件中，等待元素加载完成后再获取其内容。

使用onload绑定事件时，注意一个页面不要存在多个onload，这样会只会运行最后一个onload中的代码，推荐使用addEventListener绑定事件。

1.2 beforeunload事件代码示例:

window.addEventListener("beforeunload", function (e) {
  var confirmationMessage = "confirm close window ?"
  // 兼容WebKit与非WebKit内核浏览器
  (e || window.event).returnValue = confirmationMessage
  return confirmationMessage
})

根据returnValue或return的值可自定义对话框信息（只对IE有效）

1.3 resize事件代码示例:

/\* 调整浏览器窗口时，获取可视窗口宽高 \*/
window.addEventListener("resize", function (e) {
  console.log(window.innerWidth) // 可视窗口宽
  console.log(window.innerHeight) // 可视窗口高
})

多用于检测不同屏幕尺寸，自适应布局

1.4 scroll事件代码示例:

/\* 获取滚动条垂直滚动距离 \*/
window.addEventListener("scroll", function () {
    var myTop = 
    window.pageYOffset || 
    document.documentElement.scrollTop || 
    document.body.scrollTop; // 兼容写法
    console.log(myTop);
})

常用于检测滚动条滚动距离

任务练习：

①：实现窗口大小发生变化时，重置div元素高度为当前窗口高度的一半，请补全横线处代码

<style>
    .box {
        width: 200px;
        height: 500px;
        background-color: blue;
    }
</style>
<div class="box"></div>
<script>
  window.addEventListener('\_\_\_\_\_\_\_\_', function() {
      document.querySelector('.box').style.height = window.innerHeight/2 + 'px'
  })
</script>

resize

②：实现窗口滚动时，类名为top的元素固定在顶部，请补全横线处代码

<style>
    .box {height: 3000px;}
    .top {width: 200px;height: 200px;background-color: gray;}
</style>
<div class="box">
    <span>我是顶部</span>
    <div class="top">顶部元素</div>
</div>
<script>
  window.addEventListener('\_\_\_\_\_\_\_\_', function() {
      document.querySelector('.top').style.position = 'fixed'
  })
</script>

scroll

③：将h1元素中文字改为“欢迎光临”，请补全横线处代码

<script>
  window.addEventListener('\_\_\_\_\_\_\_\_', function() {
    document.querySelector('h1').innerText = "欢迎光临"
  })
</script>
<h1>等待中</h1>

load

④：浏览器窗口宽度为1000px时，p元素的字体大小为________px

<style>
  .item {
      font-size: 20px;
  }
</style>
<p class="item">我爱学习</p>
<script>
window.addEventListener('resize', function() {
    if (window.innerWidth < 900) {
      document.querySelector('.item').style.fontSize = '12px'
    }
})
</script>

思路：浏览器窗口宽度为1000px没有满足if条件，所以不改变

20

⑤：代码如下，最后输出的num数字是________

<script>
  var num = 0
  function add() {
    if(document.querySelector('.box')) {
      num++
    }
    console.log(num)
  }
  add()
  window.addEventListener('load', function() {
    add()
  })
  add()
</script>
<div class="box"></div>

思路：add方法中，只有获取到box节点时才会对num加1；
box节点在JS代码下方，只有在load事件中的add方法才能获取到box节点，所以最终num只会执行一次相加。

1

BOM window对象：

任务目标:

熟悉BOM结构
掌握window对象及其常用方法属性
掌握window的子对象常用属性和方法

任务背景:

BOM即浏览器对象模型（Browser Object Model），它提供了页面与浏览器窗口进行交互的对象接口。BOM由一系列的相关对象组成，window作为BOM的顶层对象，所有其他全局对象都是window的子对象，甚至DOM也是其子对象之一。学会了window对象及其子对象的常用属性方法，基本就掌握了BOM的大部分知识。

BOM结构：

在这里插入图片描述

window对象作为BOM的顶级对象，本身包含一些全局属性和方法，其子对象也有其特有的属性和方法

使用window子对象时，可以使用完整语法，也可以忽略window，如：window.alert()与alert()效果相同

window对象：

还有兄弟不知道网络安全面试可以提前刷题吗？费时一周整理的160+网络安全面试题，金九银十，做网络安全面试里的显眼包！

王岚嵚工程师面试题（附答案），只能帮兄弟们到这儿了！如果你能答对70%，找一个安全工作，问题不大。

对于有1-3年工作经验，想要跳槽的朋友来说，也是很好的温习资料！

【完整版领取方式在文末！！】

93道网络安全面试题

内容实在太多，不一一截图了

黑客学习资源推荐

最后给大家分享一份全套的网络安全学习资料，给那些想学习 网络安全的小伙伴们一点帮助！

对于从来没有接触过网络安全的同学，我们帮你准备了详细的学习成长路线图。可以说是最科学最系统的学习路线，大家跟着这个大的方向学习准没问题。

😝朋友们如果有需要的话，可以联系领取~

1️⃣零基础入门

① 学习路线

对于从来没有接触过网络安全的同学，我们帮你准备了详细的学习成长路线图。可以说是最科学最系统的学习路线，大家跟着这个大的方向学习准没问题。

image

② 路线对应学习视频

同时每个成长路线对应的板块都有配套的视频提供：

image-20231025112050764

2️⃣视频配套工具&国内外网安书籍、文档

① 工具

② 视频

image1

③ 书籍

image2

资源较为敏感，未展示全面，需要的最下面获取

在这里插入图片描述在这里插入图片描述

② 简历模板

在这里插入图片描述

因篇幅有限，资料较为敏感仅展示部分资料，添加上方即可获取👆

详情docs.qq.com/doc/DSlhRRFFyU2pVZGhS

avatar
文章
阅读
粉丝