前端HTML常见面试题

       最近学完了js，就把前面学的HTML和CSS复习了一遍并且把面试题总结了一下；不得不说一入前端深似海，要学的知识实在是太多了，希望刚入门的友友最好还是提前准备面试题，到找工作之前压力能够小一点。 

1. src和href的区别

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

最近学完了js，就把前面学的HTML和CSS复习了一遍并且把面试题总结了一下；不得不说一入前端深似海，要学的知识实在是太多了，希望刚入门的友友最好还是提前准备面试题，到找工作之前压力能够小一点。

·src：表示对资源的引用，它指向的内容会嵌入到当前标签所在的位置。src会将其指向的资源下载并应⽤到⽂档内，如在请求js脚本，img图⽚和frame等元素。当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执⾏完毕。

·href：表示超文本引用，它指向一些网络资源，建立和当前元素或本文档的链接关系。当浏览器识别到它他指向的⽂件时，就会并⾏下载资源，不会停⽌对当前⽂档的处理。 常用在a、link等标签上。

2.对HTML语义化的理解（重点）

语义化是指根据内容的结构化（内容语义化），选择合适的标签（代码语义化）。通俗来讲就是用正确的标签做正确的事情。

语义化的优点主要有以下两点：

对于机器友好，带有语义的文字表现力丰富，更适合搜索引擎的爬虫爬取有效信息，利于SEO。除此之外，语义类还支持读屏软件，根据文章可以自动生成目录；

对开发者友好，使用语义类标签增强了可读性，结构更加清晰，开发者也能清晰的看出网页的结构，便于团队的开发与维护。

常见的语义化标签：

<header></header>头部

<nav></nav>导航栏

<section></section>区块（有语义化的div）

<main></main>主要区域

<artical></artical>主要内容

<aside></aside>侧边栏

<footer></footer>底部

3. DOCTYPE(⽂档声明类型) 的作⽤

DOCTYPE用于告诉浏览器（解析器）应该以什么样（html或xhtml）的文档类型定义来解析文档。

不同的渲染模式会影响到浏览器对于 CSS 代码甚⾄ JavaScript 脚本的解析。它必须声明在HTML⽂档的第⼀⾏。

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

CSS1Compat：标准模式（Strick mode），默认模式。浏览器使用W3C的标准解析渲染页面。在标准模式中，浏览器以其支持的最高标准呈现页面。

BackCompat：怪异模式(混杂模式)(Quick mode)，浏览器使用自己的怪异模式解析渲染页面。在怪异模式中，页面以一种比较宽松的向后兼容的方式显示。

4.常⽤的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. HTML5新特性（重点）

1、拖拽释放(Drap and drop) API ondrop

拖放是一种常见的特性，即抓取对象以后拖到另一个位置

在 HTML5 中，拖放是标准的一部分，任何元素都能够拖放

2、自定义属性 data-id

3、语义化更好的内容标签(header,nav,footer ,aside, article, section)

4、音频 ,视频(audio, video) 如果浏览器不支持自动播放怎么办?在属性中添加 autoplay

5、画布 Canvas

5.1）getContext() 方法返回一个用于在画布上绘图的环境

Canvas.getContext(contextID) 参数 contextID 指定了您想要在画布上绘制的类型。当

前唯一的合法值是 “2d”，它指定了二维绘图，并且导致这个方法返回一个环境对象，

该对象导出一个二维绘图 API

5.2）cxt.stroke() 如果没有这一步 线条是不会显示在画布上的

5.3）canvas 和 image 在处理图片的时候有什么区别?

image 是通过对象的形式描述图片的,canvas 通过专门的 API 将图片绘制在画布

上.

6、 地理(Geolocation) API

7、 本地离线存储 localStorage 长期存储数据 浏览器关闭后数据不丢失

8、 sessionStorage 的数据在浏览器关闭后自动删除

9、 表单控件 calendar , date , time , email , url , search , tel , file , number

10、新的技术 webworker, websocket , Geolocation

11、移除的元素有：

纯表现的元素：basefont，big，center，font, s，strike，tt，u;

对可用性产生负面影响的元素：frame，frameset，noframes；

6.img的srcset属性的作⽤？

响应式页面中经常用到根据屏幕密度设置不同的图片。这时会用到image标签的srcset属性。srcset属性用于设置不同屏幕密度下，image会自动加载不同的图片。用法如下：

<img src="image-128.png" srcset="image-256.png 2x" />

使用上面的代码，就能实现在屏幕密度为1x的情况下加载image-128.png, 屏幕密度为2x时加载image-256.png。

