一、HTML 篇

1.xhtml和html有什么区别

• 功能上

• 主要是XHTML可兼容各大浏览器、手机以及PDA，并且浏览器也能快速正确地编译网页

• 书写习惯

• XHTML 元素必须被正确地嵌套，闭合，区分大小写，文档必须拥有根元素

2.行内元素有哪些？块级元素有哪些？ 空(void)元素有那些？行内元素和块级元素有什么区别

行内元素有：a b span img input select strong

块级元素有：div ul ol li dl dt dd h1 h2 h3 h4…p

空元素：br、 hr img input link meta

行内元素不可以设置宽高，不独占一行

块级元素可以设置宽高，独占一行

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

语义化是指 根据内容的结构化（内容语义化），选择合适的标签（代码语义化）

语义化的好处：

在没有CSS的情况下，页面也能呈现出很好的内容结构

语义化使代码更具可读性，便于团队开发和维护

语义化有利于用户体验（例如 title，label，alt属性的灵活运用）

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

4. 标签上 title 与 alt 属性的区别是什么？

alt 是给搜索引擎识别，在图像无法显示时的替代文本；

title 是关于元素的注释信息，主要是给用户解读。

当鼠标放到文字或是图片上时有 title 文字显示。（因为 IE 不标准）在 IE 浏览器中 alt 起到了 title 的作用，变成文字提示。

在定义 img 对象时，将 alt 和 title 属性写全，可以保证在各种浏览器中都能正常使用。

5. iframe的优缺点？

优点：

• 解决加载缓慢的第三方内容如图标和广告等的加载问题
• Security sandbox
• 并行加载脚本

缺点：

• iframe会阻塞主页面的Onload事件
• 即时内容为空，加载也需要时间
• 没有语意
• 使用iframe作为子应用问题：1.没有路有记录 2.样式隔离严重

6. href 与 src？

• href是Hypertext Reference的缩写，表示超文本引用。用来建立当前元素和文档之间的链接。常用的有：link、a
• src是source的缩写，src的内容是页面必不可少的一部分，是引入。src指向的内容会嵌入到文档中当前标签所在的位置。常用的有：img、script、iframe

href与src的区别

1、请求资源类型不同：href 指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的联系。在请求 src 资源时会将其指向的资源下载并应用到文档中，比如 JavaScript 脚本，img 图片；

2、作用结果不同： src用于替换当前元素；href用于在当前文档和引用资源之间建立联系

3、浏览器解析方式不同：当浏览器解析到src ，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，图片和框架等也如此，类似于将所指向资源应用到当前内容。这也是为什么建议把 js 脚本放在底部而不是头部的原因。

7.什么是优雅降级渐进增强？

渐进增强（Progressive Enhancement）：一开始就针对低版本浏览器进行构建页面，完成基本的功能，然后再针对高级浏览器进行效果、交互、追加功能达到更好的体验

优雅降级（Graceful Degradation）：一开始就构建站点的完整功能，然后针对浏览器测试和修复。比如一开始使用 CSS3 的特性构建了一个应用，然后逐步针对各大浏览器进行 hack 使其可以在低版本浏览器上正常浏览。

8.HTTP的几种请求方法用途？

• GET方法

• 发送一个请求来取得服务器上的某一资源

• POST方法

• 向URL指定的资源提交数据或附加新的数据

• PUT方法

• 跟POST方法很像，也是想服务器提交数据。但是，它们之间有不同。PUT指定了资源在服务器上的位置，而POST没有

• HEAD方法

• 只请求页面的首部

• DELETE方法

• 删除服务器上的某资源

• OPTIONS方法

• 它用于获取当前URL所支持的方法。如果请求成功，会有一个Allow的头包含类似“GET,POST”这样的信息

• TRACE方法

• TRACE方法被用于激发一个远程的，应用层的请求消息回路

• CONNECT方法

• 把请求连接转换到透明的TCP/IP通道

9.HTTP状态码都有哪些？

一、临时响应

100——客户必须继续发出请求

101——客户要求服务器根据请求转换HTTP协议版本

二、成功

200——服务器成功返回网页

201——提示知道新文件的URL

202——接受和处理、但处理未完成

203——返回信息不确定或不完整

204——请求收到，但返回信息为空

205——服务器完成了请求，用户代理必须复位当前已经浏览过的文件

206——服务器已经完成了部分用户的GET请求

三、重定向

300——请求的资源可在多处得到

