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

前端面试 HTML篇

src和href的区别

src和href都是用来加载外部资源,区别如下

  • src:当浏览器解析到该元素时,会暂停其他资源的加载和处理,直到该资源加载完成。 它会将资源内容嵌入到当前标签所在的位置,将其指向的资源下载应用到文档内,如js脚本等。常用在img、script、iframe等标签。
  • href:指向外部资源所在的位置,和当前元素位置建立链接,当浏览器解识别到它指向的位置,将其下载的时候不会阻止其他资源的加载解析。常用在a 、 link标签。

HTML5新增特性

  • 新增语义化标签,head、footer、nav、main、section等
  • 新增表单类型属性,email、number、时间控件、color颜色拾取器、placeholder、autofocus自动获取焦点...
  • 新增音视频标签,video、audio
  • 新增canvas画布、websocket通信、拖拽等
  • 新增本地存储localStorage、sessionStorage

对HTML语义化理解

根据内容来选择合适的标签

  • 方便浏览器爬虫更好的识别内容。
  • 有利于代码可读性,开发者能清晰的看出网页的结构,便于团队的开发与维护。

DOCTYPE(⽂档类型) 的作⽤

DOCTYPE是HTML5中一种标准通用标记语言的文档类型声明,是用来告诉浏览器的解析器,该用什么样的方式去加载识别文档。

iframe 有那些优点和缺点?

iframe通常用来加载外部链接,不会影响网页内容的加载。

优点

  • 可以将网页原封不动的加载进来
  • 增加代码的可用性
  • 用来加载显示较慢的内容,如广告、视频等

缺点

  • 加载的内容无法被浏览器引擎识别,对SEO不友好
  • 会阻塞onload事件加载
  • 会产生很多页面,不利于管理

Canvas和SVG的区别

  • canvas画布,是通过javascript来绘制2d图,是逐像素进行渲染。
  • SVG矢量图,是基于XML描述的2D图形语言,每个元素都是可用的,可以为其添加事件。

行内元素、块级元素、空(void)

  • 行内: a、b、span、input、img、select、 strong
  • :p、div、h1、ul、ol、li、dl、dt、dd
  • :<hr>、<br>、<img>、<input>、<link>、<meta>

怎样添加、移除、移动、复制、创建和查找节点

  • 添加节点document.appendChild(dom)
  • 移除节点document.removeChild(dom)
  • 移动节点document.appendChild(targetDom)
  • 复制节点dom.cloneNode(true),参数true表示是否复制子节点
  • 创建节点document.createElement(dom)
  • 查找节点:
    • document.getElementById("elementId")
    • document.getElementsByClassName("className")
    • document.getElementsByTagName("tagName")
    • document.querySelector("selector")
    • document.querySelectorAll("selector")

相关文章:

前端面试 HTML篇

src和href的区别 src和href都是用来加载外部资源&#xff0c;区别如下 src&#xff1a;当浏览器解析到该元素时&#xff0c;会暂停其他资源的加载和处理&#xff0c;直到该资源加载完成。 它会将资源内容嵌入到当前标签所在的位置&#xff0c;将其指向的资源下载应用到文档内…...

Prometheus、Zabbix 和 Nagios 这三个工具的对100个节点的部署设计的信息流

Prometheus 1. 基本组件及角色 Prometheus主要由Prometheus Server、Exporter、Alertmanager和Grafana(可选)等组件构成。 Prometheus Server:负责数据的收集、存储和查询,以及规则的评估。Exporter:部署在被监控节点上,负责收集节点的各种指标数据。Alertmanager:负责…...

Tableau 基础表制作

目录 1.数据连接 2. 数据可视化 3. 基础表制作 3.1 对比分析&#xff1a;比大小 1. 柱状图 2. 条形图 3. 热力图 4. 气泡图 5. 词云 3.2 变化分析&#xff1a;看趋势 1. 折线图 2. 面积图 3.3 构成分析&#xff1a;看占比 1. 饼图 2. 树地图 3. 堆积图 3.4 关…...

