首页 / 知识

HTML基础面试题汇总

2023-04-11 15:08:00

　　DOCTYPE有什么作用？标准模式与混杂模式如何区分？它们有何意义?

　　告诉浏览器使用哪个版本的HTML规范来渲染文档。DOCTYPE不存在或形式不正确会导致HTML文档以混杂模式呈现。

　　标准模式（Standardsmode）以浏览器支持的最高标准运行；混杂模式（Quirksmode）中页面是一种比较宽松的向后兼容的方式显示。

　　2HTML5为什么只需要写<!DOCTYPEHTML>？

　　HTML5不基于SGML（StandardGeneralizedMarkupLanguage标准通用标记语言），因此不需要对DTD（DTD文档类型定义）进行引用，但是需要DOCTYPE来规范浏览器行为。

　　HTML4.01基于SGML，所以需要引用DTD。才能告知浏览器文档所使用的文档类型，如下：

　　<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01//EN""http://www.w3.org/TR/html4/strict.dtd">

　　3行内元素有哪些？块级元素有哪些？空(void)元素有那些？

　　行内元素：aspanimginputselect

　　块级元素：pulollidldtddh1p

　　空元素：<br><hr><link><meta>

　　4页面导入样式时，使用link和@import有什么区别？

　　相同的地方，都是外部引用CSS方式，区别：

　　link是xhtml标签，除了加载css外，还可以定义RSS等其他事务；@import属于CSS范畴，只能加载CSS

　　link引用CSS时候，页面载入时同时加载；@import需要在页面完全加载以后加载，而且@import被引用的CSS会等到引用它的CSS文件被加载完才加载

　　link是xhtml标签，无兼容问题；@import是在css2.1提出来的，低版本的浏览器不支持

　　link支持使用javascript控制去改变样式，而@import不支持

　　link方式的样式的权重高于@import的权重

　　import在html使用时候需要<styletype="text/css">标签

　　5无样式内容闪烁（FOUC）FlashofUnstyleContent

　　@import导入CSS文件会等到文档加载完后再加载CSS样式表。因此，在页面DOM加载完成到CSS导入完成之间会有一段时间页面上的内容是没有样式的。

　　解决方法：使用link标签加载CSS样式文件。因为link是顺序加载的，这样页面会等到CSS下载完之后再下载HTML文件，这样先布局好，就不会出现FOUC问题。

　　6介绍一下你对浏览器内核的理解？

　　主要分成两部分：渲染引擎(LayoutEngine或RenderingEngine)和JS引擎。

　　渲染引擎：负责取得网页的内容（HTML、XML、图像等等）、整理讯息（例如加入CSS等），以及计算网页的显示方式，然后会输出至显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同，所以渲染的效果也不相同。

　　JS引擎：解析和执行javascript来实现网页的动态效果。

　　最开始渲染引擎和JS引擎并没有区分的很明确，后来JS引擎越来越独立，内核就倾向于只指渲染引擎。

　　7常见的浏览器内核有哪些？

　　Trident(MSHTML)：IEMaxThonTTTheWorld360搜狗浏览器

　　Geckos：Netscape6及以上版本FireFoxMozillaSuite/SeaMonkey

　　Presto：Opera7及以上(Opera内核原为：Presto，现为：Blink)

　　Webkit：SafariChrome

　　8HTML5有哪些新特性,移除了那些元素？如何处理HTML5新标签的浏览器兼容问题？如何区分HTML和HTML5

　　新增加了图像、位置、存储、多任务等功能。

　　新增元素：

　　canvas

　　用于媒介回放的video和audio元素

　　本地离线存储。localStorage长期存储数据，浏览器关闭后数据不丢失;sessionStorage的数据在浏览器关闭后自动删除

　　语意化更好的内容元素，比如articlefooterheadernavsection

　　位置API：Geolocation

　　表单控件，calendardatetimeemailurlsearch

　　新的技术：webworker(webworker是运行在后台的JavaScript，独立于其他脚本，不会影响页面的性能。您可以继续做任何愿意做的事情：点击、选取内容等等，而此时webworker在后台运行)websocket

　　拖放API：drag、drop

　　移除的元素：

　　纯表现的元素：basefontbigcenterfontsstrikettu

　　性能较差元素：frameframesetnoframes

　　区分：

　　DOCTYPE声明的方式是区分重要因素

　　根据新增加的结构、功能来区分

　　9简述一下你对HTML语义化的理解？

　　去掉或丢失样式的时候能够让页面呈现出清晰的结构。

　　有利于SEO和搜索引擎建立良好沟通，有助于爬虫抓取更多的信息，爬虫依赖于标签来确定上下文和各个关键字的权重。

　　方便其它设备解析。

　　便于团队开发和维护，语义化根据可读性。

