HTML面试题（持续更新...）

2021/6/16 18:26:53

编程Tag： 标签浏览器面试题 css 元素页面 html import ...

本文主要是介绍HTML面试题（持续更新...），对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

本章内容为HTML的一些面试题，博主自己以前整理的基础面试题，如有整理不对的地方，请各位大大指点出来。

Doctype作用？标准模式与兼容模式（怪异模式）各有什么区别?

<!DOCTYPE>的定义和用法
<!DOCTYPE>必须在 HTML 的第一行，位于 <html> 标签前，<!DOCTYPE>不是 HTML 标签，它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。（HTML 4.01基于SGML，声明需引用 DTD ,HTML 4.01规定了三种不同声明，HTML5 中之规定了一种，HTML5 不是基于SGML，因此不作要求引入DTD，但需要<!DOCTYPE>来规范浏览器的行为）
（1）<!DOCTYPE>告知浏览器的解析器是用什么文档类型（HTML规范、XHTML规范）去解析。
<!DOCTYPE>不存在或格式不正确会导致文档以兼容模式呈现。

（2）标准模式的排版和 JS运作模式都是以浏览器支持的最高标准运行。
在兼容模式中，页面以宽松的向后兼容的方式显示，模拟老式浏览器的行为以防止站点无法工作。
Standards — 标准模式，用于呈现遵循最新标准的网页
Quirks — 兼容模式，用于呈现为传统浏览器而设计的网页

具体区别如下：
盒模型
严格模式：width是内容宽度，元素真正的宽度=width
兼容模式：width=width+padding+border

兼容模式下可以设置百分比的高度和行内元素的高宽
标准模式下给 span 等行内元素设置 width 和 height 都不会生效，并且，一个元素的高度都是由其包含的内容来决定的，如果父元素没有设置高度，子元素设置一个百分比的高度是无效的，而在兼容模式下会生效

用 margin:0 auto 设置水平居中在 IE 下会失效
用 margin:0 auto 在标准模式下可以使元素水平居中，在兼容模式下失效可以用 text-align 属性解决

在兼容模式下 table 中的字体属性是不能继承上层设置的， white-space:pre 会失效，设置图片的 padding 也会失效

行内元素有哪些？块级元素有哪些？可变元素有哪些？空(void)元素有哪些？

Q：行内元素
A：a、abbr、b、span、img、input、select、strong、
Q：行内元素
A：div、ul、ol、li、dl、dt、dd、h1-h6、p、hr、table、
Q：可变元素（根据上下文语境决定该元素为块元素或者内联元素）
A：button、del、iframe、ins、map、object、script
Q：空元素（在 HTML 元素中，没有内容的 HTML 元素被称为空元素）
A：br、hr、img、link、meta、
area（定义图像映射【图像映射：带有可点击区域的图像】内部的区域）、
base（为页面上的所有链接规定默认地址或默认目标）
col（规定了 <colgroup> 元素内部的每一列的列属性，可以向整个列应用样式，而不需要重复为每个单元格或每一行设置样式。但是，H5中不再支持HTML 4.01中大部分属性！）
command（它可以定义命令按钮，比如单选按钮、复选框或按钮。只有IE9支持！！只有IE9支持！！只有IE9支持！！）
embed（定义了一个容器，用来嵌入外部应用或者互动程序（插件）。）
keygen（规定用于表单的密钥对生成器字段，当提交表单时，私钥存储在本地，公钥发送到服务器）
param（允许为插入 XHTML 文档的对象规定 run-time 设置）
source（媒介元素定义媒介资源，允许您规定可替换的视频/音频文件供浏览器根据它对媒体类型或者编解码器的支持进行选择。）
track（为诸如 video 元素之类的媒介规定外部文本轨道。用于规定字幕文件或其他包含文本的文件，当媒介播放时，这些文件是可见的）
wbr（规定在文本中的何处适合添加换行符）

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

link语法结构：

<link href="url" rel="stylesheet" type="text/css">
复制代码

@import语法结构：
@import url 多用于css文件中，把多个样式表导入到一个样式表中，在页面里面只需要导入一个样式表即可，便于修改和扩展
1.在html中

<style>
   @import url
 </style>
复制代码

2.在css中

