HTML面试题

1.说说HTML语义化

HTML标签的语义化，就是用正确的标签做正确的事情，给某块内容用上适当的标签，让页面有良好的结构，页面元素有含义
优点:

• 适合搜索引擎爬虫爬取有效信息，有利于SEO。语义化还支持读屏软件，根据文字可以自动生成目录
• 增加代码的可读性，结构更清晰，就算没有样式也可以看出网页的结构

常见的语义化标签：

<h1>~<h6>标签：标题标签，h1等级最高，h6等级最低

<header></header>：用于定义页面的介绍展示区域，通常包括网站logo、主导航、全站链接以及搜索框

<nav></nav>：定义页面的导航链接部分区域

<main></main>：定义页面的主要内容，一个页面只能使用一次。

<article></article>：定义页面独立的内容，它可以有自己的header、footer、sections等

<section></section>：元素用于标记文档的各个部分，例如长表单文章的章节或主要部分

<aside></aside>：一般用于侧边栏

<footer></footer>：文档的底部信息

<small></small>：呈现小号字体效果

<strong></strong>：用于强调文本

2.script标签中defer和async的区别

• defer和async在网络加载过程是一致的，都是异步执行的；两者的区别在于脚本加载完成之后何时执行
• async，它的加载和执行是紧紧挨着的，无论声明顺序如何，只要外部js文件加载完成就立刻执行
• defer，加载文档的同时加载js脚本(此时仅加载不执行)，js脚本需要等到文档所有元素解析完成之后才执行
• 执行顺序： 多个带async属性的标签，不能保证加载的顺序；多个带defer属性的标签，按照加载顺序执行；

3.HTML5 对比 HTML4 有哪些不同之处？HTML5有哪些新特性

HTML5新增：

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

HTML5移除的元素有：

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

4.src和href的区别

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

• src: 表示对资源的引用，它指向的内用会被嵌入当前文档中，src会将指向的资源下载并且应用到该文档中，例如js脚本，浏览器解析到该元素时，会暂停其他资源的下载和处理，会直接加载、编译该资源
• href: 表示超文本引用，它指向一些网络资源，浏览器识别到文件的时候就会并行下载资源，不会停止当前文档的处理。用于a、link等标签上

5.img的srcset属性的作⽤？

因为不同的分辨率和屏幕尺寸图片显示会存在差异，在高分辨率下，就显示高分辨率的图像，或者低分辨率用户，为提供较小的图像。
通过使用 img 标签的 srcset 属性，可定义一组额外的图片集合，让浏览器根据不同的屏幕状况选取合适的图片来显示。

6.响应式图片处理优化: Picture 标签

在 picture下可放置零个或多个source标签、以及一个img标签，为不同的屏幕设备和场景显示不同的图片。
如果source匹配到了, 就会优先用匹配到的, 如果未匹配到合适的source，就使用img标签提供的图片

<picture>
  <source srcset="640.png" media="(min-width: 640px)">
  <source srcset="480.png" media="(min-width: 480px)">
  <img src="320.png" alt="">
</picture>

7.DOCTYPE(⽂档类型) 的作⽤是什么

DOCTYPE是HTML5中一种标准通用标记语言文档类型声明，它必须声明在HTML文档的第一行，目的是告诉浏览器以什么模式解析文档，不同模式会影响最终浏览器显示的结果

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

8.常⽤的meta标签有哪些

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

常用的meta标签：

charset，用来描述HTML文档的编码类型：
<meta charset="UTF-8" >

keywords，页面关键词：
<meta name="keywords" content="关键词" />

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

refresh，页面重定向和刷新：
<meta http-equiv="refresh" content="0;url=" />

