当前位置: 首页 > Web前端 > HTML

HTML面试题总结

时间:2023-04-02 16:54:10 HTML

doctype(文档类型)的作用是什么?声明文档的解析类型(document.compatMode),避免浏览器怪癖。有两个值:quirksmode,浏览器使用自己的quirksmode解析来渲染页面。在标准模式下,浏览器使用W3C标准解析呈现页面。这个属性会被浏览器识别和使用,但是如果你的页面没有DOCTYPE声明,浏览器会按照自己的方式解析和渲染页面(怪异模式),在不同的浏览器中会显示出不同的风格。请注意以下几点:声明不是HTML标记;声明必须是HTML文档的第一行,在标记之前。不区分大小写HTML5的文档类型声明为在HTML4.01中,声明引用DTD,因为HTML4.01基于SGML。DTD指定标记语言的规则,以便浏览器可以正确呈现内容。HTML5不是基于SGML,因此不需要引用DTD。浏览器标准模式和怪癖模式有什么区别?两者区别:盒模型分析:严格模式下:width为content宽度quirks模式下:width为元素实际宽度,contentwidth=width-(margin-left+margin-right+padding-left+padding-right+border-left-width+border-right-width)图片元素的垂直对齐方式严格模式下:vertical-align属性的默认值为baseline在quirks模式下:vertical的默认值align属性是bottom,所以,图像底部会有几个像素的空间。