openAICEO山姆奥特曼未来预测雄文之三个观察

《三个观察》 山姆奥特曼 这篇文章主要讲的是关于AGI&#xff08;人工通用智能&#xff09;的未来发展及其对社会的影响&#xff0c;用大白话总结如下&#xff1a; 核心观点&#xff1a; AGI是什么&#xff1f; AGI是一种能像人类一样解决各种复杂问题的智能系统&#xff0c;比…...

springboot入门-service层构造器注入原理

在 Spring Boot 中&#xff0c;通过构造器注入的方式将 Repository&#xff08;JPA&#xff09;或 Mapper&#xff08;MyBatis&#xff09;注入到 Service 层的原理及示例如下&#xff1a; 1. 构造器注入的原理 依赖注入&#xff08;DI&#xff09;机制&#xff1a; Spring 容…...

JavaScript 笔记 --- part6 --- JS进阶 (part1)

JS 进阶(part1) 作用域 局部作用域 定义: 局部作用域指的是在函数内部定义的变量&#xff0c;只能在函数内部访问&#xff0c;外部不能访问。 特点: 局部作用域变量只能在函数内部或代码块中访问&#xff0c;外部不能访问。 分类: 函数作用域: 指的是在函数内部定义的变量&…...

使用matplotlib绘制Raincloud图/云雨图/柱状图/小提琴图

需求&#xff1a; 使用Python的matplotlib绘制数据分布、数据箱型图、数据散点图 参考&#xff1a; https://blog.csdn.net/weixin_39559994/article/details/128197965?fromshareblogdetail&sharetypeblogdetail&sharerId128197965&sharereferPC&sharesource…...

BT152-ASEMI机器人率器件专用BT152

编辑&#xff1a;LL BT152-ASEMI机器人率器件专用BT152 型号&#xff1a;BT152 品牌&#xff1a;ASEMI 封装&#xff1a;TO-220F 批号&#xff1a;最新 引脚数量&#xff1a;3 封装尺寸&#xff1a;如图 特性&#xff1a;单向可控硅 工作结温&#xff1a;-40℃~150℃ …...

【Redis——通用命令】

文章目录 Redis为什么快&#xff1f;生产环境的概念Redis中最核心的两个命令get&#xff1a;通过key拿valueset&#xff1a;将key和value存入数据库 其他通用命令keysexist判定key是否存在delexpire&#xff1a;为指定的key设置一个过期时间TTL&#xff08;Time To Live&#x…...

qt之开发大恒usb3.0相机一

1.在大恒相机给的sample里没有看见qt开发的demo. 第一步先运行c sdk中中的demo&#xff0c;看了下代码&#xff0c;大恒使用的UI框架是MFC.然后 vs2022编译。运行结果 第一步&#xff0c;先用qt进行坐下页面布局&#xff0c;如下图&#xff08;保存图片的地方做了些更改&#…...

系列位置效应——AI与思维模型【80】

一、定义 系列位置效应思维模型是指在一系列事物或信息的呈现过程中&#xff0c;人们对于处于系列开头和结尾部分的项目的记忆效果优于中间部分项目的现象。具体而言&#xff0c;开头部分的记忆优势被称为首因效应&#xff0c;结尾部分的记忆优势被称为近因效应。这种效应反映…...

解决conda虚拟环境安装包却依旧安装到base环境下

最近跑项目装包装到几度崩溃&#xff0c;包一直没有安装到正确位置&#xff0c;为此写下这篇文章记录一下&#xff0c;也希望能帮到有需要的人。&#xff08;此文章开发环境为anaconda和window&#xff09; 方法一 先conda deactivate,看到&#xff08;base&#xff09;消失…...

设计看似完美却测不过? Intra-Pair Skew 是「讯号完整性(Signal Integrity)」里最隐形的杀手

