【精品问答】前端面试手册之HTML篇

DOCTYPE的作用是什么？ DOCTYPE（文档类型声明）是HTML文档的最前面部分，它告诉浏览器或解析器应该以何种模式来解析文档。正确的DOCTYPE能够确保浏览器按照预期的标准（如HTML4、HTML5、XHTML等）来渲染页面。

文档解析类型模式的区别是什么？ 主要有三种解析模式：标准模式（Standards Mode）、混杂模式（Quirks Mode）和有限 quirks 模式（Almost Standards Mode）。标准模式下，浏览器会严格按照W3C标准解析和渲染页面；混杂模式下，为了兼容早期网页，浏览器会使用旧有的、非标准的解析方式；有限quirks模式介于两者之间，更接近标准模式但保留一些对老网页友好的特性。

HTML、XHTML、XML有什么区别？

• HTML（HyperText Markup Language）是一种用于创建网页的标准标记语言，语法较为宽松。
• XHTML（Extensible HyperText Markup Language）是HTML的一个严格版本，基于XML，要求严格的语法规则，比如所有标签必须闭合。
• XML（eXtensible Markup Language）是一种数据存储和传输格式，设计用来传输和存储数据，而非显示数据，其语法非常严格，所有的标签都必须闭合，且区分大小写。

什么是data-属性？ data-属性是HTML5引入的一种自定义属性，允许开发者在元素上嵌入自定义的数据。这些属性以"data-"为前缀，后面跟上自定义的名称，例如data-id="123"，常用于存储JavaScript可以访问的额外信息，而不会影响到HTML的语义。

你对HTML语义化的理解？ HTML语义化是指在编写HTML时，尽可能地使用具有明确意义的标签来表达文档结构和内容，而不是仅仅依赖样式类来布局。这样做有利于搜索引擎更好地理解网页内容，提高可访问性，同时使代码更加清晰易读，便于维护。

HTML5与HTML4的不同之处? HTML5引入了许多新特性，包括新的表单控件（如date、email）、多媒体支持（audio、video标签）、图形绘制能力（canvas）、离线存储（localStorage）、地理位置API、拖放功能、以及新的语义化标签（如

有哪些常用的meta标签？ 常用的meta标签有：

• <meta charset="UTF-8">：指定文档的字符编码。
• <meta name="viewport" content="width=device-width, initial-scale=1.0">：控制网页在不同设备上的缩放和布局。
• <meta name="description" content="...">：提供网页的描述信息，常用于搜索引擎优化。
• <meta name="keywords" content="...">：设置网页关键词，也与SEO相关。
• <meta http-equiv="refresh" content="seconds; url=http://example.com">：自动刷新页面或跳转到其他页面。

src和href的区别？

• src（source）属性用于替换当前元素的内容，通常用于<img>、<script>、<iframe>等标签，指向外部资源的URL。
• href（hypertext reference）属性用于建立当前元素与另一个文档或资源之间的链接关系，常见于<a>、<link>等标签，用于导航或引用CSS文件等。

知道img的srcset的作⽤是什么？ srcset属性用于图片响应式设计，允许开发者为<img>标签提供多个图像源，并让浏览器根据用户的设备像素比（DPR）或视口宽度选择最合适的图像版本进行加载，从而提高页面加载速度和用户体验。

还有哪一个标签能起到跟srcset相似作用？ <picture>元素也能实现类似功能，它提供了更灵活的方式来适应不同条件下的图片展示。通过内嵌多个<source>标签，每个<source>可以指定不同的媒体查询条件和图片源，最后是一个默认的<img>作为回退选项。

script标签中defer和async的区别？

• defer属性使得脚本在文档解析完成后，DOMContentLoaded事件触发之前执行，所有带有defer的脚本按顺序执行。
• async属性使得脚本异步加载，不保证执行顺序，只要脚本下载完成就会立即执行，不阻塞页面渲染。

有哪几种前端储存的方式？ 前端存储方式主要有：

• localStorage：持久存储，除非主动删除，否则数据一直存在。
• sessionStorage：会话存储，当浏览器窗口关闭时数据会被清除。
• Cookies：传统的小型数据存储方式，可用于跨域，但容量小且每次请求都会发送给服务器。
• IndexedDB：一个客户端存储大量结构化数据的低级API，适合存储大量数据。
• Web Storage API（Web SQL已被废弃）：一种使用SQL操作本地数据库的API，但已不再推荐使用。

前端存储这些方式的区别是什么？

• 容量：Cookies一般限制在4KB左右，localStorage和sessionStorage大约为5MB，IndexedDB的存储空间更大，取决于用户硬盘空间。
• 生命周期：Cookies可以通过设置过期时间来控制，localStorage永久存储，除非手动删除，sessionStorage仅在当前会话有效。
• 数据类型：Cookies只能存储字符串，需要序列化复杂数据；localStorage和sessionStorage可以存储字符串，但也可以通过JSON.stringify和JSON.parse处理复杂对象；IndexedDB可以存储任何类型的数据，包括二进制大对象。
• 用途：Cookies常用于跨站身份验证；localStorage和sessionStorage适用于简单的客户端状态管理；IndexedDB适用于构建复杂的Web应用，需要存储大量结构化数据的情况。