1. doctype的作用是什么

DOCTYPE是html5标准网页声明，且必须声明在HTML⽂档的第⼀⾏。来告知浏览器的解析器⽤什么⽂档标准解析这个⽂档，不同的渲染模式会影响到浏览器对于 CSS 代码甚⾄ JavaScript 脚本的解析

⽂档解析类型有：

• BackCompat：怪异模式，浏览器使⽤⾃⼰的怪异模式解析渲染⻚⾯。（如果没有声明DOCTYPE，默认就是这个模式）
• CSS1Compat：标准模式，浏览器使⽤W3C的标准解析渲染⻚⾯。

2. HTML语义化是什么

语义化是指使⽤恰当语义的html标签，让页面具有良好的结构与含义。

语义化的好处主要有两点：

• 开发者友好：使⽤语义类标签增强了可读性，开发者也能够清晰地看出⽹⻚的结构，也更为便于团队的开发和维护
• 机器友好：带有语义的⽂字表现⼒丰富，更适合搜索引擎的爬⾍爬取有效信息，语义类还可以⽀持读屏软件，根据⽂章可以⾃动⽣成⽬录

这对于简书、知乎这种富⽂本类的应⽤很重要，语义化对于其⽹站的内容传播有很⼤的帮助

3. src和href的区别

src是指向外部资源的位置，指向的内容会嵌⼊到⽂档中当前标签所在的位置，在请求src资源时会将其指向的资源下载并应⽤到⽂档内，如js脚本，img图⽚和frame等元素。当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执⾏完毕，所以⼀般js脚本会放在底部⽽不是头部。

href是指向网络资源所在位置（的超链接），⽤来建⽴和当前元素或⽂档之间的连接，当浏览器识别到它他指向的⽂件时，就会并⾏下载资源，不会停⽌对当前⽂档的处理。

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

defer：浏览器指示脚本在⽂档被解析后执⾏，script被异步加载后并不会⽴刻执⾏，⽽是等待⽂档被解析完毕后执 ⾏。

async：同样是异步加载脚本，区别是脚本加载完毕后⽴即执⾏，这导致async属性下的脚本是乱序的，对于script 有先后依赖关系的情况，并不适⽤。

5. 有几种前端储存的方式

• cookies： 在HTML5标准前本地储存的主要⽅式，优点是兼容性好，请求头⾃带cookie⽅便，缺点是⼤⼩只有4k，⾃动请求头加⼊cookie浪费流量，每个domain限制20个cookie，Cookie 可以设置过期时间，也可以通过 JavaScript 进行读取和写入。

• localStorage：HTML5加⼊的以键值对(Key-Value)为标准的⽅式，优点是操作⽅便，永久性储存（除⾮⼿动删除），⼤⼩为5M，兼容IE8+

• sessionStorage：与localStorage基本类似，区别是sessionStorage当⻚⾯关闭后会被清理，⽽且与cookie、localStorage不同，他不能在所有同源窗⼝中共享，是会话级别的储存⽅式

• Web SQL：2010年被W3C废弃的本地数据库数据存储⽅案，但是主流浏览器（⽕狐除外）都已经有了相关的实现，web sql类似于SQLite，是真正意义上的关系型数据库，⽤sql进⾏操作，当我们⽤JavaScript时要进⾏转换，较为繁琐。

• IndexedDB： 是一种在客户端存储大量结构化数据的方式，它提供了一个类似数据库的 API，可以进行数据的增删改查操作。IndexedDB 是异步的，可以存储大量的数据，并且支持事务操作。它是NoSQL数据库，⽤键值对进⾏储存，可以进⾏快速读取操作，⾮常适合web场景，同时⽤JavaScript进⾏操作会⾮常⽅便。

6. 什么是web Quality（无障碍）

能够被残障人士使用的网站才能称得上一个易用的（易访问的）网站。无障碍性是指使所有用户，包括身体残障、认知障碍或其他特殊需求的用户，都能够访问和使用网站或应用程序。 例如使用 alt 属性： <img src="" alt="这是一幅画像">