各位不知道有没有遇过&#xff0c;一对很长的差分走线&#xff0c;看起来很正常&#xff0c;但是测试结果偶尔会fail偶尔会pass&#xff0c;不像是软件问题&#xff0c;也不像是制程问题。 看了一下Layout&#xff0c;发现阻抗匹配控制的非常好&#xff0c;TDR测试也显示阻抗好…...

使用MyBatis注解方式的完整示例,涵盖CRUD、动态SQL、分页、事务管理等场景,并附详细注释和对比表格

以下是使用MyBatis注解方式的完整示例&#xff0c;涵盖CRUD、动态SQL、分页、事务管理等场景&#xff0c;并附详细注释和对比表格&#xff1a; 项目结构 mybatis-annotation-demo/ ├── src/ │ ├── main/ │ │ ├── java/ │ │ │ └── com.example/…...

【头脑风暴】加权平均

一些加权平均而不是算术平均的思路&#xff0c;启发来源&#xff1a;ACLS,WACLS。 简单平均假设所有样本的误差和噪声特性相同&#xff0c;但在实际电路中&#xff0c;不同阶段、不同时间点的样本价值&#xff08;对最终精度的贡献&#xff09;是不同的。​​加权平均的核心思想…...

DAM-3B,英伟达推出的多模态大语言模型

DAM-3B是什么 DAM-3B&#xff08;Describe Anything 3B&#xff09;是英伟达推出的一款多模态大语言模型&#xff0c;专门用于为图像和视频中的特定区域生成详细描述。用户可以通过点、边界框、涂鸦或掩码等方式来标识目标区域&#xff0c;从而得到精准且符合上下文的文本描述…...

2025年暨南大学 ACM校赛分析与题解

文章目录 C.最长公共前缀D.排列H.回文串 法不定法&#xff0c;在于因时因势AC不了就是还得加练&#xff01; C.最长公共前缀 字典树模版题目&#xff0c;不了解字典树的同学&#xff0c;可以看我的另一篇博客 算法 之 字典树 class Node: # 和模版题目相似&#xff0c;但是多…...

图像处理——边缘检测

1 概述 边缘检测是图像处理和计算机视觉中的一项基本技术&#xff0c;用于识别图像中亮度变化剧烈的像素点&#xff0c;这些像素点通常对应于物体的边界。它通过检测图像中亮度或颜色变化显著的区域&#xff0c;提取出物体的轮廓&#xff0c;常用于计算机视觉、图像处理和模式识…...

认识哈希以及哈希表的模拟实现

文章目录 1.什么是哈希2.哈希函数2.1 除留余数法/除法散列法2.2 乘法散列法2.3 全域散列法 3.哈希冲突4.解决哈希冲突的方法4.1 开放定址法4.1.1 用除留余数法和线性探测模拟实现简单的哈希表 4.2 链地址法4.2.1 用除留余数法和链地址法模拟实现简单的哈希表 1.什么是哈希 概念…...

【Castle-X机器人】二、智能导览模块安装与调试

持续更新。。。。。。。。。。。。。。。 【Castle-X机器人】智能导览模块安装与调试 二、智能导览模块安装与调试2.1 智能导览模块安装2.2 智能导览模块调试2.2.1 红外测温传感器测试2.2.2 2D摄像头测试 二、智能导览模块安装与调试 2.1 智能导览模块安装 使用相应工具将智能…...

硬件须知的基本问题2

目录 1、典型电路 1. DC5V 转 DC3.3V 电路 2. 通信电路 2、STM32F103RCT6 最小系统如何设计搭建电路 1. 电源电路 2. 复位电路 3. 时钟电路 4. 下载电路 5. 单片机连接连接 3、请列举你所知道的二极管型号&#xff1f; 1. 整流二极管 2. 小信号二极管 3. 肖特基二极管 4. 超…...

Dify 使用 excel 或者 csv 文件创建知识库

