page contents

2021 HTML5 面试题大全

请描述一个网页从开始请求到最终显示的完整过程？ 一个网页从请求到最终显示的完整过程一般可分为如下7个步骤 ： 在浏览器中输入网址发送至DNS服务器并获得域名对应的web服务器的IP地址与we...

attachments-2021-06-OpBlLQQk60d2a10f022e7.png

请描述一个网页从开始请求到最终显示的完整过程？

一个网页从请求到最终显示的完整过程一般可分为如下7个步骤 ：

  1. 在浏览器中输入网址
  2. 发送至DNS服务器并获得域名对应的web服务器的IP地址
  3. 与web服务器建立TCP连接
  4. 浏览器向web服务器的IP地址发送相应的HTTP请求
  5. web服务器响应请求并返回指定URL的数据，或错误信息，如果设定重定向，则重定向到新的URL地址
  6. 浏览器下载数据后解析HTML源文件，解析过程中实现对页面的排版，解析完成后再浏览器中显示基础页面
  7. 分析页面中的超链接并显示在当前页面，重复以上过程直至无超链接需要发送，完成全部显示

什么是 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作用? 严格模式与混杂模式如何区分？它们有何意义?

  1. <!DOCTYPE> 声明位于文档中的最前面，处于 <html> 标签之前。告知浏览器以何种模式来渲染文档。
  2. 严格模式的排版和 JS 运作模式是 以该浏览器支持的最高标准运行。
  3. 在混杂模式中，页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点无法工作。
  4. DOCTYPE不存在或格式不正确会导致文档以混杂模式呈现。

HTML5有哪些的新特性？

  1. 绘图canvas
  2. 拖放（Drag和drop）
  3. 用于媒介回放的video和audio
  4. 本地存储localStorage和sessionStorage
  5. 语义化元素（header、footer、nav、section、article）
  6. 表单控件（date、time、url、search、email、calendar）
  7. 控件元素（webworker、websockt、Geolocation）
HTML5兼容IE低版本
HTML5提出的新的元素不被IE6-8识别，这些新元素不能作为父节点包裹子元素，并且不能应用CSS样式。
针对IE浏览器html5shiv 是比较好的解决方案。
注：html5shiv.js 引用代码必须放在 <head> 元素中，因为 IE 浏览器在解析 HTML5 新元素时需要先加载该文件。

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

  1. 用正确的标签做正确的事情
  2. html语义化让页面的内容结构化，结构更清晰，便于对浏览器、搜索引擎解析
  3. 即使在没有样式css情况下也以一种文档格式显示，并且是容易阅读的
  4. 搜索引擎的爬虫也依赖于HTML标记来确定上下文和各个关键字的权重，利于SEO
  5. 使于都源代码的人对网站更容易将网站分块，便于阅读维护理解。

HTML 和 XHTML 有什么区别？

  1. XHTML中的标签都必须被正确地嵌套,HTML中的某些标签可以彼此不正确的嵌套。
  2. XHTML中的所有标签必须要关闭。
  3. XHTML中规范定义：标签名和属性对大小写敏感,所有XHTML标签名必须用小写字母。
  4. XHTML文档必须拥有根元素。
  5. XHTML中标签的属性值要使用双引号”。

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

  1. link属于XHTML标签，而@import是css提供的
  2. 页面被加载时，link会同时被加载，而@import引用的css会等到页面被加载完再加载
  3. @import只在IE5以上才能识别，而link是XHTML标签，无兼容问题
  4. link方式的样式的权重高于@import的权重。

HTML5地理定位是什么？如何使用？

HTML5 地理定位用于定位用户的位置

HTML5 地理定位API用于获取用户的地理位置。

由于这会侵犯用户隐私，除非用户批准，否则该位置不可用。

使用 getCurrentPosition() 方法获取用户的位置。

HTML全局属性(global attribute)有哪些（包含H5）？

  1. accesskey:设置快捷键
  2. class:为元素设置类标识
  3. contenteditable:指定元素内容是否可编辑
  4. contextmenu:自定义鼠标右键弹出上下文菜单内容（仅firefox支持）
  5. data-*:为元素增加自定义属性
  6. dir：设置元素文本方向（默认ltr；rtl）
  7. draggable:设置元素是否可拖拽
  8. dropzone:设置元素拖放类型（copy|move|link,H5新属性，主流均不支持）
  9. hidden:规定元素仍未或不在相关
  10. id:元素id，文档内唯一
  11. lang:元素内容的语言
  12. spellcheck:是否启动拼写和语法检查
  13. style:行内css样式
  14. tabindex:设置元素可以获得焦点，通过tab导航
  15. title:规定元素有关的额外信息
  16. translate:元素和子孙节点内容是否需要本地化（均不支持）

简述a标签超链接target属性的取值和作用？

a 标签的 target 属性一共有四个值。
  1. _self ：默认属性。在当前窗口或者框架中加载目标文档。
  2. _blank ：打开新的窗口或者新的标签页。在使用这个属性时，最好添加 rel=“noopener norefferrer” 属性，防止打开的新窗口对原窗口进行篡改。防止 window.opener API 的恶意行为。
  3. _parent ：在 frame 或者 iframe 中使用较多。在父级框架中载入目标文档，当 a 标签本身在顶层时，与 _self 相同。
  4. _top ：在 frame 或者 iframe 中使用较多。直接在顶层的框架中载入目标文档，加载整个窗口

