当前位置: 首页 > news >正文

前端面试题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 有一些优点和缺点:

优点:

  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适用于那些当前需要使用的资源。

相关文章:

前端面试题html

HTML DOCTYPE有什么作用&#xff1f; DOCTYPE是一种指示浏览器以何种HTML或XHTML规范来解析文档的声明。它能够告知浏览器网页文档使用的标记语言的类型以及版本&#xff0c;从而确保浏览器能够正确地展示网页内容。DOCTYPE声明通常位于HTML文档的开头&#xff0c;是HTML文档…...

AOSP源码下载方法,解决repo sync错误:android-13.0.0_r82

篇头 最近写文章&#xff0c;反复多次折腾AOSP代码&#xff0c;因通过网络repo sync aosp代码&#xff0c;能一次顺利下载的概率很低&#xff0c;以前就经常遇到&#xff0c;但从未总结&#xff0c;导致自己也要回头检索方法&#xff0c;所以觉得可以总结一下&#xff0c;涉及…...

TCP:IP原理

TCP/IP 原理 TCP/IP 协议不是 TCP 和 IP 这两个协议的合称&#xff0c;而是指因特网整个 TCP/IP 协议族。从协议分层模型方面来讲&#xff0c;TCP/IP 由四个层次组成&#xff1a;网络接口层、网络层、传输层、应用层。 网络访问层(Network Access Layer) 网络访问层(Network …...

Java 中 Lambda 表达式的使用

目录 一、Lambda 表达式的概念 二、Lambda 表达式的语法格式 三、Lambda 表达式的案例使用 1、使用 Lambda 来实现启动线程 2、使用 Lambda 表达式实现集合的排序 3、使用 Lambda 表达式实现文件夹下的文件查找 一、Lambda 表达式的概念 Lambda 表达式是特殊的匿名内部类…...

【IO】IO模型与零拷贝

前言&#xff1a; 正在运行的程序其实就是系统中的一个进程&#xff0c;操作系统会为每一个进程分配内存空间&#xff0c;而内存空间分为两部分&#xff0c;一部分是用户空间&#xff0c;这是用户进程访问的内存区域&#xff1b;另一部分是内核空间&#xff0c;是操作系统内核访…...

鸿蒙 - arkTs:状态管理

状态 State&#xff1a; 在声明式UI中&#xff0c;以状态驱动视图更新 状态&#xff08;State&#xff09;&#xff1a;指驱动视图更新的数据&#xff08;被装饰器标记的变量&#xff09;视图&#xff08;View&#xff09;&#xff1a;基于UI描述渲染得到的用户界面 使用示例…...

YOLOv5-Lite 树莓派4B 15帧教程

【前言】 由于v5Lite仓库遗漏了不少历史问题&#xff0c;最大的问题是毕业后卷起来了&#xff0c;找不到时间更新。 上面是这篇博客的背景&#xff0c;那么先说下结论&#xff0c;使用 v5lite-e 模型&#xff0c;在 树莓派4B&#xff08;4G内存&#xff09; 上&#xff0c;有三…...

2014年第三届数学建模国际赛小美赛A题吹口哨解题全过程文档及程序

2014年第三届数学建模国际赛小美赛 A题 吹口哨 原题再现&#xff1a; 哨子是一种小装置&#xff0c;当空气被迫通过开口时会发出声音。哨声的巨大而引人注目&#xff0c;使其对警察和体育裁判来说至关重要。当救生员、迷路的露营者或犯罪受害者使用它们时&#xff0c;它们可以…...

设计模式-注册模式

设计模式专栏 模式介绍模式特点应用场景注册模式和单例模式的区别代码示例Java实现注册模式Python实现注册模式 注册模式在spring中的应用 模式介绍 注册模式是一种设计模式&#xff0c;也称为注册树或注册器模式。这种模式将类的实例化和创建分离开来&#xff0c;避免在应用程…...

css 美化滚动条样式

ChatgGPT4.0国内站点: 海鲸AI-支持GPT(3.5/4.0)&#xff0c;文件分析&#xff0c;AI绘图 在CSS中&#xff0c;你可以使用伪元素::-webkit-scrollbar以及相关的伪元素来为Webkit浏览器&#xff08;如Chrome和Safari&#xff09;自定义滚动条的样式。以下是一些基本的CSS规则&am…...

