一. label的作用是什么?
label标签来定义表单控制间的关系,当用户选择该标签时,浏览器会自动将焦点转到和标签相关的表单控件上。
<label for="Name">Number:</label> <input type=“text“name="Name" id="Name"/>
<label>Date:<input type="text" name="B" /></label>
二.网站访问过程
1.我想访问网站,将域名发送给DNS去解析,DNS解析后将网站的IP地址返回给客户端。
2.客户端通过IP地址发起HTTP请求。HTTP此时的作用是 生成针对目标WEB服务器(我们这里指的是网站的服务器)的HTTP请求报文,然后将请求报文传送给传输层,此时为了方便通信,TCP会将HTTP请求报文 分割成报文段,这些报文段会有一个序号,这里的报文段哪一个先发送哪一个先到达,它们是按序传送的。
3.只要建立起TCP连接,客户端与服务器之间的报文交换就不会丢失,不会被破坏,也不会在接收时出现错序。接着到了网络层,此时IP协议的职责是,搜索对方的地址,一边中转一边传送。然后找到了服务器的位置,此时服务器的传输层中 TCP的职责是接收到对方传送过来的报文段后,对其进行重组,这里的重组是按序号进行重组的。
4.然后到了服务器的应用层,HTTP会对客户端请求的内容进行处理。处理完后,服务器同样会利用TCP/IP通信协议向客户端进行回传响应。最后客户端收到响应后,将内容输出页面显示。即完成了一次HTTP事务。
三.介绍一下你对浏览器内核的理解(==内核主分为两个部分渲染引擎和js引擎==)?
渲染引擎:负责取得网页的内容(HTML、XML、图像等等)、整理讯息(例如加入CSS等),以及计算网页的显示方式,然后会输出至显示器或打印机。
浏览器的内核的不同对于网页的语法解释会有不同,所以渲染的效果也不相同。
所有网页浏览器、电子邮件客户端以及其它需要编辑、显示网络内容的应用程序都需要内核。
JS引擎则:解析和执行javascript来实现网页的动态效果。 最开始渲染引擎和JS引擎并没有区分的很明确,后来JS引擎越来越独立,内核就倾向于只指渲染引擎。
四.常见的浏览器内核有哪些?
1.使用Trident的是IE,国产的绝大部分浏览器。
2.使用Gecko的是Mozilla Firefox
3.使用Presto的是opera,这是目前公认网页浏览速度最快的浏览器内核
4.使用WebKit的有苹果的safari,谷歌的chrome,还有国产的大部分双核浏览器其中一核就是WebKit
五.h5有哪些新特性?移除了哪些元素如何处理h5新标签的浏览器兼容问题?(==HTML5已形成了最终的标准,概括来讲,它主要是关于图像,位置,存储,多任务等功能的增加。==)
H5新增元素:绘画canvas,用于回放的video和audio,本地离线存储:localStorage和浏览器关闭后数据消失的sessionStorage。
内容元素,article、footer、header、nav、section。
表单控件,calendar、date、time、email、url、search,color,tel,num。
控件元素,webworker, websockt, Geolocation。
移出的元素有下列这些:
显现层元素:basefont,big,center,font, s,strike,tt,u。
性能较差元素:frame,frameset,noframes。
六.h5的离线存储怎么使用?简述其工作原理
原理:HTML5的离线存储是基于一个新建的.appcache文件的缓存机制(不是存储技术),通过这个文件上的解析清单离线存储资源,这些资源就会像cookie一样被存储了下来。之后当网络在处于离线状态下时,浏览器会通过被离线存储的数据进行页面展示。
如何使用:
1、页面头部像下面一样加入一个manifest的属性:<html lang="en" manifest="manifest.appcache">;
2、在cache.manifest文件的编写离线存储的资源;
CACHE MANIFEST
#v0.11
CACHE:
js/app.js
css/style.css
NETWORK:
resourse/logo.png
FALLBACK:
/ /offline.html
3、在离线状态时,操作window.applicationCache进行需求实现。
七.浏览器是怎么对H5的离线存储资源进行管理和加载的呢?
在线的情况下,浏览器发现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:始终有效,窗口或浏览器关闭也一直保存,因此用作持久数据;
九.H5的form如何关闭自动完成的功能?
autocomplete属性(自动完成功能)新属性
<input autocomplete="on/off" />
所谓的自动完成功能就是浏览器帮助记忆之前输入的数据,当再次输入相同数据时,将自动显示之前曾输入的数据作为候补。用户可以选择其中之一。 该内容属性为列举属性。可以指定的值为“on”、“off”。
on : autocomplete属性有效
off : autocomplete属性无效