前端面试题大全html篇

1、- -1.XHTML 和 HTML 有什么区分HTML 是一种 根本的 WEB 网页设计语言 ,XHTML 要的不同：1XHTML 元素必需被 正确地嵌套 2XHTML 元素必需被 关闭 3XHTML 标签名必需 用小写字母 4XHTML 文档必需拥有 根元素2.什么是语义化的 HTML. 是一个 基于 XML 的置标语言 ；最主html5 的语义化是指用正确的标签包含正确的容,比方 nav 标签就应当包含导航条容1直观的熟悉标签 对于搜寻引擎的抓取有好处,用正确的标签做正确的事情！2html 语义化 就是让页面的容构造化,便于对浏览器、搜寻引擎解析3在没有 CCS 样式情形下也以一种文档格式

2、显示,并且是简洁阅读的；搜寻引擎的爬虫依靠于标记来确定上下和各个关键字的权重,利于 SEO；4使阅读源代码的人更简洁将分块,便于阅读保护懂得；写一段语义的 html 代码 HTML5 中新增加的许多标签如： 、 、 和 等；就是基于语义化设计原那么 标题 专心 Web 前端技术 语义 HTML 具有以下 特性 ：文字包裹在元素中,用以反映容；例如：段落包含在 元素中；次序表包含在 元素中；从其他来源引用的大型文字块包含在 元素中；HTML 元素不能用作语义用途以外的其他目的；例如： 包含标题,但并非用于放大文本； 包含大段引述,但并非用于文本缩进；空白段落元素 并非用于跳行；文本并不直接包含任

3、何样式信息；例如：不使用 或 等格式标记；类或 ID 中不引用颜色或位置；3.常见的浏览器核有哪些？Trident 核：IE, Max Thon, TT, The World,360, 搜狗浏览器等；又称 MSHTML Gecko 核：Netscape6及以上版本, FF, Mozilla Suite / Sea Monkey 等 Presto 核 ：Opera7 及以上； Opera 核原为： Presto,现为： Blink; Webkit 核：Safari, Chrome等； Chrome 的： Blink WebKit 的分支 - . word.zl- -4.HTML5 有哪些新特性、

4、移除了那些元素？如何区分 HTML5 现在已经不是 SGML 的子集；HTML 和 HTML5 ？主要是关于图像,位置,储备,多任务等功能的增加：1标签语义化 如 header,footer,nav,aside,article,section,新增许多表单元素,如 email,url 2音视频元素 video, audio 不需要在依靠外部的插件就可以往网页中参与音 / 视频元素3新增许多 api 如猎取用户地理位置的window.navigator.geoloaction 4webstorage 本地储备,储备在客户端,包括 localeStorage和 sessionStorage5web

5、socket 一种协议,可以让我们建立客户端到效劳器端的全双工通信,这就意味着效劳器端可以主动推送数据到客户端6webworker 是运行在浏览器后台的js 程序,是另开的一个线程,不影响主程序运行可用 webworker 执行复杂的数据操作,再把操作结果通过 postMessage传递给主线程这样在进展复杂且耗时的操作时就不会堵塞主线程了 7缓存 html5 答应我们自己掌握哪些文件需要缓存,哪些不需要,详细的做法如下 : 1 第一给 html 添加 manifest 属性,并赋值为 cache.manifest 2 cache.manifest的容为 : CACHE MANIFEST #v

6、1.2 CACHE : / 表示需要缓存的文件a.js b.js NETWORK: / 表示只在用户在线的时候才需要的文件,不会缓存c.js FALLBACK / 表示假如找不到第一个资源就用其次个资源代替index.html 移除的元素：纯表现的元素 basefont,big,center,font, s,strike,tt, u；对可用性产生负面影响的元素frame, frameset,noframes；多个页面之间如何进展通信 使用 cookie,使用 web worker,使用 localeStorage和 sessionStorage 5.区分 HTML 和 HTML5 a 在文档类