Dify 使用 excel 或者 csv 文件创建知识库 1. 创建知识库2. 创建聊天助手3. 其他 1. 创建知识库 创建知识库&#xff0c;导入excel/csv文件&#xff0c; 文件内容&#xff0c; 单击 “预览块”&#xff0c;可以确认会生成多个键值对的块&#xff0c; 配置 Embedding 模型和检索…...

深入理解二叉树遍历:递归与栈的双重视角

二叉树的遍历前序遍历中序遍历后续遍历总结 二叉树的遍历 虽然用递归的方法遍历二叉树实现起来更简单&#xff0c;但是要想深入理解二叉树的遍历&#xff0c;我们还必须要掌握用栈遍历二叉树&#xff0c;递归其实就是利用了系统栈去遍历。特此记录一下如何用双重视角去看待二叉…...

通过gap看margin和padding在布局中的应用

在CSS布局中&#xff0c;控制元素之间的间距有多种方式&#xff1a;margin、padding&#xff0c;还有新晋的gap属性。虽然选择多了&#xff0c;但这也带来了不少头疼的问题。比如&#xff0c;你的自定义组件到底该不该加margin&#xff1f;如果加了&#xff0c;那在使用这个组件…...

图像畸变-径向切向畸变实时图像RTSP推流

实验环境 注意&#xff1a;ffmpeg进程stdin写入两张图片的时间间隔不能太长&#xff0c;否则mediamtx会出现对应的推流session超时退出。 实验效果 全部代码 my_util.py #进度条 import os import sys import time import shutil import logging import time from datetime i…...

2025最新Facefusion3.1.2使用Docker部署,保姆级教程,无需配置环境

Docker部署Facefusion 环境 windows10 Facefusion3.1.2 安装 拉取源代码 git clone https://github.com/facefusion/facefusion-docker.git 此处如果拉不下来&#xff0c;需要科学上网&#xff0c;不会的可以找我。 运行容器 将Dockerfile.cpu文件中的的From python:3.…...

区块链实战:Hyperledger Fabric多节点网络部署与高性能业务链码

一、联盟链架构设计与技术选型 1.1 架构设计原则 联盟链采用​​分层架构​​&#xff0c;包含应用层、共识层、网络层和数据层&#xff1a; ​​应用层​​&#xff1a;提供用户接口&#xff08;Web/API&#xff09;和智能合约交互入口​​共识层​​&#xff1a;采用PBFT或…...

C++学习笔记(四十)——STL之归约算法

STL 算法分类&#xff1a; 类别常见算法作用排序sort、stable_sort、partial_sort、nth_element等排序搜索find、find_if、count、count_if、binary_search等查找元素修改copy、replace、replace_if、swap、fill等修改容器内容删除remove、remove_if、unique等删除元素归约for…...

docker容器运维工具——ctop

概述 Github主页&#xff1a;https://github.com/bcicen/ctop 当服务器上运行多个容器时&#xff0c;迅速查看所有容器运行情况及指标将会大为提高工作效率。ctop工具可以像top命令一样&#xff0c;对所有容器进行总览&#xff0c;并实现简单的操作。 部署 下载&#xff08;…...

RAG vs 微调:大模型知识更新的最优解之争

一、技术本质&#xff1a;知识注入的两条路径 在大模型应用落地的实践中&#xff0c;RAG&#xff08;检索增强生成&#xff09;与微调&#xff08;Fine-tuning&#xff09;已成为知识更新的两大核心技术路径。二者的本质差异在于是否对模型参数进行修改&#xff1a; 维度RAG微…...

FPGA前瞻篇-组合逻辑电路设计-多路复用器

多路选择器&#xff08;MUX&#xff09;简介 基本概念 多路选择器&#xff08;MUX&#xff0c;Multiplexer&#xff09;是一种多输入、单输出的组合逻辑电路。 它通过选择控制信号&#xff0c;在多个输入信号中选择一个连接到输出端。 可以理解为一个多路数字开关。 &…...

Day13(前缀和)——LeetCode2845.统计趣味子数组的数目