按照上面的实现，不同的屏幕密度都要设置图片地址，目前的屏幕密度有1x,2x,3x,4x四种，如果每一个图片都设置4张图片的话，加载会很慢。所以就有了新的srcset标准。代码如下：

<img src="image-128.png"

srcset="image-128.png 128w, image-256.png 256w, image-512.png 512w"

sizes="(max-width: 360px) 340px, 128px" />

其中srcset指定图片的地址和对应的图片质量。sizes用来设置图片的尺寸零界点。对于srcset里面出现了一个w单位，可以理解成图片质量。如果可视区域小于这个质量的值，就可以使用。浏览器会自动选择一个最小的可用图片。

sizes语法如下：

sizes="[media query] [length], [media query] [length] ... "

sizes就是指默认显示128px, 如果视区宽度大于360px, 则显示340px。

7、比较 HTML  XML  XHTML  和  JSON

HTML（HyperText Markup Language / 超文本标记语言），用来描述和定义 网络内容的标记语言，超文本的意思是说，除了能标记本文，还能标记 图片，视频，链接 等其他内容

XML（Extensible Markup Language / 可扩展标记语言），表现就是给一堆文档加上标签，说明里面的数据是什么意思，方便存储、传输、分享数据。和 HTML 的区别是 HTML 的标签就预定义的，XML 是可扩展的

XHTML: Extensible Hypertext Markup Language / 可扩展超文本标记语，其实就是 HTML 的严格语法形式，约定了 属性名必需小写，空元素必需关闭，元素名小写，属性名必需加引号，布尔类型必需加属性值

JSON（Javascript Object Notation）比较轻量级的数据交换格式，由键值对组成，数据格式比较简单, 易于读写, 格式都是压缩的, 占用带宽小

8. 行内元素、块级元素、 行内块元素以及它们的特点？（重点）

·块元素

   <h>  <p>  <div>  <ul>  <ol>  <li>

  特点：自己独占一行

        高度 宽度 外边距及内边距都可以设置

        宽度默认是父级宽度的100%

        是一个容器 里面可以放置行内或行内块元素

  注意：文字类标签<h> <p> 里面不能放置块级元素

·行内元素：

   <a>  <strong>  <b>  <em>  <i>  <span>等

   特点：相邻的行内元素在一行上

         宽和高不能设置

         默认宽度和高度是它里边内容的宽高

         只能容纳文本或其他行内元素

  注意：链接<a>里不能再放置链接，但是可以放置块级元素

·行内块元素

   <img>  <input>  <td>

   特点：和相邻行内块元素在一行上 但是有空白缝隙隔开

         默认宽度是其内容的宽度

         高度 宽度 边距可以直接设置

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

·strong标明重点内容，有语气加强的含义，使用阅读设备阅读网络时：会重读，而是展示强调内容。而 b是展示强调内容

·title属性没有明确意义只表示是个标题，H1则表示层次明确的标题，对页面信息的抓取也有很大的影响

·i内容展示为斜体，em表示强调的文本

10. iframe 有那些优点和缺点？

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

用来加载速度较慢的内容（如广告）

可以使脚本可以并行下载

可以实现跨子域通信

缺点：

iframe 会阻塞主页面的 onload 事件

无法被一些搜索引擎索识别

会产生很多页面，不容易管理

11. label 的作用是什么？如何使用？

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

·使用方法1：

<label for="mobile">Number:</label>

<input type="text" id="mobile"/>

·使用方法2：

<label>Date:<input type="text"/></label>

12. Canvas 和 SVG 有什么区别？

·Canvas 是一种通过 JavaScript 来绘制 2D 图形的方法。Canvas 是逐像素来进行渲染的，因此当对 Canvas 进行缩放时，会出现锯齿或者失真的情况。

·SVG 是一种使用 XML 描述 2D 图形的语言。SVG 基于 XML，这意味着 SVG DOM 中的每个元素都是可用的。可以为某个元素附加 JavaScript 事件监听函数。并且 SVG 保存的是图形的绘制方法，因此当 SVG 图形缩放时并不会失真。

13. head 标签中必不少的是？

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

文档的头部描述了文档的各种属性和信息，包括文档的标题、在 Web 中的位置以及和其他文档的关系等。绝大多数文档头部包含的数据都不会真正作为内容显示给读者。

下面这些标签可用在 head 部分：

<base>, <link>, <meta>, <script>, <style>, <title>。

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

14. 文档声明（Doctype）和<!Doctype html>有何作用? 严格模式与混杂模式如何区分？它们有何意义?

（1）Doctype的作用：用于告诉浏览器的解析器用什么文档标准解析这个文档。