7、型声明 上, html 有很长的一段代码,html5 却只有简洁的声明html:html5: b 在构造语义 上html 没有表达构造语义化的标签通常都是 这样来命名的,这样表示的头部；Html5 有表达构造语义化的标签处理 HTML5 新标签的浏览器兼容问题最好的方式是直接使用成熟的框架如html5shim . word.zl-6.请描述一下cookies,sessionStorage 和 localStorage 的区分？- - -cookie 储备在客户端大小受限 ,并且每次你恳求一个新的页面时Cookie 都会被发送,铺张带宽；需指定作用域 ,不行以跨域调用；有肯定的过期时间,过期后自

8、动会消逝作用是与效劳器进展交互, 作为 规的一局部而存在web Storage储备在客户端是为更大容量储备设计的 8M, cookie 4K拥有 setItem,getItem,removeItem,clear 等方法 cookie 需要开发者自己封装 setCookie,getCookie 作用是在本地“ 储备数据sessionStorage会话级别 的储备, 仅用于在本地储备一个会话session中的数据 ,这些数据只有在同一个会话中的页面才能拜访并且当会话完毕后数据也随之销毁；localStorage用于长久化的本地储备,除非主动删除数据, 否那么数据是永久不会过期的；7.如何实现浏览器

9、多个标签页之间的通信 . 调用 localstorge、cookies 等本地储备方式；8.HTML5 为什么只需要写 .DOCTYPE HTML ？型HTML4.01 基于 SGML,所以需要对DTD 进展引用 ,才能告知浏览器文档所使用的文档类让HTML5 不基于 SGML, 因此不需对DTD 进展引用 ,但需要 doctype 来规浏览器的行为浏览器依据它们应当的方式来运行 ；9.Doctype 作用？标准模式与兼容模式各有什么区分 . .DOCTYPE 声明 位于 HTML 文档第一行 ,处于 html 标签之前； 告知浏览器的解析器用什么文档标准解析这个文档；DOCTYPE 不存在或

10、格式不正确会导致文档以兼容模式出现；标准模式的排版 和 JS运作模式都是以该浏览器支持的最高标准运行；在兼容模式中,页面以宽松的向后兼容的方式显示 无法工作；,模拟老式浏览器的行为以防止站点10.Doctype 中区分严格模式与混杂模式有什么意义？严格模式： 使用此类型的网页,浏览器解析将相对严格,不答应使用任何表现样式的标识和属性 ,比方在元素中直接使用background-color 背风光属性；混杂模式：浏览器对XHTML的解析较为宽松；答应使用4.01 中的标签,但必需符合XHTML的语法 ；参与 XMl 声明可触发. word.zl-如何触发这两种模式？- - -11.简述一下 sr

11、c与 href 的区分href 是指向网络资源所在位置,建立和当前元素锚点 或当前文档 之间的用于超 src 是指向外部资源所在位置,指向的容将会嵌入到文档中当前标签所在位置在恳求 src 资源时会将其指向的资源下载并应用到文档,例如 js 脚本 , img 图片和 frame 等元素 当浏览器解析到该元素时,会暂停其他资源的下载和处理,直到将该资源加载、编译、执行完毕 这就是为什么将 js 脚本放在底部而不是头部 12、简述同步和异步的区分同步是堵塞模式 : 指一个进程在执行某个恳求的时候,假设该恳求需要一段时间才能返回信息,那么这个进程将会始终等待下去,直到收到返回信息才连续执行下去；异步

12、是非堵塞模式 :指进程不需要始终等下去,而是连续执行下面的操作,不管其他进程的状态； 当有消息返回时系统会通知进程进展处理13、什么叫渐进增强和文雅降级？渐进增强 progressive enhancement: ,这样可以提高执行的效率；针对低版本浏览器进展构建页面,保证最根本的功能,然后再 针对高级浏览器进展成效、交互等改良和追加功能 到达更好的用户体验；文雅降级 graceful degradation：一开场就构建完整的功能,然后再针对低版本浏览器进展兼容；区分 : a. 文雅降级是从 复杂 的现状开场,并试图削减 用户体验的供应b. 渐进增强那么是从一个特别根底 的,能够起作用的版本

