以下是我整理的一些HTML面试基础题，自己整理答案。1DOCTYPE的作用是什么？如何区分标准模式和混杂模式？他们的意思是什么？告诉浏览器使用哪个版本的HTML规范来呈现文档。缺少或格式不正确的DOCTYPE将导致HTML文档以混杂模式呈现。标准模式（Standardsmode）以浏览器支持的最高标准运行；混合模式（Quirks模式）下的页面以相对松散的向后兼容方式显示。2为什么HTML5只需要写？HTML5不是基于SGML（标准通用标记语言），因此不需要引用DTD（DTD文档类型定义），但需要DOCTYPE来规范浏览器行为。HTML4.01是基于SGML的，所以需要参考DTD。为了告诉浏览器文档使用的文档类型，如下：3什么是内联元素？什么是块级元素？什么是空（void）元素？行内元素：aspanimginputselect块级元素：divulollidldtddh1p空元素：
4导入时使用link和@import有什么区别页面上的样式？？相同的地方都是对css的外部引用，区别：link是一个xhtml标签，除了加载css外，还可以定义其他的东西，比如RSS；@import属于CSS的范畴，只能在链接引用CSS时加载CSS，同时在页面加载时加载；@import需要在页面完全加载后加载，@import引用的CSS直到引用它的CSS文件加载完成后才会加载。链接是xhtml标签，没有兼容性问题；@import是在css2.1提出的，低版本的浏览器不支持链接，支持使用javascript控件改变样式，而@import不支持链接样式的权重，样式比@import的权重高importrequires
当使用html标签时5FlashofUnstyledContent(FOUC)FlashofUnstyleContent@import导入CSS文件时会等到文档加载完毕后再加载CSS样式表。因此，从页面DOM加载完成到CSS导入完成之间会有一段时间。页面上的内容没有样式。解决方法：使用link标签加载CSS样式文件。因为链接是顺序加载的，所以页面会等到CSS下载完了再下载HTML文件，这样就先做了布局，不会出现FOUC问题。6谈谈你对浏览器内核的理解？主要分为两部分：渲染引擎??（LayoutEngine或RenderingEngine）和JS引擎。渲染引擎：负责获取网页的内容（HTML、XML、图片等），组织信息（如添加CSS等），计算网页的显示方式，然后输出到显示器或打印机。不同的浏览器内核对网页的语法解释不同，因此呈现的效果也不同。JS引擎：解析执行javascript，实现网页动态效果。起初，渲染引擎和JS引擎并没有明确区分。后来JS引擎越来越独立，内核趋向于只指渲染引擎。7常见的浏览器内核有哪些？Trident（MSHTML）：IEMaxThonTTTheWorld360SogouGeckos：Netscape6及以上FireFoxMozillaSuite/SeaMonkeyPresto：Opera7及以上（Opera内核原为：Presto，现为：Blink）Webkit：SafariChrome8HTML5有哪些新特性，删除了哪些元素？如何处理HTML5新标签的浏览器兼容性问题？如何区分HTML和HTML5添加了图像、位置、存储和多任务处理等新功能。新增元素：Canvas用于本地离线存储视频和音频元素，用于媒体播放。localStorage长期存储数据，关闭浏览器后数据不会丢失；sessionStorage数据在浏览器关闭后自动删除语义更好的内容元素，例如文章页脚页眉navsectionlocationAPI：Geolocationformcontrol,calendardatetimeemailurlsearch新技术：webworker（webworker是在后台运行的JavaScript，独立于其他脚本，不会影响页面的性能。你可以继续做任何你想做的事情：点击，选择内容等，而webworker在后台运行）websocketdraganddropAPI:drag,drop删除的元素：纯表达元素：basefontbigcenterfontsstrikettu性能差的元素：frameframesetnoframes区别：DOCTYPE声明的方式是区分重要因素，根据新增的结构和功能来区分9简述你的理解HTML语义？移除或丢失样式可以使页面呈现出清晰的结构。有利于SEO与搜索引擎建立良好的沟通，帮助爬虫抓取更多的信息。爬虫依靠标签来确定上下文和每个关键字的权重。方便其他设备分析。方便团队开发和维护，语义以可读性为主。10如何使用HTML5文件离线存储，工作原理是什么？在线时，浏览器在HTML头中找到manifest属性，就会请求manifest文件。如果是第一次访问，浏览器会根据manifest文件的内容下载相应的资源并离线存储。如果已经被访问过并且资源已经离线存储，浏览器将使用离线资源加载页面。然后浏览器会将新的清单文件与旧的清单文件进行比较。如果文件没有改变，它不会做任何事情。如果文件发生变化，它会重新下载文件中的资源并离线存储。比如在页面头部添加manifest属性，在cache.manifest文件中写入离线存储资源CACHEMANIFEST#v0.11CACHE:js/app.jscss/style.cssNETWORK:Resourse/logo.pngFALLBACK://offline.html11cookies、sessionStorage、localStorage有什么区别？它们的共同点：都是存储在浏览器端，同源。区别：cookies是存储在用户本地终端的用于识别用户身份的数据，始终携带在同源http请求中，即cookies在浏览器和服务器端来回传递，而sessionstorage和localstorage会不会自动向服务器发送数据，只保存在本地。存储大小的限制不同。cookie保存的数据很小，不能超过4k，而sessionstorage和localstorage保存的数据很大，可以达到5M。数据的有效期不同。cookie在设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭。SessionStorage仅在浏览器窗口关闭之前有效。localstorage一直有效，窗口和浏览器关闭保存，用于长期数据存储。适用范围不同。Cookies在所有同源窗口共享；会话存储不在不同浏览器中共享，即使在同一页面上也是如此；localstorage在所有同源窗口中共享12iframe的优点和缺点是什么？优点：iframe可以完整显示嵌入的网页。如果多个网页引用了iframe，那么只需要修改iframe的内容就可以实现调用的每个页面内容的变化，方便快捷。如果网页为了风格统一，页眉和版本相同，可以写成一个页面，用iframe嵌套，这样可以增加代码的复用性。如果您遇到图标和广告等第三方内容加载缓慢的情况，这些问题都可以通过iframe来解决。缺点：搜索引擎的爬虫程序无法解释这种页面框架结构中出现的各种滚动条。使用框架结构时，确保设置了正确的导航链接。iframe页面会增加服务器的http请求。13标签的作用是什么？它是如何使用的？label标签用于定义表单控件之间的关系。当用户选择标签时，浏览器会自动将焦点转移到表单控件上的标签相关。label中有两个属性非常有用，FOR和ACCESSKEY。FOR属性功能：表示要绑定到label标签的HTML元素。当您单击此标签时，绑定的元素将获得焦点。例如NameACCESSKEY属性作用：表示访问label标签绑定的元素的热键，当按下热键键，绑定的元素将获得焦点。例如Name14如何关闭HTML5表单的自动完成功能？HTML输入框可以有自动完成功能。当你在输入框中输入内容时，浏览器会从你上一个输入框的历史记录中查找同名的相似内容，并列在输入框下方，这样你就不需要全部输入一次，只选择该项在列表中。但是有时候我们又想关闭输入框的自动补全功能。例如，当用户输入内容时，我们想使用AJAX技术从数据库中搜索列表，而不是在用户的历史记录中搜索。方法：在IE的Internet选项菜单中将autocomplete设置为on或off，以启用输入框的自动完成功能。15如何实现浏览器中多个标签页之间的通信？WebSocketSharedWorker也可以调用localstorge、cookies等本地存储方式。当在另一个浏览上下文中添加、修改或删除localstorge时，它??会触发一个事件。我们通过监听事件并控制它的值来传达页面信息。注意：Safari在隐身模式下设置localstorge的值时会抛出QuotaExceededError异常。16webSocket如何兼容低级浏览器？AdobeFlashSocketActiveXHTMLFile(IE)发送基于多部分编码的XHR基于长轮询的XHR是指文件WebSocket.js以兼容低版本浏览器。16PageVisibilityAPI有什么用？通过visibilitystate的值，以及打开页面的时间来判断页面当前是否可见。当页面切换到另一个后台进程时自动暂停音乐或视频播放。17如何在页面上实现圆形的可点击区域？map+area或者svgborder-radius纯js实现，一个点不在圆上算法18实现不使用border绘制1px高线，在不同浏览器的Quirks模式和CSSCompat模式下都可以保持同样的效果 19网页验证码有什么用，解决什么安全问题？区分用户是计算机还是人的程序；可防止恶意破解密码、刷票、泛滥论坛；20title和h1、b和strong、i和em有什么区别？title属性无明确含义，仅表示标题；h1表示层次分明的标题，对页面信息的捕捉也有很大的影响；strong表示重点内容，语气加强意思；b是无意义的视觉表示；em表示强调文本；i是斜体，无意义的视觉表现视觉风格标签：bius语义风格标签：strongeminsdelcode21元素的alt和title有什么异同？当alt和title同时设置时，alt作为图片的替代文字出现，title为图片的说明文字。持续更新中...
