阿里前端线上笔试题以及答案总结

最新推荐文章于 2024-05-17 06:12:15 发布

新凉

最新推荐文章于 2024-05-17 06:12:15 发布

阅读量5.7k

点赞数

分类专栏：网页制作文章标签：校招试题

本文链接：https://blog.csdn.net/TTO_OTT/article/details/44680493

版权

1、你做过的最满意的前端作品？

2、你了解哪些新技术？

3、你是怎样接触前端的？
4、你对你的学校和专业怎么看？

5.下图绿色区域的宽度为100%，其中有三个矩形，第一个矩形的宽度是200px，第二个和第三个矩形的宽度相等。请使用CSS3中的功能实现它们的布局。

已知HTML结构是：
<div class="box">
<div class="item">column 1</div>
<div class="item">column 2</div>
<div class="item">column 3</div>
</div>

5.解答：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	.box {
		background-color: green;
		display: box;
		display: -moz-box;
		display: -webkit-box;
		display: -0-box;
		width: 100%;
	}
	.box .boxOne {
	background-color: white;
	-moz-box-flex:0;
	-webkit-box-flex:0;
	-0-box-flex:0;
	width: 200px;
	margin: 10px;
	}
	.box .boxTwo {
	background-color: white;
	-moz-box-flex:1;
	-webkit-box-flex:1;
	-0-box-flex:1;
	margin: 10px 0;
	}
	.box .boxThree {
	background-color: white;
	-moz-box-flex:1;
	-webkit-box-flex:1;
	-0-box-flex:1;
	margin: 10px;
	}
	</style>
</head>
<body>
	<div class="box">
		<div class="boxOne">column1</div>
		<div class="boxTwo">column2</div>
		<div class="boxThree">column3</div>
	</div>
</body>
</html>

6、在tmall.com的某个页面中存在一个id等于J_iframe_taobao的iframe，该iframe的域名是taobao.com。在不考虑IE浏览器的情况下，用最简洁的代码实现页面与该iframe进行双向通信？
...
<iframe id="J_iframe_taobao" src="http://taobao.com/xxx"></iframe>
...

6.解答：
看别人的不知道对不对：

<iframe id="J_iframe_taobao" src="http://taobao.com/xxx" οnlοad="getdata()"></iframe>
<script>
    function getdata()
       {
           var iframe =document.getelmentById('J_iframe_taobao');
           iframe.onload = function()
          {
              var data =iframe.contenWindow.name;
              alert(data);
          }
          iframe.src="about:blank";
       }
</script>

----------------------------------------------
另一个大神写的答案：

父页面监听
var cb = function(json){
            if(json){
                if(json == 'SUCC') {
                    QT.WM.close();
                } else {
                    json = $.parseJSON(json);
                    wan360.appurl = json.appurl;
                    wan360.appname = json.appname;
                }
            }
        };
        wan360.xdomain.listen({APP: cb});
子页面发送：
wan360.xdomain.sendMessage(window.parent,'{"appurl":"'+app.appurl+'","appname":"'+app.appname+'"}','APP');
好吧，答案应该是html5的postMessage，下面的代码可能有误~

    var onmessage = function(e) {
           var data = e.data,p = document.createElement_x('p');
           p.innerHTML = data;
           document.getElementById('J_iframe_taobao').appendChild(p);
        };
        //监听postMessage消息事件
        if (typeof window.addEventListener != 'undefined') {
          window.addEventListener('message', onmessage, false);
        } else if (typeof window.attachEvent != 'undefined') {
          window.attachEvent('onmessage', onmessage);
        }

7、请用html5标准完成以下页面布局（要求完整书写整个页面的html代码，不需要写CSS）

7.解答：

<pre name="code" class="html"><!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Html5</title>
</head>
<body>
	<header></header>
	<nav></nav>
	<div>
		<aside></aside>
		<section></section>
	</div>
	<footer></footer>
</body>
</html>

加CSS样式：

<pre name="code" class="html"><!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>阿里校招前端第7体</title>
	<style type="text/css">
		* {
			margin: 0px;
			padding: 0px;
		}
		html,body,article{
			height: 100%;
			width: 100%;
		}
		header,nav,aside,hgroup,footer{
			border: 1px solid black;
			display: block;;
			text-align: center;
			margin: 10px;
			line-height: 50px;
		}
		header,footer,nav{
			height: 50px;
			border-radius: 10px;
		}
		article{
			display: box;
			display: -moz-box;
			display: -o-box;
			display: -webkit-box;
		}
		aside{
			box-flex:0;
			-moz-box-flex:0;
			-o-box-flex:0;
			-webkit-box:0;
			width: 200px;
			border-radius: 10px 0 0 10px;
			margin-top: 0px;
			margin-right: 0px;

		}
		hgroup{
			box-flex:1;
			-moz-box-flex:1;
			-o-box-flex:1;
			-webkit-box-flex:1;
			border-radius: 0 10px 10px 0 ;
			margin-top: 0px;
		}
		footer{
			margin-top: 0;
		}
	</style>
</head>
<body>
	<header>头部</header>
	<nav>导航</nav>
	<article>
		<aside>侧边栏</aside>
		<hgroup>内容区</hgroup>
	</article>	
	</div>
	<footer>脚部</footer>
</body>
</html>

8、请写一个 getParents 方法让它可以获取某一个 DOM 元素的所有父亲节点。

8.解答：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Html5</title>
</head>
<body>
	<div>
		<div id='test'></div>
		<div></div>
	</div>
	<script type="text/javascript">
		var getParents = function(id){
			var nodes = id.parentNode;
			while(nodes.tagName){
				document.write(nodes.tagName+"</br>");
				nodes = nodes.parentNode;
			}
			return nodes;
		}
		getParents(test);
	</script>
</body>
</html>

9、请写出至少5个html5新增的标签，并说明其语义和应用场景。

9.解答：

①canvas 标签定义图形，比如图表和其他图像。这个 HTML 元素是为了客户端矢量图形而设计的。它自己没有行为，但却把一个绘图 API 展现给客户端 JavaScript 以使脚本能够把想绘制的东西都绘制到一块画布上。
②command 标签定义命令按钮，比如单选按钮、复选框或按钮。
③datalist 标签定义可选数据的列表。与 input 元素配合使用，就可以制作出输入值的下拉列表。
④details 标签定义元素的细节，用户可进行查看，或通过点击进行隐藏。与 legend 一起使用，来制作 detail 的标题。该标题对用户是可见的，当在其上点击时可打开或关闭 detail。
⑤hgroup 标签用于对网页或区段（section）的标题进行组合。
⑥mark主要用来在视觉上向用户呈现那些需要突出的文字。mark标签的一个比较典型的应用就是在搜索结果中向用户高亮显示搜索关键词。

10、实现如下图所示的布局

要求：sidebar 固定宽度200px，content和header宽度自适应
当window宽度小于600px时，变成三行布局

默认如下
宽度小于600px时如下

下面是HTML结构：
<div class='header'>
<h1>header</h1>
</div>
<div class="sidebar">
<h1>sidebar</h1>
</div>
<div class="content">
<h1>content</h1>
</div>

请写出其css代码：（提示，可以使用media query来检测浏览器窗口宽度）

10.解答：

</pre><p></p><pre name="code" class="html"><!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
	@media(max