和 ;
16.Quirks模式是什么?它和Standards模式有什么区别?
Quirks模式 Quirks模式,又称怪癖模式、诡异模式、怪异模式。 Quirks和Standards模式的区别 当我们在写程序时,遇到新旧功能不兼容的时候,如何做才能保证原来的接口不变,又可以提供强大的功能? 一般情况下可以通过增加参数和分支来解决。也就是当某个参数为true时,使用新功能,为false时使用旧功能,这样就能不破坏原有的程序,又能提供新功能。 IE6也是类似这样做的,它将DTD当成了这个“参数”,因为以前的页面大家都不会去写DTD,第一IE6就假定,如果写了DTD就意味这个页面将采用对CSS支持更好的布局,而如果没有就采用兼容之前的布局方式,这就是Quirks模式(怪癖,诡异,怪异模式)。 其与Standards的区别总体会有布局、样式解析、和脚本执行三个方面的区别:
盒模型:在W3C标准中,如果设置一个元素的宽度和高度,指的是元素内容的宽度和高度,而在Quirks 模式下,IE的宽度和高度还包含了padding和border; 设置行内元素的高宽:在Standards模式下,给等行内元素设置wdith和height都不会生效,而在quirks模式下,则会生效; 设置百分比的高度:在standards模式下,一个元素的高度是由其包含的内容来决定的,如果父元素没有设置百分比的高度,子元素设置一个百分比的高度是无效的用; 设置水平居中:使用margin:0 auto在standards模式下可以使元素水平居中,但在quirks模式下却会失效。
17.什么是前端的结构,样式和行为相分离?以及分离的好处是什么?
结构,样式和行为分离
小编的理解是: 若是将前端比作一个人来举例子,结构(HTML)就相当于是人体的“骨架”,样式就相当于人体的“装饰”,例如衣服,首饰等;行为就相当于人做出的一系列“动作”。 在结构,样式和行为分离,就是将三者分离开,各自负责各自的内容,各部分可以通过引用进行使用。 在分离的基础上,我们需要做到代码的:精简, 重用, 有序。 分离的好处
代码分离,利于团队的开发和后期的维护; 减少维护成本,提高可读性和更好的兼容性;
18.对HTML5有什么了解?
良好的移动性,以移动设备为主;
响应式设计,以适应自动变化的屏幕尺寸;
支持离线缓存技术,webStorage本地缓存;
新增了canvas,video,audio等新标签元素;以及特殊内容元素:article,footer,header,nav,section等;以及表单控件:calendar,date,time,email,url,search等;
新增webSocket/webWork技术;
还有新增的地理位置等。
19.如何对网站的文件和资源进行优化
文件合并(目的是减少http请求);
文件压缩 (目的是直接减少文件下载的体积);
使用缓存;
使用cdn托管资源;
gizp压缩需要的js和css文件;
反向链接,网站外链接优化;
meta标签优化(title, description, keywords),heading标签的优化,alt优化;
20.Html5中datalist是什么
标签,用来定义选项列表,与input元素配合使用钙元素,来定义input可能的值。
datalist及其选项不会被显示出来,他仅仅是合法的输入列表值。
21.Html5中本地存储概念是什么,有什么优点,与cookie有什么区别?
HTML5的Web storage的存储方式有两种:sessionStorage和localStorage。
sessionStorage用于本地存储一个会话中的数据,当会话结束后就会销毁; 和sessionStorage不同,localStorage用于持久化的本地存储,除非用户主动删除数据,否则数据永远不会过期; cookie是网站为了标示用户身份而储存在用户本地终端(Client Side)上的数据(通常经过加密)。
区别:
从浏览器和服务器间的传递看: cookie数据始终在同源的http请求中携带(即使不需要),即cookie在浏览器和服务器间来回传递;而sessionStorage和localStorage不会自动把数据发给服务器,仅在本地保存。
从大小看: 存储大小限制不同,cookie数据不能超过4k,只适合保存很小的数据;而sessionStorage和localStorage 虽然也有存储大小的限制,但比cookie大得多,可以达到5M或更大。
从数据有效期看: sessionStorage在会话关闭会立刻关闭,因此持续性不久;cookie只在设置的cookie过期时间之前一直有效,即使窗口或浏览器关闭。而localStorage始终有效。
从作用域看: sessionStorage不在不同的浏览器窗口中共享,即使是同一个页面;而localStorage和cookie都是可以在所有的同源窗口中共享的。
22.常见的浏览器内核有哪些
Trident内核:IE最先开发或使用的, 360浏览器; Webkit内核:Google Chrome,Safari, 搜狗浏览器,360极速浏览器, 阿里云浏览器等; Gecko内核: Mozilla FireFox (火狐浏览器) ,K-Meleon浏览器; Presto内核:Opera浏览器;
23.Canvas是什么?怎样写Canvas?
概念 Canvas是HTML5的一个元素,它使用JavaScript在网页上绘制图形。Canvas是一个矩形区域。它的每一个像素都可以由HTML5语言来控制。使用Canvas绘制路径、框、圆、字符和添加图像有几种方法。 使用方式 如果要在我们的HTML文档中添加Canvas标签,我们需要ID、宽度和高度。下面是如何将基本Canvas标签写入HTML文档的示例。
24.Html5应用程序缓存和HTML浏览器缓存有什么区别
新的HTML5规范的应用缓存最关键的就是支持离线应用,允许浏览器在链接客户端时预取一些或全部网站资产,如HTML文件,图像,CSS以及JS等,预取文件加速了站点的性能。换句话说,应用程序缓存可以预取完全未被访问的页面,从而在常规的浏览器缓存中不可用。与传统的浏览器缓存比较,该特性并不强制要求用户访问网站。
25.最新的HTML5标准中的新增了哪些API?
Canvas :Canvas由HTML代码中定义的具有高度和宽度属性的可绘制区域组成。JavaScript代码可以通过一组完整的绘图函数访问该区域,这与其他常见的2D API类似,因此允许动态生成图形。Canvas 的一些预期用途包括构建图形、动画、游戏和图像合成。 媒体定时回放; 离线存储数据库; 文档编辑; 拖放; 跨文档消息传递; 浏览器历史管理; MIME类型和协议处理程序注册; Notification API(桌面通知API)
26.有关HTML5中新的输入类型属性
类型
作用
search
用于搜索域 ,域显示为常规的文本域
email
用于应该包含email地址的输入域,在提交表单时,自动验证email域的值
url
用于应该包含url地址的输入域在提交表单时,会自动验证url的域值
number
用于应该包含数值的输入域,可自定义数字限定
range
用于应该包含一定范围内数字值的输入域,类型显示为滑动条
dateTime
用于选取时间,日,月,年(为UTC时间)
date
用于选取日,月,年
month
用于选取月,年
week
用于选取周和年
time
用于选取时间(分钟和小时)
dateTime-local
用于选取时间,日,月,年(当地时间)
27.对于web标准以及w3c有何理解与认识
于WEB而言:
web标准简单来说可以分为结构、表现和行为。web标准一般是将该三部分独立分开,使其更具有模块化。但一般产生行为时,就会有结构或者表现的变化,也使这三者的界限并不那么清晰;
于W3C而言:
W3C对web标准提出了规范化的要求,也就是在实际编程中的一些代码规范,如下: 结构上的要求:
标签必须闭合、标签小写、不乱嵌套,可以提高搜索机器人对网页内容的搜索几率;
对于css和js来说:
建议使用外链css和js脚本,从而达到结构与行为、结构与表现的分离,提高页面的渲染速度,能更快地显示页面的内容; 样式与标签的分离,更合理的语义化标签,使内容能被更多的用户所访问、内容能被更广泛的设备所访问、更少的代码和组件, 从而降低维护成本、改版更方便; 不需要变动页面内容,便可提供打印版本而不需要复制内容,提高网站易用性;
总之,遵循w3c制定的web标准,能够使用户浏览者更方便的阅读,使网页开发者之间更好的交流。
28.渐进增强和优雅降级之间的区别
渐进增强 (progressive enhancement):主要是针对低版本的浏览器进行页面重构,保证基本的功能情况下,再针对高级浏览器进行效果,交互等方面的改进和追加功能,以达到更好的用户体验。 优雅降级 graceful degradation: 一开始就构建完整的功能,然后再针对低版本的浏览器进行兼容。 区别
优雅降级 是从复杂的现状开始的,并试图减少用户体验的供给;而渐进增强是从一个非常基础的,能够起作用的版本开始的,并在此基础上不断扩充,以适应未来环境的需要; 降级(功能衰竭)意味着往回看,而渐进增强则意味着往前看,同时保证其根基处于安全地带。
29.浏览器如何对HTML5的离线储存资源进行管理和加载
有线情况下:
(1),浏览器发现html头部有manifest属性,它会请求manifest文件,如果是第一次访问app,那么浏览器就会根据 manifest文件的内容下载相应的资源并且进行离线存储。 (2),如果已经访问过app并且资源已经离线存储了,那么浏览器就会使用离线的资源加载页面,然后 浏览器会对比新的manifest文件与旧的manifest文件,如果文件没有发生改变,就不做任何操作,如果文件改变了,那么就会重新下载文件中的资源并进行离线存储。
在离线情况下: 浏览器直接使用离线缓存的资源;
30.页面可见性(Page Visibility)API 可以有哪些用途
在页面被切换到其他后台进程的时候,自动暂停音乐或视频的播放。
31. 标签定义文档与外部资源之间的关系
标签大多数时候都用来连接样式表。 link 元素是空元素,它仅包含属性。 该元素只能位于head 部分,但可以出现任何次数。
32. 标签用于定义客户端图像映射
图像映射指的是带有可点击区域的图像。 name 属性在 map 元素中是必需的。该属性与 标签的 usemap 属性相关联,以创建图像与映射之间的关系。 map 元素包含若干 area 元素,定义图像映射中的可点击区域。 在 HTML5 中,如果同时规定了 标签的 id 属性,则必须为 name 属性规定相同的值。 area 元素永远嵌套在 map 元素内部。area 元素可定义图像映射中的区域。
33. 元素可提供有关页面的元信息(meta-information),比如针对搜索引擎和更新频度的描述和关键词。
标签位于文档的头部,不包含任何内容。 标签的属性定义了与文档相关联的名称/值对。 name属性的值:
author
description
keywords
generator
revised
others
34. 标签定义导航链接的部分
如果文档中有“前后”按钮,则应该把它放到 元素中。
35. 元素用来定义在脚本未被执行时的替代内容(文本)
此标签用于可识别