1. 页面导入样式时,使用link和@import有什么区别?

描述

页面导入样式时,使用link和@import有什么区别?

解答

  1. link 是HTML标签,@import 是 css 提供的。
  2. link 引入的样式页面加载时同时加载,@import 引入的样式需等页面加载完成后再加载。
  3. link 没有兼容性问题,@import 不兼容 ie5 以下。
  4. link 可以通过 js 操作 DOM 动态引入样式表改变样式,而 @import 不可以。

3. 用递归算法实现,数组长度为5且元素的随机数在2-32间不重复的值

描述

这是一道大题目,把考点拆成了4个小项;需要侯选人用递归算法实现(限制15行代码以内实现;限制时间10分钟内完成):

  • 生成一个长度为5的空数组 arr
  • 生成一个(2-32)之间的随机整数 rand
  • 把随机数 rand 插入到数组 arr 内,如果数组arr内已存在与 rand 相同的数字,则重新生成随机数rand并插入到arr内[需要使用递归实现,不能使用 for/while 等循环]
  • 最终输出一个长度为5,且内容不重复的数组 arr

解答

const arr = new Array(5);
const randomNum = () => (Math.floor(Math.random() * 31 + 2))
const randomArr = (n) => {
    if (n === 0) return arr;
    const num = randomNum();
    if (arr.includes(num)) return randomArr(n)
    arr[n -1] = num;
    return randomArr(n - 1)
};
randomArr(arr.length)

2. 圣杯布局和双飞翼布局的理解和区别,并用代码实现

理解

圣杯布局和双飞翼布局都是为了解决两边定宽,中间自适应且优先渲染的布局需求,那么为了自适应且优先渲染,必须要把中间的 dom 放在最顶端,以保证主要内容能最先被浏览器解析

圣杯布局

为了中间 div 内容不被遮挡,将中间 div 设置了左右 padding-leftpadding-right 后,将左右两个 div 用相对布局 position: relative 并分别配合 rightleft 属性,以便左右两栏 div 移动后不遮挡中间 div

html

<body>
    <div id="hd">header</div>
    <div id="bd">
        <div id="middle">middle</div>
        <div id="left">left</div>
        <div id="right">right</div>
    </div>
    <div id="footer">footer</div>
</body>
阅读更多

7. HTML全局属性(global attribute)有哪些(包含H5)?

accesskey 设置快捷键
class 为元素设置类标识
contenteditable 指定元素内容是否可编辑
contextmenu 自定义鼠标右键弹出上下文菜单内容(仅firefox支持)
data-* 为元素增加自定义属性
dir:设置元素文本方向(默认ltr;rtl)
draggable 设置元素是否可拖拽
dropzone 设置元素拖放类型(copy|move|link,H5新属性,主流均不支持)
hidden 规定元素仍未或不在相关
id 元素id,文档内唯一
lang 元素内容的语言
spellcheck 是否启动拼写和语法检查
style 行内css样式
tabindex 设置元素可以获得焦点,通过tab导航
title 规定元素有关的额外信息

相关链接:Global attributes