前端面试题html

2023-12-25 14:42:46

HTML

DOCTYPE有什么作用?

DOCTYPE是一种指示浏览器以何种HTML或XHTML规范来解析文档的声明。它能够告知浏览器网页文档使用的标记语言的类型以及版本,从而确保浏览器能够正确地展示网页内容。DOCTYPE声明通常位于HTML文档的开头,是HTML文档的必须部分。

img标签的title和alt属性有什么区别

alt属性用于为图像提供替代文本,即使图像无法加载,也可以描述图像内容,提高网页的可访问性和可用性。title属性则提供有关图像的额外信息,可以通过鼠标悬停或使用辅助技术来查看。它通常用于提供更多的上下文或补充描述,但并不是必需的。

简述一下src与href的区别

在 HTML 中,src 属性是用来指定外部资源的 URL,如图像、脚本或嵌入式对象的位置。例如,<img> 标签中的 src 属性指定图像的 URL。

href 属性则用来指定超文本链接的目标资源的位置,如超链接或 link 标记中的外部样式表。例如,<a> 标签中的 href 属性指定了链接目标的 URL。

iframe有哪些优缺点?

iframe(内联框架)是一种 HTML 元素,它允许在当前文档中嵌入另一个独立的 HTML 文档。iframe 有一些优点和缺点:

优点:

  1. 内容隔离iframe 可以将不同来源的内容隔离开来,使得它们在不同的上下文中运行。这有助于保护当前文档免受潜在的安全风险,并确保不同来源的内容不会互相干扰。
  2. 异步加载iframe 中的内容可以异步加载,这意味着页面主体内容可以在 iframe 加载完成之前呈现。这有助于提高页面加载速度。
  3. 独立滚动iframe 内的内容可以独立滚动,而不会影响主页面的滚动。这有助于在需要展示大量内容的情况下,提高用户体验。
  4. 跨域资源访问:在一定程度上,iframe 可以用于访问跨域资源,例如嵌入来自其他域的网页或应用。

缺点:

  1. 性能影响iframe 的使用可能会导致性能下降,因为它需要浏览器加载额外的文档资源。每个嵌入的 iframe 都需要额外的 HTTP 请求,这可能会延长页面加载时间。
  2. 复杂性增加iframe 的使用可能会使页面结构更加复杂,导致维护困难。而且,在 iframe 和主页面之间进行通信可能会涉及到跨域问题,这会增加开发难度。
  3. SEO 不友好:搜索引擎可能无法完全索引 iframe 中的内容,这会影响到网页的搜索引擎优化(SEO)。
  4. 可访问性问题iframe 在某些情况下可能导致可访问性问题。例如,屏幕阅读器可能无法正确解析 iframe 中的内容,导致部分用户无法访问这些内容。

综上所述,iframe 有一些优点,如内容隔离、异步加载和独立滚动等。然而,它也有一些缺点,如性能影响、复杂性增加、SEO 不友好和可访问性问题等。在使用 iframe 时,需要权衡这些优缺点,确保它适用于你的需求。

常用的meta标签有哪些?

meta 标签提供了有关 HTML 文档的元数据,如描述、关键词、作者等。以下是一些常用的 meta 标签:

  1. 字符集声明:声明文档使用的字符编码,通常为 UTF-8。

  2. 视口设置:控制页面在移动设备上的显示方式,如缩放级别和页面宽度。

  3. 页面描述:提供页面的简短描述,有助于搜索引擎了解页面内容。

  4. 关键词:设置页面关键词,有助于搜索引擎优化(SEO)。但请注意,大多数现代搜索引擎不再使用此标签。

  5. 作者:指定页面作者。

  6. 禁止缓存:告诉浏览器不要缓存页面。

  7. 自动刷新:设置页面在特定时间间隔后自动刷新。

  8. 跳转到其他页面:在指定的时间间隔后,自动将用户重定向到其他页面。

  9. 兼容模式:指定浏览器(如 Internet Explorer)使用特定的渲染模式。

  10. 搜索引擎索引控制:指示搜索引擎是否应索引页面和跟踪链接。

这些常用的 meta 标签可以帮助你控制页面的显示、搜索引擎优化和其他功能。根据页面需求,可以根据需要添加更多的 meta 标签。

H5和H4有什么不同?

  • 语义化标签: headerfooternavsectionarticleaside
  • 增强型表单:date(从一个日期选择器选择一个日期) 、email(包含 e-mail 地址的输入域) 、number(数值的输入域) 、range(一定范围内数字值的输入域) 、search(用于搜索域) 、tel(定义输入电话号码字段) 等
  • 视频和音频:audiovideo
  • Canvas绘图、 SVG绘图
  • 地理定位:Geolocation
  • 拖放API:drag
  • web worker:是运行在后台的 JavaScript,独立于其他脚本,不会影响页面的性能
  • web storage: localStoragesessionStorage
  • WebSocket: HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议

SVG和CANVAS的区别?

SVG和Canvas都是用于在web上绘制图形的技术,但它们有几个主要区别:

  1. SVG是基于矢量图的,而Canvas是基于像素图的。
  2. 在SVG中,每个绘制的元素都是一个独立的DOM对象,并且可以轻松地与JavaScript交互。 在Canvas中,所有绘制都被放置在一个画布中,并且只能与像素级别进行交互。
  3. SVG通常适用于静态图形,而Canvas适用于动态图形,例如游戏和数据可视化。

简而言之,SVG适用于需要与DOM交互并具有复杂动画和交互的情况,而Canvas则适用于创建大量图形对象和复杂动画。

defer 和 async 的区别 ?

defer 和 async 都是用于脚本加载和执行的关键字,两者的主要区别如下:

  1. defer 脚本会在 HTML 文档解析完成后执行,而 async 脚本会在下载完毕后立即执行。
  2. defer 脚本会按照它们在文档中的顺序执行,而 async 脚本是在下载完成后尽快执行,可能会打乱它们在文档中的顺序。
  3. defer 脚本会在 DOMContentLoaded 事件之后运行,而 async 脚本则不一定。

因此,如果需要按顺序执行脚本并且不想阻塞 DOM 的解析,可以使用 defer。如果脚本的执行不依赖于其他脚本或 DOM,可以使用 async 加快加载速度。

style标签prefetch和preload区别?

<style>标签的prefetchpreload属性都用于优化CSS资源的加载,但它们有不同的行为和目的:

  • prefetch属性告诉浏览器这个CSS资源可能在未来的某个时刻需要被加载,但并不需要立即加载。浏览器会在空闲时间异步加载这个资源,以便在需要时能够立即使用。prefetch适用于那些当前不需要但是可能在未来会需要使用的资源。
  • preload属性则告诉浏览器这个CSS资源在当前页面中必须被使用,因此应该立即加载和执行。浏览器会在主HTML文档下载和解析完成之前加载这个资源。preload适用于那些当前需要使用的资源。

文章来源:https://blog.csdn.net/qq_65225435/article/details/135197971
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。