1.语义化有利于SEO,有利于搜索引擎爬虫更好的理解我们的网页,从而获取更多的有效信息,提升网页的权重。
2.在没有CSS的时候能够清晰的看出网页的结构,增强可读性。
3.便于团队开发和维护,语义化的HTML可以让开发者更容易的看明白,从而提高团队的效率和协调能力。 4.支持多终端设备的浏览器渲染。 * HTML5的离线储存怎么使用,工作原理能不能解释一下? HTML5的一个重要特性就是离线存储,所谓的离线存储就是将一些资源文件保存在本地,这样后续的页面重新加载将使用本地资源文件,在离线情况下可以继续访问web应用,同时通过一定的手法(更新相关文件或者使用相关API),可以更新、删除离线存储等操作; 如何使用:上面提到的HTML5的离线存储是基于一个新建的.appcache文件的,通过这个文件上的解析清单离线存储资源,这些资源就会像cookie一样被存储了下来。之后当网络在处于离线状态下时,浏览器会通过被离线存储的数据进行页面展示。 (1)页面头部像下面一样加入一个manifest的属性; (2)在cache.manifest文件的编写离线存储的资源; CACHEMANIFEST #v0.11 CACHE: js/app.js css/style.css NETWORK: resourse/logo.png FALLBACK: //offline.html (3)在离线状态时,操作window.applicationCache进行需求实现。
* 浏览器是怎么对HTML5的离线储存资源进行管理和加载的呢?
在线的情况下,浏览器发现html头部有manifest属性,它会请求manifest文件,如果是第一次访问app,那么浏览器就会根据manifest文件的内容下载相应的资源并且进行离线存储。如果已经访问过app并且资源已经离线存储了,那么浏览器就会使用离线的资源加载页面,然后浏览器会对比新的manifest文件与旧的manifest文件,如果文件没有发生改变,就不做任何操作,如果文件改变了,那么就会重新下载文件中的资源并进行离线存储。 离线的情况下,浏览器就直接使用离线存储的资源。 * 请描述一下 cookies,sessionStorage 和 localStorage 的区别? 共同点:都是保存在浏览器端,且同源的。 区别:cookie数据始终在同源的http请求中携带(即使不需要),即cookie在浏览器和服务器间来回传递。而sessionStorage和localStorage不会自动把数据发给服务器,仅在本地保存。cookie数据还有路径(path)的概念,可以限制cookie只属于某个路径下。存储大小限制也不同,cookie数据不能超过4k,同时因为每次http请求都会携带cookie,所以cookie只适合保存很小的数据,如会话标识。sessionStorage和localStorage 虽然也有存储大小的限制,但比cookie大得多,可以达到5M或更大。数据有效期不同,sessionStorage:仅在当前浏览器窗口关闭前有效,自然也就不可能持久保持;localStorage:始终有效,窗口或浏览器关闭也一直保存,因此用作持久数据;cookie只在设置的cookie过期时间之前一直有效,即使窗口或浏览器关闭。作用域不同,sessionStorage不在不同的浏览器窗口中共享,即使是同一个页面;localStorage 在所有同源窗口中都是共享的;cookie也是在所有同源窗口中都是共享的。Web Storage 支持事件通知机制,可以将数据更新的通知发送给监听者。Web Storage 的 api 接口使用更方便。 * iframe有那些优缺点? iframe的优点:1.iframe能够原封不动的把嵌入的网页展现出来。
2.如果有多个网页引用iframe,那么你只需要修改iframe的内容,就可以实现调用的每一个页面内容的更改,方便快捷。
3.网页如果为了统一风格,头部和版本都是一样的,就可以写成一个页面,用iframe来嵌套,可以增加代码的可重用。
4.如果遇到加载缓慢的第三方内容如图标和广告,这些问题可以由iframe来解决。
iframe的缺点:
1.会产生很多页面,不容易管理。
2.iframe框架结构有时会让人感到迷惑,如果框架个数多的话,可能会出现上下、左右滚动条,会分散访问者的注意力,用户体验度差。
3.代码复杂,无法被一些搜索引擎索引到,这一点很关键,现在的搜索引擎爬虫还不能很好的处理iframe中的内容,所以使用iframe会不利于搜索引擎优化。
4.很多的移动设备(PDA 手机)无法完全显示框架,设备兼容性差。
5.iframe框架页面会增加服务器的http请求,对于大型网站是不可取的。 分析了这么多,现在基本上都是用Ajax来代替iframe,所以iframe已经渐渐的退出了前端开发。 * Label的作用是什么?是怎么用的?(加 for 或 包裹) label 标签为 input 元素定义标注(标记)。
label 元素不会向用户呈现任何特殊效果。不过,它为鼠标用户改进了可用性。如果您在 label 元素内点击文本,就会触发此控件。就是说,当用户选择该标签时,浏览器就会自动将焦点转到和标签相关的表单控件上。
Label 中有两个属性是非常有用的,一个是FOR、另外一个就是ACCESSKEY了。
FOR属性 :
功能:表示Label标签要绑定的HTML元素,你点击这个标签的时候,所绑定的元素将获取焦点。
ACCESSKEY属性: 功能:表示访问Label标签所绑定的元素的热键,当您按下热键,所绑定的元素将获取焦点。 * HTML5的form如何关闭自动完成功能? autocomplete 属性规定表单是否应该启用自动完成功能。
自动完成允许浏览器预测对字段的输入。当用户在字段开始键入时,浏览器基于之前键入过的值,应该显示出在字段中填写的选项。
<form autocomplete="on/off">
on 默认。规定启用自动完成功能。 off 规定禁用自动完成功能。 * 如何实现浏览器内多个标签页之间的通信? (阿里) 即将到来的 SharedWorker API 能够在 iframe 甚至浏览器标签或窗口中传输数据。它在几年前就已在 Chrome 中得以实现,不久前也在 Firefox 上实现了,不过它在 IE 和 Safari 中仍然难觅踪影。
(需要对以下应用情景找到一个优雅的解决方案:假设有个人访问了你的网站。他依次登录,打开第二个标签页并在那个标签页里选择了注销。这时,他所打开的第一个标签页看起来仍然保留着「已登录」的状态,但这时他的所有操作要么会重定向到登录页面,要么会直接让他抓狂。更吸引人的解决方式则是判断用户是否已注销,并对页面做相应的改变。譬如可以显示一个对话框来提示用户需要重新验证,或者显示原本的登录视图。)
这个功能可以通过 WebSocket API 来实现,不过这就有些小题大做了。毕竟杀鸡焉用牛刀,于是我开始寻找一些其它的跨标签页通信方式。我首先想到的就是使用 cookies ,来周期性地通过 setInterval 检查用户是否登录。对这个方案我并不满意,因为这样会把许多 CPU 周期耗费在检查一个可能自始至终都不会满足的条件上。这时候我就觉得还不如就直接用 “comet”(又名轮询)、服务器端事件或者 WebSockets 算了呢。
当我发现自己是在骑驴找驴的时候还是很吃惊,因为答案就是一直以来的 localStorage! 你知道 localStorage 会触发一个事件吗?具体地说,不论其中的哪一项在另一个浏览上下文里被添加、修改或删除时,它都会触发一个事件。实际上,这就意味着不论在哪个浏览器的标签页里访问了 localStorage,所有其它的标签页都能通过 window 对象监听到这个事件.不论某个标签页在何时修改了 localStorage,都会对其余的所有标签触发事件。这就意味着我们只要为 localStorage 赋值,就能够跨浏览器标签通信了。 * webSocket如何兼容低浏览器?(阿里) (WebSocket protocol 是HTML5一种新的协议。它实现了浏览器与服务器全双工通信(full-duplex)。在浏览器中通过http仅能实现单向的通信,comet可以一定程度上模拟双向通信,但效率较低,并需要服务器有较好的支持; flash中的socket和xmlsocket可以实现真正的双向通信,通过 flex ajax bridge,可以在javascript中使用这两项功能. 可以预见,如果websocket一旦在浏览器中得到实现,将会替代上面两项技术,得到广泛的使用.)
WebSocket是目前"唯一"的一个浏览器下的Socket的标准, 它是通过浏览器内部提供的API来实现访问的. 低版本的浏览器没有WebSocket这个标准, 就意味这些浏览器不允许用户通过它们来实现Socket通讯. 解决兼容性的办法就是准备一套Ajax + Server-side Script的后备方案. 比如Ajax + PHP Socket.
其他方案:Adobe Flash Socket 、ActiveX HTMLFile (IE) 、基于 multipart 编码 发送 XHR 、基于长轮询的 XHR. * 页面可见性(Page Visibility)API 可以有哪些用途? 通过visibilityState 的值检测页面当前是否可见,以及打开网页的时间等; 在页面被切换到其他后台进程的时候,自动暂停音乐或视频的播放; * 如何在页面上实现一个圆形的可点击区域? (1)map+area或者svg (2)border-radius (3)纯js实现需要求一个点在不在圆上简单算法、获取鼠标坐标等等 * 实现不使用 border 画出1px高的线,在不同浏览器的Quirksmode和CSSCompat模式下都能保持同一效果。 <divstyle="height:1px;overflow:hidden;background:red"></div> * 网页验证码是干嘛的,是为了解决什么安全问题? 防止恶意注册和暴力破解 所谓恶意注册和暴力破解都是用软件进行的。 人工注册再快,也需要一项一项输入资料,速度很慢,对服务器基本没有影响。如果没有验证码可以使用软件注册的话,可以同时运行成千上万个线程,一次能注册成千上万个用户,让服务器的数据库很快变得臃肿不堪,运行效率下降。 如果一个无聊的人或竞争对手对某网站怀有敌意,那么这种方法很容易就能让对方瘫痪。 * tite与h1的区别、b与strong的区别、i与em的区别? tilte与h1的区别 从搜索引擎角度来说,title标签是用来描述这个页面的主题的,是一个网页权重的最高点。但title标签并不出现在文章的正文中。而h1标签一般出现在文章的正文中,是展示给访问者的文章的标题。所以说这两个标签不仅不冲突的,而是合作的关系。一篇文章既要有title又要有h1标签,既突出了文章的主题,又突出了标题和关键字,达到双重优化网站的效果。一般会把title和h1标签的内容写成一样,而且一般情况下一篇文章最好只用一个h1标签,过多的h1标签反而会让搜索引擎迷糊,认不清文章的主题。 b与strong的区别、i与em的区别 其实这两对标签最大区别就是一个给搜索引擎看的,一个是给用户看的。就用b和strong标签做例子吧。 b标签和strong标签给我们的主观感受都是加粗,但对搜索引擎来说b标签和普通的文字并没有什么区别,而strong标签却是起强调作用的。也就是说如果你想让搜索引擎认为你的某句话很重要时那就用strong标签。如果只是想让用户看到加粗的效果,那就用b标签。同理如em标签也是针对搜索引擎来起作用的,i标签只是让用户看到展示的是斜体。
以上就是分享一些前端面试题实例的详细内容,更多请关注本站其它相关文章!