01-HTMLMutationObserver详解 MutationObserver用来监视 DOM 变动。DOM 的任

MutationObserver详解

MutationObserver用来监视 DOM 变动。DOM 的任何变动，比如节点的增减、属性的变动、文本内容的变动都会触发MutationObserver事件。但是，它与事件有一个本质不同：事件是同步触发，也就是说，DOM 的变动立刻会触发相应的事件；Mutation Observer 则是异步触发，DOM 的变动并不会马上触发，而是要等到当前所有 DOM 操作都结束才触发。 Mutation Observer 有以下特点：

它等待所有脚本任务完成后，才会运行（即异步触发方式）。它把 DOM 变动记录封装成一个数组进行处理，而不是一条条个别处理 DOM 变动。它既可以观察 DOM 的所有类型变动，也可以指定只观察某一类变动。

a元素除了用于导航外，还有什么作用？

href属性中的url可以是浏览器支持的任何协议，所以a标签可以用来手机拨号110，也可以用来发送短信110，还有邮件等等当然，a元素最常见的就是用来做锚点和下载文件。锚点可以在点击时快速定位到一个页面的某个位置，而下载的原理在于a标签所对应的资源浏览器无法解析，于是浏览器会选择将其下载下来。

label的作用是什么？是怎么用的？

label元素不会向用户呈现任何特殊效果，但是，它为鼠标用户改进了可用性，当我们在label元素内点击文本时就会触发此控件。也就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。最常用label的地方就是表单中的性别单选框了，当点击文字时也能够自动聚焦绑定的表单控件（点击文字选中）。

<form>
     <label for="male">男</label>
     <input type="radio" name="sex" id="male">
     <label for="female">女</label>
     <input type="radio" name="sex" id="female">
</form>

行内元素和块级元素分别有哪些？有何区别？怎样转换？

常见的块级元素：p、div、form、ul、li、ol、table、h1、h2、h3、h4、h5、h6、dl、dt、dd

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

总是在新行上开始，就是每个块级元素独占一行，默认从上到下排列宽度缺少时是它的容器的100%，除非设置一个宽度高度、行高以及外边距和内边距都是可以设置的块级元素可以容纳其它行级元素和块级元素

行内元素：

和其它元素都会在一行显示高、行高以及外边距和内边距可以设置宽度就是文字或者图片的宽度，不能改变行级元素只能容纳文本或者其它行内元素

使用行内元素需要注意的是：

行内元素设置宽度width无效行内元素设置height无效，但是可以通过line-height来设置设置margin只有左右有效，上下无效设置padding只有左右有效，上下有效

H5和HTML5区别

H5是一个产品名词，包含了最新的HTML5、CSS3、ES6等新技术来制作的应用 HTML5是一个技术名词，指的就是第五代HTML

img上 title 与 alt

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

区别：一般当鼠标滑动到元素身上的时候显示title，而alt是img标签特有的属性，是图片内容的等价描述，用于图片无法加载时显示，这样用户还能看到关于丢失了什么东西的一些信息，相对来说比较友好。

前端页面有哪三层构成，分别是什么？

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

结构层（structural layer）结构层类似于盖房子需要打地基以及房子的悬梁框架，它是由HTML超文本标记语言来创建的，也就是页面中的各种标签，在结构层中保存了用户可以看到的所有内容，比如说：一段文字、一张图片、一段视频等等

表示层（presentation layer）表示层是由CSS负责创建，它的作用是如何显示有关内容，学名：层叠样式表，也就相当于装修房子，看你要什么风格的，田园的、中式的、地中海的，总之CSS都能办妥

行为层（behaviorlayer）行为层表示网页内容跟用户之间产生交互性，简单来说就是用户操作了网页，网页给用户一个反馈，这是JavaScript和DOM主宰的领域

1. src 和 href 的区别

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

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

seo

SEO（英文 Search Engine Optimization）字面理解很简单的，就是“搜索引擎优化”，最简单的理解就是“搜索自然排名”。

2. 对 HTML 语义化的理解

语义化是指 根据网页中内容的结构，选择适合的HTML标签进行编写,通俗来讲就是用正确的标签做正确的事情。

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

语义化的优点如下：

在没有CSS的情况下，页面也能呈现出很好的内容结构、代码结构。
有利于SEO，让搜索引擎爬虫更好的理解网页，从而获取更多的有效信息，提升网页的权重。
方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以语义的方式来渲染网页。
便于团队开发和维护，语义化的HTML可以让开发者更容易的看明白，从而提高团队的效率和协调能力

对机器友好，带有语义的文字表现力丰富，更适合搜索引擎的爬虫爬取有效信息，有利于 SEO。除此之外，语义类还支持读屏软件，根据文章可以自动生成目录；
对开发者友好，使用语义类标签增强了可读性，结构更加清晰，开发者能清晰的看出网页的结构，便于团队的开发与维护。

常见的语义化标签：

<header></header>  头部

<nav></nav>  导航栏

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

<main></main>  主要区域

<article></article>  主要内容

<aside></aside>  侧边栏

<footer></footer>  底部

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

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

浏览器渲染页面的两种模式（可通过 document.compatMode 获取，比如，语雀官网的文档类型是CSS1Compat）：

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

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