@import url
复制代码

link 和 @import 的区别:
1.语法结构的不同
2.本质不同
属于标签，只能放入html源码里进行使用，而@import可以看作为css样式，可以引入css样式（属于html标签，而@import是css提供的）
3.页面加载
页面加载时，会被同时被加载，而@import引用的css会等到页面被加载完的时候再加载
4.兼容性。
@import只有在IE5以上才能被识别，而是html标签，无兼容问题
5.优先级
不管是还是@import ，优先级按加载顺序为参考，后加载的优先级高
6.可控性
使用js控制dom改变样式只能使用标签

为什么要避免使用css @import
在web前端优化的建议中，不建议使用css @import 因为这种方式加载css相当于把css放在了底部，因此@import会在网页加载中增加延迟
至于为什么会增加延迟是因为使用@import引用的文件只有字引用它的那个css文件被下载、解析后，浏览器才会知道还有另一个css需要下载，这时才会去进行想在，然后再解析、构建render tree等一系列操作。因此css @import引起的css解析延迟会加长页面留白期，所以要尽量避免css @import，采用标签的方式引入

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

渲染引擎和 JS 引擎

渲染引擎：负责取得网页的内容（html、xml 和图像等），整理讯息（例如加入css），以及计算网页的显示方式，然后输出到显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同，所以渲染的效果也不同。所有网页浏览器、电子邮箱客户端以及其它需要编辑、显示网络内容的应用程序都需要内核

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

常用的浏览器内核有哪些？
Trident 内核：IE、360
Gecko 内核：Netscape6及以上版本
Presto 内核：Opera
Blink 内核：Opera；
Webkit 内核：Safari、Chrome

Html 5 有哪些新特性

附件www.cnblogs.com/vicky1018/p…
1、语义化标签

<header>	文档的头部
<footer>	文档的尾部
<nav>	文档的导航
<section>	文档中的节（区段）
<article>	页面独立的内容区域
<aside>	页面的侧边栏
<detailes>	用于描述文档或文档某个部分的细节
<summary>	标签包含 details 元素的标题
<dialog>	定义对话框，比如提示框

2、增强型表单
input输入类型
color、date、datetime、datetime-local、email、month、number、range、search、tel、time、url、week
表单元素
datalist、keygen、output
表单属性
placehoder、required、pattern、min、max、step、height、width、autofocus、multiple
3、视频和音频
audio

<audio controls>
	<source src="hello.ogg" type="audio/ogg">
	<source src="hello.mp3" type="audio/mpeg">
  你的浏览器不支持 audio 元素
</audio>
复制代码

control 供添加播放、暂停和音量控件
目前 audio 支持 MP3、Wav、Ogg

video

<video width="320" height="240" controls>
	<source src="hello.ogg" type="video/ogg">
	<source src="hello.mp3" type="video/mpeg">
  你的浏览器不支持 video 元素
</video>
复制代码

control 供添加播放、暂停和音量控件，也可以使用 dom 操作来控制视频的播放与暂停

video 支持多个 source 元素，元素可以链接不同的视频文件，
目前 video 支持 MP4、WabM、Ogg

4、canvas

5、SVG 绘图
SVG 是指可伸缩的矢量图形

SVG 与 Canvas 两者间的区别

SVG 是一种使用 XML 描述 2D 图形的语言
Canvas 通过 JavaScript 来绘制 2D 图形
SVG 基于 XML，这意味着 SVG DOM 中的每个元素都是可用的，可以为某个元素附加 JavaScript 事件处理器
在 SVG 中，每个被绘制的图形均被视为对象，如果 SVG 对象的属性发生变化，那么浏览器能够自动重现图形
Canvas 是逐渐像素进行渲染的。在 canvas 中，一旦图形被绘制完成，它就不会继续得到浏览器的关注。如果其位置发生变化，那么整个场景也需要重新绘制，包括任何或许已被图形覆盖的对象

6、地理定位
HTML 5 Geolocation（地理定位）用于定位用户的位置

7、拖放API

8、Web Worker

9、Web Storage

