2024 前端面试题(GPT回答 + 示例代码 + 解释)No.1 - No.20
本文题目来源于全网收集,答案来源于 ChatGPT 和 博主(的小部分……)
格式:题目 h3 + 回答 text + 参考大佬博客补充 text + 示例代码 code
+ 解释 quote + 补充 quote
目录 No.1 - No.20
- 本文题目来源于全网收集,答案来源于 ChatGPT 和 博主(的小部分……)
- 格式:题目 h3 + 回答 text + 参考大佬博客补充 *text* + 示例代码 ```code```+ 解释 quote + 补充 quote
- 1. 简述一下你对 HTML 语义化的理解?
- 补充:SEO表现
- 2. 谈谈 Iframe ?
- 3. 介绍一下 CSS 的盒子模型?
- 4. 讲讲 css 选择器的优先级?
- 5. 垂直居中几种方式?
- 6. CSS link 与 @import 的区别和用法?
- 7. 谈谈元素的隐藏方式及其区别(display:none visibility:hidden rgba opacity)
- 8. relative和absolute分别是相对于谁进行定位的?
- 9. 画一条0.5px的直线?(个人觉得似乎有点不妥?)
- 10. 1rem、1em、1vh、1px、1rpx各自代表的含义?
- 11. HTML5、CSS3 里面都新增了那些新特性?
- HTML5 新特性:
- CSS3 新特性:
- 12. JS 数据类型有哪些? || JS 有哪些内置对象?
- 原始数据类型(Primitive data types):
- 引用数据类型(Reference data types):
- 13. 基本数据类型和引用数据类型有什么区别?
- 基本数据类型(Primitive data types):
- 引用数据类型(Reference data types):
- 14. innerHTML 和 innerText 和 documen.write 的区别
- `innerHTML`:
- `innerText`:
- `document.write()`:
- 15. JavaScript 由哪三部分组成:
- 16. DOM 元素e的 e.getAttribute(propName)和 e.propName 有什么区别和联系?
- 区别:
- 联系:
- 17. offsetWidth / offsetHeight, clientWidth / clientHeight, scrollWidth / scrollHeight 的区别?
- 18. 检测浏览器版本版本有哪些方式?
- 19. 元素节点、文本节点、属性节点的nodeType、nodeName、nodeValue分别是什么?
- 20. HTTP 请求的时候 get 和 post 方式的区别?
1. 简述一下你对 HTML 语义化的理解?
HTML语义化是指在编写网页代码时,选择恰当的HTML标签来表达文档的结构和内容含义,而不是仅仅为了实现特定的样式效果。通过使用语义化的标签,我们可以提高代码的可读性、可维护性和可访问性,同时有助于搜索引擎更好地理解页面内容。
HTML 语义化是指在编写 HTML 代码时,使用恰当的标签来传达文档结构和内容的含义、目的和作用,而不仅仅是为了呈现某种样式或布局效果。它可以提高代码的可读性、可维护性和可访问性,有助于用户和搜索引擎等对网页进行更准确和有效的解读。
具体来说,HTML 语义化的特点包括:
- 使用恰当的标签:根据文档结构和内容的含义,选择适合的 HTML 标签来标记元素,如 <article>、<section>、<header>、<nav>、<aside>、<footer> 等。
- 按重要性排序:将页面中的内容按照重要性排序,先显示最重要的内容,后显示较不重要的内容,可以使用 <h1> 到 <h6> 标签表示标题的重要性。
- 避免滥用无语义的标签:尽量避免使用 <div> 和 <span> 等无语义的标签来布局,而是使用具有语义含义的标签来表达意图。
- 使用 alt 属性:对于图片等非文本内容,应该使用 alt 属性来提供替代文本,以便于屏幕阅读器等工具能够正确地解读和呈现。
- 表示关联关系:使用 <a> 标签来表示链接,同时利用 href 属性来指定链接地址,title 属性来提供额外信息,rel 属性来表示关联关系等。
HTML 语义化的优点包括:
- 增强可读性:使用语义化的标签可以使代码更加易读易懂,更符合人类阅读习惯,也有助于其他开发者快速理解和维护代码。
- 提高可访问性:语义化的 HTML 代码可以提高网站的可访问性,使得视障用户、搜索引擎等能够更准确地解读网页内容。
- 便于 SEO:搜索引擎会根据页面内容的语义结构来评估网站的质量,因此语义化的 HTML 代码能够提高网站的 SEO 效果。
- 方便维护:使用语义化的 HTML 代码可以使得代码更容易维护和修改,因为代码的结构和意图更加清晰和明确。
总之,HTML 语义化是一种良好的编程实践,有助于提高网站的质量、可访问性和可维护性,值得开发者在日常工作中积极应用。
补充:SEO表现
SEO(Search Engine Optimization,搜索引擎优化)表现指的是网站在搜索引擎中的排名和展示情况。一个网站的良好SEO表现意味着它在搜索引擎结果页面(SERP)中能够获得较高的排名,吸引更多的有意向访问者。
良好的SEO表现通常包括以下几个方面:
- 排名优化:网站在搜索引擎中的关键词排名靠前,特别是在重要关键词上获得较高位置。
- 流量增长:通过搜索引擎带来的有机流量增加,即用户通过搜索引擎输入相关关键词后点击进入网站的访问量增加。
- 点击率提升:搜索结果中网站的标题和描述吸引用户点击的概率增加,提高搜索结果的点击率。
- 页面曝光:网站的页面数量被搜索引擎索引的程度增加,提高网站在搜索引擎中的曝光度。
- 用户满意度:网站内容质量、页面加载速度、用户体验等因素得到优化,提升用户对网站的满意度和停留时间。
这些因素综合起来,可以帮助网站获得更多的有机流量和有效的访问,从而提升网站的知名度、品牌价值和业务转化率。SEO表现不仅仅关注排名,更注重如何通过优化网站内容、结构和用户体验等方面,为用户提供有价值的信息和良好的访问体验。
2. 谈谈 Iframe ?
Iframe是HTML中的一个标签,用于在网页中嵌入其他独立的HTML文档或外部内容。可以使用Iframe来实现在网页中嵌入视频、地图、表单等内容。比如,可以通过在Iframe的src属性中指定Bilibili视频或Baidu地图的URL来将它们嵌入到网页中。此外,也可以利用Iframe来在网页中实现广告展示、内嵌其他网站的内容等功能。对于Iframe的使用,要注意设置合适的尺寸、避免对页面布局产生混乱,以及关注对网页性能、安全性和可访问性的影响。在实际开发中,要根据具体的需求和最佳实践来灵活运用Iframe,并权衡其优缺点来达到最佳的效果。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Iframe Example</title>
</head>
<body><h1>嵌入视频示例</h1><p>以下是一个嵌入视频的示例:</p><iframe width="560" height="315" src="https://www.bilibili.com/video/BV1V3411N7a2" frameborder="0" allowfullscreen></iframe>
</body>
</html>
Iframe(Inline Frame)是HTML中的一个标签,用于在一个网页中嵌入另一个独立的HTML文档。使用Iframe标签可以实现在当前页面内嵌入其他网页、广告、地图等内容。Iframe的优缺点如下:
- 优点:
可嵌入任何类型的文档:Iframe可以嵌入任何类型的文档,包括视频、音频、地图、表单等。这使得在一个网页中集成多种类型的内容变得更加容易。
让网页加载更快:Iframe可以让网页的不同部分分别加载,这样可以提高网页的响应速度和性能。
增强了页面的交互性:通过Iframe在网页中嵌入互动性的内容,例如视频、表单或游戏,可以增强网页的交互性和吸引力。
提供了一定的隔离性:由于被嵌入的文档在Iframe中运行,因此可以提供一定的隔离性,防止外部脚本或代码对主页面造成影响。- 缺点:
会导致网页布局混乱:如果Iframe的尺寸没有设置好,或者被嵌入的文档尺寸发生变化,可能会导致网页布局混乱。
降低了网页的可访问性:Iframe中的内容对于搜索引擎不友好,可能会影响页面的SEO表现和可访问性。此外,屏幕阅读器等辅助技术也可能无法识别Iframe中的内容。
可能会降低网页的安全性:通过Iframe嵌入的文档可能包含恶意脚本或代码,从而导致网页的安全性受到威胁。
不利于网页的响应式设计:由于Iframe的尺寸固定,因此不容易进行响应式设计,这可能会对移动设备用户造成不便。总的来说,Iframe是一种方便的HTML元素,可以在网页中嵌入其他类型的文档。但是,在使用它时需要权衡其优缺点,并谨慎考虑其对网站性能、安全性和可访问性的影响。
3. 介绍一下 CSS 的盒子模型?
CSS 盒子模型是指在网页布局中,将每个元素看作一个矩形的盒子,这个盒子包含内容、内边距、边框和外边距四个部分。具体来说,它包括内容区域、内边距、边框和外边距这四个部分。内容区域是盒子的实际内容,内边距是内容与边框之间的空间,边框用于界定内容区域的边界,而外边距则是盒子与相邻元素之间的空白区域。
在 CSS 中,盒子模型有两种标准:标准盒子模型和 IE 盒子模型。标准盒子模型计算元素的宽度和高度仅包括内容区域,不包括内边距、边框和外边距;而IE 盒子模型计算宽度和高度包括内容区域、内边距和边框,但不包括外边距。我们可以通过 box-sizing 属性来指定使用哪种盒子模型。
CSS 的盒子模型是指在 Web 页面中,每个元素(如文本、图像、块级元素等)都被看作是一个矩形的盒子,这个盒子包含内容、内边距、边框和外边距四个部分。这些部分的组合形成了元素在页面中所占据的空间。
盒子模型的四个部分如下:
- 内容区域(Content):盒子的实际内容,例如文本或图像。
- 内边距(Padding):内容区域与边框之间的空间,可以通过 CSS 属性设置。
- 边框(Border):内边距之外的边框,用于界定内容区域的边界。
- 外边距(Margin):盒子与相邻元素之间的空白区域,可以通过 CSS 属性设置。
在 CSS 中,可以通过设置不同的属性来控制盒子模型的各个部分,例如:
- padding 属性用于设置内边距的大小;
- border 属性用于设置边框的样式、宽度和颜色;
- margin 属性用于设置外边距的大小。
盒子模型在页面布局和设计中起着重要作用,通过调整盒子模型的不同部分,可以控制元素之间的间距、边框样式以及元素的尺寸和位置。理解和熟练运用盒子模型是开发网页布局的基础之一。
在 CSS 中,盒子模型主要有两种标准:标准盒子模型(Content Box)和IE 盒子模型(Border Box)。它们在计算元素的宽度和高度时略有不同。
- 标准盒子模型(Content Box):
- 元素的宽度(width)和高度(height)仅包括内容区域,不包括内边距(padding)、边框(border)和外边距(margin)。
- 计算公式:
width/height = content width/height
- IE 盒子模型(Border Box):
- 元素的宽度(width)和高度(height)包括内容区域、内边距(padding)和边框(border),但不包括外边距(margin)。
- 计算公式:
width/height = content width/height + padding + border
在 CSS 中,可以通过 box-sizing 属性来指定使用哪种盒子模型:
box-sizing: content-box;
:使用标准盒子模型(默认值)box-sizing: border-box;
:使用IE 盒子模型
选择不同的盒子模型取决于布局需求和个人偏好。使用 IE 盒子模型可能更便于控制元素的尺寸,因为内边距和边框不会影响元素的实际宽度和高度,而使用标准盒子模型则更符合传统的 CSS 盒子模型定义。
4. 讲讲 css 选择器的优先级?
在 CSS 中,选择器优先级用于确定当多个选择器同时应用于同一个元素时,哪个选择器的样式规则将被应用。CSS 选择器优先级是根据选择器的特定性和重要性来计算的。
特定性是用于衡量选择器的权重的一个值,它是由选择器中各种组件的数量和类型来决定的。通常,选择器中包含的ID 选择器的数量越多,特定性就越高,因为 ID 选择器是最具体的选择器。其次是类选择器和属性选择器,再其次是标签选择器。
当特定性相等时,样式规则的顺序将起作用,后定义的规则将覆盖先定义的规则。但有一种情况例外,即使用!important
声明的样式规则,它具有最高的优先级,可以覆盖其他所有规则。
大佬博客补充: 通配符 继承 浏览器默认属性
<-- CSS选择器优先级按照以下规则进行计算:-->1. 内联样式(Inline Styles):通过style属性直接添加到HTML元素中的样式具有最高的优先级。例如:-->
<p style="color: red;">这是一个红色的段落。</p>2. ID选择器(ID Selectors):使用#前缀定义的ID选择器具有较高的优先级。例如:
<style>
#myElement {color: blue;
}
</style>3. 类选择器、属性选择器和伪类选择器(Class Selectors, Attribute Selectors, and Pseudo-Class Selectors):类选择器、属性选择器和伪类选择器具有相同的优先级,它们通过.class、[attribute]或:pseudo-class来定义。
<style>
.myClass {color: green;
}
[type="text"] {font-weight: bold;
}
a:hover {text-decoration: underline;
}
</style>4. 元素选择器和伪元素选择器(Element Selectors and Pseudo-Element Selectors):元素选择器和伪元素选择器具有最低的优先级,它们通过元素名称或::pseudo-element来定义。例如:
<style>
h1 {font-size: 24px;
}
::first-letter {text-transform: uppercase;
}
</style>
5. 垂直居中几种方式?
在CSS中,有几种常见的方法可以实现垂直居中。一种常用的方法是使用Flexbox布局,通过设置父元素的display: flex; align-items: center; justify-content: center;
,子元素就可以在垂直和水平方向上居中显示。
另一种方法是使用position和transform属性,可以将子元素相对于父元素进行绝对定位,并使用top: 50%; left: 50%; transform: translate(-50%, -50%);
来使其在垂直和水平方向上居中。
此外,还可以使用Grid布局和表格布局来实现垂直居中。Grid布局可以通过设置父元素的display: grid; place-items: center;
来实现居中,而表格布局可以使用display: table; vertical-align: middle;
来实现垂直居中。
大佬博客补充:单行文本: line-height = height
<-- 在CSS中,实现垂直居中可以使用多种方式,以下是一些常见的方法:-->1. 使用Flexbox布局:Flexbox是一种现代的布局方式,可以轻松实现元素的水平和垂直居中。通过设置父元素的display: flex;以及align-items: center; justify-content: center;,子元素就可以在垂直和水平方向上居中显示。
<style>
.container {display: flex;align-items: center;justify-content: center;height: 300px; /* 需要有明确的高度 */
}
</style>2. 使用Grid布局:类似于Flexbox,Grid布局也可以轻松实现元素的水平和垂直居中。通过设置父元素的display: grid; place-items: center;,子元素可以在垂直和水平方向上居中显示。
<style>
.container {display: grid;place-items: center;height: 300px; /* 需要有明确的高度 */
}
</style>3. 使用position和transform:可以使用绝对定位和transform属性来实现垂直居中,这种方法适用于不知道高度的情况。
<style>
.container {position: relative;height: 300px; /* 父元素需要有明确的高度 */
}.centered {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);
}
</style>4. 使用表格布局:可以将元素以表格的形式布局,然后使用vertical-align: middle;来实现垂直居中。
<style>
.container {display: table;height: 300px; /* 需要有明确的高度 */
}.centered {display: table-cell;vertical-align: middle;
}
</style>以上是一些常见的实现垂直居中的方法,每种方法都有其适用的场景,具体选择哪种方法取决于布局的需求和兼容性考虑。
6. CSS link 与 @import 的区别和用法?
Link 标签是 HTML 中的一个标签,用于将外部样式表链接到 HTML 文档。它支持并行加载,不会阻塞页面的渲染,并且可以定义多个 link 标签引入多个外部样式表,方便管理和维护。
@import 是 CSS 的指令,用于在 CSS 文件中引入外部样式表。它必须写在 CSS 文件的最前面,放在其他样式规则之前,并且会在页面加载时按顺序串行加载,可能导致页面加载速度较慢。
因此,一般情况下我们推荐使用 link 标签来引入外部样式表,因为它具有更好的性能表现和灵活性。而 @import 则适用于一些特殊需求,比如根据媒体查询条件加载不同的样式表。
大佬博客补充:link 支持使用 Javascript 控制 DOM 去改变样式;而 @import 不支持
CSS 中的 link 标签和 @import 指令都可以用来引入外部样式表,但它们有一些区别和不同的用法:
- Link 标签:
- Link 标签是 HTML 中的一个标签,在 head 部分使用,用于将外部样式表链接到 HTML 文档。
- 通过 link 标签引入的样式表会以并行方式加载,不会阻塞页面的渲染。
- 可以定义多个 link 标签引入多个外部样式表,方便管理和维护。
<link rel="stylesheet" type="text/css" href="styles.css">
- @import 指令:
- @import 是 CSS 的一个指令,用于在 CSS 文件中引入外部样式表。
- @import 必须写在 CSS 文件的最前面,放在其他样式规则之前。
通过 @import 引入的样式表会在页面加载时按顺序串行加载,可能会导致页面加载速度较慢。
@import url("styles.css");
主要区别:
- Link 标签在 HTML 中使用,而 @import 是 CSS 的一部分,写在 CSS 文件中。
-Link 标签支持并行加载,@import 会串行加载。- Link 标签没有特定的加载顺序要求,而 @import 必须写在 CSS 文件的最前面。
一般来说,推荐使用 link 标签来引入外部样式表,因为它具有更好的性能表现和灵活性。而 @import 则适用于一些特殊需求,比如根据媒体查询条件加载不同的样式表。
7. 谈谈元素的隐藏方式及其区别(display:none visibility:hidden rgba opacity)
首先,display: none
可以完全移除元素并且不占据文档流中的位置。它对其他元素的布局没有影响,同时元素也不可见,无法与用户交互。
其次,visibility: hidden
也可以隐藏元素,但仍然保留了元素在文档流中的位置。虽然元素不可见,但它仍然会影响其他元素的布局。
此外,我们还可以使用 rgba
来设置元素的背景色为透明。通过将背景颜色的 rgba
值的 alpha 通道设为 0,可以实现元素的隐藏。这种方式下,元素仍然占据位置,但不可见。与 visibility: hidden
不同,元素可以与用户交互。
最后,opacity
属性可以通过设置元素的透明度来隐藏元素。与前面的方法不同,opacity
不会移除元素或改变其位置。元素仍然存在于文档流中,占据位置,但是变得透明不可见。与其他方式相比,opacity
可以实现渐变效果的隐藏,同时仍然可以与用户交互。
示例测试代码:
<!DOCTYPE html>
<html>
<head><style>#myButton {/* opacity: 0; *//* visibility: hidden; */display: none;}</style>
</head>
<body><button id="myButton" onclick="alert('按钮被点击了!')">点击我</button><script>document.getElementById('myButton').addEventListener('click', function() {alert('按钮被点击了!');});</script>
</body>
</html>
8. relative和absolute分别是相对于谁进行定位的?
position: relative
定位是相对于元素自身在文档流中的位置进行定位。换句话说,元素的定位参考点是自身,通过设置 top、right、bottom 和 left 属性来调整元素的位置,但不会影响其他元素的布局。
position: absolute
定位是相对于元素最近的已定位祖先元素进行定位。如果没有已定位的祖先元素,则相对于最初包含它的块级容器(通常是 <body>
元素)进行定位。这意味着绝对定位元素的定位参考点是最近的已定位祖先元素,通过设置 top、right、bottom 和 left 属性来调整元素相对于该祖先元素的位置。如果没有已定位的祖先元素,那么相对于最初包含它的块级容器进行定位。此时,绝对定位元素可能会影响其他元素的布局,因为它在正常文档流中不再占据位置。
9. 画一条0.5px的直线?(个人觉得似乎有点不妥?)
在屏幕上直接绘制出 0.5 像素宽度的直线是不可能的,因为屏幕的物理像素是一个固定大小的单元,无法以小于 1 像素的尺寸显示。 不过,在网页设计中,我们可以通过一些技巧来模拟出 0.5 像素宽度的效果。例如:
- 使用 CSS 的 transform 属性对元素进行缩放来达到这个效果。具体做法是创建一个 1px 宽度的线条,并将其水平缩放为原始宽度的一半,从而实现看起来像是 0.5px 宽度的线条。
transform: scaleX(0.5);
- 使用 CSS 的 border 属性,并将线条颜色设置为半透明黑色。具体做法是创建一个高度为 1px 的 div 元素,并将其 border-top 属性设置为 1px 宽度、半透明黑色。
border-top: 1px solid rgba(0, 0, 0, 0.5);
10. 1rem、1em、1vh、1px、1rpx各自代表的含义?
- 1rem:表示相对于根元素(通常是 元素)的字体大小。例如,如果根元素的字体大小为 16 像素,那么 1rem 等于 16 像素。
- 1em:表示相对于当前元素的字体大小。例如,如果某个元素的字体大小为 14 像素,那么 1em 等于 14 像素。
- 1vh:表示相对于视口高度的百分比。视口高度是指浏览器窗口可见区域的高度。例如,如果视口高度为 800 像素,那么 1vh 等于 8 像素(即 800 * 1%)。
- 1px:表示一个像素单位。像素是屏幕上最小的显示单元。实际显示效果会因设备像素密度(DPI/PPI)而有所不同。
- 1rpx:是微信小程序中的单位,表示相对于屏幕宽度的适配像素。它是微信小程序框架提供的一种相对单位,用于实现在不同设备上的屏幕适配。(个人补充)
需要注意的是,rem 和 em 是相对单位,其大小取决于父元素或根元素的字体大小。而 vh 和 px 是绝对单位,其大小固定不变。可以根据需要选择适合的单位来进行布局和样式设计。
11. HTML5、CSS3 里面都新增了那些新特性?
HTML5 新特性:
- 语义化标签:包括
<header>
、<footer>
、<nav>
、<article>
、<section>
等,使得页面结构更清晰明了。 - 新的表单元素:如
<input type="date">
、<input type="email">
、<input type="url">
等,简化了表单设计。 - 音频和视频支持:通过 和 元素,实现在网页中嵌入音频和视频内容。
- Canvas 绘图:提供了一个使用 JavaScript 进行绘图的 API,用于动态生成图形、动画等。
- 本地存储:包括 Web Storage(localStorage 和 sessionStorage)和 IndexedDB,用于在客户端存储数据。
- Web Workers:允许在后台运行脚本,以提高多线程处理能力。
- WebSocket:实现了浏览器与服务器之间全双工通信的功能。
- Geolocation API:提供了获取用户地理位置信息的能力。
CSS3 新特性:
- 选择器:新增了许多新的选择器,如属性选择器、伪类选择器等,增强了样式选择的灵活性。
- 盒子模型:引入了 box-sizing 属性,可以更方便地控制盒子模型的尺寸。
- 阴影效果:通过 box-shadow 和 text-shadow 属性,可以为元素添加阴影效果。
- 渐变:新增了渐变颜色的支持,包括线性渐变(linear-gradient)和径向渐变(radial-gradient)。
- 过渡和动画:引入了 transition 和 animation 属性,使得实现元素过渡和动画效果更加简单。
- 媒体查询:允许根据设备特性(如屏幕大小、分辨率等)调整样式,实现响应式设计。
- Flexbox 布局:提供了一种更灵活的布局方式,使得实现复杂布局更加容易。
- Grid 布局:引入了网格布局系统,更好地支持多列布局和对齐方式。
以上只是 HTML5 和 CSS3 中的一部分新特性,它们使得网页开发更具创造力和交互性,为用户带来更好的浏览体验。
12. JS 数据类型有哪些? || JS 有哪些内置对象?
原始数据类型(Primitive data types):
- String(字符串):表示文本数据,使用单引号(')或双引号(")表示。
- Number(数字):表示数值,包括整数和浮点数(带小数点的数值)。
- Boolean(布尔值):表示逻辑值,只有两个值:
true
和false
。 - Undefined(未定义):表示声明了变量但未赋值的数据类型,变量默认值为 undefined。
- Null(空值):表示空值或者不存在的值。
- Symbol(符号):ES6 新增,表示唯一且不可变的值。
引用数据类型(Reference data types):
- Object(对象):表示复杂数据结构,可以包含多个键值对。
- Array(数组):一种特殊的对象,用于存储按索引顺序排列的值。
- Function(函数):函数也是对象的一种,可以执行代码块。
- Date(日期):表示日期和时间。
- RegExp(正则表达式):用于匹配字符串的模式。
- Error(错误):表示错误对象。
在 JavaScript 中,对象类型和引用数据类型其实是同一个概念的不同表达方式。JavaScript 中的对象类型就是引用数据类型。
当我们谈到引用数据类型时,我们指的是存储在内存中的引用(地址),而不是实际的数据本身。在 JavaScript 中,所有的对象都是引用数据类型。当我们创建一个对象时,实际上在内存中分配了一块空间,并且变量存储的是指向该内存空间的引用。
因此,当我们将一个对象赋值给另一个变量时,实际上是将对象的引用(地址)复制给了另一个变量,而不是复制整个对象。这意味着两个变量实际上指向了内存中的同一个对象,因此它们共享同一块内存空间,对一个变量所做的修改会影响到另一个变量。
总之,对象类型就是引用数据类型,它们指的是存储在内存中的对象,并且变量存储的是对象的引用(地址)。对于 JavaScript 开发者来说,理解对象类型/引用数据类型的工作原理对于正确地处理对象的赋值、传递和操作非常重要。
13. 基本数据类型和引用数据类型有什么区别?
基本数据类型(Primitive data types):
- 存储方式:存储在栈内存中。
- 访问:直接访问变量的值。
- 拷贝:通过值进行拷贝。
- 比较:比较的是值是否相等。
引用数据类型(Reference data types):
- 存储方式:存储在堆内存中,变量存储的是指向堆内存的地址。
- 访问:先访问地址,再根据地址访问堆内存中的对象。
- 拷贝:拷贝的是地址,多个变量指向同一块内存空间。
- 比较:比较的是引用是否指向同一块内存空间。
14. innerHTML 和 innerText 和 documen.write 的区别
innerHTML
和 innerText
都是用于操作 HTML 元素内容的属性,它们之间有一些重要的区别:
innerHTML
:
- 作用:
innerHTML
是一个属性,可以获取或设置元素的 HTML 内容,包括标签和文本。 - HTML 解析:
innerHTML
返回的是解析过的 HTML 内容,在设置时会解析字符串中的 HTML 标签并将其作为 HTML 元素展示。 - 安全性:由于
innerHTML
会解析 HTML,因此存在安全风险,可能被用于注入恶意脚本(XSS 攻击)。 - 使用方式:只能在 JavaScript 代码中使用,不能在 HTML 元素中使用 JavaScript 调用。
- 局部作用:只会影响元素内部的 HTML 内容,不会改变其他元素或文档结构。
innerText
:
- 作用:
innerText
是一个属性,用于获取或设置元素的文本内容,会忽略 HTML 标签,只返回可见文本内容。 - 文本内容:
innerText
返回的是元素内部的纯文本内容,不包含 HTML 标签。 - 性能:由于
innerText
不涉及解析 HTML,在某些情况下可能比innerHTML
更快。
document.write()
:
- 作用:在文档中写入 HTML 或文本内容。
- 使用方式:可以直接在 JavaScript 代码中使用,也可以在 HTML 元素中使用 JavaScript 调用。
- 覆盖现象:如果
document.write()
在页面加载后调用,它会覆盖整个文档(包括 HTML、CSS 和其他脚本)。 - 支持性能:
document.write()
可以在没有 DOM 的情况下操作文档,但在大多数情况下,使用它来操作 DOM 是不推荐的。
15. JavaScript 由哪三部分组成:
-
ECMAScript(ES):这是 JavaScript 的核心,描述了该语言的语法和基本对象。它规定了变量、数据类型、操作符、控制结构、对象和函数等基本的语言元素。
-
文档对象模型(DOM):DOM 是一种让程序可以对 HTML 和 XML 文档进行访问和操作的方法。通过 DOM,开发者可以使用 JavaScript 来操作页面上的元素,比如改变内容、样式和结构等。
-
浏览器对象模型(BOM):BOM 提供了与浏览器交互的方法和接口,包括处理浏览器窗口、历史记录、定时器等功能。BOM 并没有标准化,因此不同的浏览器可能提供不同的 BOM 接口。
16. DOM 元素e的 e.getAttribute(propName)和 e.propName 有什么区别和联系?
区别:
-
适用范围:
e.getAttribute(propName)
可以获取任意属性的值,包括标准属性和自定义属性。e.propName
只能获取标准的 HTML 属性的值。
-
返回值类型:
e.getAttribute(propName)
返回的始终是一个字符串,即属性的值。e.propName
可以根据属性的类型返回不同的值,比如布尔值、数值等。
-
属性是否存在:
e.getAttribute(propName)
在属性不存在时返回null
。e.propName
在属性不存在时返回undefined
。
联系:
-
获取属性值:
- 当属性存在且为字符串类型时,可以通过
e.getAttribute(propName)
和e.propName
都能够获取到属性的值。 - 但对于非字符串类型的属性,如布尔值或数值,只能使用
e.propName
来获取其原始类型的值,因为e.getAttribute(propName)
始终返回字符串类型。
- 当属性存在且为字符串类型时,可以通过
-
设置属性值:
- 通过
e.setAttribute(propName, value)
方法可以设置属性的值,其中属性名propName
可以是任意字符串。 - 通过直接赋值
e.propName = value
的方式也可以设置标准 HTML 属性的值。
- 通过
大佬博客补充:
e.getAttribute:获取的是标签上属性
e.propName:获取的是元素对象上属性
<body><input id="myInput" type="checkbox" checked="checked" data-number="100">
<script>var inputType1 = document.getElementById('myInput').type;var inputType2 = document.getElementById('myInput').getAttribute('type');console.log('inputType1:', inputType1); // 输出:inputType1: checkboxconsole.log('inputType2:', inputType2); // 输出:inputType2: checkboxvar checkedValue1 = document.getElementById('myInput').checked;var checkedValue2 = document.getElementById('myInput').getAttribute('checked');console.log('checkedValue1:', checkedValue1); // 输出:checkedValue1: trueconsole.log('checkedValue2:', checkedValue2); // 输出:checkedValue2: "checked"var numberValue1 = document.getElementById('myInput').getAttribute('data-number');var numberValue2 = document.getElementById('myInput').dataset.number;console.log('numberValue1:', numberValue1); // 输出:numberValue1: "100"console.log('numberValue2:', numberValue2); // 输出:numberValue2: "100"
</script>
</body>
17. offsetWidth / offsetHeight, clientWidth / clientHeight, scrollWidth / scrollHeight 的区别?
offsetWidth
和offsetHeight
content + padding + border + 滚动条clientWidth
和clientHeight
content + padding(不含滚动条)scrollWidth
和scrollHeight
content + padding + 溢出尺寸(不含滚动条)- 均不含margin
<!DOCTYPE html>
<html>
<head><title>Box Model Example</title><style>#myElement {width: 200px;height: 150px;padding: 20px;margin: 30px;border: 5px solid black;overflow: scroll;}</style>
</head>
<body><div id="myElement"><p>Content that causes overflow when added repeatedly. </p><p>Content that causes overflow when added repeatedly. </p><p>Content that causes overflow when added repeatedly. </p></div><script>var element = document.getElementById("myElement");console.log("offsetWidth: " + element.offsetWidth + ", offsetHeight: " + element.offsetHeight);console.log("clientWidth: " + element.clientWidth + ", clientHeight: " + element.clientHeight);console.log("scrollWidth: " + element.scrollWidth + ", scrollHeight: " + element.scrollHeight);</script>
</body>
</html>
18. 检测浏览器版本版本有哪些方式?
-
navigator.userAgent:
- 可以通过
navigator.userAgent
属性获取包含了浏览器信息的用户代理字符串。通过解析这个字符串,可以获取到浏览器的名称和版本信息。 - 例如,可以使用正则表达式匹配某些关键字来判断浏览器类型和版本。
- 可以通过
-
navigator.appVersion:
- 类似于
navigator.userAgent
,navigator.appVersion
属性也提供了浏览器的版本信息。 - 通常结合
navigator.appName
和navigator.appVersion
来判断浏览器类型和版本。
- 类似于
-
navigator.platform:
navigator.platform
属性返回用户操作系统的平台信息。结合浏览器类型和版本信息,可以更准确地判断浏览器版本。
-
Feature Detection:
- 使用特性检测来检测浏览器是否支持某些特定的功能或属性。根据不同浏览器对特性的支持程度来推断浏览器版本。
- 例如,检测某些新特性、API 或 CSS 属性在不同浏览器中的支持情况。
-
JavaScript 库:
- 使用现有的 JavaScript 库(如 Modernizr)来检测浏览器版本和支持的特性。这些库会处理复杂的浏览器兼容性问题,让开发者更方便地编写跨浏览器兼容的代码。
-
HTTP 请求头:
- 在服务器端获取浏览器版本信息,可以从 HTTP 请求头中读取
User-Agent
字段,其中包含了浏览器信息。
- 在服务器端获取浏览器版本信息,可以从 HTTP 请求头中读取
19. 元素节点、文本节点、属性节点的nodeType、nodeName、nodeValue分别是什么?
节点类型 | nodeType | nodeName | nodeValue |
---|---|---|---|
元素节点 | 1 | 元素的标签名 | null |
文本节点 | 3 | “#text” | 文本内容 |
属性节点 | 2 | 属性的名称 | 属性的值 |
20. HTTP 请求的时候 get 和 post 方式的区别?
-
数据位置:GET 请求将请求参数放在 URL 的查询字符串中,而 POST 请求则将请求参数放在请求实体(body)中。因此,GET 请求会将请求参数暴露在 URL 中,而 POST 请求相对更安全。
-
安全性:由于 GET 请求将请求参数暴露在 URL 中,因此 GET 请求不适合传输敏感信息,因为这些信息可能被记录在浏览器历史记录、服务器日志等地方。而 POST 请求的请求参数是包含在请求体中的,相对来说更安全。
-
幂等性:GET 请求是幂等的,也就是说对同一个 URL 的多次请求得到的结果是一样的。而 POST 请求则不一定是幂等的,因为可以在请求体中传递不同的内容。
-
缓存:GET 请求可以被缓存,而 POST 请求不能被缓存。因为 GET 请求的请求参数在 URL 中,所以浏览器可以根据 URL 缓存请求结果,而 POST 请求的请求参数在请求体中,无法缓存请求结果。
-
传输大小:由于 GET 请求将请求参数放在 URL 中,所以 URL 的长度有限制,因此 GET 请求能够传输的数据量较小。而 POST 请求将请求参数放在请求体中,没有 URL 长度限制,能够传输大量数据。
综上,GET 请求适合请求数据量较小、安全性要求不高、幂等性要求高、需要缓存的场景。而 POST 请求适合请求数据量较大、安全性要求较高、幂等性要求不强、不需要缓存的场景。
收工 2024-02-12 08:02
相关文章:
2024 前端面试题(GPT回答 + 示例代码 + 解释)No.1 - No.20
本文题目来源于全网收集,答案来源于 ChatGPT 和 博主(的小部分……) 格式:题目 h3 回答 text 参考大佬博客补充 text 示例代码 code 解释 quote 补充 quote 目录 No.1 - No.20 本文题目来源于全网收集,答案来源于…...
通过`ssh`同步`tmux`剪贴板内容
通过ssh同步tmux剪贴板内容 通过ssh连接远程服务器时,可以通过xclip同步tmux剪贴板内容。这需要在服务器上安装xclip,且需要在ssh远程连接时开启X11。 此处附tmux剪贴板调用xclip的配置: # Copy the current buffer to the system clipboa…...
HTTP 响应状态代码
HTTP 响应状态代码 HTTP 响应状态代码指示特定 HTTP 请求是否已成功完成。 响应分为五类: 信息性回复 ( 100 – 199)成功响应 ( 200 – 299)重定向消息 ( 300 – 399)客户端错误响应 ( 400 – 499)服务器错误…...
[OPEN SQL] 新增数据
INSERT语句用于数据的新增操作 本次操作使用的数据库表为SCUSTOM,其字段内容如下所示 航班用户(SCUSTOM) 该数据库表中的部分值如下所示 1.插入单条数据 语法格式 INSERT <dbtab> FROM <wa>. INSERT INTO <dbtab> VALUES <wa>. INSERT &…...
OpenHarmony—UIAbility组件生命周期
概述 当用户打开、切换和返回到对应应用时,应用中的UIAbility实例会在其生命周期的不同状态之间转换。UIAbility类提供了一系列回调,通过这些回调可以知道当前UIAbility实例的某个状态发生改变,会经过UIAbility实例的创建和销毁,…...
Mybatis的使用
MyBatis 是一个流行的 Java 持久层框架,它提供了 SQL 映射和对象关系映射的功能,让开发者能够更加便捷地操作数据库。MyBatis 通过 XML 或注解的方式配置 SQL 语句,并将 Java 对象与数据库表进行映射,以简化 JDBC 的复杂操作。以下…...
Python 播放音乐
本篇是使用Python pygame库来实现操作音乐。 安装pygame 播放音乐需要pygame库,如果没有可以进行安装。 命令如下: pip install pygame 引入类库 需要引入两个类库,即time和pygame。 示例如下: import time import pygame 播…...
[嵌入式系统-21]:RT-Thread -7- 内核组件编程接口 - 定时器
目录 一、RT-Thread定时器 1.1 概述 1.2 定时器的种类 1.2.1 周期性 1.2.2 实时性 1.2.3 功能 二、 RT-Thread 定时器的一般步骤 2.1 步骤 2.2 Flag 2.3 示例 一、RT-Thread定时器 1.1 概述 在 RT-Thread 中,定时器是一种常用的机制,用于在指…...
Python Matplotlib 的学习笔记
Python Matplotlib 的学习笔记 0. Python Matplotlib 简介1. 为什么要用 Matplotlib?2. Matplotlib 基础类详解2-1. Line(线)2-2. Marker(标记)2-3. Text(文本)2-4. Legend(图例&…...
SQL语言1
创建数据库 CREATE DATABASE 展示数据库 SHOW DATABASE 整数 INT 有小数点的数 DECIMA(m, n) #m是有几位数,n是有几位小数 字符串 VARCHAR(n) (Binary Large Object)图片 影片 BLOB ‘YYYY-MM-DD’日期 DATA YYYY-MM-DD HH:MM:SS 记…...
PowerShell搭建vue起始项目
Windows PowerShell搭建vue起始项目 搜索PowerShell,以管理员身份运行。 复制文件夹路径 cd 到这个文件夹位置 命令行创建项目:vue create 项目名 这里写自己的项目名就行,我写的yeb vue create yeb 创建成功后是这样的 有颜色的就是选中的ÿ…...
jmeter遇到连接数据库的问题
jmeter连接mysql或者oracle简单,但是连接过inceptor吗? 上货 1、下载驱动inceptor 5.1.2.jar包 2、在添加驱动那里导入 3、在JBC request中的写法 PS:没什么可说的...
应急响应实战笔记02日志分析篇(3)
第3篇:Web日志分析 ox01 Web日志 Web访问日志记录了Web服务器接收处理请求及运行时错误等各种原始信息。通过对WEB日志进行的安全分析,不仅可以帮助我们定位攻击者,还可以帮助我们还原攻击路径,找到网站存在的安全漏洞并进行修复。 我们来…...
常见性能优化策略
对于经常接触高并发服务的同学来学,会经常涉及到性能优化,但是由于平时很少总结,内容会比较分散,这里简单做一些总结 1:空间换时间 比如一些数据的访问需要很快返回结果,原本在磁盘上的数据,需…...
【微信小程序】微信小程序开发:从入门到精通
微信小程序开发:从入门到精通 一、开发准备二、小程序开发流程1、注册与创建项目2、开发页面3、配置4、调试与预览5、发布与审核 随着移动互联网的普及,微信小程序成为了越来越多企业和个人开发者的首选。小程序是一种无需下载安装即可使用的应用&#x…...
【经验】STM32的一些细节
这两天 碰到的奇葩问题是 STM32定时器同步的问题。 我的设计本意是:使用定时器T3以100us的周期来定时发送命令给 FPGA。由于编码器出结果的最长时间为51us。因此,希望PWM中断要滞后于T3 约60us 。 调试过程:分别在T3和PWM中断中置IO1&#…...
ubuntu22.04安装部署03: 设置root密码
一、前言 ubuntu22.04 安装完成以后,默认root用户是没有设置密码的,需要手动设置。具体的设置过程如下文内容所示: 相关文件: 《ubuntu22.04装部署01:禁用内核更新》 《ubuntu22.04装部署02:禁用显卡更…...
【lesson56】生产者消费者模型
文章目录 学习生产者消费者模型过程中要回答的两个问题生产者消费者模型的概念基于阻塞队列的生产者消费者模型编码实现Common.hLockGuard.hppCondtion.hppBlockQueue.hppTask.hppConProd.cc 学习生产者消费者模型过程中要回答的两个问题 1.条件变量是在条件满足的时候&#x…...
MySQL5.7升级到MySQL8.0的最佳实践分享
一、前言 事出必有因,在这个月的某个项目中,我们面临了一项重要任务,即每年一次的等保测评整改。这次测评的重点是Mysql的一些高危漏洞,客户要求我们无论如何必须解决这些漏洞。尽管我们感到无奈,但为了满足客户的要求…...
Rust 数据结构与算法:5栈:用栈实现前缀、中缀、后缀表达式
3、前缀、中缀和后缀表达式 计算机是从左到右处理数据的,类似(A (B * C))这样的完全括号表达式,计算机如何跳到内部括号计算乘法,然后跳到外部括号计算加法呢? 一种直观的方法是将运算符移到操作数外,分离运算符和操…...
作业day6
数据库 sqlite3 sq.db 如果sq.db存在则直接打开sq.db数据库,如果不存在则先创建再打开; 系统命令 需要以 . 开头,不需要以 ; 结尾 .quit 退出数据库 .exit 退出数据库 .help 显示帮助信息,获取所有系统命令; .table 查看当前数据…...
前方预警!2024年七大网络安全威胁
新颖创新技术的兴起和迅速采用已极大地改变了各行各业的全球网络安全和合规格局,比如生成式人工智能、无代码应用程序、自动化和物联网等新技术。 网络犯罪分子正转而采用新的技术、工具和软件来发动攻击,并造成更大的破坏。因此,《2023年网…...
绿色化 数据库 MongoDB 和 mysql 安装
绿色化 数据库 MongoDB 和 mysql 安装 【1.1】 前言 为什么要绿色化 安装呢?因为系统老升级,老重装!!也方便了解下数据库配置和库在那 绿色软件喜欢一般放在 D盘tools目录里 D:\tools\ 数据库 MongoDB D:\tools\MongoDB 数…...
npm install 一直卡着不动如何解决
目录 方式一:方式二: 方式一: npm cache clean --force npm config set registry https://registry.npmmirror.com npm install下面是简单的解释: 🍀1、强制清理 npm 缓存 npm cache clean --force🍀2、设…...
电路设计(15)——篮球赛24秒违例倒计时报警器的proteus仿真
1.设计要求 设计、制作一个篮球赛24秒违例倒计时报警器。要求: (1)具有倒计时功能。可完整实现从“24”秒开始依序倒计时并显示倒计时过程,显示时间间隔为1秒。 (2)具有消隐功能。当“24”秒倒计时…...
golang 集成sentry:http.Client
http.Client 是 Go 标准库 HTTP 客户端实现, sentry-go也没有这个组件,所以需要自己实现。 我们只需要对 http.Transport 进行包装即可, 完整代码如下 package mainimport ("bytes""fmt""io""log"&…...
设计链表(不难,代码稍微多一点)
设计链表 在链表类中实现这些功能: get(index):获取链表中第 index 个节点的值。如果索引无效,则返回-1。addAtHead(val):在链表的第一个元素之前添加一个值为 val 的节点。插入后,新节点将成为链表的第一个节点。ad…...
[GXYCTF2019]禁止套娃
进来发现只有这句话,习惯性访问一下flag.php,发现不是404,那就证明flag就在这了,接下来要想办法拿到flag.php的源码。 这道题是.git文件泄露网页源码,githack拿到index.php源码 这里观察到多次判断,首先要…...
ubuntu下如何查看显卡及显卡驱动
ubuntu下如何查看显卡及显卡驱动 使用nvidia-smi 工具查看 查看显卡型号nvida-smi -L $ nvidia-smi -L GPU 0: NVIDIA GeForce RTX 3050 4GB Laptop GPU (UUID: GPU-4cf7b7cb-f103-bf56-2d59-304f8996e28c)当然直接使用nvida-smi 命令可以查看更多信息 $ nvidia-smi Mon Fe…...
【图论经典题目讲解】CF786B - Legacy 一道线段树优化建图的经典题目
C F 786 B − L e g a c y \mathrm{CF786B - Legacy} CF786B−Legacy D e s c r i p t i o n \mathrm{Description} Description 给定 1 1 1 张 n n n 个点的有向图,初始没有边,接下来有 q q q 次操作,形式如下: 1 u v w 表示…...
【AIGC】Stable Diffusion的采样器入门
在 Stable Diffusion 中,采样器(Sampler)是指用于生成图像的一种技术或方法,它决定了模型如何从潜在空间中抽样并生成图像。采样器在生成图像的过程中起着重要作用,影响着生成图像的多样性、质量和创造性。以下是对 St…...
【Python】通过conda安装Python的IDE
背景 系统:win11 软件:anaconda Navigator 问题现象:①使用Navigator安装jupyter notebook以及Spyder IDE 一直转圈。②然后进入anaconda prompt执行conda install jupyter notebook一直卡在Solving environment/-\。 类似问题: …...
基于HTML5实现动态烟花秀效果(含音效和文字)实战
目录 前言 一、烟花秀效果功能分解 1、功能分解 2、界面分解 二、HTML功能实现 1、html界面设计 2、背景音乐和燃放触发 3、燃放控制 4、对联展示 5、脚本引用即文本展示 三、脚本调用及实现 1、烟花燃放 2、燃放响应 3、烟花canvas创建 4、燃放声音控制 5、实际…...
「数据结构」栈和队列
栈 栈的基本概念 定义 栈是只允许在一端进行插入或删除操作的线性表栈顶:线性表允许进行插入删除的那一端栈底:固定的,不允许进行插入和删除的另一端空栈:不含任何元素特点:后进先出(LIFO) 基…...
【机器学习笔记】5 机器学习实践
数据集划分 子集划分 训练集(Training Set):帮助我们训练模型,简单的说就是通过训练集的数据让我们确定拟合曲线的参数。 验证集(Validation Set):也叫做开发集( Dev Set …...
C++ //练习 7.5 在你的Person类中提供一些操作使其能够返回姓名和住址。这些函数是否应该是const的呢?解释原因。
C Primer(第5版) 练习 7.5 练习 7.5 在你的Person类中提供一些操作使其能够返回姓名和住址。这些函数是否应该是const的呢?解释原因。 环境:Linux Ubuntu(云服务器) 工具:vim 解释 姓名大概…...
python系统学习Day2
section3 python Foudamentals part one:data types and variables 数据类型:整数、浮点数、字符串、布尔值、空值 #整型,没有大小限制 >>>9 / 3 #3.0 >>>10 // 3 #3 地板除 >>>10 % 3 #1 取余#浮点型ÿ…...
学习笔记——ENM模拟
学习笔记——ENM模拟 文章目录 前言一、文献一1. 材料与方法1.1. 大致概念1.2. 生态模型的构建1.2.1. 数据来源:1.2.2. 数据处理:1.2.3. 模型参数优化: 1.3. 适生情况预测1.3.1. 预测模型构建1.3.2. 适生区划分 1.4. 模型的评估与验证 2. 结果…...
数值类型的运算方式总结
提纲1:常见的位运算使用场景 提纲2:整数类型运算时的类型溢出问题,产生原因以及解决办法 提纲3:浮点类型运算时的精度丢失问题,产生原因以及解决办法 数值类型(6种)分为: 整型&…...
【Redis快速入门】Redis三种集群搭建配置(主从集群、哨兵集群、分片集群)
个人名片: 🐼作者简介:一名大三在校生,喜欢AI编程🎋 🐻❄️个人主页🥇:落798. 🐼个人WeChat:hmmwx53 🕊️系列专栏:🖼️…...
[嵌入式系统-14]:常见实时嵌入式操作系统比较:RT-Thread、uC/OS-II和FreeRTOS、Linux
目录 一、实时嵌入式操作系统 1.1 概述 1.2 什么“实时” 1.3 什么是硬实时和软实时 1.4 什么是嵌入式 1.5 什么操作系统 二、常见重量级操作系统 三、常见轻量级嵌入式操作系统 3.1 概述 3.2 FreeRTOS 3.3 uC/OS-II 3.4 RT-Thread 3.5 RT-Thread、uC/OS-II、Free…...
基于AI Agent探讨:安全领域下的AI应用范式
先说观点:关于AI应用,通常都会聊准召。但在安全等模糊标准的场景下,事实上不存在准召的定义。因此,AI的目标应该是尽可能的“像人”。而想要评价有多“像人”,就先需要将人的工作数字化。而AI Agent是能够将数字化、自…...
Stable Diffusion 模型下载:ToonYou(平涂卡通)
本文收录于《AI绘画从入门到精通》专栏,专栏总目录:点这里。 文章目录 模型介绍生成案例案例一案例二案例三案例四案例五案例六案例七案例八案例九案例十...
机器学习:分类决策树(Python)
一、各种熵的计算 entropy_utils.py import numpy as np # 数值计算 import math # 标量数据的计算class EntropyUtils:"""决策树中各种熵的计算,包括信息熵、信息增益、信息增益率、基尼指数。统一要求:按照信息增益最大、信息增益率…...
红队打靶练习:HACK ME PLEASE: 1
信息收集 1、arp ┌──(root㉿ru)-[~/kali] └─# arp-scan -l Interface: eth0, type: EN10MB, MAC: 00:0c:29:69:c7:bf, IPv4: 192.168.61.128 Starting arp-scan 1.10.0 with 256 hosts (https://github.com/royhills/arp-scan) 192.168.61.2 00:50:56:f0:df:20 …...
《VulnHub》GoldenEye:1
title: 《VulnHub》GoldenEye:1 date: 2024-02-16 14:53:49 updated: 2024-02-16 15:08:49 categories: WriteUp:Cyber-Range excerpt: 主机发现、目标信息扫描、源码 js 文件泄露敏感信息、hydra 爆破邮件服务(pop3)、邮件泄露敏…...
html的表格标签
html的表格标签 table标签:表示整个表格tr:表示表格的一行td:表示一个单元格th:表示表头单元格.会居中加粗thead:表格的头部区域 (注意和th区分,范围是比th要大的).tbody:表格得到主体区域. table包含tr , tr包含td或者th. 表格标签有一些属性,可以用于设置大小边…...
蓝桥杯(Web大学组)2022省赛真题:展开你的扇子
思路: transform-origin: center bottom;使盒子旋转时,以底部的中心为坐标原点(题目已给出) 对每个盒子使用transform: rotate();实现旋转 笔记: 设置悬浮旋转时, #box div:hover #item6{ } 为什…...
复习基础知识1
局部变量 写程序时,程序员经常会用到局部变量 汇编中寄存器、栈,可写区段、堆,函数的局部变量该存在哪里呢? 注意:局部变量有易失性 一旦函数返回,则所有局部变量会失效。 考虑到这种特性,人们…...
java8-用流收集数据-6
本章内容口用co1lectors类创建和使用收集器 口将数据流归约为一个值 口汇总:归约的特殊情况 数据分组和分区口 口 开发自己的自定义收集器 我们在前一章中学到,流可以用类似于数据库的操作帮助你处理集合。你可以把Java8的流看作花哨又懒惰的数据集迭代器。它们…...