浏览器内多个标签页之间的通信方式有哪些？

即在浏览器中，两个不同页面（A页面的window ！= B页面的window）网页之间的消息传递。
  1. WebSocket （可跨域）
  2. postMessage（可跨域）
  3. Worker之SharedWorker
  4. Server-Sent Events
  5. localStorage
  6. BroadcastChannel
  7. Cookies

viewport常见设置都有哪些？

在移动端做开发时，必须要搞清楚 viewport 这一设置。

viewport 就是视区窗口，也就是浏览器中显示网页的部分。PC 端上基本等于设备显示区域，但在移动端上 viewport 会超出设备的显示区域（即会有横向滚动条出现）。

设备默认的 viewport 在 980 - 1024 之间。

  1. width ：设置 layout viewport 的宽度，为一个正整数，或字符串"width-device"
  2. initial-scale ：设置页面的初始缩放值，为一个数字，可以带小数
  3. minimum-scale ：允许用户的最小缩放值，为一个数字，可以带小数
  4. maximum-scale ：允许用户的最大缩放值，为一个数字，可以带小数
  5. height ：设置 layout viewport 的高度，这个属性对我们并不重要，很少使用
  6. user-scalable ：是否允许用户进行缩放，值为"no"或"yes"， no 代表不允许，yes 代表允许

常见的浏览器内核都有哪些？并介绍下你对内核的理解

常见浏览器所用内核
  1. IE 浏览器内核：Trident 内核，也是俗称的 IE 内核；
  2. Chrome 浏览器内核：统称为 Chromium 内核或 Chrome 内核，以前是 Webkit 内核，现在是 Blink内核；
  3. Firefox 浏览器内核：Gecko 内核，俗称 Firefox 内核；
  4. Safari 浏览器内核：Webkit 内核；
  5. Opera 浏览器内核：最初是自己的 Presto 内核，后来加入谷歌大军，从 Webkit 又到了 Blink 内核；
  6. 360浏览器、猎豹浏览器内核：IE + Chrome 双内核；
  7. 搜狗、遨游、QQ 浏览器内核：Trident（兼容模式）+ Webkit（高速模式）；
  8. 百度浏览器、世界之窗内核：IE 内核；
  9. 2345浏览器内核：好像以前是 IE 内核，现在也是 IE + Chrome 双内核了；
  10. UC 浏览器内核：这个众口不一，UC 说是他们自己研发的 U3 内核，但好像还是基于 Webkit 和 Trident ，还有说是基于火狐内核。
内核理解

主要分成两部分：渲染引擎和 JS 引擎。

渲染引擎的职责就是渲染，即在浏览器窗口中显示所请求的内容。默认情况下，渲染引擎可以显示 html、xml 文档及图片，它也

可以借助插件（一种浏览器扩展）显示其他类型数据，例如使用 PDF 阅读器插件，可以显示 PDF 格式。

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

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

说说你对html中的置换元素和非置换元素的理解？

置换元素（Replaced Element）
  1. 简单来说，置换元素可以设置宽 高,他们有自己的属性，和inline-block有一样的属性
  2. 主要是指 img、input、textarea、select、object 等这类默认就有 CSS 格式化外表范围的元素。
  3. 浏览器根据元素的标签和属性，来决定元素的具体显示内容

例如：浏览器根据标签的src属性显示图片。根据type属性决定显示输入框还是按钮

非置换元素（non-Replaced Element）:
  1. 就是除了 img、input、textarea、select、object 等置换元素以外的元素。
  2. 内容直接展示给浏览器。例如标签，标签里的内容会被浏览器直接显示给用户

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 有什么区别?

  1. alt ： 图片加载失败时，显示在网页上的替代文字
  2. title ：鼠标悬浮在图片上显示的文字

注 : alt是必要属性，title非必要

更多相关技术内容咨询欢迎前往并持续关注六星社区了解详情。

程序员编程交流QQ群：805358732

如果你想用Python开辟副业赚钱，但不熟悉爬虫与反爬虫技术，没有接单途径，也缺乏兼职经验
关注下方微信公众号：Python编程学习圈，获取价值999元全套Python入门到进阶的学习资料以及教程，还有Python技术交流群一起交流学习哦。

attachments-2022-06-ZHmY6P2D62ac42e2ebab6.jpeg

你可能感兴趣的文章

相关问题

0 条评论

请先 登录 后评论
轩辕小不懂
轩辕小不懂

2403 篇文章

作家榜 »

  1. 轩辕小不懂 2403 文章
  2. 小柒 1474 文章
  3. Pack 1135 文章
  4. Nen 576 文章
  5. 王昭君 209 文章
  6. 文双 71 文章
  7. 小威 64 文章
  8. Cara 36 文章

轩辕小不懂

如果觉得我的文章对您有用，请随意打赏。你的支持将鼓励我继续创作！