Web前端错题模糊题记录



title: Web前端错题模糊题记录

toc: true

date: 2018-09-20 10:04:36

categories:

  • Web

tags:

  • HTML
  • CSS
  • JavaScript

HTML

元素的alt和title有什么异同?

alt和title同时设置的时候,alt作为图片的替代文字出现,title是图片的解释文字。

关于html5标签?

<audio> 标签定义声音,比如音乐或其他音频流。

<canvas> 标签定义图形,比如图表和其他图像。<canvas> 标签只是图形容器,必须使用脚本来绘制图形。

<article>标签定义外部的内容。比如来自一个外部的新闻提供者的一篇新的文章,或者来自 blog 的文本,或者是来自论坛的文本。亦或是来自其他外部源内容。

<menu> 标签定义命令的列表或菜单。<menu> 标签用于上下文菜单、工具栏以及用于列出表单控件和命令。command 元素表示用户能够调用的命令。<command> 标签可以定义命令按钮,比如单选按钮、复选框或按钮。只有当 command 元素位于 menu 元素内时,该元素才是可见的。否则不会显示这个元素,但是可以用它规定键盘快捷键。

有关HTML的Doctype和严格模式与混杂模式?

文档类型

DTD(文档类型定义)是一组机器可读的规则,他们定义 XML 或 HTML 的特定版本中允许有什么,不允许有什么。在解析网页时,浏览器将使用这些规则检查页面的有效性并且采取相应的措施。浏览器通过分析页面的 DOCTYPE 声明来了解要使用哪个 DTD ,由此知道要使用 HTML 的哪个版本。

DOCTYPE 当前有两种风格,严格( strict )和过渡( transitional )。过渡 DOCTYPE 的目的是帮助开发人员从老版本迁移到新版本。

如果发送具有正确的 MIME 类型的 XHTML 文档,理解 XML 的浏览器将不显示无效的页面。

浏览器模式

浏览器有两种呈现模式:标准模式和混杂模式(quirks mode,也叫兼容模式)。在标准模式中,浏览器根据规范呈现页面;在混杂模式中,页面以一种比较宽松的向后兼容的方式显示。

** DOCTYPE 切换 **

对于 HTML 4.01 文档,

  • 包含严格 DTD 的 DOCTYPE 常常导致页面以标准模式呈现。
  • 包含过度 DTD 和 URI 的 DOCTYPE 也导致页面以标准模式呈现。
  • 但是有过度 DTD 而没有 URI 会导致页面以混杂模式呈现。
  • DOCTYPE 不存在或形式不正确会导致 HTML 和 XHTML 文档以混杂模式呈现。

NOSCRIPT标签是做什么用的?

noscript 元素用来定义在脚本未被执行时的替代内容(文本)。

CSS

关于CSS的position属性?

static没有定位,元素出现在正常的流中。

fixed是相对于窗口的固定定位。

关于border:none以及border:0?

当定义border:none时,表示无边框样式,浏览器并不会对边框进行渲染,也就没有实际的宽度;

定义边框时,除了设置宽度外,还必须设置边框的样式才能显示出来。

关于CSS sprites图片字节?

CSS Sprites能减少图片的字节,曾经比较过多次,3张图片合并成1张图片的字节总是小于这3张图片的字节总和。

关于浏览器引擎?

Wekbit是一个开源的Web浏览器引擎,也就是浏览器的内核。Apple的Safari, Google的Chrome, Nokia S60平台的默认浏览器,Apple手机的默认浏览器,Android手机的默认浏览器均采用的Webkit作为器浏览器内核。Webkit的采用程度由 此可见一斑,理所当然的成为了当今主流的三大浏览器内核之一。

另外两个分别是Gecko和Trident,大名鼎鼎的Firefox便是使用的Gecko 内核,而微软的IE系列则使用的是Trident内核。

还有Presto: Opera的内核,但由于市场选择问题,主要应用在手机平台--Opera mini。

另外,搜狗浏览器是双核的,双核并不是指一个页面由2个内核同时处理,而是所有网页(通常是标准通用标记语言的应用超文本标记语言)由webkit内核处理,只有银行网站用IE内核。

JavaScript

flash和js通过什么类如何交互?

ExternalInterface。Flash提供了ExternalInterface接口与JavaScript通信,ExternalInterface有两个方法,call和addCallback,call的作用是让Flash调用js里的方法,addCallback是用来注册flash函数让js调用。

