前端HTML常见面试题

前言

• 三天一更，今晚给大家整理的是前端HTML常见面试题。

正文开始

HTML5有哪些更新

1. 语义化标签

section元素，表示页面中的一个内容区块。

article元素，表示页面中的一块与上下文不相关的独立内容。

aside元素，表示article元素的内容之外的，与article元素的内容相关的辅助信息。

header元素，表示页面中一个内容区块或整个页面的标题。

hgroup元素，用于对整个页面或页面中一个内容区块的标题进行组合。

footer元素，表示整个页面或页面中一个内容区块的脚注。

nav元素，表示页面中导航链接的部分。

figure元素，表示一段独立的流内容，一般表示文档主体流内容中的一个独立单元。

2. 媒体标签

（1） audio：音频

<audio src="someaudio.mp3">您的浏览器不支持 audio 标签。
</audio>

属性：

（2）video视频

<video src="movie.mp4" controls>您的浏览器不支持 video 标签。</video>

属性：

（3）source标签

• 标签为媒介元素（比如 和 ）定义媒介资源。 标签允许您规定可替换的视频/音频文件供浏览器根据它对媒体类型或者编解码器的支持进行选择。

<audio controls>
      <source src="" >
      <source src="" >
    Your browser does not support the audio element.
</audio>

3. 表单

表单类型：
同样，除了新增的这些音频和视频之外，html5还对表单进行了新增，这些标签一般都会代表一个形式，例如 type 为 email 的话，那么输入框内会自动验证是否是email，如果不是会提示用户请输入正确的email地址。

// 新增 众多 type属性
<input type="" />

<!-- 限制用户输入必须为 email 类型 -->
<input type="email">

<!-- 限制用户输入必须为 URL 类型 -->
<input type="url">

<!-- 限制用户输入必须为 日期 类型 -->
<input type="date">

<!-- 限制用户输入必须为 时间 类型 -->
<input type="time">

<!-- 限制用户输入必须为 月 类型 -->
<input type="month">

<!-- 限制用户输入必须为 周 类型 -->
<input type="week">

<!-- 限制用户输入必须为 数字 类型 -->
<input type="number">

<!-- 限制用户输入必须为 手机号码 类型 -->
<input type="number">

<!-- 搜索框 -->
<input type="search">

<!-- 生成一个颜色选择表单 -->
<input type="color">

表单属性：

• placeholder ：提示信息
• autofocus ：自动获取焦点
• autocomplete=“on” 或者 autocomplete=“off” 使用这个属性需要有两个前提：
  • 表单必须提交过
  • 必须有name属性。
• required：要求输入框不能为空，必须有值才能够提交。
• pattern=" " 里面写入想要的正则模式，例如手机号patte="^(+86)?\d{10}$"
• multiple：可以选择多个文件或者多个邮箱
• form=" form表单的ID"

表单事件：

• oninput 每当input里的输入框内容发生变化都会触发此事件。
• oninvalid 当验证不通过时触发此事件。

4. 进度条、度量器

• progress标签：用来表示任务的进度（IE、Safari不支持），max用来表示任务的进度，value表示已完成多少
• meter属性：用来显示剩余容量或剩余库存（IE、Safari不支持）
  • high/low：规定被视作高/低的范围
  • max/min：规定最大/小值
  • value：规定当前度量值

设置规则：min < low < high < max

5.DOM查询操作

• document.querySelector()
• document.querySelectorAll()

