web前端开发面试题(九)

前端开发面试题第九天

一、HTML 部分

1.1 对语义化标签的理解

在学习HTML阶段的最后，我们会涉及到学习语义化标签，明明用div等标签就可以构成页面，那么为什么还会有语义化标签的存在？

语义化标签到底是什么？

学好语义化标签又会在哪方面应用？

1.1.1 语义化标签是什么

<header>header>头部

<nav>nav>导航栏

<section>section>区块（有语义化的div）

<main>main>主要区域

<artical>artical>主要内容

<aside>aside>侧边栏

<footer>footer>底部

1.1.2 为什么会用语义化标签

平时，我们都会采用DIV+CSS布局我们的页面。但是这样的布局方式不仅使我们的文档结构不够清晰，而且不利于浏览器对页面的读取。

所以HTML5新增了很多新的语义化标签。

并且，在我们未给页面添加css样式时，用户体验并不好。

• 语义化标签也能让浏览器更好的读取页面结构。
• 再就是便于团队开发和维护，语义化更具可读性。
• 遵循W3C标准的团队都遵循这个标准，可以减少差异化。

例如页面布局时:

如下图，如果我们用div来实现此图的布局，那么就要涉及到加类名或者选择符的问题，还有起名字，很多时候就会弄混。直接用语义化标签就会标记出每个区域的作用并且更好是实现页面布局。

2.1 常见的浏览器内核

2.1.1 Trident

IE、360安全浏览器、猎豹安全浏览器、傲游浏览器、百度浏览器、世界之窗浏览器、2345浏览器、腾讯TT、搜狗高速浏览器、UC浏览器等。

2.1.2 Gecko

Gecko内核常见的浏览器： Mozilla Firefox、Mozilla SeaMonkey、waterfox（Firefox的64位开源版）、Iceweasel。

2.1.3 Presto

Presto(Opera前内核) (已废弃)，此内核在执行Javascrīpt的时候有着最快的速度，可惜Presto是商业引擎，使用Presto的除开Opera以外，只剩下NDSBrowser、Wii Internet Channle、Nokia 770网络浏览器等，这很大程度上限制了Presto的发展。

Opera现已改用Google Chrome的Blink内核。

2.1.4 Webkit：

Webkit(Safari内核,Chrome内核原型,开源)，它是苹果公司自己的内核，也是苹果的Safari浏览器使用的内核。
Google Chrome、360极速浏览器、搜狗高速浏览器高速模式使用Webkit作为内核。

WebKit 内核在手机上的应用也十分广泛，例如 Google 的手机 Gphone、 Apple 的iPhone等所使用的 Browser 内核引擎，都是基于 WebKit。

WebKit内核常见的浏览器：傲游浏览器3、Apple Safari(Win/Mac/iPhone/iPad)、Symbian手机浏览器、Android 默认浏览器。

二、CSS

2.1 CSS中常用的布局方式

• 流式布局: 最基本的布局，就是顺着 html 像流水一样流下来
  • 以百分比为主要形式，让屏幕自适应，这种布局方式定义灵活，能够根据屏幕的情况变化，但是这种方式设计的效果不太容易控制，一般移动端结合rem用的比较多，pc端用的不是非常多
• 绝对定位: 利用 position: absolute 进行绝对定位的布局
  • 定位布局也是目前比较常用的一种布局方式，关键词： position: fixed;固定布局，将元素固定在一个位置，不随页面移动而移动，position: relative;相对定位，相对于元32M素自身定位，不脱离文档流，相当于定义一个参照物，一般和绝对定位结合使用，position: absolute;绝对定位，脱离文档流，一般和相对定位结合使用，如果不定义相对定义，将会相对于整个浏览器定位，所以定位布局，一般情况下都是相对定位和绝对定位结合着来，相当定位相当于划定一个势力范围，制定一个封闭的容器块，然后绝对定位就行对于相对定位来定位，从而达到有效的布局。
• float 布局: 最初用来解决多栏布局的问题。比如圣杯、双飞燕的布局都可以用 float 来实现
  • 浮动布局关键词，float，可以设置left或者right，他使元素脱离文档流进而达到布局的目的，也是目前一个比较主流的布局方式，但是使用浮动的结束以后，别忘记清除浮动哦。
• 珊格布局: bootstrap 用的布局，把页面分为 24 份，通过 row 和 col 进行布局
• flex 布局: css3 的布局可以非常灵活地进行布局和排版
  • 浮动部分和清楚浮动部分主要是兼容添加的一些代码，重点看弹性布局的部分，弹性布局相对前两种出现的比较晚些，但是弹性布局功能还是很强大的，布局也非常方便，但是此布局形式在pc端并不推荐使用，ie9以下浏览器均不支持，另外火狐等一些浏览器也需要做兼容，移动端目前绝大部分浏览器都已经支持弹性布局，在移动端大家可以尝试使用。
• grid 布局: 网格布局

​ PS：没有一成不变的布局方式，也没有任何一种方式能够满足各方面的需求

2.2 对css盒子模型的理解

css盒模型分为两种:

• w3c标准盒模型
• IE盒模型

在盒模型中，

在盒模型中，宽度=左外边距+左边框+左内边距+内容宽度+右内边距+右边框+右外边距；不管是IE盒模型还是标准盒模型都遵循这个守则

如：

.box{
     
            width: 100px;
            height: 100px;
            margin:10px;
            padding:10px;
    		border:2px solid red;
            background-color: orange;
        }

但是，在计算盒子宽度时