有关浏览器中使用js跨域获取数据?

只要协议 、 域名 、 端口有任何一个不同, 都被当作是 不同 的域。

1.CORS

CORS(Cross-Origin Resource Sharing,跨资源共享),基本思想是使用自定义的HTTP头部让浏览器与服务器进行沟通,从而决定请求或响应的成功或失败。即给请求附加一个额外的Origin头部,其中包含请求页面的源信息(协议、域名和端口),以便服务器根据这个头部决定是否给予响应。

2.document.domain

将页面的document.domain设置为相同的值,页面间可以互相访问对方的JavaScript对象。

注意:

不能将值设置为URL中不包含的域;

松散的域名不能再设置为紧绷的域名。

3.图像Ping

var img=new Image();

img.onload=img.onerror=function(){

... ...

}

img.src="url?name=value";

请求数据通过查询字符串的形式发送,响应可以是任意内容,通常是像素图或204响应。

图像Ping最常用于跟踪用户点击页面或动态广告曝光次数。

缺点:

只能发送GET请求;

无法访问服务器的响应文本,只能用于浏览器与服务器间的单向通信。

4.Jsonp

var script=document.createElement("script");

script.src="url?callback=handleResponse";

document.body.insertBefore(script,document.body.firstChild);

JSONP由两部分组成:回调函数和数据

回调函数是接收到响应时应该在页面中调用的函数,其名字一般在请求中指定。

数据是传入回调函数中的JSON数据。

优点:

能够直接访问响应文本,可用于浏览器与服务器间的双向通信。

缺点:

JSONP从其他域中加载代码执行,其他域可能不安全;

难以确定JSONP请求是否失败。

5.Comet

Comet可实现服务器向浏览器推送数据。

Comet是实现方式:长轮询和流

短轮询即浏览器定时向服务器发送请求,看有没有数据更新。

长轮询即浏览器向服务器发送一个请求,然后服务器一直保持连接打开,直到有数据可发送。发送完数据后,浏览器关闭连接,随即又向服务器发起一个新请求。其优点是所有浏览器都支持,使用XHR对象和setTimeout()即可实现。

流即浏览器向服务器发送一个请求,而服务器保持连接打开,然后周期性地向浏览器发送数据,页面的整个生命周期内只使用一个HTTP连接。

6.WebSocket

WebSocket可在一个单独的持久连接上提供全双工、双向通信。

WebSocket使用自定义协议,未加密的连接时ws://;加密的链接是wss://。

var webSocket=new WebSocket("ws://");

webSocket.send(message);

webSocket.onmessage=function(event){

var data=event.data;

... ....

}

注意:

必须给WebSocket构造函数传入绝对URL;

WebSocket可以打开任何站点的连接,是否会与某个域中的页面通信,完全取决于服务器;

WebSocket只能发送纯文本数据,对于复杂的数据结构,在发送之前必须进行序列化JSON.stringify(message))。

优点:

在客户端和服务器之间发送非常少的数据,减少字节开销。

如何获取一个元素节点(id 为 test)的父元素,找到之后如何删除这个元素节点(id 为 test)?

var testNode = document.getElementById(‘test‘);
var parentNode = testNode.parentNode;
parentNode.removeChild(testNode);   

!编写一个 js 函数 jsonp 的处理函数:

讲解链接

// 手写jsonp
function myCallback(data) {
    console.log(data)
}

function jsonp(url, data, callback) {
    // data是否是字符串,是的话证明data值就是函数名
    if (typeof data == ‘string‘) {
        callback = data
        data = {}
    }
    // 拼接data
    url += url.indexOf(‘?‘) === -1 ? ‘?‘ : ‘&‘
    url += ‘callback=‘ + callback
    var params = ""
    for (var i in data) {
        params += ‘&‘ + i + ‘=‘ + data[i]
    }
    url += params
    // 在页面插入script标签
    var script = document.createElement(‘script‘)
    script.setAttribute(‘src‘, url)
    document.querySelector(‘head‘).appendChild(script)

}

