web前端开发面试题(七)

最新推荐文章于 2024-08-05 10:20:29 发布

前端大斗师

最新推荐文章于 2024-08-05 10:20:29 发布

阅读量1.7k

点赞数 2

分类专栏： JavaScript web前端文章标签： html js css javascript css3

本文链接：https://blog.csdn.net/Web_chicken/article/details/113266586

版权

web前端同时被 2 个专栏收录

78 篇文章 12 订阅

订阅专栏

JavaScript

63 篇文章 4 订阅

订阅专栏

前端面试题第七天

一、HTML 部分

1.1 iframe框架都有哪些优缺点

在讲iframe框架之前先聊聊iframe吧

定义：iframe是HTML标签，作用是文档中的文档，或者浮动的框架(FRAME)。iframe元素会创建包含另外一个文档的内联框架（即行内框架）

<iframe> 标签规定一个内联框架。
一个内联框架被用来在当前 HTML 文档中嵌入另一个文档。

1.2 iframe一些常用的属性

属性	值	描述
align	left right top center bottom	HTML5 不支持。HTML 4.01 已废弃。规定如何根据周围的元素来对齐。
frameborder	0	HTML5 不支持。规定是否显示周围的边框。
height	px	规定的高度。
longdesc	url	url5 不支持。规定一个页面，该页面包含了有关的较长描述。
marginheight	pixels	HTML5 不支持。规定的顶部和底部的边距。
marginwidth	pixels	HTML5 不支持。规定的左侧和右侧的边距。
name	name	规定的名称。
sandbox(#)	allow-forms allow-same-origin allow-scripts allow-top-navigation	对的内容定义一系列额外的限制。
scrolling	yes no auto	HTML5 不支持。规定是否在中显示滚动条。
seamles(#)()	seamless	规定看起来像是父文档中的一部分。
src	URL	规定在中显示的文档的 URL。
srcdoc(#)	HTML_code	规定页面中的 HTML 内容显示在中。
width	pixels	规定的宽度。

1.3 iframe小案例

01.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
    <title>Document</title>
    <style>
        html,
        body {
            position: relative;
            height: 100%;
        }

        iframe {
            display: none;
            position: absolute;
            width: 50%;
            height: 50%;
            margin: auto;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;

        }

        a {
            margin: 200px 0 0 480px;
        }
    </style>
</head>

<body>
    <a class="btn btn-success" href="javascript:;">添加信息</a>
    <iframe src="./02.html" frameborder=0></iframe>

    <script>
        document.querySelector('a').addEventListener('click', () => {
            let iframe = document.querySelector('iframe').style.display = 'block'
        })
    </script>
</body>

</html>

02.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            background-color: #eee;
        }
    </style>
</head>

<body>
    <input type="text" placeholder="请输入内容">
</body>

</html>

示例动图：

在这里插入图片描述

1.4 总结

优点：

1.iframe能够原封不动的把嵌入的网页展现出来。

2.如果有多个网页引用iframe，那么你只需要修改iframe的内容，就可以实现调用的每一个页面内容的更改，方便快捷。

3.网页如果为了统一风格，头部和版本都是一样的，就可以写成一个页面，用iframe来嵌套，可以增加代码的可重用。

4.如果遇到加载缓慢的第三方内容如图标和广告，这些问题可以由iframe来解决。

缺点：

1.会产生很多页面，不容易管理。

2.iframe框架结构有时会让人感到迷惑，如果框架个数多的话，可能会出现上下、左右滚动条，会分散访问者的注意力，用户体验度差。

3.代码复杂，无法被一些搜索引擎索引到，这一点很关键，现在的搜索引擎爬虫还不能很好的处理iframe中的内容，所以使用iframe会不利于搜索引擎优化。

4.很多的移动设备（PDA 手机）无法完全显示框架，设备兼容性差。

5.iframe框架页面会增加服务器的http请求，对于大型网站是不可取的。分析了这么多，现在基本上都是用Ajax来代替iframe，所以iframe已经渐渐的退出了前端开发。

二、CSS 部分

2.1 对BFC规范的理解

概念：BFC全称Block Formatting Context ，中文直译为块级格式上下文。它是 W3C CSS 2.1 规范中的一个概念，它决定了元素如何对其内容进行定位，以及与其他元素的关系和相互作用。

通俗的来说：BFC 是一个独立的布局环境,可以理解为一个容器,在这个容器中按照一定规则进行物品摆放,并且不会影响其它环境中的物品。

浮动元素会创建 BFC，则浮动元素内部子元素主要受该浮动元素影响，所以两个浮动元素之间是互不影响的。

<div class="a"></div>
<div class="b"></div>

菜鸡理解: a盒子里边的元素不会影响b盒子里的元素

2.2 如何触发BFC

浮动元素：float 除 none 以外的值 .
绝对定位元素：position（absolute，fixed）
display ：inline-block, table-cell, table-caption, flex, inline-flex
overflow ：除了 visible 以外的值（hidden，auto，scroll）

三、 JS 部分

3.1 某一字符或字符串在另一个字符串中出现的次数

<script>
        function num(str, parentStr){
            // 字符串分割成数组
            // 因为下标从0开始 所以分割几次 长度就需要-1
            return parentStr.split(str).length - 1
        }
        console.log(num('c','web_chicken form CSDN'))
    </script>

若：

	return parentStr.split(str) // 输出结果为 ["web_", "hi", "ken form CSDN"]

我们可以看到数组长度为3 数组长度-1 就是我们要的c 也就是出现的次数

前端大斗师

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
2
评论
web前端开发面试题(七)

前端面试题第七天一、HTML 部分1.1 iframe框架都有哪些优缺点在讲iframe框架之前先聊聊iframe吧定义：iframe是HTML标签，作用是文档中的文档，或者浮动的框架(FRAME)。iframe元素会创建包含另外一个文档的内联框架（即行内框架）<iframe> 标签规定一个内联框架。一个内联框架被用来在当前 HTML 文档中嵌入另一个文档。1.2 iframe一些常用的属性属性值描述alignleft right top center
复制链接

扫一扫