如果没有 defer 或 async 属性，浏览器就会暂停html解析,会立即加载并执行相应的脚本。执行完毕后恢复解析,script 阻塞了浏览器对 HTML 的解析，如果获取 JS脚本的网络请求迟迟得不到响应，或者 JS 脚本执行时间过长，都会导致白屏，用户看不到页面内容。

下图可以直观的看出三者之间的区别:

其中蓝色代表 js 脚本网络加载时间，红色代表 js 脚本执行时间，绿色代表 html 解析。

defer 和 async 属性都是异步去加载外部的 JS 脚本文件，它们都不会阻塞页面的解析，其区别如下：

执行顺序: 多个带 async 属性的标签，不能保证加载的顺序；多个带 defer 属性的标签，按照加载顺序执行；
脚本是否并行执行： async 属性，表示后续文档的加载和执行与 js 脚本的加载和执行是并行进行的，即异步执行；

defer 属性，加载后续文档的过程和 js 脚本的加载(此时仅加载不执行)是并行进行的(异步)，js 脚本需要等到文档所有元素解析完成之后才执行，DOMContentLoaded 事件触发执行之前。

async属性是在遇到scirpt标签时，浏览器开始异步下载，下载完成后如果此时 HTML 还没有解析完，浏览器会暂停解析，先让 JS 引擎执行代码，执行完毕后再进行解析（可能会阻塞）。如果在 JS下载完成之前，HTML 已经解析完毕了，立即执行 JS 代码，不存在阻塞问题
defer属性是在遇到scirpt标签时，浏览器开始异步下载，html页面解析完才执行js文件。（立即下载，但延迟执行（整个页面都解析完毕之后再执行）

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

b 字体加粗

行内元素有：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>、<source>、<track>、<wbr>。

9. 说一下 web worker

web worker 是浏览器内置的api，用来在单独的线程中执行JavaScript的代码，避免主线程阻塞，影响页面的响应， JavaScript是单线程的语言，web worker可以单独的开启一个线程，主线程将一些【可能会阻塞主线程】的任务分配给 worker 子线程去处理。两者互不干扰。等子线程处理完成之后，在通过消息的机制把处理结果返回给主线程即可。充分利用多线程的优势。

web worker不能操作DOM，不能使用浏览器内置对象（Document、Window、Parent）这些对象，但可以通过XMLHttpRequest，fetch发送请求，传送消息通过onmessage 和 postMessage

同源限制，worker脚本和主线程必须同源
不能alert、不能confirm，但是可以使用ajax（通常可以用来轮询后台数据）
主线程和worker线程，不能直接通信，必须通过消息传递

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

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

iframe能够原封不动的把嵌入的网页展现出来;
如果有多个网页引用iframe，那么只需要修改iframe的内容
用来加载速度较慢的内容（如广告）
可以使脚本并行下载
可以实现跨子域通信

缺点：

iframe 会阻塞主页面的 onload 事件
不利于seo（搜索引擎）所识别
会产生很多页面，不容易管理

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

**文档声明的作用：**文档声明是为了告诉浏览器，当前HTML文档使用什么版本的HTML来写的，这样浏览器才能按照声明的版本来正确的解析。

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

严格模式与混杂模式的区分：

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

区分：网页中的DTD，直接影响到使用的是严格模式还是混杂模式，可以说DTD的使用与这两种方式的区别息息相关。

如果文档包含严格的DOCTYPE ，那么它一般以严格模式呈现（严格 DTD ——严格模式）；
包含过渡 DTD 和 URI 的 DOCTYPE ，也以严格模式呈现，但有过渡 DTD 而没有 URI （统一资源标识符，就是声明最后的地址）会导致页面以混杂模式呈现（有 URI 的过渡 DTD ——严格模式；没有 URI 的过渡 DTD ——混杂模式）；
DOCTYPE 不存在或形式不正确会导致文档以混杂模式呈现（DTD 不存在或者格式不正确——混杂模式）；
HTML5 没有 DTD ，因此也就没有严格模式与混杂模式的区别，HTML5 有相对宽松的法，实现时，已经尽可能大的实现了向后兼容(HTML5 没有严格和混杂之分)。

总之，严格模式让各个浏览器统一执行一套规范兼容模式保证了旧网站的正常运行。

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

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

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

两者区别：

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

“优雅降级”观点认为应该针对那些最高级、最完善的浏览器来设计网站。而将那些被认为“过时”或有功能缺失的浏览器下的测试工作安排在开发周期的最后阶段，并把测试对象限定为主流浏览器（如 IE、Mozilla 等）的前一个版本。在这种设计范例下，旧版的浏览器被认为仅能提供“简陋却无妨 (poor, but passable)” 的浏览体验。可以做一些小的调整来适应某个特定的浏览器。但由于它们并非我们所关注的焦点，因此除了修复较大的错误之外，其它的差异将被直接忽略。

“渐进增强”观点则认为应关注于内容本身。内容是建立网站的诱因，有的网站展示它，有的则收集它，有的寻求，有的操作，还有的网站甚至会包含以上的种种，但相同点是它们全都涉及到内容。这使得“渐进增强”成为一种更为合理的设计范例。这也是它立即被 Yahoo 所采纳并用以构建其“分级式浏览器支持 (Graded Browser Support)”策略的原因所在。

01-HTML