1 题目描述 给定一个下标从0开始的数组nums&#xff0c;以及整数modulo和k。找出并统计数组中趣味子数组的数目&#xff1a; 在范围[l,r]内&#xff0c;设cnt为满足nums[i]%modulok的索引i的数量&#xff0c;并且cnt%modulok。子数组是数组中的一个连续非空的元素序列。 其中一…...

WebcamJS中文文档

文章目录 WebcamJS针对Chrome 47及以上版本的重要说明浏览器支持演示示例开源协议快速入门指南配置初始化拍摄照片自定义图像大小裁剪图像翻转图像(镜像模式)冻结/预览图像设置备用SWF文件位置重置(关闭)API 参考自定义事件向服务器提交图像跟踪上传进度包含在现有表单中自…...

论文笔记(八十)π0.5: a Vision-Language-Action Model with Open-World Generalization

π0.5: a Vision-Language-Action Model with Open-World Generalization 文章概括摘要I. 引言II. 相关工作通用机器人操作策略。非机器人数据的协同训练。使用语言进行机器人推理和规划。具有开放世界泛化能力的机器人学习系统。 III. 序言IV. π 0.5 π_{0.5} π0.5​ 模型与…...

pymongo功能整理与基础操作类

以下是 Python 与 PyMongo 的完整功能整理&#xff0c;涵盖基础操作、高级功能、性能优化及常见应用场景&#xff1a; 1. 安装与连接 (1) 安装 PyMongo pip install pymongo(2) 连接 MongoDB from pymongo import MongoClient# 基础连接&#xff08;默认本地&#xff0c;端口…...

硬件须知的基本问题1

目录 1. 电路表示中的电压源表示符号有哪些&#xff1f; 2&#xff0e;查找电路表示中的电流源表示符号有哪些&#xff1f; 3&#xff0e;上拉电阻和下拉电阻的作用是什么&#xff1f; 4&#xff0e;0 欧姆电阻在电路中有什么作用&#xff1f; 5&#xff0e;电容的耦合…...

LangChain 中的 Task(任务) 主要通过 生成器(Generator) 实现,而非传统的迭代器(Iterator)

LangChain 中的 Task&#xff08;任务&#xff09; 主要通过 生成器&#xff08;Generator&#xff09; 实现&#xff0c;而非传统的迭代器&#xff08;Iterator&#xff09;。以下是关键分析&#xff1a; 任务链的流程控制 LangChain 的 链式结构&#xff08;Chains&#xff0…...

加里·基尔代尔:CP/M之父与个人计算时代的先驱

名人说&#xff1a;路漫漫其修远兮&#xff0c;吾将上下而求索。—— 屈原《离骚》 创作者&#xff1a;Code_流苏(CSDN)&#xff08;一个喜欢古诗词和编程的Coder&#x1f60a;&#xff09; 加里基尔代尔&#xff1a;CP/M之父与个人计算时代的先驱 一、早年生活与教育背景 1.…...

深入解析Spring Boot配置处理器:机制、架构与实践

深入解析Spring Boot配置处理器&#xff1a;机制、架构与实践 Spring Boot的配置处理器&#xff08;spring-boot-configuration-processor&#xff09;是支撑其智能配置体验的关键组件。本文结合实际开发需求&#xff0c;从使用方式、底层原理到性能优化与架构设计&#xff0c…...

Ragflow新建的知识库完成后刷新却没有显示,报错MethodNotAllowed: 405 Method Not Allowed:

环境: Ragflow17.2 debian12.8 问题描述: Ragflow新建的知识库完成后刷新却没有显示,报错MethodNotAllowed: 405 Method Not Allowed: The method is not allowed for the requested URL. 后台日志: 2025-04-25 13:54:25,988 ERROR 235204 405 Method Not Allowed:…...

Maven进阶知识

一、Maven 坐标 &#xff08;一&#xff09;概念 在 Maven 中坐标是构件的唯一标识&#xff0c;其元素包括 groupId、artifactId、version、packaging、classifier。其中 groupId、artifactId、version 是必定义项&#xff0c;packaging 默认为 jar。 &#xff08;二&#x…...

