东方国信–web前端笔试

匿名网友 匿名网友 发布于: 2016-11-21 00:00:00
阅读 297 收藏 0 点赞 0 评论 0

1.前端页面由哪三层构成，每层作用是什么？

问题答案

  • 结构层（structural layer）
    由HTML或XHTML之类的标记语言负责创建。标签，也就是那些出现在尖括号里的单词，对网页内容的语义含义做出了描述，但这些标签不包含任何关于“如何显示有关内容”的信息。
  • 表示层（presentation layer）
    由CSS负责创建。 CSS对“如何显示有关内容”的问题做出了回答。
  • 行为层（behaviorlayer）
    负责回答“内容应该如何对事件做出反应”这一问题。这是Javascript语言和 DOM主宰的领域。

拓展

分离的效果要做到即使去掉表示层和行为层，文档的内容也依然可以访问，因为“内容才是一切”。而且网页的行为层 (javascript) 与其结构 (XHTML) 是彼此互不干扰的，不能混杂在一起。还要给行为层“预留退路”，要考虑到如果你的用户禁用了 Javascript 会怎样？是不是网页还可以正常运作。

2.简述HTML经常使用的标签及其作用？

  • <html>：定义html文档
  • <body>：定义文档的主体
  • <h1>~<h6>：定义分级标题
  • <hr>：定义水平线

3.JavaScript有哪几种数据类型？

  • 数值型(Number)
  • 布尔型(Boolean)
  • Null
  • Undefined
    前4种都是基本数据类型
  • 字符串(String)：可以将字符串看成行为与基本类型相似的不可变引用类型
  • 对象(Object)：复杂类型
  • Symbol(ES6新类型)

4.如何让一段文本中所有英文单词的首字母大写？

利用text-transform属性的capitalize值即可实现：
text-transform 属性处理文本的大小写，这个属性有 4 个值：

  • none：对文本不做任何改动，将使用源文档中的原有大小写
  • uppercase：将文本转换为全大写字符
  • lowercase：将文本转换为全小写字符
  • capitalize：只对每个单词的首字母大写

5.css行内元素有哪些？块级元素有哪些？css的盒模型？

判断行内元素还是块级元素标准有两个：
1.是否独占一行
2.是否可以单独为元素设置高度和宽度

行内元素

  • a：链接/锚点
  • br:这个元素比较难掌控，官方指出是内联元素mozilla官方 Inline elements因为没有合适的样式来操作他，w3c的建议也是如果不是为了输出一个空行，不要使用这个元素
  • img：图片
  • input：输入框
  • label：表格标签
  • select：项目选择
  • span：常用内联容器，无实际含义
  • textarea：多行文本输入框

块级元素

  • address：地址
  • blockquote：块级引用
  • div：块级容器，无实际含义
  • ul：无序列表
  • ol：有序列表
  • form：交互表单
  • p：段落
  • dl：自定义列表
  • h1~h6：分级标题

盒模型

包括四部分的内容，即content(内容)、border(内边框)、padding(填充)、margin(外边框)

6.JavaScript中如何创建对象

  • 使用new关键字来创建：

    1
    2
    3
    4
    5
    var person = new Object();
    person.name = ‘Lee’;
    person.age = 21;
    alert(person.name);
    alert(person[‘age’]);

  • 使用对象字面量的方式：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    var person = {
    name = ‘Lee’;
    age = 21;
    run: function() { /*方法*/
    return age;
    }
    };
    alert(person.name);
    alert(person.run());

  • 使用自定义构造函数模式创建对象；这里注意命名规范，作为构造函数的函数首字母要大写，以区别其它函数。这种方式有个缺陷是sayName这个方法，它的每个实例都是指向不同的函数实例，而不是同一个。

    1
    2
    3
    4
    5
    6
    7
    8
    function Preson(name,age,job) {
    this.name = name;
    this.age = age;
    this.job = job;
    this.sayName =function() {
    alert(this.name);
    }
    }

目前只介绍这三种方法，其他的后续补充。

7.css中如何使得文字不换行？

  • 一般的文字截断(适用于内联与块)：

    1
    2
    3
    4
    5
    6
    7
    8
    .text {
    display: block; /*内联对象需加*/
    width: 31em;
    word-break: keep-all; /* 不换行 */
    white-space: nowrap; /* 不换行 */
    overflow: hidden; /* 内容超出宽度时隐藏超出部分的内容 */
    text-overflow: ellipsis; /* 当对象内文本溢出时显示省略标记(…) ；需与overflow: hidden;一起使用。*/
    }

  • 对于表格，定义有点不一样：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    table {
    width: 30em;
    table-layout: fixed; /*只有定义了表格的布局算法为fixed，下面td的定义才能起作用。 */
    }
    td {
    width: 100%;
    word-break: keep-all; /* 不换行 */
    white-space: nowrap; /* 不换行 */
    overflow: hidden; /* 内容超出宽度时隐藏超出部分的内容 */
    text-overflow: ellipsis; /* 当对象内文本溢出时显示省略标记(…) ；需与overflow: hidden;一起使用。*/
    }