（2）<!Doctype html>的作用：<!doctype html> 的作用就是让浏览器进入标准模式，使用最新的 HTML5标准来解析渲染页面；如果不写，浏览器就会进入混杂模式，需要避免此类情况发生。

（3）严格模式与混杂模式的区分：

严格模式： 又称为标准模式，指浏览器按照W3C标准解析代码；

混杂模式： 又称怪异模式、兼容模式，是指浏览器用自己的方式解析代码.混杂模式通常模拟老式浏览器的行为，以防止老站点无法工作；

区分：如果HTML文档包含形式完整的DOCTYPE，那么它一般以标准模式呈现。

如果DOTYPE不存在或者格式不正确会导致文档以混杂模式呈现。

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

产生乱码的原因：

编码：将字符转化为二进制

解码：将二进制转化为字符（文字，数字等）

原因：如果编码和解码采用的字符集不同就会产生乱码

解决办法：

编码和解码采用相同的字符集

16、请阐述table的缺点

a. 太深的嵌套，比如table>tr>td>h3，会导致搜索引擎读取困难，而且，最直接的损失就是大大增加了冗余代码量。

b. 灵活性差，比如要将tr设置border等属性，是不行的，得通过td

c. 代码臃肿，当在table中套用table的时候，阅读代码会显得异常混乱

d. 混乱的colspan与rowspan，用来布局时，频繁使用他们会造成整个文档顺序混乱。

e. 不够语义

17、<img>标签上title属性与alt属性的区别是什么？

相同点:

同属于img的属性，可以替代图片显示为文本。

不同点：

·alt属性是对图片的描述（默认情况下不会显示），搜索引擎会根据alt中的内容来识别图片，或者是在alt 是图片加载失败时，显示在网页上的替代文字；

·title属性为设置该属性的元素提供建议性的信息。鼠标长放在图片上会显示出来

18.cookies，sessionStorage和localStorage的区别？（重点）

共同点：都是保存在浏览器端，且是同源的。

区别：

·cookies是为了标识用户身份而存储在用户本地终端上的数据，始终在同源http请求中携带，即cookies在浏览器和服务器间来回传递，而sessionstorage和localstorage不会自动把数据发给服务器，仅在本地保存。

·存储大小的限制不同。cookie保存的数据很小，不能超过4k，而sessionstorage和localstorage保存的数据大，可达到5M。

·数据的有效期不同。cookie在设置的cookie过期时间之前一直有效，即使窗口或者浏览器关闭。sessionstorage仅在浏览器窗口关闭之前有效。localstorage始终有效，窗口和浏览器关闭也一直保存，用作长久数据保存。

·作用域不同。cookie在所有的同源窗口都是共享；sessionstorage不在不同的浏览器共享，即使同一页面；localstorage在所有同源窗口都是共享

19.常用浏览器及内核（渲染引擎）

IE（IE浏览器）               Trident        //国内浏览器大多数使用的内核

Firefox（火狐）               Gecko

    Safari（苹果）                Webkit

Chrome/Opera（谷歌/欧朋）    Blink（Webkit分支）

1. Canvas 和 Svg是什么？有什么区别？

Canvas：

·Canvas 通过 JavaScript 来绘制 2D 图形。

·Canvas 是逐像素进行渲染的。

·在 canvas 中，一旦图形被绘制完成，它就不会继续得到浏览器的关注。如果其位置发生变化，那么整个场景也需要重新绘制，包括任何或许已被图形覆盖的对象。

SVG：

·SVG 是一种使用 XML 描述 2D 图形的语言。

·SVG 基于 XML，这意味着 SVG DOM 中的每个元素都是可用的。您可以为某个元素附加 JavaScript 事件处理器。

·在 SVG 中，每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化，那么浏览器能够自动重现图形。

Canvas 与 SVG 的比较:

Canvas

·依赖分辨率

·不支持事件处理器

·弱的文本渲染能力

·能够以 .png 或 .jpg 格式保存结果图像

·最适合图像密集型的游戏，其中的许多对象会被频繁重绘

SVG

·不依赖分辨率

·支持事件处理器

·最适合带有大型渲染区域的应用程序（比如谷歌地图）

·复杂度高会减慢渲染速度（任何过度使用 DOM 的应用都不快）

·不适合游戏应用

1. div+css布局与table相比有什么优势？

·改版的时候更方便 只要改 css 文件。

·页面加载速度更快、结构化清晰、页面显示简洁。

·表现与结构相分离。

·易于优化（seo）搜索引擎更友好，排名更容易靠前。