10、WebSocket
WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。在 WebSocket API 中，浏览器和服务器只需要做一个握手的动作，然后，浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据相互传送。浏览器通过 JavaScript 向服务器发出建立 WebSocket 连接的请求，连接建立以后，客户端和服务端就可以通过 TCP 连接直接交换数据。当你获取 Web Scoket 连接后，你可以通过 send() 方法来向服务器发送数据，并通过 onmessage 事件来接收服务器返回的数据

如何处理HTML5新标签的浏览器兼容问题？

一、
1.使用静态资源的 html5shiv 包

<!--[if lt IE9]>
<script src="http://cdn.static.runoob.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
<![endif]-->
复制代码

2.载入后，初始化新标签的 css

header, section, footer, aside, nav, main, article, figure { display: block; }
复制代码

二、IE6/IE7/IE8支持通过document方法产生的标签，利用这一特性让这些浏览器支持HTML5新标签

webSocket如何兼容低浏览器？(阿里)

Adobe Flash Socket 、 ActiveX HTMLFile (IE) 、基于 multipart 编码发送 XHR 、基于长轮询的 XHR

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

使用合理、正确的标签来展示内容，指对文本内容的结构化（内容语义化），选择合乎语义的标签（代码语义化），便于开发者阅读，维护和写出更优雅的代码的同时，让浏览器的爬虫和辅助技能更好的解析

语义化的优点
易于阅读；样式丢失的时候能让页面呈现清晰结构
有利于SEO；
语义化更具可读性；
代码更好维护；

HTML5的离线储存怎么使用，工作原理能不能解释一下？

在用户没有与因特网连接时，可以正常访问站点或应用，在用户与因特网连接时，更新用户机器上的缓存文件。
原理：HTML5的离线存储是基于一个新建的 .appcache 文件的缓存机制（不是存储技术），通过这个文件上的解析清单离线存储资源，这些资源就会像 cookie 一样被存储下来，之后当网络在处于离线状态下时，浏览器会通过被离线存储的数据进行页面展示。
更新缓存：一旦应用被缓存，它就会保持缓存知道发生下列情况：1、用户清空浏览器缓存 2、manifest 文件被修改 3、由程序来更新应用缓存
如何使用：1、页面头部下面加入一个 manifest 的属性

<!DOCTYPE HTML>
<html manifest="cache.manifest">
...
</html>
复制代码

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

CACHE MANIFEST
#v0.11

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

NETWORK:
resourse/logo.png

FALLBACK:
//404.html
复制代码

manifest（即 .appcache 文件）文件是简单的文本文件，分为三个部分：
CACHE：在此标题下列出的文件将在首次下载后进行缓存（由于包含 manifest 文件的页面将被自动离线存储，所以不需要把页面自身也列出来）
NETWORK：在此标题下列出的文件需要与服务器的链接，且不会被缓存，离线时无法使用。
可以使用 "*" 来指示所有其他资源/文件都需要因特网链接
（如果再 CACHE 和 NETWORK 中有一个相同的资源，那么这个资源还是会被离线存储，也就是说 CACHE 的优先级更高）
FALLBACK：在此标题下列出的文件规定当页面无法访问时的回退页面。如上面页面表示的是如果访问根目录下任何一个资源失败了，那么就去访问offline.html

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

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

请描述一下 cookies，sessionStorage 和 localStorage 的区别？

共同点：都是保存在浏览器端，且同源的
区别：
1、存储大小
cookie 数据的大小不能超过 4k
sessionStorage 和 localStorage 虽然也有存储大小的限制，但比 cookie 大得多，可以达到 5M 或更大
2、有效时间
cookie 设置的 cookie 过期时间之前一直有效，及时窗口或浏览器关闭
sessionStorage 数据在当前浏览器窗口关闭后自动删除
localStorage 存储持久数据，浏览器关闭后数据不丢失，除非主动删除数据
3、数据域服务器之间的交互方式
cookie 的数据会自动的传递到服务器，服务器端也可以写 cookie 到客户端（每请求一个新的页面时，cookie都会被发送过去，无形中造成宽带浪费）
sessionStorage 和 localStorage 不会自动把数据发给服务器，仅在本地保存
4、作用域
sessionStorage 不在不同的浏览器窗口共享，即使是同一个页面
localStorage 和 cookies 是在所有同源窗口中共享的
5、适用情况
cookies 数据始终在同源的 http 请求中携带（即使不需要），适合保存很小的数据
sessuibStorage 和 localStorage 不会自动的将数据发送给服务器，仅在本地存储