301——删除请求数据

302——在其他地址发现了请求数据

303——建议客户访问其他URL或访问方式

304——客户端已经执行了GET，但文件未变化

305——请求的资源必须从服务器指定的地址得到

306——前一版本HTTP中使用的代码，现行版本中不再使用

307——申明请求的资源临时性删除

四、请求错误

400——错误请求，如语法错误

401——请求授权失败

402——保留有效ChargeTo头响应

403——请求不允许

404——请求的网页不存在

405——用户在Request-Line字段定义的方法不允许

406——根据用户发送的Accept拖，请求资源不可访问

407——类似401，用户必须首先在代理服务器上得到授权

408——客户端没有在用户指定的饿时间内完成请求

409——对当前资源状态，请求不能完成

410——服务器上不再有此资源且无进一步的参考地址

411——服务器拒绝用户定义的Content-Length属性请求

412——一个或多个请求头字段在当前请求中错误

413——请求的资源大于服务器允许的大小

414——请求的资源URL长于服务器允许的长度

415——请求资源不支持请求项目格式

416——请求中包含Range请求头字段，在当前请求资源范围内没有range指示值，请求也不包含If-Range请求头字段

417——服务器不满足请求Expect头字段指定的期望值，如果是代理服务器，可能是下一级服务器不能满足请求

五、服务器错误

500——服务器产生内部错误

501——服务器不支持请求的函数

502——服务器暂时不可用，有时是为了防止发生系统过载

503——服务器超时过载或暂停维修

504——关口过载，服务器使用另一个关口或服务来响应用户，等待时间设定值较长

505——服务器不支持或拒绝支请求头中指定的HTTP版本

10.DOCTYPE (⽂档类型) 的作⽤ ？

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

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

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

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

11.前端需要注意哪些SEO？

• 合理的title、description，keywords：搜索引擎对着这项的权重逐个减小，title值强调重点即可，重要关键词出现不要超过2次，而且要靠前，不同页面title要有所不同；
• description把页面内容高度概括，长度合适，不可过分堆砌关键词，不同页面description有所不同；keywords列举出重要关键词即可

语义化的HTML代码，符合W3C规范：语义化代码让搜索引擎容易理解网页

重要内容HTML代码放在最前：搜索引擎抓取HTML顺序是从上到下，有的搜索引擎对抓取长度有限制，保证重要内容一定会被抓取

重要内容不要用js输出：爬虫不会执行js获取内容

少用iframe：搜索引擎不会抓取iframe中的内容

非装饰性图片必须加alt

提高网站速度：网站速度是搜索引擎排序的一个重要指标

12.script标签中defer和async的区别 ？

注意： 如果没有defer或async属性，浏览器会立即加载并执行相应的脚本。

它不会等待后续加载的文档元素，读取到就会开始加载和执行，这样就阻塞了后续文档的加载。

区别：

执行顺序：多个带async属性的标签，不能保证加载的顺序。多个带有defer属性的标签会按照加载顺序执行

脚本是否并行： async属性，表示后续文档的加载和执行与js脚本的加载和执行是并行进行的即文档加载与js加载同时进行。defer属性，js脚本需要等待文档所有元素解析完成后执行 ，DOMContentLoaded事件触发执行之前。

13.常用meta标签有哪些？

meta标签由name和content属性定义，用来描述网页文档的属性

常用的meta标签：

• charset：用来描述HTML文档的编码类型
• keywords:页面关键词
• description:页面描述
• refresh:页面重定向和刷新

viewport:适配移动端，可以控制视口大小和比例

• content参数详情：

• width viewport:宽度(数值/device-width)
• height viewport:高度(数值/device-height)
• initial-scale：初始缩放比例

• maximum-scale:最大缩放比例
• minimum-scale:最小缩放比例
• user-scalable：是否允许用户缩放(yes/no)

14.一次完整的HTTP事务是怎么一个过程?

• 浏览器的地址栏输入URL并按下回车。
• 浏览器查找当前URL是否存在缓存，并比较缓存是否过期。
• DNS解析URL对应的IP。

• 根据IP建立TCP连接（三次握手）。
• HTTP发起请求。
• 服务器处理请求，浏览器接收HTTP响应。
• 渲染页面，构建DOM树。
• 关闭TCP连接（四次挥手）。

15.HTTP和HTTPS区别？

