阿里巴巴校招笔试题整理(HTML+CSS篇)

[color=Red]说明:红色字体的答案标注是还未验证(可能对也可能不对)的答案。[/color]

PPs:之前把笔记锁了是因为题目都是我在网上搜的,答案也不一定正确,所以锁起来了,而且也没有写完,今天有站里的朋友来加我想看笔试题,现在就不锁了。不对的或者还没验证的地方还请各位朋友指正,谢谢。{:1_508:}

Q1:

阿里巴巴校招笔试题整理(HTML+CSS篇)
这道题主要考察的是CSS3中的box-flex属性以及选择器。
答案如下:
代码片段 1

Q2:

阿里巴巴校招笔试题整理(HTML+CSS篇)
这道题考察的是对HTML5新的语义化标签的掌握。
答案如下(该答案从网络搜集得来,因为只有HTML代码,所以不好考证,但从答案本身看来确有道理):
[code]<!DOCTYPE html>
<html>
<head>
<title>html5</title>
</head>
<body>
</body>
<header></header>
<nav></nav>
<div>
<aside></aside>
<section></section>
</div>
<footer></footer>
</body>
</html>[/code]

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

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

Q4:

阿里巴巴校招笔试题整理(HTML+CSS篇)

阿里巴巴校招笔试题整理(HTML+CSS篇)
答案如下(该答案只考虑了实现主要的布局改变功能,没有去细化考虑其中的div间隔):
代码片段 2

Q5:有一个页面区块如图所示,请用符合语义化的标签书写HTML代码。

阿里巴巴校招笔试题整理(HTML+CSS篇)
答案如下(我想问那个“高于”去哪儿了?应该是放到<b>标签里了吧。):
[code]<div>
<h4> 店铺动态评分 <span>与同行业相比</span> </h4>
<ul>
<li> 描述相符: <a href="" target="_blank"> <em title="4.8">4.8</em> <span title=""> <b></b> <em>16.14%</em> </span> </a> </li>
<li> 服务态度: <a href="" target="_blank"> <em title="4.8">4.8</em> <span title=""> <b></b> <em>13.32%</em> </span> </a> </li>
<li> 发货速度: <a href="" target="_blank"> <em title="4.8">4.8</em> <span title=""> <b></b> <em>29.57%</em> </span> </a> </li>
</ul>
</div>[/code]

Q6:在CSS样式中常使用px、em两种长度单位,各有什么优劣,在表现上有什么区别?

答案如下(答案不完整):
px像素(Pixel),相对长度单位,像素px是相对于显示器屏幕分辨率而言的(引自CSS2.0手册);em是相对长度单位,相对于当前对象内文本的字体尺寸,如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸(引自CSS2.0手册)。

Q7:请列举所知道的css选择器,并说明怎么判断优先级?

答案如下(搬运+自己的理解):

  1. 标签选择器 如 div{}
  2. 类选择器,如 .className{}
  3. id选择器,如 #idName{}
  4. 后代选择器,如 .polaris span img{},后代选择器实际上是使用多个选择器加上中间的空格来找到具体的要控制的标签。
  5. 群组选择器,如 div,span,img{},群组选择器实际上是对CSS的一种简化写法,只不过把有相同定义的不同选择器放在一起,省了很多代码。
  6. 伪类选择器,如 div:first-child{},伪类选择器就好像是给元素添加了一个幻象类,并根据这个类添加相应的样式,与类选择器不同,伪类选择器的类名都是固定的,且以“ : ”开头。
  7. 伪元素选择器,如 h2:first-letter{},伪元素选择器就好像是在元素中添加了一个伪元素,比如这里可以理解成<h2><h2:first-letter>F</h2:first-letter>irst</h2>,但实际上却是<h2>First</h2>。
    一般而言,选择器越特殊,它的优先级越高。也就是选择器指向的越准确,它的优先级就越高。

Q8:CSS的“伪类”和“伪元素”有什么区别?请举例伪元素的几种应用场景。

答案如下:
伪类和伪元素的区别在Q7也讲的差不多了,可以参见Q7。
(应用场景没找到合适的资料)

Q9:

页面中有个id为J_banner的区块,请使用CSS实现在普通屏幕上使用图片banner.png为背景,在retina屏幕上显示更高分辨率的图片作为背景。
[code]<div id="J_banner"> ... </div>[/code]
答案如下:
[code]background-image: url(banner.png);
background-image: -webkit-image-set(url(banner.png) 1x,url(banner_retina.png) 2x);[/code]

Q10:下面是一段html代码,展示效果如左图所示。请给出一段css,使这段代码达到右图的展示效果。

阿里巴巴校招笔试题整理(HTML+CSS篇)

阿里巴巴校招笔试题整理(HTML+CSS篇)

评论 ( 3 )
最新评论
qdwangtong0203 2014-09-18 21:42:32 3F

给力,有几道题做的并不正确

CookieClicker 2014-09-15 22:07:40 2F

考了好多h5里的知识啊.........不过好在深度还能接受.......

发奋图强 2014-09-15 15:44:44 1F

都是h5的 哎呀 都不会阿    回家看看去  谢谢楼主阿