前端面试经典题目(HTML+CSS)二

摘要:
当有消息返回时系统会通知进程进行处理,这样可以提高执行的效率。post是通过HTTPpost机制,将表单内各个字段与其内容放置在HTMLHEADER内一起传送到ACTION属性所指的URL地址,用户看不到这个过程。post传送的数据量较大,一般被默认为不受限制。5)get安全性低,post安全性较高。

1、浏览器页面由哪三层构成,分别是什么,作用是什么?

构成:结构层、表示层、行为层

分别是:HTML、CSS、JavaScript

作用:HTML实现页面结构,CSS完成页面的表现与风格,JavaScript实现一些客户端的功能与业务。

2、行内元素有哪些?块级元素有哪些? 空(void)元素有那些?

行内元素:a、b、span、img、input、strong、select、label、em、button、textarea
块级元素:div、ul、li、dl、dt、dd、p、h1-h6、blockquote
空元素:即系没有内容的HTML元素,例如:br、meta、hr、link、input、img

3、简述一下src与href的区别

href 是指向网络资源所在位置,建立和当前元素(锚点)或当前文档(链接)之间的链接,用于超链接。

src是指向外部资源的位置,指向的内容将会嵌入到文档中当前标签所在位置;在请求src资源时会将其指向的资源下载并应用到文档内,例如js脚本,img图片和frame等元素。

当浏览器解析到该元素时,会暂停其他资源的下载和处理,直到将该资源加载、编译、执行完毕,图片和框架等元素也如此,类似于将所指向资源嵌入当前标签内。这也是为什么将js脚本放在底部而不是头部。

4、px和em的区别

相同点:px和em都是长度单位;

异同点:px的值是固定的,指定是多少就是多少,计算比较容易。em得值不是固定的,并且em会继承父级元素的字体大小
浏览器的默认字体高都是16px。所以未经调整的浏览器都符合: 1em=16px。那么12px=0.75em, 10px=0.625em。

5、简述同步和异步的区别

同步是阻塞模式,异步是非阻塞模式。
同步就是指一个进程在执行某个请求的时候,若该请求需要一段时间才能返回信息,那么这个进程将会一直等待下去,直到收到返回信息才继续执行下去;
异步是指进程不需要一直等下去,而是继续执行下面的操作,不管其他进程的状态。当有消息返回时系统会通知进程进行处理,这样可以提高执行的效率。

6、什么叫优雅降级和渐进增强

渐进增强 progressive enhancement:
针对低版本浏览器进行构建页面,保证最基本的功能,然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。

优雅降级 graceful degradation:
一开始就构建完整的功能,然后再针对低版本浏览器进行兼容。

区别:

a. 优雅降级是从复杂的现状开始,并试图减少用户体验的供给

b. 渐进增强则是从一个非常基础的,能够起作用的版本开始,并不断扩充,以适应未来环境的需要

c. 降级(功能衰减)意味着往回看;而渐进增强则意味着朝前看,同时保证其根基处于安全地带

7、HTML5的优点与缺点

优点:a、网格标准统一、HTML5本身是由W3C推荐出来的

b、多设备、跨平台

c、即时更新

d、提高可用性和改进用户的友好体验

e、有几个新的标签,这有助于开发人员定义重要的内容

f、可以给站点带来更多的多媒体元素(视频和音频)

g、可以很好的替代Flash和Silverlight;

h、涉及到网站的抓取和索引的时候,对于SEO很友好

i、被大量应用于移动应用程序和游戏

缺点:a、安全:像之前Firefox4的web socket和透明代理的实现存在严重的安全问题,同时web storage、web socket这样的功能很容易被黑客利用,来盗取用户的信息和资料

b、完善性:许多特性各浏览器的支持程度也不一样

c、技术门槛:HTML5简化开发者工作的同时代表了有许多新的属性和API需要开发者学习,像web worker、web socket、web storage等新特性,后台甚至浏览器原理的知识,机遇的同时也是巨大的挑战

d、性能:某些平台上的引擎问题导致HTML5性能低下

e、浏览器兼容性:最大缺点,IE9以下浏览器几乎全军覆没

8、Doctype作用?严格模式与混杂模式如何区分?它们有何意义?

1)声明位于文档中的最前面,处于标签之前。告知浏览器的解析器,用什么文档类型规范来解析这个文档。

2)严格模式的排版和JS运作模式是以该浏览器支持的最高标准运行

3)在混杂模式中,页面以宽松的向后兼容的方式显示

4)DOCTYPE不存在或格式不正确会导致文档以混杂模式呈现。

9、sessionStorage 、localStorage 和cookie 之间的区别

共同点:用于浏览器端存储的缓存数据

不同点:cookies会发送到服务器端,其余两个不会。

1)Cookie:每个域名存储量比较小(各浏览器不同,大致4K);所有域名的存储量有限制;有个数限制;会随请求发送到服务器;

2)LocalStorage:永久存储;单个域名存储量比较大(推荐5MB,各浏览器不同);总体数量无限制;

3)sessionStorage:只在session内有效(在同源的同窗口(或tab)中,即使刷新页面或进入同源另一页面,数据仍然存在);存储量更大(推荐没有限制,但实际上各浏览器也不同)