视频压缩不影响画质简单方法,一分钟搞定!

很多朋友在处理视频的时候都会遇到视频过大的问题&#xff0c;想要压缩视频的同时不影响画质&#xff0c;简单的方法有两种。一种是用专业的压缩软件&#xff0c;在压缩的时候设置一个合适的压缩比例&#xff0c;压缩大小的同时保持清晰度&#xff0c;也能提高压缩率&#xff0…...

Zookeeper的使用场景

统一命名服务 利用ZooKeeper节点的树形分层结构和子节点的顺序维护能力&#xff0c;来为分布式系统中的资源命名。 例&#xff1a;分布式节点命名 分布式消息队列 1.在Zookeeper中创建一个持久节点&#xff0c;用作队列的根节点。队列元素的节点放在这个根节点下。 2.入队:…...

Java 面试题集锦记录

Java 面试题集锦记录 一1. SpringBoot、SpringCloud区别2. SpringCloud怎么保证服务间通信&#xff1f;3. Spring怎么保持高可用性、稳定性&#xff1f;4. 负载均衡5. [Rabbitmq](https://blog.csdn.net/qq_40985985/article/details/128013229) 怎么避免重复消费&#xff0c;[…...

【自然语言处理】第2部分:识别文本中的个人身份信息

自我介绍 做一个简单介绍&#xff0c;酒架年近48 &#xff0c;有20多年IT工作经历&#xff0c;目前在一家500强做企业架构&#xff0e;因为工作需要&#xff0c;另外也因为兴趣涉猎比较广&#xff0c;为了自己学习建立了三个博客&#xff0c;分别是【全球IT瞭望】&#xff0c;【…...

C#中的.NET与.NET Framework区别

C#是一种编程语言&#xff0c;而.NET是一个开发平台。在.NET生态系统中&#xff0c;有两个相关但不同的概念&#xff1a;.NET和.NET Framework。 .NET Framework 发布时间&#xff1a; .NET Framework是最早引入的&#xff0c;它于2002年首次发布。它是一个用于构建Windows应…...

详解Keras3.0 Layer API: LSTM layer

LSTM layer 用于实现长短时记忆网络&#xff0c;它的主要作用是对序列数据进行建模和预测。 遗忘门&#xff08;Forget Gate&#xff09;&#xff1a;根据当前输入和上一个时间步的隐藏状态&#xff0c;计算遗忘门的值。遗忘门的作用是控制哪些信息应该被遗忘&#xff0c;哪些…...

Vue和React的运行时,校验引入包的上下文差异

背景 系统使用 webpack 5 模块联邦实现微前端&#xff0c;有关如何实现跨应用的代码共享&#xff0c;可参考 如何优雅的实现跨应用的代码共享 里的第三大点。 总之&#xff0c;这里是其他应用使用了某个应用共享出来的reg文件&#xff0c;引入方式为&#xff1a; import REG …...

C语言中函数调用和嵌套

函数是C语言的基本组成元素 函数调用 根据函数在程序中出现的位置有下列三种函数调用方式&#xff1a; 将函数作为表达式调用 将函数作为表达式调用时&#xff0c;函数的返回值参与表达式的运算&#xff0c;此时要求函数必须有返回值 int retmax(100,150); 将函数作为语句…...

JVM基础篇---02

为什么需要用户自定义类加载器&#xff1a; 扩展类加载器的功能&#xff1a; Java的默认类加载器主要有三个&#xff0c;分别是引导类加载器、扩展类加载器和应用程序类加载器。其中&#xff0c;引导类加载器和扩展类加载器是由JVM实现的&#xff0c;用户无法修改其行为。而应用…...

HTML网站基础

一、前端开发基础 前端一共三门语言——HTML、CSS、JS&#xff08;Java Script&#xff09; HTML用于静态网页框架&#xff0c;CSS用于修饰&#xff0c;JS构成动态网页 1、HTML 对于中文网页需要使用 <meta charset"utf-8"> 声明编码&#xff0c;否则会出现…...

SpringBoot-17-MyBatis动态SQL标签之常用标签