13、开场,并不断扩大 ,以适应将来环境的需要c. 降级功能衰减意味着往回看 ；而渐进增强那么意味着朝前看 ,同时保证其根基处于平安地带14.浏览器渲染原理1第一猎取html , HTML被解析成 DOM Tree ,CSS被解析成 CSS Rule Tree 2把 DOM Tree 和 CSS Rule Tree经过整合生成Render Tree布局阶段3元素依据算出来的规那么,把元素放到它该显现的位置,通过显卡画到屏幕上15.对 WEB 标准以及 W3C 的懂得与熟悉标签闭合、标签小写、不乱嵌套、使用外链css和 js 脚本. word.zl- - -构造行为表现别离、加快文件下载与页面速度更少

14、的代码和组件,简洁保护、改版便利,提高易用性16.Restful API 是什么Restful 的意思就是资源表现层状态转化；资源 : 就是网络上的一个实体,或者说网络上的一个详细信息；它可以是一段文本、一图片、一首歌曲、一种效劳,总之就是一个详细的实在,每一个 URI 代表一种资源 Resources；表现层 : 其实指的是 资源 的 表现层 ,把 资源 详细出现出来的形式,叫做它的 表现层Representation；假如客户端想要操作效劳器,必需通过某种手段,让效劳器端发生 状态转化 State Transfer；而这种转化是建立在表现层之上的,所以就是 表现层状态转化 ；Restful

15、 就是客户端和效劳器之间,传递这种资源的某种表现层客户端通过四个动词,对效劳器端资源进展操作,实现 表现层状态转化 Restful API 就是符合 Restful 架构的 API 设计；Restful API 一些详细实践：应当尽量将API 部署在专用域名之下；不应当在 URL 中包含动词 或将 API 的版本号 放入 URL 17. 的 defer、async的区分defer 是在 HTML 解析完之后才会执行,假如是多个,依据加载的次序依次执行async是在加载完成后立刻执行,假如是多个,执行次序和加载次序无关18.同源与跨域什么是同源策略？一段脚本只能读取来自于同一来源的窗口和文档的属

16、性 机名、协议和端口号的组合跨域通信的几种方式 jsonp 跨域 Hash CORS 跨源资源共享 websocket跨域设置代理效劳器,这里的同一来源指的是主postMessage跨域 : 包含 iframe 的页面对 iframe 传递消息JSONP 原理：利用 script 标签的异步加载特性实现 , 给效劳端传一个回调函数 , 效劳器返回一个传递过去的回调函数名称的 JS代码jsonp 不是真正的 ajaxajax是页面无刷新恳求数据操作- . word.zl- -19.UTF-8 和 Unicode 的区分29.UTF-8 和 Unicode 的区分UTF-8 是使用最广的一种uni

17、code 的实现方式；8 个位传输数据,而UTF-16 就是Unicode 用于统一地区性文字编码；UTF-8 就是每次每次 16 个位20.一次完整的 事务是怎样的一个过程？根本流程：a. 域名解析b. 发起 TCP 的 3 次握手c. 建立 TCP 连接后发起 恳求d. 效劳器端响应 恳求,浏览器得到 html 代码e. 浏览器解析 html 代码,并恳求 html 代码中的资源f. 浏览器对页面进展渲染出现给用户21.前端页面有哪三层构成,分别是什么 .作用是什么 . 构造层 : HTML/XHTMLDOM 节点 样式层 : CSS页面渲染 脚本层： JS/AS页面动画成效 22.标签上

