HTML 八股文

说说 HTML、XML、XHTML 的区别

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

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

产生乱码的原因：

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

解决办法

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

style 标签写在 body 后与 body 前有什么区别？

页面加载自上而下，当然是先加载样式。

写在 body 标签后由于浏览器以逐行方式对 HTML 文档进行解析，当解析到写在尾部的样式表（外联或写在 style 标签）会导致浏览器停止之前的渲染，等待加载且解析样式表完成之后重新渲染，在 windows 的 IE 下可能会出现 FOUC 现象（即样式失效导致的页面闪烁问题）

script 标签为什么建议放在 body 标签的底部

因为浏览器在渲染 html 的时候是从上到下执行的，当遇到 js 文件的时候就会停止当前页面的渲染，转而去下载 js 文件。

如果将 script 标签放在头部，在文件很大的情况下将导致首屏加载时间延长，影响用户体验。

解决办法

• 将 script 标签放在 body 的底部
• 通过 defer、async 属性将 js 文件转为异步加载

CSSOM 树和 DOM 树是同时解析的吗？

浏览器会下载 HTML 解析页面生成 DOM 树，遇到 CSS 标签就开始解析 CSS，这个过程不会阻塞，但是如果遇到了 JS 脚本，此时加入 CSSOM 还没有构建完，需要等待 CSSOM 构建完，再去执行 JS 脚本，然后再执行 DOM 解析，此时会阻塞。

HTML 标签中的 src 和 href 有什么区别

• href 是超文本引用，它是指向资源的位置，建立与目标文件的联系；
• src 目的是把资源下载到页面中。

浏览器解析 href 不会阻塞对文档的处理（这就是官方建议使用 link 引入而不是 @import 的原因），src 会阻塞对文档的处理。

能够使用自闭合 script 标签引入脚本文件？

不能。自闭合标签来自 于 XML 语法，而不是 HTML 语法。

根据现在的 HTML 语法，只有不需要结束标签的 void element（如 img 之类的），或者是外部元素（如 svg）可以使用自闭合。script 标签显然不在此列。

<!--正确写法-->
<script src=""></script>

<!--错误写法-->
<script src="" />

什么是 DOM 和 BOM？

• DOM 指的是文档对象模型，它指的是把文档当做一个对象，这个对象主要定义了处理网页内容的方法和接口
• BOM 指的是浏览器对象模型，它指的是把浏览器当做一个对象来对待，这个对象主要定义了与浏览器进行交互的方法和接口。BOM 的核心是 window，而 window 对象具有双重角色，它既是通过 js 访问浏览器窗口的一个接口，又是一个 Global（全局）对象。这意味着在网页中定义的任何对象、变量和函数，都作为全局对象的一个属性或者方法存在。window 对象含有 location 对象、navigator 对象、screen 对象等子对象，并且 DOM 的最根本的对象 document 对象也是 BOM 的 window 对象的子对象。

iconfont 是什么？有什么优缺点

什么是 Iconfont

顾名思义，iconfont 就是字体图标。严格地说，就是一种字体，但是，它们不包含字母或数字，而是包含符号和字形。可以使用 CSS 设置样式，就像设置常规文本一样，这使得 iconfont 成为 Web 开发时图标的热门选择。

优点

• 可以方便地将任何 CSS 效果应用于它们。
• 因为它们是矢量图形，所以它们是可伸缩的。这意味着可以在不降低质量的情况下伸缩它们。
• 只需要发送一个或少量 HTTP 请求来加载它们，而不是像图片，可能需要多个 HTTP 请求。
• 由于尺寸小，它们加载速度快。
• 它们在所有浏览器中都得到支持（甚至支持到 IE6）

不足

• 不能用来显示复杂图像
• 通常只限于一种颜色，除非应用一些 CSS 技巧
• 字体图标通常是根据特定的网格设计的，例如 16×16,32×32,48×48 等。如果由于某种原因将网格系统改为 25×25，可能不会得到清晰的结果

canvas 在标签上设置宽高，与在 style 中设置宽高有什么区别？

canvas 标签的 width 和 height 是画布实际宽度和高度，绘制的图形都是在这个上面。

而 style 的 width 和 height 是 canvas 在浏览器中被渲染的高度和宽度。

如果 canvas 的 width 和 height 没指定或值不正确，就被设置成默认值。

如何禁用 a 标签跳转页面或定位链接？

当页面中 a 标签不需要任何跳转时，从原理上来讲，可分为如下两种方法：