10、iframe有哪些缺点

  • iframe会阻塞主页面的Onload事件
  • 搜索引擎的检索程序无法解读这种页面,不利于SEO
  • iframe和主页面共享连接池,而浏览器对相同域的连接有限制,所以会影响页面的并行加载。
  • 使用iframe之前需要考虑这两个缺点,如果需要使用iframe,最好是通过JavaScript

(动态给iframe添加src属性值,这样可以绕开以上两个问题)

11、如何实现浏览器内多个标签页之间的通信?

WebSocket、SharedWorker;也可以调用localstorage、cookies等本地存储方式;localstorage另一个浏览上下文里被添加、修改或删除时,它都会触发一个事件,我们通过监听事件,控制它的值来进行页面信息通信;注意quirks:Safari在无痕模式下设置localstorage值时会抛出QuotaExceededError的异常。

12、表单提交中Get和Post方式的区别

1)get是从服务器上获取数据,post是向服务器传送数据

2)get是把参数数据队列加到提交表单的ACTION属性所指的URL中,值和表单内各个字段一一对应,在URL中可以看到。post是通过HTTP post机制,将表单内各个字段与其内容放置在HTML HEADER内一起传送到ACTION属性所指的URL地址,用户看不到这个过程。

3)对于get方式,服务器端用Request.QueryString获取变量的值,对于post方式,服务器端用Request.Form获取提交的数据

4)get传送的数据量较小,不能大于2KB。post传送的数据量较大,一般被默认为不受限制。但理论上,IIS4中最大量为80KB,IIS5中为100KB。

5)get安全性低,post安全性较高。

13、Web Storage与Cookie相比存在的优势

(1)、存储空间更大:IE8下每个独立的存储空间为10M,其他浏览器实现略有不同,但都比Cookie要大很多。

(2)、存储内容不会发送到服务器:当设置了Cookie后,Cookie的内容会随着请求一并发送的服务器,这对于本地存储的数据是一种带宽浪费。而Web Storage中的数据则仅仅是存在本地,不会与服务器发生任何交互。

(3)、更多丰富易用的接口:Web Storage提供了一套更为丰富的接口,如setItem,getItem,removeItem,clear等,使得数据操作更为简便。cookie需要自己封装。

(4)、独立的存储空间:每个域(包括子域)有独立的存储空间,各个存储空间是完全独立的,因此不会造成数据混乱。

免责声明:文章转载自《前端面试经典题目(HTML+CSS)二》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇ipod恢复及导入音乐WebService部署到IIS时Web.config的配置下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

selenium cookie登录

前言 爬虫方向的小伙伴们都知道网页爬虫经常遇到的问题就是登录账户,有些简单的网站我们可以简单的send key来输入账户密码就可以登录,但是有很多网站需要验证码之类的就不太好用了,这时候就体现到了cookie登录的优点了,前段时间网上搜了搜,发现没有什么完整的教程,本文就使用selenium来cookie登录为例做一个简单的教程。 环境准备 python...

Shiro权限管理框架(二):Shiro结合Redis实现分布式环境下的Session共享

本篇是Shiro系列第二篇,使用Shiro基于Redis实现分布式环境下的Session共享。在讲Session共享之前先说一下为什么要做Session共享。 首发地址:https://www.guitu18.com/post/2019/07/28/44.html 为什么要做Session共享 什么是Session 我们都知道HTTP协议(1.1)是无状...

thinkphp5学习总结5---超全局变量,魔术方法和魔术变量大全

PHP中的这三种变量 PHP在设计的时候已经预定义了9个超级全局变量、8个魔术变量和13魔术函数,这些变量和函数可以在脚本的任何地方不用声明就可以使用。 在PHP开发会频繁的使用这些变量和函数,这些变量和函数可以方便的帮我们解决很多问题。下面详细的讲解下PHP中的超级全局变量、魔术变量和魔术函数。 1.超全局变量(9个) $GLOBALS  储存全局作用域...

《图解 HTTP》 摘要一

学习过程对书本的内容的摘要以及总结,逐步完善,带有个人理解成分。 Web 及网络基础 使用 HTTP 协议访问 Web 客户端:通过获取请求获取服务资源的 Web 浏览器等 HTTP 全称:HtyperText Transfer Protocol WWW 全称:Wrold Wide Web SGML 标准通用标记语言 全称:Standard Gener...

前端面试题(1)

这是我之前在南京面试的一家公司的面试题 http://www.360doc.com/content/13/0313/13/10504424_271236846.shtml 1.对web标准以及w3c的理解与认识。 百度知道:标签闭合、标签小写、不乱嵌套、提高搜索机器人搜索几率、使用外 链css和js脚本、结构行为表现的分离、文件下载与页面速度更快、内容能被...

cookie详解

背景 在HTTP协议的定义中,采用了一种机制来记录客户端和服务器端交互的信息,这种机制被称为cookie,cookie规范定义了服务器和客户端交互信息的格式、生存期、使用范围、安全性。 在JavaScript中可以通过 document.cookie 来读取或设置这些信息。由于 cookie 多用在客户端和服务端之间进行通信,所以除了JavaScript以...