【前端】前端练习

最新推荐文章于 2024-02-09 16:46:41 发布

longlongfishday

最新推荐文章于 2024-02-09 16:46:41 发布

阅读量392

点赞数

分类专栏： JS

本文链接：https://blog.csdn.net/m0_37715455/article/details/88414713

版权

JS 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

iframe的缺点：

①产生很多页面，不便管理

②iframe提供一种简单的方式把一个网站内容嵌入另一个网站，但iframe的创建会比其他创建慢一些。它调用了外部的页面，增加服务器请求次数。

③iframe会阻塞主页面的Onload事件及iframe和主页面共享连接池，会影响页面的并行加载。

④浏览器后退按钮失效，不易打印，代码复制等

⑤为提高速度采取动态创建和销毁iframe方法会导致ie内存泄漏（原因：iframe销毁是无法全部释放内容

补充知识点：

Ⅰ）iframe的优点：

①能原封不动显示嵌入的页面

②用其嵌套，可增加代码可重用

③重载页面时不需要重载整个页面，只需要重载页面中的一个框架页

Ⅱ）iframe的定义及使用方法

【iframe】是html标签，作用是文档中的文档，或者浮动的框架。iframe元素会创建包含另外一个文档的内联框架（行内框架）

支持所有浏览器，使用方法与显示结果如下（来自w3shcool）

<html>

<body>

<iframe src="/i/eg_landscape.jpg"></iframe>

<p>一些老的浏览器不支持 iframe。</p>
<p>如果得不到支持，iframe 是不可见的。</p>


</body>
</html>

Ⅲ）iframe的应用场景

适用于页面与父页面分离，是一个独立的区域，不受父页面的css和全局的js所影响

①网页编辑器

②跨域通信

③历史记录管理

④实现无刷新文件上传，formdata不可用时做替代方案

⑤加载广告，后台页面等

label的作用，使用方法

定义：label元素不会向用户呈现任何特殊效果。它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。

浏览器支持：所有主流浏览器都支持<label>标签，safari2或更早的版本不支持<label>标签

相关文档：

使用方法及实现效果如下：

<html>
<body>

<p>请点击文本标记之一，就可以触发相关控件：</p>

<form>
<label for="male">Male</label>
<input type="radio" name="sex" id="male" />
<br />
<label for="female">Female</label>
<input type="radio" name="sex" id="female" />
</form>

</body>
</html>

Css中margin和padding适用场景

padding定义：定义元素边框与元素内容之间的空间（单边内边距属性，可指定不同的侧面不同的填充）

当元素的 Padding（填充）（内边距）被清除时，所"释放"的区域将会受到元素背景颜色的填充。

单独使用填充属性可以改变上下左右的填充。缩写填充属性也可以使用，一旦改变一切都改变。

padding属性可以有1-4个值（4：上右下左；3：上左右下；2：上下左右 1：所有的填充都是同值，margin同理）

相关文档：

使用方法和实现效果如下：

<html>
<body>
<p>padding的使用</p>
<div>
		<div style="width:100px;height: 100px;border:solid 1px green;">
			<div style="padding-left: 50px;">测试1</div>
		</div>
		<div style="width:100px;height: 100px;border:solid 1px green;">
			<div style="padding-right:50px;">测试2</div>
		</div>
		<div style="width:100px;height: 100px;border:solid 1px green;">
			<div style="padding-top: 50px;">测试3</div>
		</div>
		<div style="width:100px;height: 100px;border:solid 1px green;">
			<div style="padding-down: 50px;">测试4</div>
		</div>
		<div style="width:100px;height: 100px;border:solid 1px green;">
			<div style="padding: 20px;">测试5</div>
		</div>
</div>
</body>
</html>

Margin（外边距）定义：属性定义元素周围的空间

margin清除周围的元素（外边框）的区域，margin没有背景颜色，是完全透明的，可单独改变元素上下左右边距，也可一次改变所有属性

相关文档：

使用方法和实现效果如下：（与padding对比）

<html>
<body>
<p>margin的使用(外边距)</p>
<div>
		<div style="width: 50px;height: 1px;border:solid 1px blue;"><p>我有50px</p></div>
		<div style="width:200px;height: 200px;border:solid 1px green;">
			<div style="width: 10px;height: 10px;border:solid 1px red;margin-left:50px;"></div>
		</div>
</div>
<div>
<p>padding的使用(内边距)</p>
		<div style="width: 50px;height: 1px;border:solid 1px blue;"><p>我有50px</p></div>
		<div style="width:200px;height: 200px;border:solid 1px green;">
			<div style="width: 10px;height: 10px;border:solid 1px red;padding-left:50px;"></div>
		</div>
</div>
</body>
</html>

关于margin和padding的区别

margin是指从自身边框到另一个容器边框之间的距离，就是容器外距离。（外边距）

