HTML面试题

HTML与浏览器

Doctype 作用？标准模式与兼容模式各有什么区别？

DOCTYPE是用来声明文档类型和DTD规范的。<!DOCTYPE html>声明位于HTML文档中的第一行，不是一个 html 标签，处于 html 标签之前。告诉浏览器的解析器用什么文档标准解析这个文档。DOCTYPE不存在或格式不正确会导致文档以兼容模式呈现

标准模式的排版 和 JS 运作模式都是以该浏览器支持的最高标准运行。在兼容模式中，页面以宽松的向后兼容的方式显示，模拟老式浏览器的行为以防止站点无法工作。

在HTML4.01中<!doctype>声明指向一个DTD，由于HTML4.01基于SGML，所以DTD指定了标记规则以保证浏览器正确渲染内容 HTML5 不基于SGML，所以不用指定DTD

HTML 全局属性

全局属性是所有HTML元素共有的属性；它们可以用于所有元素，即使属性可能对某些元素不起作用。

全局属性|MDN

canvas和svg的区别

canvas是html5提供的新元素，而svg存在的历史要比canvas久远，已经有十几年了。svg并不是html5专有的标签，最初svg是xml技术(超文本扩展语言，可以自定义标签或属性)描述二维图形的语言。在H5中看似canvas和svg很像，但是，它们有巨大的差别。

首先，从它们的功能上讲，canvas可以看做是一个画布。其绘制出来的图形为标量图，因此，可以在canvas中引入.jpg或.png这类格式的图片，在实际开发中，大型的网络游戏都是用canvas画布做出来的，并且canvas的技术现在已经相当娴熟。另外，我们喜欢用canvas来做一些统计用的图表，如柱状图曲线图或饼状图等。而svg，所绘制的图形为矢量图，所以其用法上受到了限制。因为只能绘制矢量图，所以svg中不能引入普通的图片，因为矢量图的不会失真效果，在项目中我们会用来做小图标。但是由于其本质为矢量图，可以被无限放大而不会失真，这很适合被用来做地图，而百度地图就是用svg技术做出来的。

另外从技术方面来讲canvas里面绘制的图形不能被引擎抓取，如我们要让canvas里面的一个图片跟随鼠标事件：canvas.onmouseover = function(){}。而svg里面的图形可以被引擎抓取，支持事件的绑定。另外canvas中我们绘制图形通常是通过JavaScript来实现，而svg更多的是通过标签来实现，如在svg中绘制正矩形，这里我们不能用属性style="width:xxx;height:xxx"来定义。

行内元素有哪些？块级元素有哪些？空元素有哪些？

定义：CSS规范规定，每个元素都有 display 属性，确定该元素的类型，每个元素都有默认的 display 值，如 div 的 display 默认值为“block”，则为“块级”元素；span 默认 display 属性值为“inline”，是“行内”元素。

  • 行内元素有：a b span img input select strong
  • 块级元素有：div ul ol li dl dt dd h1 h2 h3 ....p
  • 空元素：
    • 常见：br hr img link input meta
    • 不常见：area base col command embed keygen param source track wbr

不同浏览器（版本）、HTML4（5）、CSS2等实际略有差别 参考http://stackoverflow.com/questions/6867254/browsers-default-css-for-html-elements

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

主要分两部分：渲染引擎(layout engineer 或 Rendering Engine)和JS引擎。

渲染引擎：负责取得网页的内容（HTML、XML、图像等等）、整理讯息（例如加入CSS等），以及计算网页的显示方式，然后渲染到用户的屏幕上。

JS引擎：解析和执行 JavaScript 来实现逻辑和控制 DOM 进行交互。

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

HTML和DOM的关系

  • HTML只是一个字符串
  • DOM由HTML解析而来
  • JS可以维护DOM

主流浏览器及其内核

浏览器 内核 备注
IE trident IE、猎豹、360、百度
firefox gecko  
Safari webkit 从 Safari 推出之时，它的渲染引擎就是webkit，一提到webkit，首先想到的便是chrome，webkit的鼻祖其实是Safari
chrome Chromium/Blink 在 Chromium 项目中研发 Blink 渲染引擎（即浏览器核心），内置于 Chrome 浏览器之中。Blink 其实是 WebKit 的分支。大部分国产浏览器最新版都采用 Blink 内核。二次开发
Opera blink Opera内核原为：Presto，现在跟随chrome用blink内核

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

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

描述一下 cookies、sessionStorage 和 localStorage的区别

  • cookie 是网站为了标示用户身份而储存在用户本地终端（Client Side）上的数据（通常经过加密）
  • cookie 数据始终在同源的http请求中携带（即使不需要），即会在浏览器和服务器间来回传递。
  • sessionStorage 和 localStorage 不会自动把数据发给服务器，仅会在本地保存。
  • 存储大小：
    • cookie 数据大小不能超过 4k
    • sessionStorage 和 localStorage 虽然也有存储大小的限制，但比 cookie 大得多，可以达到 5M 或更大
  • 有效期（生命周期）
    • localStorage：存储持久数据，浏览器关闭后数据不丢失除非主动删除数据
    • sessionStorage：数据在当前浏览器关闭后自动删除
    • cookie：设置的 cookie 过期时间之前一直有效，即使窗口或浏览器关闭
  • 共享
    • sessionStorage不能共享，localStorage在同源文档之间共享，cookie在同源且符合path规则的文档之间共享