通过门店销售明细表用SQL得到每月每个门店的销冠和按月的同比环比数据

假设我在Snowflake里有销售表&#xff0c;包含ID主键、门店ID、日期、销售员姓名和销售额&#xff0c;需要统计出每个月所有门店和各门店销售额最高的人&#xff0c;不一定是一个人&#xff0c;以及他所在的门店ID和月总销售额。 统计每个月份下&#xff0c;各门店内销售额最高…...

聊聊Spring AI Alibaba的YuQueDocumentReader

序 本文主要研究一下Spring AI Alibaba的YuQueDocumentReader YuQueDocumentReader community/document-readers/spring-ai-alibaba-starter-document-reader-yuque/src/main/java/com/alibaba/cloud/ai/reader/yuque/YuQueDocumentReader.java public class YuQueDocument…...

Tauri文件系统操作:桌面应用的核心能力(入门系列四)

今天我们来聊聊Tauri中一个超级重要的功能 - 文件系统操作。这可是Web应用和桌面应用最大的区别之一。在浏览器里&#xff0c;出于安全考虑&#xff0c;我们对文件系统的访问被限制得死死的。但在Tauri桌面应用中&#xff0c;我们可以安全地访问用户的文件系统&#xff0c;这简…...

网络流之最大流(Dinic)

正文 在了解了Ford-Fulkerson 和Edmonds-Karp之后&#xff0c;我们可以进一步学习更高效的算法——Dinic。 Dinic算法的时间复杂度是O(VE)&#xff0c;实际运用过程中是比EK算法快的。 特性Ford-FulkersonEdmonds-Karp (EK)Dinic 增广路径选择 任意方式BFS找最短路径分层图多…...

LVGL模拟器:NXP GUIDER+VSCODE

1. 下载安装包 NXP GUIDER&#xff1a;GUI Guider | NXP 半导体 CMAKE&#xff1a;Download CMake MINGW&#xff1a;https://github.com/niXman/mingw-builds-binaries/releases SDL2&#xff1a;https://github.com/libsdl-org/SDL/releases/tag/release-2.30.8 VSCODE&…...

魔幻预言手游》:职业介绍!

在《魔幻预言》手游中&#xff0c;共有武玄、魔魅、剑仙三大核心职业&#xff0c;各具特色且定位鲜明&#xff0c;以下为具体介绍&#xff1a; 一、武玄&#xff08;战士&#xff09; 核心定位&#xff1a;近战物理输出与团队增益担当&#xff0c;兼具控制与防御能力。 战斗风…...

什么时候使用Python 虚拟环境(venv)而不用conda

是的&#xff01;python3.9 -m venv rtdetr_env 是 Python 原生的虚拟环境&#xff08;venv&#xff09;&#xff0c;而 conda 是另一个流行的虚拟环境管理工具&#xff08;来自 Anaconda/Miniconda&#xff09;。下面我会详细对比两者的区别&#xff0c;并讲解 venv 的基本用法…...

Vue3的内置组件 -实现过渡动画 TransitionGroup

Vue3的内置组件 -实现过渡动画 TransitionGroup 是一个内置组件&#xff0c;用于对 v-for 列表中的元素或组件的插入、移除和顺序改变添加动画效果 支持和 基本相同的 props、CSS 过渡 class 和 JavaScript 钩子监听器&#xff0c;但有以下几点区别&#xff1a; 默认情况下&…...

水果成篮--LeetCode

题目 你正在探访一家农场&#xff0c;农场从左到右种植了一排果树。这些树用一个整数数组 fruits 表示&#xff0c;其中 fruits[i] 是第 i 棵树上的水果 种类 。 你想要尽可能多地收集水果。然而&#xff0c;农场的主人设定了一些严格的规矩&#xff0c;你必须按照要求采摘水…...