如何实现浏览器内多个标签页之间的通信? (阿里)

方法一：使用 localStorage
localstorage 是浏览器多个标签共用的存储空间，所以可以用来实现多标签之间的通信（session 是会话级的存储空间，每个标签页都是单独的）
使用 localStorage.setItem(key,value) 添加内容
使用 storage 事件监听添加、修改、删除的动作

window.addEventListener("storage",function(event){
  console.log(event.key+"="+event.newValue);
});
复制代码

onstorage 以及 storage 事件，针对都是非当前页面对 localStorage 进行修改时才会触发，当前页面修改 localStorage 不会触发监听函数，然后就是在对原有的数据的值进行修改时才会触发

方法二：使用 cookie + setInterval
在页面A设置一个使用 setInterval 定时器不断刷新，检查 cookies 的值是否发生变化，如果变化就进行刷新的操作
由于cookies 是在同域可读的，所以在页面B审核的时候改变 cookies 的值，页面A自然是可以拿到的
这样的方法相当浪费资源

方法三：WebSocket 通讯
WebSocket 是 HTML5 新增的协议，它的目的是在浏览器与服务器之间建立一个不受限的双向通信的通道。如：服务器可以在任意时刻发送消息给浏览器。
WebSocket 利用了 HTTP 协议来建立连接（HTTP协议不能做到 WebSocket 实现的功能，因为 HTTP 协议是一个请求 - 响应协议，请求必须先由浏览器发送给服务器，服务器才能响应这个请求，再把数据发送给浏览器）
浏览器用 wss://xxx 创建 WebSocket 连接时，会先通过 HTTPS 创建安全的链接，然后，该 HTMLS 链接升级为 WebSocket 连接，底层通信走的仍然是安全的 SSL/TLS 协议
特点：
（1）建立在 TCP 协议上，服务器端的实现比较容易
（2）与 HTTP 协议有着良好的兼容性，默认端口也是80和443，并且握手阶段采用 HTTP 协议，因此握手时不容易屏蔽，能通过各种 HTTP 代理服务器
（3）数据格式比较轻量，性能开销小，通信高效
（4）可以发送文本，也可以发送二进制数据
（5）没有同源限制，客户端可以任意与服务器通信
（6）协议标识符是 ws（如果加密，魏wss），服务器网址就是URL

方法四：SharedWorker
普通的 webworker 直接使用 new Worker() 即可创建，这种 webworker 是当前页面专有的，还有种共享 worker（SharedWorker），这种是可以多标签页，iframe 共同使用的
SharedWorker 可以被多个 window 共同使用，但必须保证这些标签页都是同源的（相同协议、主机和端口号）
首先创建一个 worker.js

// sharedWorker所要用到的js文件，不必打包到项目中，直接放到服务器即可
let data = ''
onconnect = function (e) {
  let port = e.ports[0]

  port.onmessage = function (e) {
    if (e.data === 'get') {
      port.postMessage(data)
    } else {
      data = e.data
    }
  }
}
复制代码

webworker 端的代码就如上，只需要注册一个 onmessage 监听信息的事件，客户端（即使用 sharedWorker 的标签页）发送 message 时就会触发
（PS：webworker 无法在本地使用，出于浏览器本身的安全机制，）
因为客户端和 webworker 端的通信不像 websocket 那样式全双工的，所以客户端发送数据和接收数据要分为两步来处理。
webworker 端会进行判断，传递的数据都为'get'时，就把变量 data 的值传回给客户端，其他情况，则把客户端传递过来的数据存储到data变量中
客户端的代码如下：

// 这段代码是必须的，打开页面后注册SharedWorker，显示指定worker.port.start()方法建立与worker间的连接
    if (typeof Worker === "undefined") {
      alert('当前浏览器不支持webworker')
    } else {
      let worker = new SharedWorker('worker.js')
      worker.port.addEventListener('message', (e) => {
        console.log('来自worker的数据：', e.data)
      }, false)
      worker.port.start()
      window.worker = worker
    }
