HTML面试题汇总

引言

在Web开发中，HTML是基础中的基础，因此，具备扎实的HTML基础知识对于一个前端工程师来说是非常重要的。

1、HTML基础

1.1、DOCTYPE(⽂档类型) 的作⽤

DOCTYPE是HTML5中一种标准通用标记语言的文档类型声明，它的目的是告诉浏览器（解析器）应该以什么样（html或xhtml）的文档类型定义来解析文档，不同的渲染模式会影响浏览器对CSS代码甚⾄JavaScript脚本的解析。

值的注意的是，它必须声明在HTML⽂档的第⼀⾏。

浏览器渲染页面的两种模式（可通过document.compatMode获取）：

  • CSS1Compat：标准模式（Strick mode），默认模式，浏览器使用W3C的标准解析渲染页面。在标准模式中，浏览器以其支持的最高标准呈现页面。
  • BackCompat：怪异模式(混杂模式)(Quick mode)，浏览器使用自己的怪异模式解析渲染页面。在怪异模式中，页面以一种比较宽松的向后兼容的方式显示。

1.2、你对meta标签有什么了解

meta 标签由 name 和 content 属性定义，用来描述网页文档的属性，比如网页的作者，网页描述，关键词等，除了HTTP标准固定了一些name作为大家使用的共识，开发者还可以自定义name。

常用的meta标签：

（1）charset，用来描述HTML文档的编码类型：

<meta charset="UTF-8" >

（2） keywords，页面关键词：

<meta name="keywords" content="关键词" />

（3）description，页面描述：

<meta name="description" content="页面描述内容" />

（4）refresh，页面重定向和刷新：

<meta http-equiv="refresh" content="0;url=" />

（5）viewport，适配移动端，可以控制视口的大小和比例：

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