文章目录 1 代码1.1 实体User.java1.2 接口UserMapper.java1.3 映射UserMapper.xml1.3.1 标签if1.3.2 标签if和where1.3.3 标签choose和when和otherwise1.4 UserController.java2 常用动态SQL标签2.1 标签set2.1.1 UserMapper.java2.1.2 UserMapper.xml2.1.3 UserController.ja…...

RestClient

什么是RestClient RestClient 是 Elasticsearch 官方提供的 Java 低级 REST 客户端&#xff0c;它允许HTTP与Elasticsearch 集群通信&#xff0c;而无需处理 JSON 序列化/反序列化等底层细节。它是 Elasticsearch Java API 客户端的基础。 RestClient 主要特点 轻量级&#xff…...

谷歌浏览器插件

项目中有时候会用到插件 sync-cookie-extension1.0.0&#xff1a;开发环境同步测试 cookie 至 localhost&#xff0c;便于本地请求服务携带 cookie 参考地址&#xff1a;https://juejin.cn/post/7139354571712757767 里面有源码下载下来&#xff0c;加在到扩展即可使用FeHelp…...

日语AI面试高效通关秘籍:专业解读与青柚面试智能助攻

在如今就业市场竞争日益激烈的背景下&#xff0c;越来越多的求职者将目光投向了日本及中日双语岗位。但是&#xff0c;一场日语面试往往让许多人感到步履维艰。你是否也曾因为面试官抛出的“刁钻问题”而心生畏惧&#xff1f;面对生疏的日语交流环境&#xff0c;即便提前恶补了…...

RocketMQ延迟消息机制

两种延迟消息 RocketMQ中提供了两种延迟消息机制 指定固定的延迟级别 通过在Message中设定一个MessageDelayLevel参数&#xff0c;对应18个预设的延迟级别指定时间点的延迟级别 通过在Message中设定一个DeliverTimeMS指定一个Long类型表示的具体时间点。到了时间点后&#xf…...

MODBUS TCP转CANopen 技术赋能高效协同作业

在现代工业自动化领域&#xff0c;MODBUS TCP和CANopen两种通讯协议因其稳定性和高效性被广泛应用于各种设备和系统中。而随着科技的不断进步&#xff0c;这两种通讯协议也正在被逐步融合&#xff0c;形成了一种新型的通讯方式——开疆智能MODBUS TCP转CANopen网关KJ-TCPC-CANP…...

自然语言处理——Transformer

自然语言处理——Transformer 自注意力机制多头注意力机制Transformer 虽然循环神经网络可以对具有序列特性的数据非常有效&#xff0c;它能挖掘数据中的时序信息以及语义信息&#xff0c;但是它有一个很大的缺陷——很难并行化。 我们可以考虑用CNN来替代RNN&#xff0c;但是…...

OpenPrompt 和直接对提示词的嵌入向量进行训练有什么区别

OpenPrompt 和直接对提示词的嵌入向量进行训练有什么区别 直接训练提示词嵌入向量的核心区别 您提到的代码: prompt_embedding = initial_embedding.clone().requires_grad_(True) optimizer = torch.optim.Adam([prompt_embedding...

Java求职者面试指南:Spring、Spring Boot、MyBatis框架与计算机基础问题解析

Java求职者面试指南&#xff1a;Spring、Spring Boot、MyBatis框架与计算机基础问题解析 一、第一轮提问&#xff08;基础概念问题&#xff09; 1. 请解释Spring框架的核心容器是什么&#xff1f;它在Spring中起到什么作用&#xff1f; Spring框架的核心容器是IoC容器&#…...

【MATLAB代码】基于最大相关熵准则(MCC)的三维鲁棒卡尔曼滤波算法(MCC-KF),附源代码|订阅专栏后可直接查看

文章所述的代码实现了基于最大相关熵准则(MCC)的三维鲁棒卡尔曼滤波算法(MCC-KF),针对传感器观测数据中存在的脉冲型异常噪声问题,通过非线性加权机制提升滤波器的抗干扰能力。代码通过对比传统KF与MCC-KF在含异常值场景下的表现,验证了后者在状态估计鲁棒性方面的显著优…...