有时候浏览器会无法显示图像。具体的原因有：

• 用户关闭了图像显示
• 浏览器是不支持图形显示的迷你浏览器
• 浏览器是语音浏览器（供盲人和弱视人群使用）

如果使用了 alt 属性，那么浏览器至少可以显示或读出有关图像的描述。

7. HTML5 drag api有哪些

• draggable属性：通过将draggable属性设置为true，可以使元素可拖动。
• dragstart事件：当拖动操作开始时触发的事件。可以通过该事件设置拖动时传递的数据。
• drag事件：在拖动操作期间持续触发的事件。
• dragend事件：当拖动操作结束时触发的事件。
• dropzone属性：可以将元素标记为可接受拖放的区域。
• dragenter事件：当可拖放的元素进入接受拖放的区域时触发的事件。
• dragleave事件：当可拖放的元素离开接受拖放的区域时触发的事件。
• dragover事件：在可接受拖放的区域上持续触发的事件。
• drop事件：当拖动的元素在接受拖放的区域释放时触发的事件。

8. iframe是什么

iframe是HTML中的一个标签，用于在网页中嵌入另一个网页或文档。它允许在一个网页中显示另一个网页的内容，实现页面的分割和加载外部内容。

缺点：

• 安全性问题：由于iframe可以嵌入其他网页，存在安全风险。恶意网站可以使用iframe来欺骗用户或进行跨站脚本攻击。

• SEO问题：搜索引擎优化（SEO）可能受到影响。搜索引擎可能会忽略iframe中的内容，导致嵌入的网页无法被搜索引擎索引。

• 加载速度：使用iframe会增加页面的加载时间，特别是当嵌入的网页内容较多时。这可能会影响用户体验，尤其是在低速网络环境下。

• 无法跨域访问：由于浏览器的同源策略限制，iframe法直接访问跨域的内容。这意味着在嵌入其他域名的网页时，无法通过JavaScript等方式与嵌入的页面进行交互。

• 用户体验问题：iframe可能会导致网页的滚动问题，特别是当iframe中的内容长度超过了iframe的高度时，用户可能需要在iframe和主页面之间进行滚动。

9. HTML5新特性

• 语义化标签：HTML5引入了一些新的语义化标签，如<header>、<nav>、<section>、<article>等，使页面结构更加清晰和易于理解。

• 视频和音频支持：HTML5提供了<video>和<audio>标签，使得在网页中直接嵌入和播放视频和音频变得更加容易。

• 画布(Canvas)：HTML5的<canvas>元素允许开发者通过JavaScript来动态绘制图形，实现各种复杂的图形效果。

• 地理位置API：HTML5的地理位置API可以获取用户的地理位置信息，使得开发者可以根据用户的位置提供更加个性化的服务。

• 本地存储：HTML5引入了本地存储机制，如localStorage和sessionStorage，可以在浏览器端存储数据，使得网页可以离线使用或在断网情况下恢复数据。

• Web Workers：HTML5的Web Workers允许在后台运行脚本，提高了网页的性能和响应能力。

• Web存储：HTML5引入了Web存储API，包括IndexedDB和Web SQL Database，使得网页可以在本地存储和查询大量数据。

• 拖放(Drag and Drop)：HTML5的拖放API使得开发者可以实现元素的拖动和放置操作，提供了更好的用户交互体验。

10. 什么是浏览器内核

主要分成两部分：渲染引擎(layout engineer或Rendering Engine)和JS引擎

• 渲染引擎：负责取得网页的内容（HTML、XML、图像等等）、整理讯息（例如加入CSS等），以及计算网页的显示方式，然后会输出至显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同，所以渲染的效果也不相同。所有网页浏览器、电子邮件客户端以及其它需要编辑、显示网络内容的应用程序都需要内核
• JS引擎：解析和执行javascript来实现网页的动态效果