http:超文本传输协议，是一个客户端和服务器端请求和应答的标准(TCP),用于从www服务器传输超文本到本地浏览器的传输协议，它可以使浏览器更高效，是网络传输减少

https：可以理解为http的安全版，在http下加入SSL层。https协议的主要作用是建立一个安全的信息通道，来确保数组的传输，确保网站的真实性。

区别：

• Https 协议需要 ca 证书，费用较高。
• http 是超文本传输协议，信息是明文传输，https 则是具有安全性的 ssl 加密传输协议。

• 使用不同的连接方式，端口也不同，一般而言，http 协议的端口为 80，https 的端口为443
• http 的连接很简单，是无状态的；HTTPS 协议是由 SSL+HTTP 协议构建的可进行加密传输、
  身份认证的网络协议，比 http 协议安全。

16.HTTPS是如何实现加密？

HTTPS在传输数据之前需要客户端（浏览器）与服务端（网站）之间进行一次握手，在握手过程中将确立双方加密传输数据的密码信息。TLS/SSL协议不仅仅是一套加密传输的协议，更是一件经过艺术家精心设计的艺术品，TLS/SSL中使用了非对称加密，对称加密以及HASH算法

17.img的srcset属性作用？

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

18.WEB标准以及W3C标准是什么?

• 标签闭合、标签小写、不乱嵌套、使用外链css和js、结构行为表现的分离

19.HTML5的离线存储怎么使用？工作原理？

离线存储指的是:在用户没有与因特网连接时，可以正常访问站点或应用，在用户与因特网连接时，更新用户机器上的缓存文件。

原理: HTML5的离线存储是基于一个新建的

.appcache 文件的缓存机制(不是存储技术)，通过这个文件上的解析清单离线存储资源，这些资源就会像cookie一样被存储了下

来。之后当网络在处于离线状态下时，浏览器会通过被离线存储的数据进行页面展示。

使用方法：

创建一个和 html 同名的 manifest 文件，然后在页面头部加入 manifest 属性

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

CACHE:表示需要离线存储的资源列表，由于包含 manifest 文件的页面将被自动离线存储，所以不需要把页面自身也列出来。

NETWORK:表示在它下面列出来的资源只有在在线的情况下才能访问，他们不会被离线存储，所以在离线情况下无法使用这些资源。不过，如果在 CACHE 和 NETWORK

中有一个相同的资源，那么这个资源还是会被离线存储，也就是说 CACHE 的优先级更高

FALLBACK:表示如果访问第一个资源失败，那么就使用第二个资源来替换他，比如上面这个文件表示的就是如果访根目录下任何一个资源失败了，那么就去访问

offline.html

在离线状态时，操作

window.applicationCache

进行离线缓存的操作。

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

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

离线的情况下，浏览器就直接使用离线存储的资源。

21.label的作用是什么？

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

22.Canvas和SVG区别？

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

SVG：缩放矢量图形Scalable ecor Grdhics) 是基于可扩展标记语言XML描的2D图的语言。SVG基于XML就意着SG DOM中的元素都是可用的，可以为某个元

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

区别：

svg绘制出来的每一个图形的元素都是独立的DOM节点，SVG基于XML就意味着SVG DOM中的每个元素都是可用的，可以为某个元素附加Javascript事件处理器，能够方便的绑定事件或用来修改。canvas输出的是一整幅画布

svg输出的图形是矢量图形，后期可以修改参数来自由放大缩小，不会是出现锯齿。而canvas输出标量画布，就像一张图片一样，放大会失真或者锯齿

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

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

24.严格模式与混杂模式如何区分? 它们有何意义?

严格模式:又称为标准模式，指浏览器按照 w3C 标准解析代码;

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

区分：

如果文档包含严格的 DOCTYPE，那么它一般以严格模式呈现 (严格 DTD 一一严格模式)

包含过渡 DTD 和 URI 的 DOCTYPE ，也以严格模式呈现，但有过渡 DTD 而没有 URI

(统一资源标识符，就是声明最后的地址) 会导致页面以混杂模式呈现 (有

URI 的过渡 DTD --严格模式;没有 URI 的过渡 DTD --混杂模式)

DOCTYPE 不存在或形式不正确会导致文档以混杂模式呈现 (DTD不存在或者格式不正确一一混杂模式);

HTML5 没有 DTD，因此也就没有严格模式与混杂模式的区别，已经尽可能大的实现了向后兼容(HTML5 没有严格和混杂之分)。

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

产生乱码的原因：

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

解决办法：

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