jsonp(‘http://baidu.com/index.html‘, { id: 34 }, ‘myCallback‘)
jsonp(‘http://baidu.com/index.html?name="zjn"‘, { id: 34 }, ‘myCallback‘)

编写一个函数判断参数是否是数组类型,如果是返回 true

// 方法一:
function isArray(arg){
  return (arg instanceof Array);
}
// 方法二:
function isArray(arg){
  return Object.prototype.toString.call(arg) == ‘[object Array]‘ ? true : false;
}
// 方法三:
function isArray(arg){
  return arg.__proto__.constructor.name == ‘Array‘ ?true : false;
}

关于对象的length属性:

Window.length //返回在当前窗口中frames的数量(包括IFRAMES)

String.length //返回字符串中的字符数目

Function.length //获取一个函数定义的参数数目

Array.length //返回数组中元素的数目

如何获取 url 中的 query 字段对应的值,比如:https://m.mobike.com?source=part1,编写一个函数获取 source 对应的值 part1

let query = (url) => {
  let p = url.split(‘?‘)[1];
  let sourcePos = p.indexOf(‘source‘);
  if (sourcePos > -1) {
    if (p.indexOf(‘&‘, sourcePos+7) > -1) {
      return p.substring(sourcePos+7,p.indexOf(‘&‘, sourcePos+7));
    } else {
      return p.substring(sourcePos+7);
    }
  }
};

关于IE的event对象支持的方法:

IE的所有事件对象都支持的方法和属性:

  • cancelBubble 默认为false,设置为true就可以取消事件冒泡
  • returnValue 默认为true,设置为false可以取消事件的默认行为
  • srcElement 对于生成事件的 Window 对象、Document 对象或 Element 对象的引用
  • type 被触发事件的类型

DOM事件的方法(IE的事件模型不支持):

  • initEvent() 初始化新创建的 Event 对象的属性
  • preventDefault() 通知浏览器不要执行与事件关联的默认动作
  • stopPropagation() 不再派发事件

JavaScript的函数调用有哪几种方式?请举例说明,并分析其不同之处。

以下 javascript 代码,在浏览器中运行的结果是

先全部输出first,然后全部输出second。

js 是运行于单线程环境中,定时器作用是在规定时间内将事件加入执行队列,而加入的前提是当前事件队列没有任何东西。

其他

和后端 API 服务通信的方式有哪些

  1. ajax
  2. websocket
  3. SSE
  4. 服务器端渲染

POST 提交的时候,content-type 有哪几种?

常见的有四种

  1. application/x-www-form-urlencoded
  2. application/json
  3. multipart/form-data
  4. text/xml

对前端工程化的理解,以及任意构建工具(webpack、gulp、grunt、rollup)的某一个使用的一些描述

前端工程化

https://blog.csdn.net/mayfla/article/details/78697020

webpack

webpack是一个前端模块化方案,更侧重模块打包,我们可以把开发中的所有资源(图片、js文件、css文件等)都看成模块,通过loader(加载器)和plugins(插件)对资源进行处理,打包成符合生产环境部署的前端资源。

Node.js 的核心模块

HTTP模块、URL模块、Query Strings模块、File System模块、Path模块、Global模块。

ajax事件有哪些

原文地址:https://www.cnblogs.com/zmj97/p/10180684.html

时间: 2024-11-05 13:47:13

Web前端错题模糊题记录的相关文章

响应国家号召 1+X 证书 Web 前端开发考试模拟题

1+x证书Web前端开发初级理论考试样题2019 http://blog.zh66.club/index.php/archives/149/ 1+x证书Web前端开发初级实操考试样题2019 http://blog.zh66.club/index.php/archives/150/ 1+x证书Web前端开发中级理论考试样题2019 http://blog.zh66.club/index.php/archives/151/ 1+x证书Web前端开发中级实操考试样题2019 http://blog.

WEB前端资源代码:PS记录

1.相邻2个层合并的快捷键方法:先选择上面的一个层,再按ctrl+e. 2.合并一个组内的多个层或组:在该组单击右键,选择“转换为智能对象”,然后可对其进行其它操作,比如:截取该组的为一张图片:ctrl+"鼠标左点击该组". 3.复制一个层,对该层设置前景色和背景色设置:背景色快捷键 :Ctrl+Delete:前景色快捷键Alt+Delete. 4.移动一张jpg图片内的文字或者里面的小图片等内容:首先选中“要移动的内容”,第二,新建新层,然后点击 “移动工具”,点击左右箭头移动内容,

1+x 证书 web 前端开发初级对应课程分析

响应国家号召 1+X 证书 Web 前端开发考试样题 官方QQ群 1+x 证书 web 前端开发初级对应课程分析 http://blog.zh66.club/index.php/archives/194/ 1+X 证书 Web 前端开发中级对应课程分析 http://blog.zh66.club/index.php/archives/195/ 1+x 证书 Web 前端开发初级理论考试样题 2019 http://blog.zh66.club/index.php/archives/149/ 1+

2019年最新1+x 证书 Web 前端开发初级理论考试模拟题(含答案 )

1+x 证书 Web 前端开发初级理论考试(试卷10 ) 官方QQ群? 共55道题 总分:200分 形考总分:0分 一.单选题共30题,60分 1.以下说法正确的是: D Atable的表单标签 Btd的代表行 Ctr代表列 Dtable是表格标签 2.在javascript中,执行结果正确的是: B Atypeof(null)的结果为null Btypeof(typeof(5))的结果为"string" Ctypeof(5)的结果为Number Dtypeof(typeof(unde

WEB前端开发 辨析类 面试真题 大集锦

WEB前端开发 辨析类 面试真题 大集锦 HTML5学堂-码匠:面试里最常出现的问题句式大概就是"说说XXX和XXX的区别""谈谈XXX和XXX的不同"了吧~!一波波的辨析题正在袭来,快快开启防御,杀出重围,来一场绝地反击! 僵尸,啊,不对,辨析三连发! 扫描了众多的面试题,发现--额--各个技术之间的辨析真的是如僵尸一般,一波一波的~ 相信不少人都在面试当中遇到过各类的辨析题,面试的画风大概是这样的 -- 面试官:strong.em.b.i的区别是什么? 面试官:

web前端面试真题! 面试的经历和回答只做参考1

xxxxx网络有限公司:下午1点50分左右到达公司附近,3点左右找到公司,因为公司周围环境不是很好,位置也很偏僻,关键是当时公司就3个人,当时想着:就算不在这里工作最起码要了解下面试过程什么的,所以在面试时完全不紧张,整个过程就像闲聊一样. 1.先自我介绍下? 好的,我叫xxx,毕业于xxxx,之前在xxxxx做WEB前端工作2年左右,10月底辞职到厦门,以后打算在厦门长期发展. 2.node是什么? node是服务端的JS,是一个事件驱动的非阻塞的I/O服务端js环境,本质上是对google

记录第一个web前端项目

大二上学期闲着没事儿干,便去了之前教我java的老师的项目组,去了之后才知道是做一个web前端的项目,但我对于这方面可以说完全是一个小白,但是老师催得也紧,简单学了学html,css,javascript跟vue,elementui便开始干活了. 在这个项目里,我的任务也挺简单的,就是画个几个设备管理界面.这里我就举一个界面的例子吧. <!--模板--> <template> <el-card class="box-card"> <div sl

【转】Web前端黑客技术揭秘{笔记}

原文 http://www.cnblogs.com/r00tgrok/articles/Web-Hacking.html 前些日子看完了白帽子讲Web安全,当时就PHP安全一 章做了点小笔记,感觉看书还是留下点东西比较好.翻开Web前端黑客技术揭秘一书决定要做笔记,但是这样下来其实进度就比较慢了,敲字做笔记绝对远比看书 来的慢.有时候上午看完的内容做笔记时要花一天时间,一方面是要敲字,另一方面是自己只从书上摘录部分内容有时候需要将其串起来,还有就是碰上自己想发两 句言也会拖慢进度.总之现在书是看

2015腾讯暑期实习生 Web前端开发 面试经历

[2015腾讯暑期实习生 Web前端开发 面试经历] 好吧,首先声明,我被刷了,应该是跪在二面 微信查到的面试状态一直呈现复试中 .. 整整四天了.. 看来是没希望了 不过也是一次经历,记录一下还是可以的 .. 零.TST内推 TST还是有必要提一下,早早就随大家把简历交上去内推了 很多人都有评级了,各种评级都有 但我 从头到尾都查不到评级..是漏了..还是简历太渣看不上... 还是怎么回事..衰.. 一.笔试 笔试是在3月29号在华工考的,腾讯的笔试一直都那么回事,技术岗的都同样一份试题. 试