2021 HTML5 面试题大全
请描述一个网页从开始请求到最终显示的完整过程？
一个网页从请求到最终显示的完整过程一般可分为如下7个步骤 ：
- 在浏览器中输入网址
- 发送至DNS服务器并获得域名对应的web服务器的IP地址
- 与web服务器建立TCP连接
- 浏览器向web服务器的IP地址发送相应的HTTP请求
- web服务器响应请求并返回指定URL的数据，或错误信息，如果设定重定向，则重定向到新的URL地址
- 浏览器下载数据后解析HTML源文件，解析过程中实现对页面的排版，解析完成后再浏览器中显示基础页面
- 分析页面中的超链接并显示在当前页面，重复以上过程直至无超链接需要发送，完成全部显示
什么是 HTML5?
HTML5是HTML（超文本标记语言）的最新版本。它是一种为万维网构建和显示内容的语言，万维网是互联网的核心技术。
WHATWG（Web超文本应用技术工作组）另一次W3C个人聚会认为，W3C没有认真考虑当前方言的现实改进需求，它已经开始处理HTML-HTML5的新确定。因此，HTML5是HTML 4.01和XHTML 1.0的另一种改编，它集中于Web应用程序设计者的必要性上，并且还倾向于在当前细节中发现的问题。
具体而言，HTML5包含许多新的句法特征。
什么是<! DOCTYPE >？是否需要在HTML5中使用？
<！DOCTYPE>是关于页面写入了什么版本的HTML的指令。<！DOCTYPE>标记没有结束标记，它不区分大小写。
<！DOCTYPE>声明必须是HTML5文档中的第一行，在标记之前。如HTML 4.01，全部<！DOCTYPE>声明需要引用文档类型定义（DTD），因为HTML 4.01是基于标准通用标记语言（SGML）的。而HTML5并不基于SGML，因此不需要对文档类型定义（DTD）的引用。
DOCTYPE作用? 严格模式与混杂模式如何区分？它们有何意义?
- <!DOCTYPE> 声明位于文档中的最前面，处于 <html> 标签之前。告知浏览器以何种模式来渲染文档。
- 严格模式的排版和 JS 运作模式是 以该浏览器支持的最高标准运行。
- 在混杂模式中，页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点无法工作。
- DOCTYPE不存在或格式不正确会导致文档以混杂模式呈现。
HTML5有哪些的新特性？
- 绘图canvas
- 拖放（Drag和drop）
- 用于媒介回放的video和audio
- 本地存储localStorage和sessionStorage
- 语义化元素（header、footer、nav、section、article）
- 表单控件（date、time、url、search、email、calendar）
- 控件元素（webworker、websockt、Geolocation）
HTML5兼容IE低版本
HTML5提出的新的元素不被IE6-8识别，这些新元素不能作为父节点包裹子元素，并且不能应用CSS样式。
针对IE浏览器html5shiv 是比较好的解决方案。
注：html5shiv.js 引用代码必须放在 <head> 元素中，因为 IE 浏览器在解析 HTML5 新元素时需要先加载该文件。
简述一下你对HTML语义化的理解？
- 用正确的标签做正确的事情
- html语义化让页面的内容结构化，结构更清晰，便于对浏览器、搜索引擎解析
- 即使在没有样式css情况下也以一种文档格式显示，并且是容易阅读的
- 搜索引擎的爬虫也依赖于HTML标记来确定上下文和各个关键字的权重，利于SEO
- 使于都源代码的人对网站更容易将网站分块，便于阅读维护理解。
HTML 和 XHTML 有什么区别？
- XHTML中的标签都必须被正确地嵌套,HTML中的某些标签可以彼此不正确的嵌套。
- XHTML中的所有标签必须要关闭。
- XHTML中规范定义：标签名和属性对大小写敏感,所有XHTML标签名必须用小写字母。
- XHTML文档必须拥有根元素。
- XHTML中标签的属性值要使用双引号”。
页面导入样式时，使用link和@import有什么区别？
- link属于XHTML标签，而@import是css提供的
- 页面被加载时，link会同时被加载，而@import引用的css会等到页面被加载完再加载
- @import只在IE5以上才能识别，而link是XHTML标签，无兼容问题
- link方式的样式的权重高于@import的权重。
HTML5地理定位是什么？如何使用？
HTML5 地理定位用于定位用户的位置
HTML5 地理定位API用于获取用户的地理位置。
由于这会侵犯用户隐私，除非用户批准，否则该位置不可用。
使用 getCurrentPosition() 方法获取用户的位置。
HTML全局属性(global attribute)有哪些（包含H5）？
- accesskey:设置快捷键
- class:为元素设置类标识
- contenteditable:指定元素内容是否可编辑
- contextmenu:自定义鼠标右键弹出上下文菜单内容（仅firefox支持）
- data-*:为元素增加自定义属性
- dir：设置元素文本方向（默认ltr；rtl）
- draggable:设置元素是否可拖拽
- dropzone:设置元素拖放类型（copy|move|link,H5新属性，主流均不支持）
- hidden:规定元素仍未或不在相关
- id:元素id，文档内唯一
- lang:元素内容的语言
- spellcheck:是否启动拼写和语法检查
- style:行内css样式
- tabindex:设置元素可以获得焦点，通过tab导航
- title:规定元素有关的额外信息
- translate:元素和子孙节点内容是否需要本地化（均不支持）
简述a标签超链接target属性的取值和作用？
a 标签的 target 属性一共有四个值。
- _self ：默认属性。在当前窗口或者框架中加载目标文档。
- _blank ：打开新的窗口或者新的标签页。在使用这个属性时，最好添加 rel=“noopener norefferrer” 属性，防止打开的新窗口对原窗口进行篡改。防止 window.opener API 的恶意行为。
- _parent ：在 frame 或者 iframe 中使用较多。在父级框架中载入目标文档，当 a 标签本身在顶层时，与 _self 相同。
- _top ：在 frame 或者 iframe 中使用较多。直接在顶层的框架中载入目标文档，加载整个窗口
浏览器内多个标签页之间的通信方式有哪些？
即在浏览器中，两个不同页面（A页面的window ！= B页面的window）网页之间的消息传递。
- WebSocket （可跨域）
- postMessage（可跨域）
- Worker之SharedWorker
- Server-Sent Events
- localStorage
- BroadcastChannel
- Cookies
viewport常见设置都有哪些？
在移动端做开发时，必须要搞清楚 viewport 这一设置。
viewport 就是视区窗口，也就是浏览器中显示网页的部分。PC 端上基本等于设备显示区域，但在移动端上 viewport 会超出设备的显示区域（即会有横向滚动条出现）。
设备默认的 viewport 在 980 - 1024 之间。
- width ：设置 layout viewport 的宽度，为一个正整数，或字符串"width-device"
- initial-scale ：设置页面的初始缩放值，为一个数字，可以带小数
- minimum-scale ：允许用户的最小缩放值，为一个数字，可以带小数
- maximum-scale ：允许用户的最大缩放值，为一个数字，可以带小数
- height ：设置 layout viewport 的高度，这个属性对我们并不重要，很少使用
- user-scalable ：是否允许用户进行缩放，值为"no"或"yes"， no 代表不允许，yes 代表允许
常见的浏览器内核都有哪些？并介绍下你对内核的理解
常见浏览器所用内核
- IE 浏览器内核：Trident 内核，也是俗称的 IE 内核；
- Chrome 浏览器内核：统称为 Chromium 内核或 Chrome 内核，以前是 Webkit 内核，现在是 Blink内核；
- Firefox 浏览器内核：Gecko 内核，俗称 Firefox 内核；
- Safari 浏览器内核：Webkit 内核；
- Opera 浏览器内核：最初是自己的 Presto 内核，后来加入谷歌大军，从 Webkit 又到了 Blink 内核；
- 360浏览器、猎豹浏览器内核：IE + Chrome 双内核；
- 搜狗、遨游、QQ 浏览器内核：Trident（兼容模式）+ Webkit（高速模式）；
- 百度浏览器、世界之窗内核：IE 内核；
- 2345浏览器内核：好像以前是 IE 内核，现在也是 IE + Chrome 双内核了；
- UC 浏览器内核：这个众口不一，UC 说是他们自己研发的 U3 内核，但好像还是基于 Webkit 和 Trident ，还有说是基于火狐内核。
内核理解
主要分成两部分：渲染引擎和 JS 引擎。
渲染引擎的职责就是渲染，即在浏览器窗口中显示所请求的内容。默认情况下，渲染引擎可以显示 html、xml 文档及图片，它也
可以借助插件（一种浏览器扩展）显示其他类型数据，例如使用 PDF 阅读器插件，可以显示 PDF 格式。
JS 引擎：解析和执行 javascript 来实现网页的动态效果。
最开始渲染引擎和 JS 引擎并没有区分的很明确，后来 JS 引擎越来越独立，内核就倾向于只指渲染引擎。
说说你对html中的置换元素和非置换元素的理解？
置换元素（Replaced Element）
- 简单来说，置换元素可以设置宽 高,他们有自己的属性，和inline-block有一样的属性
- 主要是指 img、input、textarea、select、object 等这类默认就有 CSS 格式化外表范围的元素。
- 浏览器根据元素的标签和属性，来决定元素的具体显示内容
例如：浏览器根据标签的src属性显示图片。根据type属性决定显示输入框还是按钮
非置换元素（non-Replaced Element）:
- 就是除了 img、input、textarea、select、object 等置换元素以外的元素。
- 内容直接展示给浏览器。例如标签，标签里的内容会被浏览器直接显示给用户
js放在html的< body >和< head >有什么区别？
js 放在<head> 中，如果不添加 async 或者 defer 时，当浏览器遇到 script 时，会阻塞 DOM 树的构建，进而影响页面的加载。当 js 文件较多时，页面白屏的时间也会变长。
在这个过程中，如果解析器遇到了一个脚本(script)，它就会停下来，并且执行这个脚本，然后才会继续解析 HTML。如果遇到了一个引用外部资源的脚本(script)，它就必须停下来等待这个脚本资源的下载，而这个行为会导致一个或者多个的网络往返，并且会延迟页面的首次渲染时间。
把 js 放到 <body> 里（一般在 </body> 的上面）时，由于 DOM 时顺序解析的，因此 js 不会阻塞 DOM 的解析。对于必须要在 DOM 解析前就要加载的 js，我们需要放在 <head> 中。
< img >的 title 和 alt 有什么区别?
- alt ： 图片加载失败时，显示在网页上的替代文字
- title ：鼠标悬浮在图片上显示的文字
注 : alt是必要属性，title非必要
更多相关技术内容咨询欢迎前往并持续关注六星社区了解详情。
程序员编程交流QQ群：805358732
如果你想用Python开辟副业赚钱，但不熟悉爬虫与反爬虫技术，没有接单途径，也缺乏兼职经验
关注下方微信公众号：Python编程学习圈，获取价值999元全套Python入门到进阶的学习资料以及教程，还有Python技术交流群一起交流学习哦。
- 发表于 2021-06-23 10:51
- 阅读 ( 953 )
- 分类：WEB前端开发