注：这个只对单行的文字的效，如果你想把它用在多行上，也只有第一行有作用的。 这个写法只有IE会有“…”，其它的浏览器文本超出指定宽度时会隐藏。

8.Ajax是什么？Ajax常用的技术列举几个？Ajax的缺点有什么？

AJAX定义

ajax的全称是AsynchronousJavascript+XML，是指一种创建交互式网页应用的网页开发技术。即异步传输+js+xml。通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。而传统的网页（不使用 AJAX）如果需要更新内容，必须重载整个网页页面。

AJAX常用的技术

  • 基于 web 标准（standards-based presentation）XHTML+CSS的表示；
  • 使用 DOM（Document Object Model）进行动态显示及交互；
  • 使用 XML 和 XSLT 进行数据交换及相关操作；
  • 使用 XMLHttpRequest 进行异步数据查询、检索；
  • 使用 JavaScript 将所有的东西绑定在一起
    类似于DHTML或LAMP，AJAX不是指一种单一的技术，而是有机地利用了一系列相关的技术。

AJAX的优缺点

1.优点

  • 无刷新更新数据：AJAX最大优点就是能在不刷新整个页面的前提下与服务器通信维护数据。这使得Web应用程序更为迅捷地响应用户交互，并避免了在网络上发送那些没有改变的信息，减少用户等待时间，带来非常好的用户体验。
  • 异步与服务器通信：AJAX使用异步方式与服务器通信，不需要打断用户的操作，具有更加迅速的响应能力。优化了Browser和Server之间的沟通，减少不必要的数据传输、时间及降低网络上数据流量。
  • 前端和后端负载平衡：AJAX可以把以前一些服务器负担的工作转嫁到客户端，利用客户端闲置的能力来处理，减轻服务器和带宽的负担，节约空间和宽带租用成本。并且减轻服务器的负担，AJAX的原则是“按需取数据”，可以最大程度的减少冗余请求和响应对服务器造成的负担，提升站点性能。
  • 基于标准被广泛支持：AJAX基于标准化的并被广泛支持的技术，不需要下载浏览器插件或者小程序，但需要客户允许JavaScript在浏览器上执行。
  • 界面与应用分离：Ajax使WEB中的界面与应用分离（也可以说是数据与呈现分离），有利于分工合作、减少非技术人员对页面的修改造成的WEB应用程序错误、提高效率、也更加适用于现在的发布系统。

2.缺点

  • 对浏览器机制的破坏：AJAX干掉了Back和History功能，在动态更新页面的情况下，用户无法回到前一个页面状态，因为浏览器仅能记忆历史记录中的静态页面。一个被完整读入的页面与一个已经被动态修改过的页面之间的差别非常微妙；用户通常会希望单击后退按钮能够取消他们的前一次操作，但是在Ajax应用程序中，这将无法实现。
  • AJAX的安全问题：Ajax技术就如同对企业数据建立了一个直接通道，这使得开发者在不经意间会暴露比以前更多的数据和服务器逻辑。
  • 对搜索引擎支持较弱：如果使用不当，AJAX会增大网络数据的流量，从而降低整个系统的性能。
  • 破坏程序的异常处理机制
  • 违背URL和资源定位的初衷：如果采用了Ajax技术，也许不同的人在同一个URL地址下看到的内容是不同的。这个和资源定位的初衷是相背离的。
  • AJAX不能很好支持移动设备

9.如何添加html元素的事件，有多少种方法？

1.通过HTML元素属性
简单说来就是在html结构中，给你要添加事件的元素添加一个属性。属性名为 ‘on’ + 事件名。如:你要给a元素绑定一个click事件，你就该这么写：
<a href="http://swagpig.com/" onclick='do something'>name</a>

2.通过对象属性
对象指的是jDOM树里的对象，我们都知道，所有的html元素在DOM(文档对象类型)里都存在一个相应的DOM元素。给这个DOM元素添加事件等同于方式1。这个属性名也一样：
也为 on + 事件名,如：
html结构:
<a href="http://swagpig.com/" id="n">name</a>

js：

1
2
3
document.getElementById(‘n’).onclick = function(){
//do something
}

 

3.通过W3C监听方式（标准方式）或者IE专属的中间模型添加事件

  • W3C方式：
    elemennt.addEventListener(事件名,处理函数引用,true || false)
    这里的事件名就是单纯的事件名，不需要加 on ，true表示在事件传播阶段捕获事件，false表示在事件冒泡阶段捕获事件，一般我们设为false!
  • IE模式:
    element.attachEvent( ‘on’ + 事件名，处理函数引用);
    注意，IE模式需要加on

10.HTML5标准提供了哪些新的API？列举几个

 

  • 用于渲染图形或其他可视图像的新 canvas 元素所使用的 2D 绘图 API
  • 支持离线 Web 应用程序的缓存 API：localstorage、sessionstorage
  • 使用新 video 和 audio 元素来播放视频和音频的 API
  • 支持浏览历史访问和添加页面历史的 API：History
  • 支持拖放的 API：draggable 属性
  • 支持编辑的 API：contenteditable 属性

您未登录，请先登录后再评论
评论列表
文章目录