18、 title 与 alt 属性的区分是什么 . alt 当图片不显示时,用文字代表；title 为该属性供应信息23.浏览器标准模式和怪异模式之间的区分是什么 . 盒子模型 渲染模式的不同使用 window.top.document.patMode 可显示为什么模式24.来治理全部 CSS文件、 JS与图片 . 全部的 CSS文件都放入一个样式表 中,削减 恳求js 文件也采纳同样的方法全部的背景图像都放到一个图片文件中,通过background-image和 background-position 属性来显示图片的不同局部25.前端优化提高网页的加载速度1 使用 css sprites, 有

19、效的削减 恳求数2 使用缓存3 压缩 js, css文件 , 减小文件体积4 使用 cdn, 减小效劳器负担5 懒加载图片6 预加载 css, js文件7 防止 dom 构造的深层次嵌套8 给 DOM 元素添加样式时 , 把样式放到类中 , 直接给元素添加类 , 削减重构和回流26. 你怎么来实现页面设计图,你认为前端应当如何高质量完成工作 . - . word.zl- -页面设计图 :第一划分成头部、body、脚部 . 高质量完成工作 : 1 实现成效图 是最根本的工作,精确到 2px 2 与设计师,产品经理的沟通和工程的参与3 做好的页面构造,页面重构和用户体验4 处理 hack,兼容、写

20、出美丽的代码格式5 针对效劳器的优化、拥抱 HTML5 ；27.iframe 有那些缺点？*iframe 会堵塞主页面的 onload 大事；*iframe 和主页面共享连接池,而浏览器对一样域的连接有限制,所以会影响页面的并行加载；使用 iframe 之前需要考虑这两个缺点；假如需要使用iframe,最好是通过javascript 动态给 iframe 添加 src 属性值,这样可以可以绕开以上两个问题；28.WEB 应用从效劳器主动推送 html5 websoket WebSocket通过 Flash XHR 长时间连接 XHR Multipart Streaming 不行见的 Ifram

21、e Data 到客户端有那些方式？ 标签的长时间连接 可跨域 29.JSON 的明白JSONJavaScript Object Notation是一种轻量级的数据交换格式；它是基于 JavaScript的一个子集；数据格式简洁 age:12, name:back 30.异步加载的方式 1 defer只支持 IE 2 async 3 动态创立 DOM 用得最多, 易于读写 , 占用带宽小4 创立 script,插入到 DOM 中,加载完毕后进展回调 31 xss、csrf 的概念 以及防方法大公司如 bat 在面试的时候,web 平安问题是必问的问题,所以肯定要懂 要完全懂得 xss和 csrf

22、 的概念和防方式,最好在工程中有用到对这两种攻击的防,这样 会给你的面试加许多分 由 xss 和 csrf 涉及的东西比拟多,我就不详细给出了,详情请看网页 : XSS攻击及防备,CSRF攻击 32.谈谈对前端模块化的懂得模块化是 把 js 程序划分成独立命名、可独立拜访的模块,每个模块完成一个子功能,把这些模块集成起来构成一个整体 ,可以完成指定的功能- . word.zl- -意义 : 组件复用,降低开发本钱和保护本钱组件单独开发,便利分工合作模块化遵循标准,便利自动化依靠治理,代码优化,部署这样会导致模块间的依靠问题 , 于是有了 monJS, AMD, CMD 规, 最终显现 webp

23、ack webpack就是前端模块话的一种解决方案33.monJs, AMD ,CMD 规通行的 js 模块规主要有2 种:浏览器端使用AMD 、效劳器端使用monJS 34.对 MVC 、MVVM 的懂得MVC 是比拟直观的架构模式,用户操作 -View负责接收用户的输入操作-Controller业务规律处理 -Model 数据长久化-View 将结果反响给 ViewMVVM 是 将“ 数据 -模型 -数据双向绑定的思想作为核心,因此 在 View 和 Model 之间没有联系, 通过 ViewModel 进展交互 ,而且 Model 和 ViewModel 之间的交互是双向的,因此视图的数据的变化会同时