元素中的字体在Quirks模式中,对于表格元素,字体的某些属性不会从正文或其他封闭元素继承到表格中,特别是font-size属性。内联元素的尺寸在StandardsMode下,非替换的内联元素不能自定义尺寸,而在QuirksMode下,定义这些元素的width和height属性会影响元素的显示尺寸。元素的百分比高度当元素使用百分比高度时,在标准模式下高度会根据内容而变化,而在怪癖模式下会正确应用百分比高度。元素溢出处理在StandardMode下,overflow取默认值visible,即溢出可见。在这种情况下,溢出的内容将不会被裁剪,并且会出现在元素框架之外。在QuirksMode中,overflow被当作一个扩展框来处理,即元素的大小由其内容决定,overflow不会被裁剪,元素框会自动调整。包含溢出内容的HTML和XHTML有什么区别?主要区别:XHTML可以理解为html+xml,就是用xml语法来规范html。XHTML元素必须正确嵌套。XHTML元素必须是封闭的。标记名称必须为小写字母。XHTML文档必须有一个根元素。如果您的Web内容需要支持多种语言,您会怎么做?考虑:应用字符集utf-8语言书写习惯&导航结构的选择数据库驱动的网站具体做法:静态:就是为每种语言准备一套页面文件,或者通过文件扩展名来区分不同的语言,或者使用字幕目录来区分不同的语言。动态:站点内所有的页面文件都是动态页面文件(PHP、ASP等)值,以便能够在不同的语言环境下输出不同的文字。数据属性的作用是什么?data——为前端开发者提供自定义属性。这些属性集可以通过对象的数据集属性获得。不支持该属性的浏览器可以通过getAttribute方法获取。如果将HTML5视为一个开放平台,它的组成部分是什么?开放网络平台是为互联网提供动力的开放(无版权)技术的集合。在使用开放网络平台时,每个人都有权在网络上实现一个组件,而无需向任何人索取许可证和证书。积木是指开放网络平台技术集中的技术:HTMLDOMCSSSVGMathMLWebAPIs…EcmaScript/JavaScriptHTTPURIMediaAccessibilityChecklist请描述cookies、sessionStorage和localStorage的区别。它们的共同点:都是保存在浏览器端,同源。注意:session只在浏览器端保存sessionid,session数据保存在server端,session无法区分路径。这里讨论的sessionStorage和localstorage的区别是html5特性:size:cookie最大只有4kb,sessionStorage和localStorage一般可以有5M的生命周期:cookie的生命周期由服务器控制,默认是关闭浏览器后删除;sessionStorage只在当前窗口有效,localStorage会一直存在,除非手动删除。http通信:浏览器每次向服务器发送请求,都要带上域的cookie,而sessionStorage和localStorage只存在于浏览器端。适用范围:cookie和localStorage在同一域名下多个窗口有效,sessionStorage只在一个窗口有效,不能跨窗口共享。易用性:sessionStorage和localStorage是HTML5WebStorageAPI,更加灵活易用。WebStorage带来的好处:减少网络流量:一旦数据存储在本地,就可以避免向服务器请求数据,从而减少不必要的数据请求,减少浏览器和服务器之间不必要的数据传输。快速展示数据:性能好,本地读取数据比通过网络从服务器获取数据要快很多,而且可以即时获取本地数据。另外,网页本身也可以有缓存,所以如果整个页面和数据都在本地,可以立即显示出来。暂存:在很多情况下,数据只需要在用户浏览一组页面时使用,关闭窗口后数据可以丢弃。这种情况下使用sessionStorage就很方便了。服务器端存储:服务器也可以保存所有用户的所有数据,但是浏览器需要在需要的时候向服务器请求数据。服务器端可以保存用户的持久化数据,如数据库、云存储等,在服务器端保存了大量的用户数据。服务器还可以保存用户的临时会话数据。服务器端的session机制,比如jsp的session对象,将数据存储在服务器上。在实现上,服务器和浏览器之间只需要传递sessionid,服务器根据sessionid找到用户对应的session对象。会话数据只在一段时间内有效,这个时间就是服务器端设置的会话有效期。服务器端保存的是所有用户数据,所以服务器端的开销比较大,而浏览器端保存的是不同用户需要的数据,保存在各自的浏览器中。浏览器端一般只用来存储小数据,而服务器端可以存储大数据或小数据。服务器存储数据比较安全,浏览器只适合存储一般数据。请解释?你知道有哪些例外吗?css放在头部:css放在头部,因为浏览器是从上到下解析html文档的,如果放在底部,页面结构出来了,css还没有开始渲染,你可能会看到只有结构的页面。CSS要写在头部,避免页面元素造成瞬间白页,或者因为样式给用户带来闪退感。js放在/body之前:JS可能会改变DOM树,也可能依赖css样式。如果放在最前面,DOM和css可能还没有加载好,容易报错。性能:如果js放在最前面,页面会先加载它,这样会拖慢时间,导致用户在一定时间内看不到网页内容。例外:如果js需要先加载再运行,可以写在header中(使用defer加载脚本时,可以无约束放置)如果页面使用'application/xhtml+xml',将有什么问题吗?首先,这是一个MIME类型,意思是告诉浏览器使用xhtml格式来解析我发给你的页面;xhtml语法很严格,必须有head,body,每个dom都要关闭。空标签也必须关闭。例如
等。还可以在属性值周围使用双引号。一旦遇到错误,立即停止解析并显示错误信息。如果页面使用'application/xhtml+xml',一些旧的浏览器将不兼容。IE6、7、8不支持,IE6、7、8支持text/html。什么是渐进式渲染?渐进式渲染是指浏览器不会等到所有页面资源都渲染完才呈现给用户,而是在下载的同时进行渲染。因此,当用户打开一个网页时,往往无法在第一时间看到全部内容,但是却可以看到。到一个大概的样子,后续的内容浏览器会逐渐填充,形成一个完整的页面。这有点像大管道。请解释什么是语义HTML?语义的好处:当样式被移除或丢失时,页面可以呈现出清晰的结构:html本身没有表达,我们看到例如

是粗体,字体大小是2em,粗体;是粗体是的,不要以为这是html的表现。这些实际上是html默认的css样式,所以当样式被移除或者丢失时,页面结构清晰不是语义HTML结构的优势,而是浏览器有。默认样式,默认样式的目的也是为了更好的表达html的语义。可以说浏览器的默认样式和语义化的HTML结构是密不可分的。屏幕阅读器(如果访问者有视力障碍)将完全根据您的标记“阅读”您的网页。PDA、手机等设备可能无法像普通计算机浏览器那样呈现网页(通常是因为这些设备对CSSWeak支持的限制)。搜索引擎爬虫还依赖标记来确定各个关键字的上下文和权重。你的页面是否容易被爬虫理解是非常重要的,因为爬虫在很大程度上忽略了用于展示的标记,而只关注语义标记。方便团队开发和维护的语义HTML为:h1-h6为标题,p为正文段落,ulli为列表,大致相同