前端面试题大全html篇

-.z.1.*HTML和HTML有什么区别HTML是一种根本的WEB网页设计语言，*HTML是一个基于*ML的置标语言。最主要的不同： (1)*HTML元素必须被正确地嵌套 (2)*HTML元素必须被关闭(3)*HTML标签名必须用小写字母 (4)*HTML文档必须拥有根元素2.什么是语义化的HTML"html5的语义化是指用正确的标签包含正确的容，比方nav标签就应该包含导航条容 (1)直观的认识标签对于搜索引擎的抓取有好处，用正确的标签做正确的事情！ (2)html语义化就是让页面的容构造化，便于对浏览器、搜索引擎解析 (3)在没有CCS样式情况下也以一种文档格式显示，并且是容易阅读的。搜索引擎的爬虫依赖于标记来确定上下和各个关键字的权重，利于SEO。 (4)使阅读源代码的人更容易将分块，便于阅读维护理解。 写一段语义的html代码(HTML5中新增加的很多标签如：<article>、<nav>、<header>和<footer>等。就是基于语义化设计原则)<divid="header"><h1>标题</h1><h2>专注Web前端技术</h2></div> 语义HTML具有以下特性：文字包裹在元素中，用以反映容。例如： 段落包含在<p>元素中。 顺序表包含在<ol>元素中。 从其他来源引用的大型文字块包含在<blockquote>元素中。HTML元素不能用作语义用途以外的其他目的。例如： <h1>包含标题，但并非用于放大文本。 <blockquote>包含大段引述，但并非用于文本缩进。 空白段落元素(<p></p>)并非用于跳行。文本并不直接包含任何样式信息。例如： 不使用<font>或<center>等格式标记。 类或ID中不引用颜色或位置。3.常见的浏览器核有哪些？Trident核：IE,Ma*Thon,TT,TheWorld,360,搜狗浏览器等。[又称MSHTML]Gecko核：Netscape6及以上版本，FF,MozillaSuite/SeaMonkey等Presto核：Opera7及以上。[Opera核原为：Presto，现为：Blink;]Webkit核：Safari,Chrome等。[Chrome的：Blink〔WebKit的分支〕]4.HTML5有哪些新特性、移除了那些元素？如何区分HTML和HTML5？ HTML5现在已经不是SGML的子集。主要是关于图像，位置，存储，多任务等功能的增加： (1)标签语义化(如header,footer,nav,aside,article,section)，新增很多表单元素，如email,url (2)音视频元素video,audio不需要在依赖外部的插件就可以往网页中参加音/视频元素 (3)新增很多api (4)webstorage本地存储，存储在客户端，包括localeStorage和sessionStorage(5)websocket一种协议，可以让我们建立客户端到效劳器端的全双工通信，这就意味着效劳器端可以主动推送数据到客户端 (6)webworker是运行在浏览器后台的js程序，是另开的一个线程，不影响主程序运行可用webworker执行复杂的数据操作，再把操作结果通过postMessage传递给主线程这样在进展复杂且耗时的操作时就不会阻塞主线程了(7)缓存html5允许我们自己控制哪些文件需要缓存，哪些不需要，具体的做法如下: 1)首先给html添加manifest属性，并赋值为cache.manifest 2)cache.manifest的容为: CACHEMANIFEST *v1.2 CACHE://表示需要缓存的文件 a.js b.js NETWORK://表示只在用户在线的时候才需要的文件，不会缓存c.jsFALLBACK//表示如果找不到第一个资源就用第二个资源代替 inde*.html 移除的元素：纯表现的元素basefont，big，center，font,s，strike，tt，u；对可用性产生负面影响的元素frame，frameset，noframes；多个页面之间如何进展通信 使用cookie，使用webworker，使用localeStorage和sessionStorage5.区分HTML和HTML5a在文档类型声明上,html有很长的一段代码，html5却只有简单的声明html:<!DOCTYPEhtmlPUBLIC"…""…"><html*mlns="./1999/*html">html5:<!doctypehtml>b在构造语义上html没有表达构造语义化的标签通常都是<divid="header"></div>这样来命名的，这样表示的头部。Html5有表达构造语义化的标签(处理HTML5新标签的浏览器兼容问题最好的方式是直接使用成熟的框架如html5shim)6.请描述一下cookies，sessionStorage和localStorage的区别？cookie存储在客户端大小受限，并且每次你请求一个新的页面时Cookie都会被发送，浪费带宽。需指定作用域，不可以跨域调用。有一定的过期时间，过期后自动会消失作用是与效劳器进展交互，作为规的一局部而存在webStorage存储在客户端是为更大容量存储设计的(8M,cookie4K)拥有setItem,getItem,removeItem,clear等方法(cookie需要开发者自己封装setCookie，getCookie)作用是在本地“存储〞数据sessionStorage会话级别的存储，仅用于在本地存储一个会话(session)中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话完毕后数据也随之销毁。 localStorage用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。7.如何实现浏览器多个标签页之间的通信"调用localstorge、cookies等本地存储方式。8.HTML5为什么只需要写!DOCTYPEHTML？HTML4.01基于SGML,所以需要对DTD进展引用,才能告知浏览器文档所使用的文档类型HTML5不基于SGML,因此不需对DTD进展引用，但需要doctype来规浏览器的行为(让浏览器按照它们应该的方式来运行)。9.Doctype作用？标准模式与兼容模式各有什么区别" !DOCTYPE声明位于HTML文档第一行，处于html标签之前。告知浏览器的解析器用什么文档标准解析这个文档。DOCTYPE不存在或格式不正确会导致文档以兼容模式呈现。 标准模式的排版和JS运作模式都是以该浏览器支持的最高标准运行。 在兼容模式中，页面以宽松的向后兼容的方式显示,模拟老式浏览器的行为以防止站点无法工作。10.Doctype中区分严格模式与混杂模式有什么意义？ 严格模式：使用此类型的网页，浏览器解析将相对严格，不允许使用任何表现样式的标识和属性，比方在元素中直接使用background-color背风光属性。 混杂模式：浏览器对*HTML的解析较为宽松。允许使用4.01中的标签，但必须符合*HTML的语法。 如何触发这两种模式？参加*Ml声明可触发11.简述一下src与href的区别href是指向网络资源所在位置，建立和当前元素(锚点)或当前文档()之间的(用于超)src是指向外部资源所在位置，指向的容将会嵌入到文档中当前标签所在位置(在请求src资源时会将其指向的资源下载并应用到文档，例如js脚本,img图片和frame等元素)(当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕) (这就是为什么将js脚本放在底部而不是头部)12、简述同步和异步的区别 同步是阻塞模式:指一个进程在执行*个请求的时候，假设该请求需要一段时间才能返回信息，则这个进程将会一直等待下去，直到收到返回信息才继续执行下去； 异步是非阻塞模式:指进程不需要一直等下去，而是继续执行下面的操作，不管其他进程的状态。当有消息返回时系统会通知进程进展处理，这样可以提高执行的效率。13、什么叫渐进增强和优雅降级？ 渐进增强progressiveenhancement:针对低版本浏览器进展构建页面，保证最根本的功能，然后再针对高级浏览器进展效果、交互等改良和追加功能到达更好的用户体验。 优雅降级gracefuldegradation：一开场就构建完整的功能，然后再针对低版本浏览器进展兼容。区别: a.优雅降级是从复杂的现状开场，并试图减少用户体验的供应 b.渐进增强则是从一个非常根底的，能够起作用的版本开场，并不断扩大，以适应未来环境的需要 c.降级〔功能衰减〕意味着往回看；而渐进增强则意味着朝前看，同时保证其根基处于平安地带14.浏览器渲染原理 〔1〕首先获取html,HTML被解析成DOMTree，CSS被解析成CSSRuleTree 〔2〕把DOMTree和CSSRuleTree经过整合生成RenderTree〔布局阶段〕 〔3〕元素按照算出来的规则，把元素放到它该出现的位置，通过显卡画到屏幕上15.对WEB标准以及W3C的理解与认识 标签闭合、标签小写、不乱嵌套、使用外链css和js脚本 构造行为表现别离、加快文件下载与页面速度 更少的代码和组件，容易维护、改版方便，提高易用性16.RestfulAPI是什么 Restful的意思就是〔资源〕表现层状态转化。"资源":就是网络上的一个实体，或者说网络上的一个具体信息。它可以是一段文本、一图片、一首歌曲、一种效劳，总之就是一个具体的实在，每一个URI代表一种资源(Resources)。"表现层":其实指的是"资源"的"表现层"，把"资源"具体呈现出来的形式，叫做它的"表现层"〔Representation〕。 如果客户端想要操作效劳器，必须通过*种手段，让效劳器端发生"状态转化"〔StateTransfer〕。而这种转化是建立在表现层之上的，所以就是"表现层状态转化"。Restful就是客户端和效劳器之间，传递这种资源的*种表现层客户端通过四个动词，对效劳器端资源进展操作，实现"表现层状态转化" RestfulAPI就是符合Restful架构的API设计。 RestfulAPI一些具体实践：应该尽量将API部署在专用域名之下。 不应该在URL中包含动词或将API的版本号放入URL17.<script>的defer、async的区别defer是在HTML解析完之后才会执行，如果是多个，按照加载的顺序依次执行async是在加载完成后立即执行，如果是多个，执行顺序和加载顺序无关18.同源与跨域 什么是同源策略？一段脚本只能读取来自于同一来源的窗口和文档的属性，这里的同一来源指的是主机名、协议和端口号的组合 跨域通信的几种方式 jsonp跨域Hash CORS跨源资源共享 websocket跨域 设置代理效劳器 postMessage跨域:包含iframe的页面向iframe传递消息JSONP原理：利用script标签的异步加载特性实现,给效劳端传一个回调函数,效劳器返回一个传递过去的回调函数名称的JS代码 jsonp不是真正的aja*(aja*是页面无刷新请求数据操作19.UTF-8和Unicode的区别29.UTF-8和Unicode的区别 UTF-8是使用最广的一种unicode的实现方式。 Unicode用于统一地区性文字编码。UTF-8就是每次8个位传输数据，而UTF-16就是每次16个位20.一次完整的事务是怎样的一个过程？ 根本流程： a.域名解析 b.发起TCP的3次握手 c.建立TCP连接后发起请求 d.效劳器端响应请求，浏览器得到html代码 e.浏览器解析html代码，并请求html代码中的资源 f.浏览器对页面进展渲染呈现给用户21.前端页面有哪三层构成，分别是什么"作用是什么" 构造层:HTML/*HTML(DOM节点) 样式层:CSS(页面渲染) 脚本层：JS/AS(页面动画效果)22.标签上title与alt属性的区别是什么" alt当图片不显示时，用文字代表。 title为该属性提供信息23.浏览器标准模式和怪异模式之间的区别是什么" 盒子模型渲染模式的不同 使用window.top.document.patMode可显示为什么模式24.来管理所有CSS文件、JS与图片"所有的CSS文件都放入一个样式表中,减少请求js文件也采用同样的方法所有的背景图像都放到一个图片文件中，通过background-image和background-position属性来显示图片的不同局部25.前端优化——提高网页的加载速度 1)使用csssprites,有效的减少请求数 2)使用缓存 3)压缩js,css文件,减小文件体积 4)使用cdn,减小效劳器负担 5)懒加载图片 6)预加载css,js文件 7)防止dom构造的深层次嵌套 8)给DOM元素添加样式时,把样式放到类中,直接给元素添加类,减少重构和回流26.你怎么来实现页面设计图，你认为前端应该如何高质量完成工作"页面设计图:首先划分成头部、body、脚部...... 高质量完成工作: 1)实现效果图是最根本的工作，准确到2p* 2)与设计师，产品经理的沟通和工程的参与 3)做好的页面构造，页面重构和用户体验 4)处理hack，兼容、写出优美的代码格式 5)针对效劳器的优化、拥抱HTML5。27.iframe有那些缺点？*iframe会阻塞主页面的onload事件；*iframe和主页面共享连接池，而浏览器对一样域的连接有限制，所以会影响页面的并行加载。使用iframe之前需要考虑这两个缺点。如果需要使用iframe，最好是通过javascript动态给iframe添加src属性值，这样可以可以绕开以上两个问题。28.WEB应用从效劳器主动推送Data到客户端有那些方式？html5websoketWebSocket通过Flash*HR长时间连接*HRMultipartStreaming不可见的Iframe<script>标签的长时间连接(可跨域)29.JSON的了解 JSON(JavaScriptObjectNotation)是一种轻量级的数据交换格式。 它是基于JavaScript的一个子集。数据格式简单,易于读写,占用带宽小 {'age':'12','name':'back'}30.异步加载的方式(1)defer〔只支持IE〕(2)async(3)动态创立DOM〔用得最多〕(4)创立script，插入到DOM中，加载完毕后进展回调31*ss、csrf的概念 以及防方法大公司如bat在面试的时候，web平安问题是必问的问题，所以一定要懂 要彻底理解*ss和csrf的概念和防方式，最好在工程中有用到对这两种攻击的防，这样会给你的面试加很多分 由*ss和csrf涉及的东西比拟多，我就不具体给出了，详情请看网页:*SS攻击及防御，CSRF攻击32.谈谈对前端模块化的理解模块化是把js程序划分成独立命名、可独立访问的模块,每个模块完成一个子功能,把这些模块集成起来构成一个整体,可以完成指定的功能意义:组件复用，降低开发本钱和维护本钱组件单独开发，方便分工合作模块化遵循标准，方便自动化依赖管理，代码优化，部署这样会导致模块间的依赖问题,于是有了monJS,AMD,CMD规,最后出现webpack webpack就是前端模块话的一种解决方案33.monJs，AMD，CMD规 通行的js模块规主要有2种:浏览器端使用AMD、效劳器端使用monJS34.对MVC、MVVM的理解MVC是比拟直观的架构模式，用户操作->View〔负责接收用户的输入操作〕->Controller〔业务逻辑处理〕->Model〔数据持久化〕->View〔将结果反响给View〕MVVM是将“数据-模型-数据双向绑定〞的思想作为核心，因此在View和Model之间没有联系，通过ViewModel进