前端面试题html
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
有一些优点和缺点:
优点:
- 内容隔离:
iframe
可以将不同来源的内容隔离开来,使得它们在不同的上下文中运行。这有助于保护当前文档免受潜在的安全风险,并确保不同来源的内容不会互相干扰。 - 异步加载:
iframe
中的内容可以异步加载,这意味着页面主体内容可以在iframe
加载完成之前呈现。这有助于提高页面加载速度。 - 独立滚动:
iframe
内的内容可以独立滚动,而不会影响主页面的滚动。这有助于在需要展示大量内容的情况下,提高用户体验。 - 跨域资源访问:在一定程度上,
iframe
可以用于访问跨域资源,例如嵌入来自其他域的网页或应用。
缺点:
- 性能影响:
iframe
的使用可能会导致性能下降,因为它需要浏览器加载额外的文档资源。每个嵌入的iframe
都需要额外的 HTTP 请求,这可能会延长页面加载时间。 - 复杂性增加:
iframe
的使用可能会使页面结构更加复杂,导致维护困难。而且,在iframe
和主页面之间进行通信可能会涉及到跨域问题,这会增加开发难度。 - SEO 不友好:搜索引擎可能无法完全索引
iframe
中的内容,这会影响到网页的搜索引擎优化(SEO)。 - 可访问性问题:
iframe
在某些情况下可能导致可访问性问题。例如,屏幕阅读器可能无法正确解析iframe
中的内容,导致部分用户无法访问这些内容。
综上所述,iframe
有一些优点,如内容隔离、异步加载和独立滚动等。然而,它也有一些缺点,如性能影响、复杂性增加、SEO 不友好和可访问性问题等。在使用 iframe
时,需要权衡这些优缺点,确保它适用于你的需求。
常用的meta标签有哪些?
meta
标签提供了有关 HTML 文档的元数据,如描述、关键词、作者等。以下是一些常用的 meta
标签:
-
字符集声明:声明文档使用的字符编码,通常为 UTF-8。
-
视口设置:控制页面在移动设备上的显示方式,如缩放级别和页面宽度。
-
页面描述:提供页面的简短描述,有助于搜索引擎了解页面内容。
-
关键词:设置页面关键词,有助于搜索引擎优化(SEO)。但请注意,大多数现代搜索引擎不再使用此标签。
-
作者:指定页面作者。
-
禁止缓存:告诉浏览器不要缓存页面。
-
自动刷新:设置页面在特定时间间隔后自动刷新。
-
跳转到其他页面:在指定的时间间隔后,自动将用户重定向到其他页面。
-
兼容模式:指定浏览器(如 Internet Explorer)使用特定的渲染模式。
-
搜索引擎索引控制:指示搜索引擎是否应索引页面和跟踪链接。
这些常用的 meta
标签可以帮助你控制页面的显示、搜索引擎优化和其他功能。根据页面需求,可以根据需要添加更多的 meta
标签。
H5和H4有什么不同?
- 语义化标签:
header
、footer
、nav
、section
、article
、aside
等 - 增强型表单:
date
(从一个日期选择器选择一个日期) 、email
(包含 e-mail 地址的输入域) 、number
(数值的输入域) 、range
(一定范围内数字值的输入域) 、search
(用于搜索域) 、tel
(定义输入电话号码字段) 等 - 视频和音频:
audio
、video
Canvas
绘图、SVG
绘图- 地理定位:
Geolocation
- 拖放API:
drag
web worker
:是运行在后台的JavaScript
,独立于其他脚本,不会影响页面的性能web storage
:localStorage
、sessionStorage
WebSocket
:HTML5
开始提供的一种在单个TCP
连接上进行全双工通讯的协议
SVG和CANVAS的区别?
SVG和Canvas都是用于在web上绘制图形的技术,但它们有几个主要区别:
- SVG是基于矢量图的,而Canvas是基于像素图的。
- 在SVG中,每个绘制的元素都是一个独立的DOM对象,并且可以轻松地与JavaScript交互。 在Canvas中,所有绘制都被放置在一个画布中,并且只能与像素级别进行交互。
- SVG通常适用于静态图形,而Canvas适用于动态图形,例如游戏和数据可视化。
简而言之,SVG适用于需要与DOM交互并具有复杂动画和交互的情况,而Canvas则适用于创建大量图形对象和复杂动画。
defer 和 async 的区别 ?
defer 和 async 都是用于脚本加载和执行的关键字,两者的主要区别如下:
- defer 脚本会在 HTML 文档解析完成后执行,而 async 脚本会在下载完毕后立即执行。
- defer 脚本会按照它们在文档中的顺序执行,而 async 脚本是在下载完成后尽快执行,可能会打乱它们在文档中的顺序。
- defer 脚本会在 DOMContentLoaded 事件之后运行,而 async 脚本则不一定。
因此,如果需要按顺序执行脚本并且不想阻塞 DOM 的解析,可以使用 defer。如果脚本的执行不依赖于其他脚本或 DOM,可以使用 async 加快加载速度。
style标签prefetch和preload区别?
<style>
标签的prefetch
和preload
属性都用于优化CSS资源的加载,但它们有不同的行为和目的:
prefetch
属性告诉浏览器这个CSS资源可能在未来的某个时刻需要被加载,但并不需要立即加载。浏览器会在空闲时间异步加载这个资源,以便在需要时能够立即使用。prefetch
适用于那些当前不需要但是可能在未来会需要使用的资源。preload
属性则告诉浏览器这个CSS资源在当前页面中必须被使用,因此应该立即加载和执行。浏览器会在主HTML文档下载和解析完成之前加载这个资源。preload
适用于那些当前需要使用的资源。
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符,请联系我的编程经验分享网邮箱:veading@qq.com进行投诉反馈,一经查实,立即删除!