​ IE的盒模型的边框是算在宽度里边的 而W3C标准是不算在里边的

菜鸡理解：不同的浏览器模型对于宽度的解释是不同的

三、 JS 部分

JavaScript有3大对象，分别是本地对象、内置对象和宿主对象。

在此引用ECMA-262（ECMAScript的制定标准）对于他们的定义：

• 本地对象
  • 与宿主无关，独立于宿主环境的ECMAScript实现提供的对象。
  • 简单来说，本地对象就是 ECMA-262 定义的类（引用类型）。
  • 这些引用类型在运行过程中需要通过new来创建所需的实例对象。
  • 包含：Object、Array、Date、RegExp、Function、Boolean、Number、String等。
• 内置对象
  • 与宿主无关，独立于宿主环境的ECMAScript实现提供的对象。
  • 在 ECMAScript 程序开始执行前就存在，本身就是实例化内置对象，开发者无需再去实例化。
  • 内置对象是本地对象的子集。
  • 包含：Global和Math。
  • ECMAScript5中增添了JSON这个存在于全局的内置对象。
• 宿主对象
  • 由 ECMAScript 实现的宿主环境提供的对象，包含两大类，一个是宿主提供，一个是自定义类对象。
  • 所有非本地对象都属于宿主对象。
  • 对于嵌入到网页中的JS来说，其宿主对象就是浏览器提供的对象，浏览器对象有很多，如Window和Document等。
  • 所有的DOM和BOM对象都属于宿主对象

3.1 常用内置对象以及方法

在js中万物皆对象；字符串，数组，数值，函数

内置对象都有自己的属性和方法，访问方法如下：

对象名.属性名称

对象名.方法名称

3.1.1 数组对象

• unshift()

  • 数组前追加一个或多个元素 返回数组的长度 原数组发生改变

• shift()

  • 数组前删除一个元素 返回被删除的内容 原数组改变

• push()

  • 数组末尾追加一个或多个元素 返回数组长度 原数组改变

• pop()

  • 数组末尾删除一个元素 返回被删除的内容 原数组改变

• concat()

  • 数组拼接 使用concat 可以实现数组的克隆

    • var a = [1,2,3]
      var b = a.concat()console.log(b)    // [1,2,3]
      

• splice(index,howmany,item1,…intemx)

  • splice 可以实现数组的删除 增加 和替换 前两个参数是必须的参数

• slice(index,n,item1,item2…)

  • 从索引index开始替换n个 替换内容为item item2

• reverse()

  • 数组翻转 返回值是翻转后的新数组 原数组发生改变

• sort()

  • 数组排序 使用方法

    • sort（function （a，b）{
                 return  a-b}）     从小到大排
      sort（function （a，b）{
                 return  b-a}）     从大到小排
      

• toString()

  • 把数组转成以逗号分隔的字符串

• join(拼接格式)

  • 把数组拼接成以其他格式分隔的字符串

• indexOf(查找内容)

  • 查找数组中是否有某项 有的话返回该项索引 没有返回-1

• forEach() && map()

  • 遍历循环

    • forEach接收两个参数，一个callback，thisArg
      callback接收三个参数：1）item 2）index 3）input
      thisArg用来改变callback中的this指向；
      forEach 没有返回值，但是map有返回值
      

3.1.2 string 字符串

• charAT(index)

  • 通过索引找字符

• charCodeAT(index)

  • 通过索引找到字符的 Unicode 编码。这个返回值是 0 - 65535 之间的整数。

    方法 charCodeAt() 与 charAt() 方法执行的操作相似，只不过前者返回的是位于指定位置的字符的编码，而后者返回的是字符子串。

• indexOf()

  • 从前往后找 找到则返回内容索引 否则返回-1

• lastindexOf()

  • 从后往前后找 找到则返回内容索引 否则返回-1

• slice(n,m)

  • 从索引n查到到索引m 但不包括m 不可取负值

• substring(n,m)

  • 从索引n查找到索引m 但不包括m 不可取负值

• substr(n,m)

  • 从索引n开始 截取m个

• split()

  • 把字符串分割成字符串数组

• toUpperCase()

  • 转大写字母

• toLowerCase()

  • 转小写字母

3.1.3 Math对象

• Math.floor()
  • 向下取整
• Math.ceil()
  • 向上取整
• Math.random()
  • 取0-1之前的随机小数
• Math.round()
  • 四舍五入
• Math.abs()
  • 取绝对值
• Math.pow(x,y)
  • x的y次幂
• Math.sqrt()
  • 开平方
• Math.max()
  • 取最大值
• Math.min()
  • 取最小值

3.1.4 Date 日期对象

new Date（）    创建一个日期对象
getFullYear（）    返回年份
getMonth（）    返回月份数（0-11），想要得到几月，需要加一
getDay（）    返回一周的第几天（0-6），想要得到星期几，需要加一
getDate（）    返回日
getHours（）    返回时
getMinutes（）    返回分
getSeconds（）    返回秒
getTime（）    返回从1970年1月1日00：00到现在的毫秒数，也就是时间戳
setYear(yearInt)    设置年份.2位数或4位数
setFullYear(yearInt)    设置年份.4位数
setMonth(monthInt)    设置月份(0-11)
setDate(dateInt)    设置日(1-31)
setHours(hourInt)  设置小时数(0-23)
setMinutes(minInt)    设置分钟数(0-59)
setSeconds(secInt)    设置秒数(0-59)
setMilliseconds(milliInt)    设置毫秒(0-999)