• 标签属性 href，使其指向空或不返回任何内容。如：

<a href="javascript:void(0);"></a>
<a href="javascript:;"></a>

• 从标签事件入手，阻止其默认行为。如：

html 方法：

<a href="" onclick="return false;"></a>
<a href="#" onclick="return false;"></a>

或者在 js 文件中阻止默认点击事件：

Event.preventDefault()

还可以在 css 文件中处理点击，不响应任何鼠标事件：

pointer-events: none;

iframe 是什么？有哪些优缺点？

iframe 可以在一个网站里面嵌入另一个网站的内容。

iframe 的优点

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

iframe 的缺点

• 会产生很多页面，不容易管理。
• iframe 框架结构有时会让人感到迷惑，如果框架个数多的话，可能会出现上下、左右滚动条。
• 代码复杂，无法被一些搜索引擎索引到，这一点很关键，现在的搜索引擎爬虫还不能很好的处理 iframe 中的内容，所以使用 iframe 会不利于搜索引擎优化。
• 很多的移动设备（PDA 手机）无法完全显示框架，设备兼容性差。
• iframe 里面的样式、脚本资源，会增加请求次数，对于大型网站是不可取的。
• iframe 会阻碍页面的 onload 事件，给用户页面加载很慢的感觉。

iframe 已经渐渐的退出了前端开发的舞台。

渐近增强和优雅降级有什么区别？

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

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

区别：

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

说说你对以下几个页面生命周期事件的理解

HTML 页面的生命周期包含四个重要事件：

• DOMContentLoaded：浏览器已完成加载 HTML，并构建了 DOM 树，但像图片和样式表之类的外部资源可能尚未加载完成。 DOM 已经就绪，因此处理程序可以查找 DOM 结点，并初始化接口

• load：浏览器不仅加载完成了 HTML，还加载完成了所有外部资源：图片，样式等。 外部资源已加载完成，样式已被应用，图片大小也已知了。

• beforeunload：用户正在离开，我们可以检查用户是否保存了更改，并询问他是否真的要离开。

• unload：用户几乎已经离开了，但是我们仍然可以启动一些操作，例如发送统计数据。

一台设备的 dpr，是否是可变的？

devicePexelRation，中文名称是设备像素比。这个概念在移动开发的时候会特别关注，因为它关系到了整个画面的观感、布局甚至是清晰度。在 JavaScript BOM 中，它是 window 全局对象下的一个属性，它的定义如下：

dpr = 设备像素 / CSS 像素

也有文章把设备像素称为物理像素，把 CSS 像素称为独立像素（DIPs），但所指的都是同样的概念：

设备像素指的是物理像素，一般手机的分辨率指的就是设备像素，一个设备的设备像素是不可变的。

CSS 像素和设备独立像素是等价的，不管在何种分辨率的设备上，CSS 像素的大小应该是一致的，CSS 像素是一个相对单位，它是相对于设备像素的，一个 CSS 像素的大小取决于页面缩放程度和 dpr 的大小。

那么，从定义来看，dpr 的意义就是：在一个设备（的每个方向）上，每个 CSS 像素会被多少个实际的物理像素来显示。

用于用户的缩放操作会改变 dpr，所以设备 dpr 是在默认缩放为 100% 的情况下定义的。

webSocket 如何兼容低浏览器

• Adobe Flash Socket;
• ActiveX HTMLFile(IE);
• 基于 multipart 编码发送 XHR;
• 基于长轮询的 XHR;

页面统计数据中，常用的 PV、UV 指标分别是什么？

PV（页面访问量）

即页面浏览量或点击量，用户每 1 次对网站中的每个访问均被记录 1 个 PV。

用户对同一页面的多次访问，访问量累计，用以衡量网站用户访问的网页数量。

UV（独立访客）

是指通过互联网访问、浏览这个网页的自然人。

访问网站的一台电脑客户端为一个访客。

00:00-24:00 内相同的客户端只被计算一次。

使用 input 标签上传图片时，怎样触发默认拍照功能？

capture 属性用于指定文件上传控件中媒体拍摄的方式。可选值：

• user 前置
• environment 后置
• camera 相机
• camcorder 摄像机
• microphone 录音

<input type="file" accpet="image/*;" capture="camera" />

img 的 srcset 属性的作用？

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

srcset 属性用于设置不同屏幕密度下，img 会自动加载不同的图片。用法如下：

<img src="image-128.png" srcset="image-256png 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:260px) 340px,128px" />

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

sizes 语法如下：

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

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