为什么我们要弃用table标签

table的缺点在于服务器把代码加载到本地服务器的过程中，本来是加载一行执行一行，但是table标签是里面的东西全都下载完之后才会显示出来，那么如果图片很多的话就会导致网页一直加载不出来，除非所有的图片和内容都加载完。如果要等到所有的图片全部加载完之后才显示出来会影响网页的性能，所以table标签现在我们基本放弃使用了。

移动端项目需要注意的4个问题

meta中设置viewport

阻止用户手滑放大或缩小页面，需要在 index.html 中添加meta元素，设置viewport。

<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">

CSS样式统一问题

我们需要重置页面样式，因为在不同的手机浏览器上，默认的css样式不是统一的。解决方法：使用reset.css重置所有元素的默认样式

一像素边框问题

有的手机分辨率比较高，是2倍屏或3倍屏，手机上的浏览器就会把CSS中的1像素值展示为2个或3个物理宽度。解决方法：添加一个border.css库，将利用scroll缩放的原理将边框重置。当我们需要使用一像素边框时只需要在标签上添加类名，如设置底部一像素边框就在标签上加入“border-bottom”的class名

300毫秒点击延迟问题

在移动端开发中，某些机型上使用click事件会延迟300ms才执行，这样影响了用户体验。解决方法：引入fastclick.js

HTML5 的 form 如何关闭自动补全功能？

给不想要提示的 form 或某个 input 设置为 autocomplete = off

如何实现浏览器多个标签之间的通信？

  • WebSocket、ShareWorker
  • 也可以调用 localStorage、cookies 等本地存储方式

localStorage 另一个浏览器上下文里被添加、修改、或删除时，它都会触发一个storage事件，我们通过监听事件，控制它的值来进行页面信息通信；

webSocket 如何兼容低浏览器？

  • Adobe Flash Socket
  • ActiveXHTMLFile(IE)
  • 基于 multipart 编码发送 XHR
  • 基于长轮询的 XHR

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

  • HTML5 现在已经不是 SGML 的子集，主要是关于图像，位置，存储，多任务等。功能的增加：
    • 绘画canvas
    • 用于媒介播放的 video 和 audio 元素
    • 本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失
    • sessionStorage 的数据在浏览器关闭后自动删除
    • 语义化更好的内容元素，比如 article、footer、header、nav、section
    • 表单控件： calendar、date、time、email、url、search
    • 新的技术 webworker、websocket、Geolocation
  • 移出的元素：
    • 纯表现的元素：basefont、big、center、font、s、strike、u
    • 对可用性产生负面影响的元素：frame、frameset、noframes
  • 支持 HTML5 新标签：
    • IE8/IE7/IE6支持通过 document.createElement 方法产生的标签
    • 可以利用这一特性让这些浏览器支持 HTML5 新标签
    • 浏览器支持新标签后，还需要添加标签默认的样式
  • 如何区分 HTML5：DOCTYPE 声明\新增的结构元素\功能元素

HTML5 的离线储存怎么使用，解释工作原理

在用户没有与因特网连接时，可以正常访问站点或应用，在用户与因特网连接时，更新用户机器上的缓存文件。

原理：HTML5 的离线缓存是基于一个新建的 .appcache 文件的缓存机制（不是存储技术），通过这个文件上的解析清单离线存储资源，这些资源就会像 cookie 一样被存储下来。之后当网络在处于离线状态下时，浏览器会通过被离线存储的数据进行页面展示。

如何使用：

  1. 页面头部像下面一样加入一个 manifest 的属性；
  2. 在 cache.manifest 文件的编写离线存储的资源
CACHE MANIFEST
#v1.0

CACHE:
js/app.js
css/style.css

NETWORK:
assets/logo.png

FALLBACK:
/html5/ /404.html

浏览器是怎么对 HTML5 的离线存储资源进行管理和加载的

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

在离线状态时，操作 window.applicationCache 进行需求实现

iframe 有哪些缺点

    • iframe 会阻塞主页面的Onload事件
    • 搜索引擎的检索程序无法解读这种页面，不利于SEO
    • iframe和主页面共享连接池，而浏览器对相同域的链接有限制，所以会影响页面的并行加载

使用iframe 之前需要考虑这两个缺点，如果需要使用 iframe，最好是通过JavaScript

动态给iframe添加src属性值，这样可以绕开以上两个问题。

Label的作用是什么？是怎么用的？

label 标签来定义表单控制间的关系，当用户选择该标签是，浏览器会自动将焦点转到和标签相关的表单控件上。

<label for="Name">Number:</label> <input type=“text“name="Name" id="Name"/> <label>Date:<input type="text" name="B"/></label>

页面可见性可以有那些用途

  • 通过visibilityState 的值检测页面当前是否可见，以及打开网页的时间等
  • 在页面被切换到其他后台进程的时候，自动暂停音乐或视频的播放

如何在页面上实现一个圆形的可点击区域？

  • map+area 或者 svg
  • border-radius
  • 纯js实现，需要求一个点在不在圆上简单算法、获取鼠标坐标等等

实现不使用 border 画出 1px 高的线，在不同浏览器的标准模式与怪异模式下都能保持一致的效果。

<div style="height:1px;overflow:hidden;background:red"></div>
posted @ 2019-05-31 10:03  熙丞  阅读(1854)  评论(0)  编辑  收藏  举报