// 获取和发送消息都是调用postMessage方法，我这里约定的是传递'get'表示获取数据。
window.worker.port.postMessage('get')
window.worker.port.postMessage('发送信息给worker')
复制代码

页面A发送数据给 worker，然后打开页面B，调用 window.worker.port.postMessage('get')，即可收到页面A发送给 worker 的数据

附件 developer.mozilla.org/zh-CN/docs/…

三次握手和四次挥手

附件 blog.csdn.net/qzcsu/artic…
blog.csdn.net/ityouknow/a…

三握：
客户端 - 发送带有 SYN 标志的数据包 - 一次握手 - 服务端
服务端 - 发送带有 SYN/ACK 标志的数据包 - 二次握手 - 客户端
客户端 - 发送带有 ACK 标志的数据包 - 三次握手 - 服务端

四挥：
客户端 - 发送一个 FIN ，用来关闭客户端到服务器的数据传送
服务器 - 收到这个 FIN，它发回一个 ACK，确认序号为收到的序号加一，和 YSN 一样，一个 FIN 将占用一个序号
服务器 - 关闭与客户端的连接，发送一个 FIN 给客户端
客户端 - 发回 ACK 报文确认，并将确认序号设置为收到序号加一

iframe有那些缺点？

1、阻塞主页面的 onl oad 事件
2、iframe 和主页面共享链接池，而浏览器对相同域的链接有限制，会影响页面的并行加载
（PS：最好通过 js 动态给 iframe 添加 src 属性值，这样可以绕开上面两个问题）
3、搜索引擎的检索程序无法解读这种页面，不利于 SEO；

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

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

<!-- 用法一 -->
<label for="Name">Number:</label>
<input type="text" name="Name" id="Name"/>
<!-- 用法二 -->
<label>Date:<input type="text" name="B"/></label>
复制代码

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

自动完成：autocomplete 属性规定表单是否应该启用自动完成功能，它自动完成允许浏览器预测对之前键入过的值
如何关闭：
1、在 IE 的 Internet 选项菜单里的内容 -- 自动完成里面设置
2、设置 Form 的 autocomplete 为 "on" 或者 "off" 来开启或者关闭自动完成功能
3、设置输入框的 autocomplete 为 "on" 或者 "off" 来开启或者关闭该输入框的自动完成功能

页面可见性（Page Visibility API）可以有哪些用途？

页面可见性：我们能看到的页面
用途：
网站轮播、只有在观看时，展示下一显示信息
仪表盘不希望在页面不可见时轮询服务器进行更新
页面想要检测是否正在渲染，以便可以准确的计算网页浏览量
当用户进入页面播放，离开页面暂停
登陆同步
计算在线时长
在线聊天离开状态

使用：
document.hidden 根据浏览器窗口的状态返回布尔值 true 或 false
document.visibilityState 存储具体的状态字符串，四种状态：
visible：页面内容至少是部分可见，非最小化窗口的前景选择器
hidden：页面内容对用户不可见，可以是一个后台标签，或是最小化窗口的一部分，或是在操作系统锁屏激活的状态下
prerender：页面内容正在被预渲染且没有对用户是不可见的
unloaded：页面正在从内存中卸载

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

1、mep + area

<img src="t.jpg" width="1366" height="768" border="0" usemap="#Map" />
<map name="Map" id="Map">
 <area shape="circle" coords="821,289,68" href="www.baidu.com" target="_blank" />
</map>
复制代码

2、border-radius
3、纯js

document.οnclick=function(e){
    var r=50;//圆的半径
var x1=100,y1=100,x2= e.clientX;y2= e.clientY;
//计算鼠标点的位置与圆心的距离
    var len=Math.abs(Math.sqrt(Math.pow(x2-x1,2)+Math.pow(y2-y1,2)));
    if(len<=50){
        console.log("内")
    }else{
        console.log("外")
    }
 }
复制代码

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

<div style="height:1px;overflow:hidden;background:red"></div>
复制代码

网页验证码是干嘛的，是为了解决什么安全问题？

用于人机识别，区分人的操作行为和机器行为。
可以防止恶意破解密码，刷票，论坛灌水
有效防止***对某人特定注册用户用特定程序暴力破解方式进行不断的登录尝试

这篇关于HTML面试题（持续更新...）的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！