　　10HTML5的文件离线储存怎么使用，工作原理是什么？

　　在线情况下，浏览器发现HTML头部有manifest属性，它会请求manifest文件，如果是第一次访问，那么浏览器就会根据manifest文件的内容下载相应的资源，并进行离线存储。如果已经访问过并且资源已经离线存储了，那么浏览器就会使用离线的资源加载页面。然后浏览器会对比新的manifest文件与旧的manifest文件，如果文件没有发生改变，就不会做任何操作，如果文件改变了，那么就会重新下载文件中的资源，并且进行离线存储。例如，

　　在页面头部加入manifest属性

　　<htmlmanifest='cache.manifest'>

　　在cache.manifest文件中编写离线存储的资源

　　CACHEMANIFEST

　　#v0.11

　　CACHE:

　　js/app.js

　　css/style.css

　　NETWORK:

　　Resourse/logo.webp

　　FALLBACK:

　　//offline.html

　　11cookies，sessionStorage和localStorage的区别？

　　共同点：都是保存在浏览器端，且是同源的。

　　区别：

　　cookies是为了标识用户身份而存储在用户本地终端上的数据，始终在同源http请求中携带，即cookies在浏览器和服务器间来回传递，而sessionstorage和localstorage不会自动把数据发给服务器，仅在本地保存。

　　存储大小的限制不同。cookie保存的数据很小，不能超过4k，而sessionstorage和localstorage保存的数据大，可达到5M。

　　数据的有效期不同。cookie在设置的cookie过期时间之前一直有效，即使窗口或者浏览器关闭。sessionstorage仅在浏览器窗口关闭之前有效。localstorage始终有效，窗口和浏览器关闭也一直保存，用作长久数据保存。

　　作用域不同。cookie在所有的同源窗口都是共享；sessionstorage不在不同的浏览器共享，即使同一页面；localstorage在所有同源窗口都是共享

　　12iframe框架有那些优缺点？

　　优点：

　　iframe能够原封不动的把嵌入的网页展现出来。

　　如果有多个网页引用iframe，那么你只需要修改iframe的内容，就可以实现调用的每一个页面内容的更改，方便快捷。

　　网页如果为了统一风格，头部和版本都是一样的，就可以写成一个页面，用iframe来嵌套，可以增加代码的可重用。

　　如果遇到加载缓慢的第三方内容如图标和广告，这些问题可以由iframe来解决。

　　缺点：

　　搜索引擎的爬虫程序无法解读这种页面

　　框架结构中出现各种滚动条

　　使用框架结构时，保证设置正确的导航链接。

　　iframe页面会增加服务器的http请求

　　13label的作用是什么?是怎么用的?

　　label标签用来定义表单控件间的关系,当用户选择该标签时，浏览器会自动将焦点转到和标签相关的表单控件上。label中有两个属性是非常有用的,FOR和ACCESSKEY。

　　FOR属性功能：表示label标签要绑定的HTML元素，你点击这个标签的时候，所绑定的元素将获取焦点。例如，

　　<LabelFOR="InputBox">姓名</Label><inputID="InputBox"type="text">

　　ACCESSKEY属性功能：表示访问label标签所绑定的元素的热键，当您按下热键，所绑定的元素将获取焦点。例如，

　　<LabelFOR="InputBox"ACCESSKEY＝"N">姓名</Label><inputID="InputBox"type="text">

　　14HTML5的form如何关闭自动完成功能？

　　HTML的输入框可以拥有自动完成的功能，当你往输入框输入内容的时候，浏览器会从你以前的同名输入框的历史记录中查找出类似的内容并列在输入框下面，这样就不用全部输入进去了，直接选择列表中的项目就可以了。但有时候我们希望关闭输入框的自动完成功能，例如当用户输入内容的时候，我们希望使用AJAX技术从数据库搜索并列举而不是在用户的历史记录中搜索。

　　方法：

　　在IE的internet选项菜单中里的自动完成里面设置

　　设置form输入框的autocomplete为on或者off来来开启输入框的自动完成功能

　　15如何实现浏览器内多个标签页之间的通信?

　　WebSocketSharedWorker

　　也可以调用localstorge、cookies等本地存储方式。localstorge在另一个浏览上下文里被添加、修改或删除时，它都会触发一个事件，我们通过监听事件，控制它的值来进行页面信息通信。

　　注意：Safari在无痕模式下设置localstorge值时会抛出QuotaExceededError的异常

　　16webSocket如何兼容低浏览器？

　　AdobeFlashSocketActiveXHTMLFile(IE)基于multipart编码发送XHR基于长轮询的XHR

　　引用WebSocket.js这个文件来兼容低版本浏览器。

　　16页面可见性（PageVisibility）API可以有哪些用途？

　　通过visibilitystate的值得检测页面当前是否可见，以及打开网页的时间。