它们选择的对象可以是标签，可以是类(需要加点)，可以是ID(需要加#)

6. Web存储

HTML5 提供了两种在客户端存储数据的新方法：

• localStorage

特点：
1、永久存储
2、多窗口共享
3、容量大约 20MB
常用方法：

<script>
    window.localStorage.setItem(key, value);   // 设置存储内容
    window.localStorage.getItem(key);          // 获取存储内容
    window.localStorage.removeItem(key);       // 删除存储内容
    window.localStorage.clear();               // 清空内容
</script>

• sessionStorage

特点：
1、生命周期为关闭当前浏览器窗口，关闭当前窗口存储的数据就会消失
2、可以在同一窗口下访问，不会多窗口共享
3、数据大约为 5 MB
常用方法：

<script>
    window.sessionStorage.setItem(key, value);   // 设置存储内容
    window.sessionStorage.getItem(key);          // 获取存储内容
    window.sessionStorage.removeItem(key);       // 删除存储内容
    window.sessionStorage.clear();               // 清空内容
</script>

总结：

（1）新增语义化标签：nav、header、footer、aside、section、article

（2）音频、视频标签：audio、video

（3）数据存储：localStorage、sessionStorage

（4）canvas（画布）、Geolocation（地理定位）、websocket（通信协议）

（5）input标签新增属性：placeholder、autocomplete、autofocus、required

（6）history API：go、forward、back、pushstate

移除的元素有：

• 纯表现的元素：basefont，big，center，font, s，strike，tt，u;
• 对可用性产生负面影响的元素：frame，frameset，noframes；

行内元素和块级元素

• 行内元素有：a b span img input select strong；
• 块级元素有：div ul ol li dl dt dd h1 h2 h3 h4 h5 h6 p；

空元素，即没有内容的HTML元素。空元素是在开始标签中关闭的，也就是空元素没有闭合标签：

• 常见的有：<br>、<hr>、<img>、<input>、<link>、<meta>；
• 不常见的有：<area>、<base>、<col>、<colgroup>、<command>、<embed>、<keygen>、<param>。

HTML公共属性

HTML自定义属性

• 使用 data-* 属性来嵌入自定义数据：

<ul>
  <li data-animal-type="鸟类">喜鹊</li>
  <li data-animal-type="鱼类">金枪鱼</li> 
  <li data-animal-type="蜘蛛">蝇虎</li> 
</ul>

定义和用法

• data-* 属性用于存储页面或应用程序的私有自定义数据。

• data-* 属性赋予我们在所有 HTML 元素上嵌入自定义 data 属性的能力。

• 存储的（自定义）数据能够被页面的 JavaScript 中利用，以创建更好的用户体验（不进行 Ajax 调用或服务器端数据库查询）。

• data-* 属性包括两部分：

  • 属性名不应该包含任何大写字母，并且在前缀 "data-" 之后必须有至少一个字符
  • 属性值可以是任意字符串

注释：用户代理会完全忽略前缀为 "data-" 的自定义属性。

data-* 属性是 HTML5 中的新属性。

<element data-*="somevalue">

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

• 渐进增强：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。
• 优雅降级：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。
• 区别：优雅降级是从复杂的现状开始，并试图减少用户体验的供给，而渐进增强则是从一个非常基础的，能够起作用的版本开始，并不断扩充，以适应未来环境的需要。　“优雅降级”观点认为应该针对那些最高级、最完善的浏览器来设计网站。而将那些被认为“过时”或有功能缺失的浏览器下的测试工作安排在开发周期的最后阶段，并把测试对象限定为主流浏览器（如 IE、Mozilla 等）的前一个版本。在这种设计范例下，旧版的浏览器被认为仅能提供“简陋却无妨”的浏览体验。你可以做一些小的调整来适应某个特定的浏览器。但由于它们并非我们所关注的焦点，因此除了修复较大的错误之外，其它的差异将被直接忽略。“渐进增强”观点则认为应关注于内容本身。内容是我们建立网站的诱因。有的网站展示它，有的则收集它，有的寻求，有的操作，还有的网站甚至会包含以上的种种，但相同点是它们全都涉及到内容。这使得“渐进增强”成为一种更为合理的设计范例。这也是它立即被 Yahoo! 所采纳并用以构建其“分级式浏览器支持”策略的原因所在。　　

DOCTYPE(文档类型) 的作用

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

浏览器渲染页面的两种模式：

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

怪异模式和标准模式有什么区别？

• 盒模型： 在W3C标准中，如果设置一个元素的宽度和高度，指的是元素内容的宽度和高度，而在Quirks 模式下，IE的宽度和高度还包含了padding和border。
• 设置行内元素的高宽： 在Standards模式下，给等行内元素设置wdith和height都不会生效，而在quirks模式下，则会生效。
• 设置百分比的高度： 在standards模式下，一个元素的高度是由其包含的内容来决定的，如果父元素没有设置百分比的高度，子元素设置一个百分比的高度是无效的;用margin:0 auto设置水平居中：使用margin:0 auto在standards模式下可以使元素水平居中，但在quirks模式下却会失效。

Canvas和SVG的区别

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

其特点如下：

• 不依赖分辨率
• 支持事件处理器
• 最适合带有大型渲染区域的应用程序
• 复杂度高会减慢渲染速度
• 不适合游戏应用

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

其特点如下：

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

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

常见的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：页面上的链接不可以被查询。

单页应用和多页应用

单页应用

• 每一次页面跳转，不会出现新的HTML文档，但页面会跟着改变。原因是JavaScript会感知到页面UIL的变化，感知到变化之后，将当前页面的内容清除，然后挂载上下一个页面的内容。也就是说，单页应用是通过JS渲染来跳转页面。
• 优点：页面切换快，不需要加载HTML文件，减少http请求、发送的时延。
• 缺点：首屏时间稍慢，因为需要发送一个http请求和js请求，当两个请求都返回时，首屏才可以展示；SEO效果差。

多页应用

• 每一次页面的跳转，后台服务器都会返回一个新的HTML文档，这样的网站我们称之为多页网站,也叫多页面应用。简单来说，多页应用是通过http请求来跳转页面。
• 优点：首屏时间快，即页面首个页面展现出来的时间短；SEO效果好。
• 缺点：页面切换慢，因为每一次跳转页面都要发送一次http请求，假设网络非常慢，则跳转的时候会出现卡顿的情况。

HTML语义化

什么是 HTML 语义化？

• 根据内容的结构化（内容语义化），选择合适的标签（代码语义化）便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器很好地解析。

为什么要语义化？

• 为了在没有CSS的情况下，页面也能呈现出很好地内容结构、代码结构 : 为了裸奔时好看；
• 用户体验：例如title、 alt 用于解释名词或解释图片信息、 label 标签的活用；
• 有利于SEO：和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息：爬虫依赖于标签来确定上下文和各个关键字的权重；
• 方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以意义的方式来渲染网页；
• 便于团队开发和维护，语义化更具可读性，是下一步网页的重要动向，遵循W3C标准的团队都遵循这个标准，可以减少差异化。

link和@import的区别

• 区别1： link 是 XHTML 标签，除了加载 CSS 外，还可以定义 RSS 等其他事务； @import 属于 CSS 范畴，只能加载 CSS 。
• 区别2： link 引用 CSS 时，在页面载入时同时加载； @import 需要页面网页完全载入以后加载。
• 区别3： link 是 XHTML 标签，无兼容问题； @import 是在 CSS2.1 提出的，低版本的浏览器不支持。
• 区别4： link 支持使用 Javascript 控制 DOM 去改变样式；而 @import 不支持。

超链接target属性的取值和作用？

• target这个属性指定所链接的页面在浏览器窗口中的打开方式。

它的参数值主要有：

• _blank ：在新浏览器窗口中打开链接文件
• _parent ：将链接的文件载入含有该链接框架的父框架集或父窗口中。如果含有该链接的框架不是嵌套的，则在浏览器全屏窗口中载入链接的文件，就像 _self 参数一样。
• _self ：在同一框架或窗口中打开所链接的文档。此参数为默认值，通常不用指定。
• _top ：在当前的整个浏览器窗口中打开所链接的文档，因而会删除所有框架。

iframe优缺点

优点

• iframe能够原封不动的把嵌入的网页展现出来。
• 如果有多个网页引用iframe，那么只需要修改iframe的内容，就可以实现调用每一个页面的更改，方便快捷。
• 网页如果为了统一风格，头部和版本都是一样的，就可以写成一个页面，用iframe嵌套，可以增加代码的可重用。
• 如果遇到加载缓慢的第三方内容，如图标或广告，这些问题可以由iframe来解决。

缺点

• iframe会阻塞主页面的 Onload 事件；
• 搜索引擎的检索程序无法解读这种页面，不利于 SEO;
• iframe和主页面共享连接池，而浏览器对相同域的连接有限制，所以会影响页面的并行加载。
• 使用iframe之前需要考虑这两个缺点。如果需要使用 iframe ，最好是通过 javascript动态给iframe添加 src 属性值，这样可以绕开以上两个问题。

src与href的区别

src和href都是用来引用外部的资源，它们的区别如下：

• src： 表示对资源的引用，它指向的内容会嵌入到当前标签所在的位置。src会将其指向的资源下载并应⽤到⽂档内，如请求js脚本。当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执⾏完毕，所以⼀般js脚本会放在页面底部。
• href： 表示超文本引用，它指向一些网络资源，建立和当前元素或本文档的链接关系。当浏览器识别到它他指向的⽂件时，就会并⾏下载资源，不会停⽌对当前⽂档的处理。 常用在a、link等标签上。

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

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

label标签的作用

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

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

主流浏览器机器内核

html 中 title 属性和 alt 属性的区别

<img src="#" alt="alt信息" />

当图片不输出信息的时候，会显示 alt 信息 鼠标放上去没有信息，当图片正常读取，不会出现 alt 信息。

<img src="#" alt="alt信息" title="title信息" />

• 当图片不输出信息的时候，会显示 alt 信息 鼠标放上去会出现 title 信息；
• 当图片正常输出的时候，不会出现 alt 信息，鼠标放上去会出现 title 信息。
• 除了纯装饰图片外都必须设置有意义的值，搜索引擎会分析。

分割线

• 以上为前端HTML常见面试题，HTML方面的知识点主要集中在对标签功能和运用的熟练程度，笔者在几十场面试过程发现这部分知识点在一面基础知识提问过程可能会提及到，而且面试者容易觉得简单而忽视它，如果这部分知识点不注意复习，面试过程回答不上会给面试官留下基础不扎实的印象，所以大家还需要注意这部分知识的学习，尽可能完善自己的知识面。
• 最后，还是那句话，面筋只是给大家一个复习的方向，不能仅靠背诵八股来通过面试，最重要的是根据面筋来形成自己的知识面，查漏补缺。希望看完有收获请点个赞，在此感激不尽！
• 后续将更新Vue框架的知识，今晚就先写到这啦，歇会去了- -