viewport，适配移动端，可以控制视口的大小和比例：
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
viewport的content 参数有以下几种：
width viewport ：宽度(数值/device-width)
height viewport ：高度(数值/device-height)
initial-scale ：初始缩放比例
maximum-scale ：最大缩放比例
minimum-scale ：最小缩放比例
user-scalable ：是否允许用户缩放(yes/no）

robots，搜索引擎索引方式：
<meta name="robots" content="index,follow" />

9.行内元素有哪些？块级元素有哪些？ 空(void)元素有那些？

常见块级元素：p、div、form、ul、li、dl、dt、dd、table、h1~h6、

• 独占一行，宽度跟随父元素的100%，可以设置高度、边距

常见行级元素：span、a、img、input、select、button strong

• 宽度就是文字或者图片的宽度，不能改变
• 和其它元素都会在一行显示
• input准确的说应该是行块级元素默认样式是display:inline-block;

空元素，即没有内容的HTML元素。空元素是在开始标签中关闭的，也就是空元素没有闭合标签：
常见的有：<br>、<hr>、<img>、<input>、<link>、<meta>

使用display属性转换 inline(行)、block(块)、inline-block(行块)

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

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

11. iframe 标签有那些优点和缺点？

iframe 元素会创建包含另外一个文档的内联框架（即行内框架）
优点：

• 如果遇到加载缓慢的第三方内容如图标和广告，这些问题可以由iframe来解决
• 网页如果为了统一风格，头部和版本都是一样的，就可以写成一个页面，用iframe来嵌套，可以增加代码的可重用
  缺点：
• iframe 会阻塞主页面的 onload 事件
• 搜索引擎爬虫不能很好的处理iframe中的内容，所以使用iframe会不利于搜索引擎优化（SEO）
• iframe框架页面会增加服务器的http请求，对于大型网站是不可取的。
• iframe框架结构有时会让人感到迷惑，如果框架个数多的话，可能会出现上下、左右滚动条，会分散访问者的注意力，用户体验度差

12. 说一下 HTML5 drag(拖拽) API

dragstart: 当用户开始拖动元素或选择文本时触发此事件。
drag：拖动元素或选择文本时触发此事件。
dragenter：当拖动的元素或选择文本输入有效的放置目标时，会触发此事件。
dragover：当将元素或文本选择拖动到有效放置目标（每几百毫秒）上时，会触发此事件。
dragleave：当拖动的元素或文本选择离开有效的放置目标时，会触发此事件。
drop：当在有效放置目标上放置元素或选择文本时触发此事件。
dragend：当拖动操作结束时（释放鼠标按钮或按下退出键），会触发此事件。

13. label 标签的作用是什么？

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

14. Canvas和SVG标签的区别

SVG:

• SVG是一种使用XML来描述2D图形的语言
• SVG绘制的是矢量图，矢量图特点就是不会随图片大小改变清晰度，不会模糊
• SVG的每个图形都被视为对象，如果对象的属性变化，那么浏览器能够自动重现图形

canvas:

• Canvas是画布，通过js来绘制2D图形，是逐像素进行渲染的。其位置发生改变，就会重新进行绘制
• Canvas是逐像素渲染的，放大后可能出现锯齿形
• Canvas能够以.png和.jpg格式保存结果图像

Canvas适合图像密集型的游戏，其中很多对象会被频繁重绘，SVG适合带有大型渲染区域的应用程序（比如谷歌地图）。

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

head标签它作为一个容器，主要包含了用于描述HTML文档自身信息的标签，这些标签大多情况都是给浏览器和搜索引擎看的
下面这些标签可用在 head 部分：<base>, <link>, <meta>, <script>, <style>, <title>
其中 <title> 定义文档的标题，它是 head 部分中唯一必需的元素。

16.文档声明（Doctype）和<!Doctype html>标签有何作用?

doctype：就是为了告诉浏览器，当前HTML文档使用什么版本的HTML来写的，这样浏览器就能按照声明的版本来正确的解析
<!Doctype html>的作用，就是让浏览器进入标准模式，使用最新的HTML5来解析渲染页面，如果不写，浏览器就会进入混杂模式

17. 严格模式与混杂模式的区分

• **严格模式：**又称为标准模式，指浏览器按照W3C标准解析代码；
• 混杂模式： 又称怪异模式、兼容模式，是指浏览器用自己的方式解析代码。混杂模式通常模拟老式浏览器的行为，以防止老站点无法工作；

18.HTML5 为什么只需要写 <! DOCTYPE HTML> ？

因为HTML5不基于SGML(标准通用标记语言)，不需要对DTD进行引用，但需要doctype来规范浏览器的行为，也即按照正常的方式来运行，因此html5只需要写doctype即可
其中，SGML 是标准通用标记语言, 简单的说，就是比 HTML, XML 更老的标准，HTML，XML这两者都是由 SGML 发展而来的，而HTML5 不是的

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

渐进增强：针对低版本的浏览器进行构建页面，保证基本的功能，再针对高级浏览器进行效果、交互等改进和追加功能提升用户体验
优雅降级：一开始就构建完整的功能，然后对低版本浏览器兼容

区别：优雅降级是从复杂的现状开始，并试图减少用户体验的供给，而渐进增强则是从一个非常基础的，能够起作用的版本开始，并不断扩充，以适应未来环境的需要

20. HTML、XML、XHTML 之间有什么区别？

它们都属于标记语言。

• XML:主要⽤于存储数据和结构。语法严谨，可扩展性强。由于 JSON 也有类似作⽤但更轻量⾼效， XML 的市场变得越来越⼩。
• XHTML:属于加强版 HTML，为解决 HTML 的混乱问题而生，在语法方面变得和 XML 一样严格。另外，XHTML 的出现也催生了 HTML 5，让HTML向规范化严谨化过渡。
• HTML:主要用于做界面呈现。HTML 是先有实现，后面才慢慢制定标准的，导致HTML⾮常混乱和松散，语法非常的不严谨。所以新出的HTML 在基础上进行了拓展

XML的要求会比较严格:

• 元素必须被正确地嵌套
• 元素必须被关闭
• 标签名必须用小写字母
• 文档必须拥有根元素

21.前缀为 data- 开头的元素属性是什么？

H5新增的自定义属性 使用时data-自定义name，这些属性通过dataset属性获取，不支持该属性的浏览器可以通过getAttribute方法获取

22. 说一下HTML5的离线存储？

HTML5的离线存储是基于一个新建的 .appcache 文件的缓存机制(不是存储技术)，通过这个文件上的解析清单离线存储资源，这些资源就会像cookie一样被存储了下来,之后当网络在处于离线状态下时，浏览器会通过被离线存储的数据进行页面展示
（1）创建一个和 html 同名的 manifest 文件，然后在页面头部加入 manifest 属性：

<html lang="en" manifest="index.manifest">

在 cache.manifest 文件中编写需要离线存储的资源：

CACHE MANIFEST
    #v0.11
    CACHE:
    js/app.js
    css/style.css
    NETWORK:
    resourse/logo.png
    FALLBACK:
    / /offline.html

23.说一下 web worker

因为js是单线程 所有任务只能在一个线程上完成，web worker就是为js创造多线程环境，允许主线程创建Worker线程，将一些任务分配给后者运行，主线程运行的同时，worker线程同时也在后台运行，两者互不干扰
使用new Worker() worker通过 postMessage()方法将结果回传到主线程，主线程监听message事件来获取worker线程完成的状态

//主线程
const worker = new Worker('./worker.js');
// 监听message事件
worker.addEventListener('message', (event) => {
  console.log(event.data);
});

//worker线程
//费时间的操作
function fb(n){
   if(n == 1 || n == 2){
      return 1
   }
   return fb(n - 1) + fb(n - 2);
}
console.time('fb执行时间1')
var result = fb(43)
console.timeEnd('fb执行时间1')
self.postMessage('worker1')

24. 前端页面由哪三层构成，分别作用是什么？

分成：结构层、表示层、行为层。

1. 结构层:由 HTML这类的标记语言负责创建
2. 表示层:由 CSS负责创建。装修页面
3. 行为层:JS构成 页面跟用户之间的交互行为，用户操作了网页，网页给用户一个反馈

25.说说你对 WEB 标准以及 W3C 的理解与认识

web标准

• web标准主要包括结构、表现和行为三个方面，分别对应html css js，因为浏览器不同避免最终效果在不同浏览器上显示出现差异，遵循web标准会让我们写的页面更统一

w3c
W3C是由万维网联盟提出的一系列标准的集合，遵循w3c制定的web标准，能够使用户浏览者更方便的阅读，使网页开发者之间更好的交流

标准规范：

• 需要文档声明(DOCTYPE)
• 标签字母小写、标签要闭合、标签乱嵌套
• 合理的语义化标签，可提高搜索机器人对网页内容的搜索几率，也便于后续改版、维护
• 尽量使用外链 css 样式表和 js 脚本。是结构、表现和行为分为三块，符合规范。同时提高页面渲染速度，提高用户的体验

26. 为什么最好把 CSS 的 <link> 标签放在<head></head>之间？

把 <link> 标签放在 <head></head> 之间是规范要求的内容。这种做法可以让页面逐步呈现，提高了用户体验。如果将样式表放在文档底部附近，会使许多浏览器（包括 Internet Explorer）不能逐步呈现页面。
一些浏览器会阻止渲染，以避免在页面样式发生变化时，重新绘制页面中的元素。这种做法可以防止呈现给用户空白的页面或没有样式的内容

27.为什么最好把 JS 的 <script> 标签恰好放在 </body> 之前？

js脚本在下载和执行期间会阻止 HTML 解析。把 <script> 标签放在底部，保证 HTML 首先完成解析，将页面尽早呈现给用户

28.什么是盒子模型？

指在一个网页文档中，每个元素都被呈现为一个矩形的盒子，描述了元素所占空间的内容
盒子模型有两种，标准盒子和IE盒子(w3c盒子和怪异盒子)
标准盒子宽度是 width + padding + border
IE盒子宽度是 width padding和border已经被包含在width里面了
两种盒子模型可以使用css的box-sizing属性进行转换

标准模型为 box-sizing:content-box;
IE模型为：box-sizing:border-box;

简单理解：标准盒子你再给盒子设置padding或者border的时候，盒子的宽度是会被撑大的，而IE盒子不会

29.img上 title 与 alt

• alt：全称alternate，切换的意思，如果无法显示图像，浏览器将显示alt指定的内容
• title：当鼠标移动到元素上时显示title的内容

部分内容转载与https://juejin.cn/post/7150109570609152014