面试题 - 练习文章 - 在线打字练习（dazi.91xjr.com）

1. src和href的区别
src和href都是用来引用外部的资源，它们的区别如下：
src：表示对资源的引用，它指向的内容会嵌入到当前标签所在的位置。
src会将其指向的资源下载并应⽤到⽂档内，如请求js脚本。当浏览器解析到该元素时
，会暂停其他资源的下载和处理，直到将该资源加载、编译、执⾏完毕，所以⼀般js脚本会放在页面底部。
href：表示超文本引用，它指向一些网络资源，建立和当前元素或本文档的链接关系。
当浏览器识别到它他指向的⽂件时，就会并⾏下载资源，不会停⽌对当前⽂档的处理。常用在a、link等标签上。
2. 对HTML语义化的理解
语义化是指根据内容的结构化（内容语义化），选择合适的标签（代码语义化）。通俗来讲就是用正确的标签做正确的事情。
语义化的优点如下：
对机器友好，带有语义的文字表现力丰富，更适合搜索引擎的爬虫爬取有效信息，有利于SEO。
除此之外，语义类还支持读屏软件，根据文章可以自动生成目录；
对开发者友好，使用语义类标签增强了可读性，结构更加清晰，开发者能清晰的看出网页的结构，便于团队的开发与维护。
常见的语义化标签：
<header></header> 头部
<nav></nav> 导航栏
<section></section> 区块（有语义化的div）
<main></main> 主要区域
<article></article> 主要内容
<aside></aside> 侧边栏
<footer></footer> 底部
4. script标签中defer和async的区别
如果没有defer或async属性，浏览器会立即加载并执行相应的脚本。
它不会等待后续加载的文档元素，读取到就会开始加载和执行，这样就阻塞了后续文档的加载。
下图可以直观的看出三者之间的区别:
其中蓝色代表js脚本网络加载时间，红色代表js脚本执行时间，绿色代表html解析。
defer 和 async属性都是去异步加载外部的JS脚本文件，它们都不会阻塞页面的解析，其区别如下：
执行顺序：多个带async属性的标签，不能保证加载的顺序；多个带defer属性的标签，按照加载顺序执行；
脚本是否并行执行：async属性，表示后续文档的加载和执行与js脚本的加载和执行是并行进行的，即异步执行；
defer属性，加载后续文档的过程和js脚本的加载(此时仅加载不执行)是并行进行的(异步)，
js脚本需要等到文档所有元素解析完成之后才执行，DOMContentLoaded事件触发执行之前。
17. 文档声明（Doctype）和<!Doctype html>有何作用? 严格模式与混杂模式如何区分？
它们有何意义?
文档声明的作用：文档声明是为了告诉浏览器，当前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)”策略的原因所在。