最新前端面试题大全(html篇)

..1.XHTML和HTML有什么区别HTML是一种基本的WEB网页设计语言，XHTML是一个基于XML的置标语言。最主要的不同：(1)XHTML元素必须被正确地嵌套(2)XHTML元素必须被关闭(3)XHTML标签名必须用小写字母(4)XHTML文档必须拥有根元素2.什么是语义化的HTML?html5的语义化是指用正确的标签包含正确的容，比如nav标签就应该包含导航条容(1)直观的认识标签对于搜索引擎的抓取有好处，用正确的标签做正确的事情！(2)html语义化就是让页面的容结构化，便于对浏览器、搜索引擎解析(3)在没有CCS样式情况下也以一种文档格式显示，并且是容易阅读的。搜索引擎的爬虫依赖于标记来确定上下和各个关键字的权重，利于SEO。(4)使阅读源代码的人更容易将分块，便于阅读维护理解。写一段语义的html代码(HTML5中新增加的很多标签如：article、nav、header和footer等。就是基于语义化设计原则)divid=headerh1标题/h1h2专注Web前端技术/h2/div语义HTML具有以下特性：文字包裹在元素中，用以反映容。例如：段落包含在p元素中。顺序表包含在ol元素中。从其他来源引用的大型文字块包含在blockquote元素中。HTML元素不能用作语义用途以外的其他目的。例如：h1包含标题，但并非用于放大文本。blockquote包含大段引述，但并非用于文本缩进。空白段落元素(p/p)并非用于跳行。文本并不直接包含任何样式信息。例如：不使用font或center等格式标记。类或ID中不引用颜色或位置。3.常见的浏览器核有哪些？Trident核：IE,MaxThon,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如获取用户地理位置的window.navigator.geoloaction(4)webstorage本地存储，存储在客户端，包括localeStorage和sessionStorage(5)websocket一种协议，可以让我们建立客户端到服务器端的全双工通信，这就意味着服务器端可以主动推送数据到客户端(6)webworker是运行在浏览器后台的js程序，是另开的一个线程，不影响主程序运行可用webworker执行复杂的数据操作，再把操作结果通过postMessage传递给主线程这样在进行复杂且耗时的操作时就不会阻塞主线程了(7)缓存html5允许我们自己控制哪些文件需要缓存，哪些不需要，具体的做法如下:1)首先给html添加manifest属性，并赋值为cache.manifest2)cache.manifest的容为:CACHEMANIFEST#v1.2CACHE://表示需要缓存的文件a.jsb.jsNETWORK://表示只在用户在线的时候才需要的文件，不会缓存c.jsFALLBACK//表示如果找不到第一个资源就用第二个资源代替index.html移除的元素：纯表现的元素basefont，big，center，font,s，strike，tt，u；对可用性产生负面影响的元素frame，frameset，noframes；多个页面之间如何进行通信使用cookie，使用webworker，使用localeStorage和sessionStorage5.区分HTML和HTML5a在文档类型声明上,html有很长的一段代码，html5却只有简单的声明html:!DOCTYPEhtmlPUBLIC……htmlxmlns=.w3.org/1999/xhtmlhtml5:!doctypehtmlb在结构语义上html没有体现结构语义化的标签通常都是divid=header/div这样来命名的，这样表示的头部。Html5有体现结构语义化的标签(处理HTML5新标签的浏览器兼容问题最好的方式是直接使用成熟的框架如html5shim)6.请描述一下cookies，sessionStorage和localStorage的区别？cookie存储在客户端大小受限，并且每次你请求一个新的页面时Cookie都会被发送，浪费带宽。..需指定作用域，不可以跨域调用。有一定的过期时间，过期后自动会消失作用是与服务器进行交互，作为HTTP规的一部分而存在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背景色属性。混杂模式：浏览器对XHTML的解析较为宽松。允许使用4.01中的标签，但必须符合XHTML的语法。如何触发这两种模式？加入XMl声明可触发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就是客户端和服务器之间，传递这种资源的某种表现层客户端通过四个HTTP动词，对服务器端资源进行操作，实现表现层状态转化RestfulAPI就是符合Restful架构的API设计。RestfulAPI一些具体实践：应该尽量将API部署在专用域名之下。不应该在URL中包含动词或将API的版本号放入URL17.script的defer、async的区别defer是在HTML解析完之后才会执行，如果是多个，按照加载的顺序依次执行async是在加载完成后立即执行，如果是多个，执行顺序和加载顺序无关18.同源与跨域什么是同源策略？一段脚本只能读取来自于同一来源的窗口和文档的属性，这里的同一来源指的是主机名、协议和端口号的组合跨域通信的几种方式jsonp跨域HashCORS跨源资源共享websocket跨域设置代理服务器postMessage跨域:包含iframe的页面向iframe传递消息JSONP原理：利用script标签的异步加载特性实现,给服务端传一个回调函数,服务器返回一个传递过去的回调函数名称的JS代码jsonp不是真正的ajax(ajax是页面无刷新请求数据操作19.UTF-8和Unicode的区别29.UTF-8和Unicode的区别UTF-8是使用最广的一种unicode的实现方式。Unicode用于统一地区性文字编码。UTF-8就是每次8个位传输数据，而UTF-16就是每次16个位20.一次完整的HTTP事务是怎样的一个过程？基本流程：a.域名解析b.发起TCP的3次握手c.建立TCP连接后发起http请求d.服务器端响应http请求，浏览器得到html代码e.浏览器解析html代码，并请求html代码中的资源f.浏览器对页面进行渲染呈现给用户21.前端页面有哪三层构成，分别是什么?作用是什么?..结构层:HTML/XHTML(DOM节点)样式层:CSS(页面渲染)脚本层：JS/AS(页面动画效果)22.标签上title与alt属性的区别是什么?alt当图片不显示时，用文字代表。title为该属性提供信息23.浏览器标准模式和怪异模式之间的区别是