其中，content 参数有以下几种：

  • width viewport ：宽度(数值/device-width)
  • height viewport ：高度(数值/device-height)
  • initial-scale ：初始缩放比例
  • maximum-scale ：最大缩放比例
  • minimum-scale ：最小缩放比例
  • user-scalable ：是否允许用户缩放(yes/no）

（6）搜索引擎索引方式：

<meta name="robots" content="index,follow" />
复制代码

其中，content 参数有以下几种：

  • all：文件将被检索，且页面上的链接可以被查询；
  • none：文件将不被检索，且页面上的链接不可以被查询；
  • index：文件将被检索；
  • follow：页面上的链接可以被查询；
  • noindex：文件将不被检索；
  • nofollow：页面上的链接不可以被查询。

1.3、script标签中defer和async的区别

如果没有defer或async属性，浏览器会立即加载并执行相应的脚本。它不会等待后续加载的文档元素，读取到就会开始加载和执行，这样就阻塞了后续文档的加载。

defer和async属性都是去异步加载外部的JS脚本文件，它们都不会阻塞页面的解析，其区别如下：

  • 执行顺序：
    • 多个带async属性的标签，不能保证加载的顺序。
    • 多个带defer属性的标签，按照加载顺序执行。
  • 脚本是否并行执行：
    • async属性，表示后续文档的加载和执行与js脚本的加载和执行是并行进行的(异步执行)。
    • defer属性，加载后续文档的过程和js脚本的加载(此时仅加载不执行)是并行进行的(异步)，js脚本需要等到文档所有元素解析完成之后才执行，DOMContentLoaded事件触发执行之前。

1.4、HTML、XML、XHTML 的区别

  • HTML：超文本标记语言，是语法较为松散的、不严格的Web语言。
  • XML：可扩展的标记语言，主要用于存储数据和结构，可扩展。
  • XHTML：可扩展的超文本标记语言，基于XML，作用与HTML类似，但语法更严格。

1.5、行内元素有哪些？块级元素有哪些？ 空(void)元素有那些？

  • 行内元素： a, b, span, img, input, select, strong。
  • 块级元素： div, ul, li, dl, dt, dd, h1-5, p。
  • 空元素： <br>, <hr>, <img>, <link>, <meta>。

1.6、行内元素和块级元素的区别?

行内元素：　　

  • 与其他行内元素并排
  • 不能设置宽高，默认的宽度就是文字的宽度

注意有一个特例：行内快，它不独占一行，可以设置宽高。

块级元素：

  • 独占一行，不能与其他任何元素并列。
  • 能设置宽高，如果不设置宽度，那么宽度将默认变为父级的100%。

1.7、行内元素和块级元素之间的转化?

主要用到一个属性，那就是display，可以通过设置display属性来实现元素之间的转化。

  • 转化为行内元素：display: inline;
  • 转化为块级元素：display: block;
  • 转化为行内块元素：display: inline-block'

1.8、标签上title属性与alt属性的区别是什么?

  • alt是为了在图片未能正常显示时（屏幕阅读器）给予文字说明。且长度必须少于100个英文字符或者用户必须保证替换文字尽可能的短。
  • title属性为设置该属性的元素提供建议性的信息。使用title属性提供非本质的额外信息。

1.9、input与textarea的区别

  • input：是单行文本框，不会换行。通过size属性指定显示字符的长度，注意：当使用css限定了宽高，那么size属性就不再起作用。value属性指定初始值，Maxlength属性指定文本框可以输入的最长长度。可以通过width和height设置宽高，但是也不会增加行数。

  • textarea：是多行文本输入框，文本区中可容纳无限数量的文本，无value属性，其中的文本的默认字体是等宽字体（通常是Courier） ，可以通 过cols和rows属性来规定textarea的尺寸，不过更好的办法是使用CSS的height 和width属性。

1.10、用div模拟textarea

在div标签里面加入contenteditable="true"

<style>
  .textarea{
    min-height: 100px;
    border: 1px solid #a0b3d6; 
    width: 300px;
    font-size: 14px;
    max-height: 300px;
    overflow-y: auto;
  }
</style>
 
<body>
  <!--用div模拟textarea-->
  <div class="textarea" contenteditable="true">

  </div>
</body>

1.11、title与h1的区别、b与strong的区别、i与em的区别？

  • title与h1的区别：title属性没有明确意义只表示是个标题，H1则表示层次明确的标题，对页面信息的抓取有很大的影响。
  • b与strong的区别：strong标签有语义，是起到加重语气的效果，而b标签是没有的，b标签只是一个简单加粗标签。b标签之间的字符都设为粗体，strong标签加强字符的语气都是通过粗体来实现的，而搜索引擎更侧重strong标签。
  • i与em的区别：i内容展示为斜体，em表示强调的文本。

1.12、head标签有什么作用，其中什么标签必不可少？

head标签用于定义文档的头部，它是所有头部元素的容器。head标签中的元素可以引用脚本、指示浏览器在哪里找到样式表、提供元信息等。

下面这些标签可用在head部分：<base>, <link>, <meta>, <script>, <style>, <title>。

其中<title>定义文档的标题，它是head部分中唯一必需的元素。

1.13、浏览器乱码的原因是什么？如何解决？

产生乱码的原因：

  • 网页源代码是gbk的编码，而内容中的中文字是utf-8编码的，这样浏览器打开即会出现html乱码，反之也会出现乱码。
  • html网页编码是gbk，而程序从数据库中调出呈现是utf-8编码的内容也会造成编码乱码。
  • 浏览器不能自动检测网页编码，造成网页乱码。

解决办法：

  • 使用软件编辑HTML网页内容。
  • 如果网页设置编码是gbk，而数据库储存数据编码格式是UTF-8，此时需要程序查询数据库数据显示数据前进程序转码。
  • 如果浏览器浏览时候出现网页乱码，在浏览器中找到转换编码的菜单进行转换。

1.14、src与href有什么区别

  • src：用于替换当前元素。src是source的缩写，指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置。
  • href：用于在当前文档和引用资源之间确立联系。href是Hypertext Reference的缩写，指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接。

1.15、什么是前端的结构，样式和行为相分离？以及分离的好处是什么？

结构，样式和行为分离：

可以将前端比作一个人来举例子，结构（HTML）就相当于是人体的“骨架”，样式（CSS）就相当于人体的“装饰”，例如衣服，首饰等；行为(JavaScript)就相当于人做出的一系列“动作”。结构，样式和行为分离，就是将三者分离开，各自负责各自的内容，各部分可以通过引用进行使用。

分离的好处：

  • 代码分离，利于团队的开发和后期的维护。
  • 减少维护成本，提高可读性和更好的兼容性。

1.16、如何对网站的文件和资源进行优化

  1. 文件合并（目的是减少http请求）。
  2. 文件压缩 （目的是直接减少文件下载的体积）。
  3. 使用缓存。
  4. 使用cdn托管资源。
  5. gizp压缩需要的js和css文件。
  6. 反向链接，网站外链接优化。
  7. meta标签优化（title, description, keywords）,heading标签的优化,alt优化。

1.17、渐进增强和优雅降级之间的区别

渐进增强（progressive enhancement）：主要是针对低版本的浏览器进行页面重构，保证基本的功能情况下，再针对高级浏览器进行效果，交互等方面的改进和追加功能，以达到更好的用户体验。

优雅降级（graceful degradation）： 一开始就构建完整的功能，然后再针对低版本的浏览器进行兼容。

区别：

  • 优雅降级是从复杂的现状开始的，并试图减少用户体验的供给；而渐进增强是从一个非常基础的，能够起作用的版本开始的，并在此基础上不断扩充，以适应未来环境的需要。
  • 降级（功能衰竭）意味着往回看，而渐进增强则意味着往前看，同时保证其根基处于安全地带。

1.18、HTML中几种图片格式的区别以及使用

页面中常用的几种图片格式有: png, jpg(jpeg),gif, bmp等。

  • png格式的特征：图片背景透明，可以支持的颜色有很多。使用范围比较广，在目前使用频率最高。
  • jpg格式特征：图片不支持透明，静态图，支持的颜色也比较多，可压缩。使用范围较广，可使用作为电脑做面壁纸，手机屏保等，可根据需求来确实使用图片的分辨率。
  • gif格式特征：动态图，支持的颜色较少。在目前看到的在网站内使用频率较低。

1.19、iframe有哪些优缺点

优点：

  • iframe可以实现无刷新文件上传。
  • iframe可以跨域通信。
  • 解决了加载缓慢的第三方内容如图标和广告等的加载问题。

缺点：

  • iframe会阻塞主页面的Onload事件。
  • 无法被一些搜索引擎索引到。
  • 页面会增加服务器的http请求。
  • 会产生很多页面，不容易管理。

1.20、为什么利用多个域名来存储网站资源会更有效

  • CDN缓存更加方便。
  • 突破浏览器并发限制。
  • 节约cookie宽带。
  • 节约主域名的连接数，优化页面下响应速度。
  • 防止不必要的安全问题。

1.21、对比一下cookie和session

cookie和session都是用来跟踪浏览器用户身份的会话方式。

区别如下：

（1）保存位置：

  • cookie保存在浏览器端。
  • session保存在服务器端。

（2）使用方式：

  • cookie机制：

    • 如果不在浏览器中设置过期时间，cookie被保存在内存中，生命周期随浏览器的关闭而结束，这种cookie简称会话cookie。
    • 如果在浏览器中设置了cookie的过期时间，cookie被保存在硬盘中，关闭浏览器后，cookie数据仍然存在，直到过期时间结束才消失。
    • cookie是服务器发给客户端的特殊信息，cookie是以文本的方式保存在客户端，每次请求时都带上它。

  • session机制：

    • 当服务器收到请求需要创建session对象时，首先会检查客户端请求中是否包含sessionid。如果有sessionid，服务器将根据该id返回对应session对象。如果客户端请求中没有sessionid，服务器会创建新的session对象，并把sessionid在本次响应中返回给客户端。
    • 通常使用cookie方式存储sessionid到客户端，在交互中浏览器按照规则将sessionid发送给服务器。如果用户禁用cookie，则要使用URL重写，可以通过response.encodeURL(url)进行实现。当浏览器支持cookie时，url不做任何处理；当浏览器不支持cookie的时候，将会重写URL将sessionid拼接到访问地址后。

（3）存储内容：

  • cookie只能保存字符串类型，以文本的方式。

  • session通过类似于Hashtable的数据结构来保存，能支持任何类型的对象。

（4）存储的大小：

  • cookie：单个cookie保存的数据不能超过4kb。

  • session：大小没有限制。

（5）安全性：

  • cookie：针对cookie所存在的攻击：Cookie欺骗，Cookie截获。

  • session的安全性大于cookie。

原因如下：

（1）sessionid存储在cookie中，若要攻破session首先要攻破cookie。

（2）sessionid是要有人登录，或者启动session_start才会有，所以攻破cookie也不一定能得到sessionid。

（3）第二次启动session_start后，前一次的sessionid就是失效了，session过期后，sessionid也随之失效。

（4）sessionid是加密的。

（6）缺点：

  • cookie：

    （1）大小受限

    （2）用户可以操作（禁用）cookie，使功能受限

    （3）安全性较低

    （4）有些状态不可能保存在客户端。

    （5）每次访问都要传送cookie给服务器，浪费带宽。

    （6）cookie数据有路径（path）的概念，可以限制cookie只属于某个路径下。

  • session：

    （1）session保存的东西越多，就越占用服务器内存，对于用户在线人数较多的网站，服务器的内存压力会比较大。

    （2）依赖于cookie（sessionid保存在cookie），如果禁用cookie，则要使用URL重写，不安全。

    （3）创建session变量有很大的随意性，可随时调用，不需要开发者做精确地处理，所以，过度使用session变量将会导致代码不可读而且不好维护。

2、HTML5语义化

2.1、你是如何理解前端的语义化的

  1. 代码结构：为了在没有CSS的情况下，页面也能呈现出很好地内容结构，为了裸奔时好看。

  2. 用户体验：例如title、alt用于解释名词或解释图片信息的标签尽量填写有含义的词语、label标签的活用。

  3. 有利于SEO：和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息，爬虫依赖于标签来确定上下文和各个关键字的权重。

  4. 方便其他设备解析：（如屏幕阅读器、盲人阅读器、移动设备）以有意义的方式来渲染网页。

  5. 便于团队开发和维护：语义化更具可读性，遵循W3C标准的团队都遵循这个标准，可以减少差异化。

2.2、写HTML代码时，应该注意什么

  1. 尽可能少的使用无语义的标签div和span。
  2. 在语义不明显时，既可以使用div或者p时，尽量用p, 因为p在默认情况下有上下间距，对兼容特殊终端有利。
  3. 不要使用纯样式标签，如：b、font、u等，改用css设置。
  4. 需要强调的文本，可以包含在strong或em标签中，strong默认样式是加粗（不要用b），em是斜体（不要用i）。
  5. 使用表格时，标题要用caption，表头用thead，主体部分用tbody包围，尾部用tfoot包围。表头和一般单元格要区分开，表头用th，单元格用td。
  6. 表单域要用fieldset标签包起来，并用legend标签说明表单的用途。
  7. 每个input标签对应的说明文本都需要使用label标签，并且通过为input设置id属性，在lable标签中设置for=someld来让说明文本和相对应的input关联起来。

2.3、HTML5新增了哪些语义化标签

（1）header元素

header元素代表“网页“和”section”的页眉。通常包含H1~H6元素或者hgroup元素。整个页面没有限制header元素的个数，可以拥有多个，可以为每个内容块增加一个header元素。

header使用注意：

  • 可以是“网页”或任意“section”的头部部分。
  • 没有个数限制。
  • 如果hgroup或h1-h6自己就能工作的很好，那就不要用header。

（2）footer元素

footer元素代表“网页”或“section”的页脚，通常含有该页面的一些基本信息，例如：文档创作者的姓名、文档的版权信息、使用条款的链接、联系信息等等。

footer使用注意：

  • 可以是“网页”或任意“section”的底部部分。
  • 没有个数限制，除了包裹的内容不一样，其他跟header类似。

（3）hgroup元素

hgroup元素代表“网页”或“section”的标题，当元素有多个层级时，该元素可以将h1到h6元素放在其内，譬如文章的主标题和副标题的组合。

hgroup使用注意：

  • 如果只需要一个h1-h6标签就不用hgroup。
  • 如果有连续多个h1-h6标签就用hgroup。
  • 如果有连续多个标题和其他文章数据，h1-h6标签就用hgroup包住，和其他文章元数据一起放入header标签。

（4）nav元素

nav元素代表页面的导航链接区域。用于定义页面的主要导航部分。

nav使用注意：

  • 用在整个页面主要导航部分上，不合适就不要用nav元素。

（5）aside元素

aside元素被包含在article元素中作为主要内容的附属信息部分，其中的内容可以是与当前文章有关的相关资料、标签、名词解释等。（特殊的section）

在article元素之外使用作为页面或站点全局的附属信息部分。最典型的是侧边栏，其中的内容可以是日志串连，其他组的导航，甚至广告，这些内容相关的页面。

aside使用注意：

  • aside在article内表示主要内容的附属信息。
  • 在article之外则可做侧边栏，没有article与之对应，最好不用。
  • 如果是广告，其他日志链接或者其他分类导航也可以用

（6）article元素

article元素最容易跟section和div容易混淆，其实article代表一个在文档，页面或者网站中自成一体的内容，其目的是为了让开发者独立开发或重用。譬如论坛的帖子，博客上的文章，一篇用户的评论，一个互动的widget小工具。（特殊的section）。

article使用注意：

  • 自身独立的情况下：用article。
  • 是相关内容：用section。
  • 没有语义的：用div。

3、HTML5带来的新特性

3.1、HTML5的十大新特性

  • 语义标签
  • 增强型表单
  • 视频和音频
  • Canvas绘图
  • SVG绘图
  • 地理定位Geolocation
  • 拖放API
  • Web Worker
  • Web Storage
  • WebSocket

3.2、说一下web worker

在HTML页面中，如果在执行脚本时，页面的状态是不可相应的，直到脚本执行完成后，页面才变成可相应。

web worker是运行在后台的js，独立于其他脚本，不会影响页面的性能。 并且通过postMessage将结果回传到主线程。这样在进行复杂操作的时候，就不会阻塞主线程了。

3.3、说一下HTML5 drag API

  • dragstart：事件主体是被拖放元素，在开始拖放被拖放元素时触发。
  • darg：事件主体是被拖放元素，在正在拖放被拖放元素时触发。
  • dragenter：事件主体是目标元素，在被拖放元素进入某元素时触发。
  • dragover：事件主体是目标元素，在被拖放在某元素内移动时触发。
  • dragleave：事件主体是目标元素，在被拖放元素移出目标元素是触发。
  • drop：事件主体是目标元素，在目标元素完全接受被拖放元素时触发。
  • dragend：事件主体是被拖放元素，在整个拖放操作结束时触发。

3.4、Canvas和SVG的区别

（1）SVG：SVG可缩放矢量图形（Scalable Vector Graphics）是基于可扩展标记语言XML描述的2D图形的语言，SVG基于XML就意味着SVG DOM中的每个元素都是可用的，可以为某个元素附加Javascript事件处理器。在SVG中，每个被绘制的图形均被视为对象。如果SVG对象的属性发生变化，那么浏览器能够自动重现图形。其特点如下：

  • 不依赖分辨率
  • 支持事件处理器
  • 最适合带有大型渲染区域的应用程序（比如谷歌地图）
  • 复杂度高会减慢渲染速度（任何过度使用DOM的应用都不快）
  • 不适合游戏应用

注：矢量图，也称为面向对象的图像或绘图图像，在数学上定义为一系列由线连接的点。矢量文件中的图形元素称为对象。每个对象都是一个自成一体的实体，它具有颜色、形状、轮廓、大小和屏幕位置等属性。

（2）Canvas：Canvas是画布，通过Javascript来绘制2D图形，是逐像素进行渲染的。其位置发生改变，就会重新进行绘制。其特点如下：

  • 依赖分辨率
  • 不支持事件处理器
  • 弱的文本渲染能力
  • 能够以.png或.jpg格式保存结果图像
  • 最适合图像密集型的游戏，其中的许多对象会被频繁重绘

3.5、浏览器如何对HTML5的离线储存资源进行管理和加载

  • 有线情况下：

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

  • 在离线情况下：

    浏览器直接使用离线缓存的资源。

3.6、聊聊Web Storage

WebStorage的目的是克服由cookie所带来的一些限制，当数据需要被严格控制在客户端时，不需要持续的将数据发回服务器。

WebStorage两个主要目标：

  1. 提供一种在cookie之外存储会话数据的路径。
  2. 提供一种存储大量可以跨会话存在的数据的机制。

HTML5的WebStorage提供了两种API：

localStorage（本地存储）和sessionStorage（会话存储）。

localStorage和sessionStorage的异同：

（1）生命周期：

  • localStorage：localStorage的生命周期是永久的，关闭页面或浏览器之后localStorage中的数据也不会消失。localStorage除非主动删除数据，否则数据永远不会消失。

  • sessionStorage：sessionStorage的生命周期是在仅在当前会话下有效。sessionStorage引入了一个“浏览器窗口”的概念，sessionStorage是在同源的窗口中始终存在的数据。只要这个浏览器窗口没有关闭，即使刷新页面或者进入同源另一个页面，数据依然存在。但是sessionStorage在关闭了浏览器窗口后就会被销毁。

（2）存储大小：

localStorage和sessionStorage的存储数据大小一般都是：5MB。

（3）存储位置：

localStorage和sessionStorage都保存在客户端，不与服务器进行交互通信。

（4）存储内容类型：

localStorage和sessionStorage只能存储字符串类型，对于复杂的对象可以使用ECMAScript提供的JSON对象的stringify和parse来处理

（5）应用场景：

  • localStoragese：常用于长期登录，适合长期保存在本地的数据。

  • sessionStorage：敏感账号一次性登录；

WebStorage相比cookie的优点：

（1）存储空间更大：cookie为4KB，而WebStorage是5MB。

（2）节省网络流量：WebStorage不会传送到服务器，存储在本地的数据可以直接获取，也不会像cookie一样美词请求都会传送到服务器，所以减少了客户端和服务器端的交互，节省了网络流量。

（3）便捷：对于那种只需要在用户浏览一组页面期间保存而关闭浏览器后就可以丢弃的数据，sessionStorage会非常方便。

（4）快速显示：有的数据存储在WebStorage上，再加上浏览器本身的缓存。获取数据时可以从本地获取会比从服务器端获取快得多，所以速度更快。

（5）安全性：WebStorage不会随着HTTP header发送到服务器端，所以安全性相对于cookie来说比较高一些，不会担心截获，但是仍然存在伪造问题。

博客说明与致谢

文章所涉及的部分资料来自互联网整理，其中包含自己个人的总结和看法，分享的目的在于共建社区和巩固自己。

引用的资料如有侵权，请联系本人删除！

感谢勤劳的自己，个人博客，GitHub，公众号【归子莫】，小程序【子莫说】

如果你感觉对你有帮助的话，不妨给我点赞鼓励一下，好文记得收藏哟！

幸好我在，感谢你来！