html面试题及答案
# html 面试题及答案
# html5 新特性
- 文档类型声明
HTML5 的文档声明相对来说更为简便 <!DOCTYPE html>
- 音视频的支持
audio 和 video 标签
- 图形的支持
svg 和 canvas
- 新增了一些语义化元素和移除元素
新增：article、nav、details、footer、header、main、time、canvas、svg、audio、video 等标签
移除：font、center、u、big、strike、tt 等标签
- 会话存储和本地存储
localStorage、sessionStorage
# 严格模式和混杂模式
严格模式：又称标准模式，是指浏览器按照 W3C 标准解析代码。
混杂模式：又称怪异模式或兼容模式，是指浏览器用自己的方式解析代码。
区分：
如果文档包含严格的 DOCTYPE ，那么它一般以严格模式呈现。（严格 DTD ——严格模式）
有 URI 的过渡 DTD ——严格模式；没有 URI 的过渡 DTD ——混杂模式
DOCTYPE 不存在或形式不正确会导致文档以混杂模式呈现。（DTD 不存在或者格式不正确——混杂模式）
HTML5 没有 DTD ，因此也就没有严格模式与混杂模式的区别，HTML5 有相对宽松的语法，实现时，已经尽可能大的实现了向后兼容。（ HTML5 没有严格和混杂之分）
# attribute 和 property 的区别
详解：
attribute： 是 dom 元素在文档中作为 html 标签拥有的属性，如 id,class,src,title,alt 等标签属性，
也可以自定义属性，通过 dom.setAttribute('class', 'a') 来设置属性，通过 dom.getAttribute('class', 'a')来获取属性；
property: 就是 dom 元素在 js 中作为对象拥有的属性。 赋值 dom.className = 'a' ;取值 dom.className;
相同点：对于 html 的标准属性来说，attribute 和 property 是同步的，是会自动更新的。
区别：但是对于自定义的属性来说， dom.test="";没修改成功 。 test 自定义属性还存在。
# src 和 href 的区别
- 请求资源类型不同
（1） href 是 Hypertext Reference 的缩写，表示超文本引用。用来建立当前元素和文档之间的链接。常用的有：link、a。
（2）在请求 src 资源时会将其指向的资源下载并应用到文档中，常用的有 script，img 、iframe；
- 作用结果不同
（1）href 用于在当前文档和引用资源之间确立联系；
（2）src 用于替换当前内容；
- 浏览器解析方式不同
（1）若在文档中添加 href ，浏览器会识别该文档为 CSS 文件，就会并行下载资源并且不会停止对当前文档的处理。这也是为什么建议使用 link 方式加载 CSS，而不是使用 @import 方式。
（2）当浏览器解析到 src ，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，图片和框架等也如此，类似于将所指向资源应用到当前内容。这也是为什么建议把 js 脚本放在底部而不是头部的原因。
# link 和@import 的区别
两者都是外部引用 CSS 的方式，但是存在一定的区别：
（1）link 是 XHTML 标签，除了能够加载 CSS，还可以定义 RSS 等其他事务；而@import 属于 CSS 范畴，只可以加载 CSS。
（2）link 引用 CSS 时，在页面载入时同时加载；@import 需要页面完全载入以后再加载。
（3）link 是 XHTML 标签，无兼容问题；@import 则是在 CSS2.1 提出的，低版本的浏览器不支持。
（4）link 支持使用 Javascript 控制 DOM 改变样式；而@import 不支持。
# Image 标签中 alt 和 title 有什么区别
图片中的 alt 属性是在图片不能正常显示时出现的文本提示。
图片中的 title 属性是在鼠标在移动到元素上的文本提示。
# link 标签 prefetch、preload 作用
preload 和 prefetch 的出现为我们提供了可以更加细粒度地控制浏览器加载资源的方法。
相同点： preload 和 prefetch 都没有同域名的限制；
- preload
link 标签的 preload 是一种声明式的资源获取请求方式，用于提前加载一些需要的依赖，并且不会影响页面的 onload 事件，
适用场景：本页面接下来大概率要使用的资源
加载时间：立即加载（一般而言，跟 as 有关）
- prefetch
pretch 加载的资源可以获取非当前页面所需要的资源，并且将其放入缓存至少 5 分钟（无论资源是否可以缓存）；并且，当页面跳转时，未完成的 prefetch 请求不会被中断；
适用场景：下个页面的资源。下个页面很可能会去访问
加载时间：浏览器闲置的时候才会加载（一般而言）
参考：https://www.jianshu.com/p/16bffc804868 (opens new window)