padding是指自身边框到自身内部另一个容器边框之间的距离，就是容器内距离。（内边距）

注：padding不能为负数

css中position的absolute和relative定位原点分别为什么

相关文档：

<html>
<body>
<p>相对定位relative演示</p>
<div style="width: 200px;height: 200px;border:solid 1px dodgerblue;">
<div style="width: 50px;height: 50px;background-color: aqua;">正常位置</div>
</div>
<div style="width: 200px;height: 200px;border:solid 1px dodgerblue;">
<div style="width: 50px;height: 50px;background-color: red;position: relative;left: 20px;top:40px">原始左侧位置增加20px上侧位置增加40</div>
</div>
</div>
</body>
</html>

<html>
<body>
<p>绝对定位absolute演示</p>
<div style="width: 200px;height: 200px;border:solid 1px dodgerblue;">
<div style="width: 50px;height: 50px;background-color: aqua;">正常位置</div>
</div>
<div style="width: 200px;height: 200px;border:solid 1px dodgerblue;">
<div style="width: 50px;height: 50px;background-color: red;position: absolute;left: 20px;top:40px">父级位置左侧位置增加20px上侧位置增加40</div>
</div>
</div>
</body>
</html>

定位：相对定位

本例演示如何相对于一个元素的正常位置来对其定位。

定位：绝对定位

本例演示如何使用绝对值来对元素进行定位。

定位：固定定位

本例演示如何相对于浏览器窗口来对元素进行定位。

css中visibility属性中collapse的作用

visibility定义：属性规定元素是否可见

即使不可见的元素也会占据页面上的空间。请使用“display”属性来创建不占据页面空间的不可见元素

相关文档：

<html>
<head>
<style type="text/css">
tr.coll
 {
 visibility:collapse
 }
</style>

</head>
<body>

<table border="1">
<tr>
<td>Adams</td>
<td>John</td>
</tr>
<tr class="coll">
<td>Bush</td>
<td>George</td>
</tr>
</table>

</body>
</html>

不添加collapse属性

添加后删除行

js中什么是事件？不同浏览器对事件的操作？如何阻止冒泡

JavaScript 创建动态页面。事件是可以被 JavaScript 侦测到的行为。网页中的每个元素都可以产生某些可以触发 JavaScript 函数或程序的事件。

（事件是指被程序发现的行为或发生的事情，而且它可能会被程序处理。）

下面这篇关于事件冒泡写的十分详细了

终于弄懂了事件冒泡和事件捕获（感谢）

阻止冒泡：

1.event.stopPropagation()方法

这是阻止事件的冒泡方法，不让事件向documen上蔓延，但是默认事件任然会执行，当你掉用这个方法的时候，如果点击一个连接，这个连接仍然会被打开，

2.event.preventDefault()方法

这是阻止默认事件的方法，调用此方法是，连接不会被打开，但是会发生冒泡，冒泡会传递到上一层的父元素；

3.return false ；

这个方法比较暴力，他会同事阻止事件冒泡也会阻止默认事件；写上此代码，连接不会被打开，事件也不会传递到上一层的父元素；可以理解为return false就等于同时调用了event.stopPropagation()和event.preventDefault()

js的基本使用规范

1.不要在同一行声明多个变量

2.请使用 ===/!==来比较true/false或者数值

3.使用字面量代替new Array（）这种形式

4.不要使用全局函数

5.Switch必须使用default分支

6.函数不应该有时候有返回值，有时候没有返回值（建议最好都要有返回值:undefined）

7.for循环和if语句必须使用花括号

8.for in 循环中的变量应该使用var 关键字限定作用域，从而避免作用域污染

算法：js数组去重

js数组去重方法总结--惠远建

js数组去重的几种常见方法--白杨-M

待解决

react的状态状态的作用

注：以上均为回忆题目，算对第一次笔试的总结，这个公司也非常的nice，希望大家都能取得心水的offer

参考博客：

iframe的优缺点及改进方法--katara1109

浅谈iframe的优缺点及应用--baxiadsy_csdn

js事件冒泡阻止事件冒泡以及阻止默认行为--jsanntq

js阻止事件冒泡的3种方法之间的不同--julinpeng

阻止事件冒泡，阻止默认事件，event.stopPropagation()和event.preventDefault()，return false的区别

javascript的基本规范--leon_李阳

longlongfishday

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【前端】前端练习

iframe的缺点： ①产生很多页面，不便管理②iframe提供一种简单的方式把一个网站内容嵌入另一个网站，但iframe的创建会比其他创建慢一些。它调用了外部的页面，增加服务器请求次数。③iframe会阻塞主页面的Onload事件及iframe和主页面共享连接池，会影响页面的并行加载。④浏览器后退按钮失效，不易打印，代码复制等⑤为提高速度采取动态创建和销毁iframe方...
复制链接

扫一扫