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

前端面试题--HTML篇

一、src和href的区别

src指向外部资源的位置,指向的内容会嵌入到文档中当前标签所在的位置;

href指向网络资源的位置,建立和当前元素或当前文档之间的链接。

二、对HTML语义化的理解

根据内容的结构化,选择合适的标签。

优点:1、对机器友好,有利于SEO,和搜索引擎建立良好的沟通;

2、对开发者友好,增强代码的可读性。

三、常用的meta标签有哪些

meta由name和content属性定义,用来描述网页文档的属性;

常用meta标签:charset用来描述html文档的编码类型;

keywords:页面关键字;

description:页面描述;

refresh:页面重定向和刷新;

viewport:适配移动端,可以控制视口的大小和比例;

四、HTML5有哪些更新

  1. 语义化标签

header、nav、mian、footer、aside

  1. 媒体标签

video、audio

  1. 表单

  1. DOM查询操作

document.querySelector

document.querySelectorAll

  1. web存储

lacalStorage--没有时间限制的存储

sessionStorage--针对一个session的数据存储

五、行内元素和块元素

行内元素:span、input、img、a、b

块元素:div、h1-h5、p、ol、ul、li

六、img的srcset属性的作用

响应式页面中,根据不同的屏幕密度设置不同的图片,这个时候就可以用到img的srcset属性

七、web worker的作用

web worker的作用就是为JavaScript提供多线程运行环境,允许主线程创建worker线程,这样就可以将一些任务分配给worker线程,好处是不会被随意打断,有利于随时响应主线程的通信,坏处是会造成资源的浪费,所以不使用的时候要即时关闭。通过postMessage将结果传回到主线程。

八、HTML5离线存储怎么使用,工作原理

离线存储是指当用户没有连接互联网时,用户可以正常访问站点和应用;用户连接互联网时,更新用户机器上的缓存文件。

工作原理:h5的离线存储机制是基于一个新建的.appcache文件的缓存机制,通过解析清单离线缓存资源,这些资源就会像cookie一样被存储下来,当网络处于离线状态时,浏览器会通过被离线存储的数据进行页面展示。

九、b和strong、i和em、title和h1的区别

strong是语义化标签,起到加重语气的作用,b只是简单的加粗;

i内容展示为斜体,em表示强调的语气;

title简单的表示为标题,h1表示更深层次的标题

十、iframe的优点和缺点

iframe元素会创建包含另一个文档的内敛框架

优点:可以用来加载速度较慢的文件;可以实现跨子域通信;可以并行下载脚本;

缺点:会阻塞主页面的onload事件;不利于搜索引擎识别;增加了http请求;

十一、label标签的作用

label标签用来定义表单控件间的关系,当选择label标签时,自动将焦点转移到和label标签相关的表单控件

十二、文档声明和<!Doctype html>的作用,严格模式和混杂模式的区别?

文档声明用来告诉浏览器当前文档是用什么版本的html来写的;

<!Doctype html>让浏览器进入标准模式,使用h5标准来解析渲染页面;

严格模式也称标准模式,让浏览器以w3c标准解析文档;

混杂模式指浏览器用自己的模式解析代码;

十三、BOM和DOM的区别

BOM是浏览器对象模型,主要定义了与浏览器进行交互的接口和方法;

DOM是文档对象模型,主要定义了处理网页内容的接口和方法;

十四、图片的格式

jpeg(jpg):支持的色彩比较丰富,不支持透明效果,不支持动图;

gif:支持的色彩比较少,支持简单透明,支持动图;

png:支持的颜色丰富,支持复杂透明,不支持动图;

webp:是谷歌新推出的用来表示网页图片的一种格式,具有其他类型图片的所有优势,还比较小,但兼容性不好。

相关文章:

前端面试题--HTML篇

一、src和href的区别src指向外部资源的位置&#xff0c;指向的内容会嵌入到文档中当前标签所在的位置&#xff1b;href指向网络资源的位置&#xff0c;建立和当前元素或当前文档之间的链接。二、对HTML语义化的理解根据内容的结构化&#xff0c;选择合适的标签。优点&#xff1…...

SpringBoot集成ElasticSearch,实现模糊查询,批量CRUD,排序,分页,高亮

导入elasticsearch依赖在pom.xml里加入如下依赖&#xff1a;<dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-data-elasticsearch</artifactId> </dependency>非常重要&#xff1a;检查依赖版本…...

常用Swagger注解汇总

常用Swagger注解汇总 前言 在实际编写后端代码的过程中&#xff0c;我们可能经常使用到 swagger 注解&#xff0c;但是会用不代表了解&#xff0c;你知道每个注解都有什么属性吗&#xff1f;你都用过这些属性吗&#xff1f;了解它们的作用吗&#xff1f;本文在此带大家总结一下…...

关于 TypeScript 声明文件

declare var 声明全局变量declare function 声明全局方法declare class 声明全局类declare enum 声明全局枚举类型declare namespace 声明&#xff08;含有子属性的&#xff09;全局对象interface 和 type 声明全局类型export 导出变量export namespace 导出&#xff08;含有子…...

SpringBoot学习-原理篇

SpringBoot原理篇springboot技术本身就是为了加速spring程序的开发的&#xff0c;可以大胆的说&#xff0c;springboot技术没有自己的原理层面的设计&#xff0c;仅仅是实现方案进行了改进。将springboot定位成工具&#xff0c;你就不会去想方设法的学习其原理了。就像是将木头…...

目标检测YOLOv5数据集怎么找?

完整的配置-标注-训练-识别在我这篇博客小白YOLOv5全流程-训练实现数字识别_yolov5数字识别_牛大了2022的博客-CSDN博客 模型部分剖析可以看我每周深度学习笔记部分。关于训练的数据集怎么搞很多人问过我&#xff0c;我在这篇文章给大家一点我的经验和建议。 数据集是什么 简…...

安卓短信自动填充踩坑

安卓短信自动填充踩坑 前言 最近弄了个短信自动填充功能&#xff0c;一开始觉得很简单&#xff0c;不就是动态注册个广播接收器去监听短信消息不就可以了吗&#xff1f;结果没这么简单&#xff0c;问题就出在机型的适配上。小米的短信权限、荣耀的短信监听都是坑&#xff0c;…...

【抽象类和接口的区别】

抽象类和接口都是Java中实现多态的机制&#xff0c;它们都是用来约束子类必须要实现的方法。但是它们有以下区别&#xff1a; 实现方式 实现方式&#xff1a;抽象类是一个类&#xff0c;而接口是一个接口。一个类只能继承一个抽象类&#xff0c;但可以实现多个接口。 构造方…...

接口导出文件功能

1.写接口 export function getExport(params) { return fetch({ url: ******.export, method: post, data: params, responseType:blob, }) } 2.编写前端页面 <el-button :loading"exportDisable" :disabled&quo…...

深圳大学计软《面向对象的程序设计》实验9 期中复习

A. 机器人变身&#xff08;类与对象&#xff09;【期中模拟】 题目描述 编写一个机器人类&#xff0c;包含属性有机器名、血量、伤害值、防御值、类型和等级。其中血量、伤害和防御和等级、类型相关&#xff1a; 普通型机器人&#xff0c;类型为N&#xff0c;血量、伤害、防…...

python之异步编程

一、异步编程概述 异步编程是一种并发编程的模式&#xff0c;其关注点是通过调度不同任务之间的执行和等待时间&#xff0c;通过减少处理器的闲置时间来达到减少整个程序的执行时间&#xff1b;异步编程跟同步编程模型最大的不同就是其任务的切换&#xff0c;当遇到一个需要等…...

为什么很多计算机专业大学生毕业后还会参加培训?

基于IT互联网行业越来越卷的现状&#xff0c;就算是科班出身&#xff0c;很多也是达不到用人单位的要求。面对这样的现实情况&#xff0c;有的同学会选择继续深造&#xff0c;比如考个研&#xff0c;去年考研人数457万人次&#xff0c;可见越来越的同学是倾向考研提升学历来达到…...

JUC并发编程之JMM_synchronized_volatile

目录 JUC并发编程之JMM_synchronized_volatile 什么是JMM模型&#xff1f; JMM和JVM的区别 JMM不同于JVM内存区域模型 主内存 工作内存 Java内存模型与硬件内存架构的关系 JMM存在的必要性 数据同步八大原子操作 同步规则分析 并发编程的可见性&#xff0c;原子性与有序…...

hashCode 和 equals 的处理

文章目录hashCode 和 equals 的处理1. 阿里巴巴编程规范要求2. equals和hashcode的分析2.1 Object方法2.2 只覆写&#xff08;Override&#xff09;equals带来的问题问题演示问题分析问题处理hashCode 和 equals 的处理 1. 阿里巴巴编程规范要求 2. equals和hashcode的分析 2…...

17. OPenGL实现旋转移动物体

1. 说明&#xff1a; 整体思路&#xff1a;如果想实现动态&#xff0c;可以使用一个矩阵和我们给定的坐标值进行相乘&#xff0c;实时的改变坐标值 类似于坐标的齐次变换&#xff0c;然后使用一个定时器&#xff0c;在规定时间内触发重新绘制的函数。 实际效果&#xff1a; OP…...

《SQL基础》14. 存储过程 · 存储函数

存储过程 存储函数存储过程基本语法变量系统变量用户定义变量局部变量if判断参数case判断while循环repeat循环loop循环游标条件处理程序存储函数存储过程 存储过程是事先经过编译并存储在数据库中的一段SQL语句的集合。调用存储过程可以简化应用开发人员的工作&#xff0c;减…...

NFT Insider #87:The Sandbox 收购游戏开发工作室 Sviper,GHST 大迁徙即将拉开帷幕

引言&#xff1a;NFT Insider由NFT收藏组织WHALE Members(https://twitter.com/WHALEMembers)、BeepCrypto&#xff08;https://twitter.com/beep_crypto&#xff09;联合出品&#xff0c;浓缩每周NFT新闻&#xff0c;为大家带来关于NFT最全面、最新鲜、最有价值的讯息。每期周…...

html部分codewhy网课学习笔记

day1 网页显示的过程和服务器 浏览器内核,也称为渲染引擎 head标签描述网页的原数据&#xff0c;如title shifttab是向前缩进 div>ul>li可以快速生成 <div> <ul> <li></li> </ul> </div> 在早期,单标签如<input>也可写为&l…...

电脑出问题了怎么重装系统修好

电脑在使用过程中经常会出现各种各样的问题&#xff0c;如系统崩溃、蓝屏、病毒感染等。这些问题如果不能及时得到解决&#xff0c;将会给用户带来很多麻烦和损失。小白一键重装系统是一个功能强大的工具&#xff0c;可以帮助用户快速解决电脑常见问题。下面我们就来详细介绍如…...

Nginx国密支持问题记录

文章目录添加国密支持可能出现的问题国密不生效&#xff0c;查看 Nginx 可执行文件路径是否正确证书无法解析Nginx无法启动添加国密支持 NGINX添加国密支持 添加国密支持可以直接按照官网的操作顺序操作即可 参考网址&#xff1a;https://www.gmssl.cn/gmssl/index.jsp 可能出…...

uniapp 对接腾讯云IM群组成员管理(增删改查)

UniApp 实战&#xff1a;腾讯云IM群组成员管理&#xff08;增删改查&#xff09; 一、前言 在社交类App开发中&#xff0c;群组成员管理是核心功能之一。本文将基于UniApp框架&#xff0c;结合腾讯云IM SDK&#xff0c;详细讲解如何实现群组成员的增删改查全流程。 权限校验…...

Linux应用开发之网络套接字编程(实例篇)

服务端与客户端单连接 服务端代码 #include <sys/socket.h> #include <sys/types.h> #include <netinet/in.h> #include <stdio.h> #include <stdlib.h> #include <string.h> #include <arpa/inet.h> #include <pthread.h> …...

生成xcframework

打包 XCFramework 的方法 XCFramework 是苹果推出的一种多平台二进制分发格式&#xff0c;可以包含多个架构和平台的代码。打包 XCFramework 通常用于分发库或框架。 使用 Xcode 命令行工具打包 通过 xcodebuild 命令可以打包 XCFramework。确保项目已经配置好需要支持的平台…...

Python:操作 Excel 折叠

💖亲爱的技术爱好者们,热烈欢迎来到 Kant2048 的博客!我是 Thomas Kant,很开心能在CSDN上与你们相遇~💖 本博客的精华专栏: 【自动化测试】 【测试经验】 【人工智能】 【Python】 Python 操作 Excel 系列 读取单元格数据按行写入设置行高和列宽自动调整行高和列宽水平…...

土地利用/土地覆盖遥感解译与基于CLUE模型未来变化情景预测;从基础到高级,涵盖ArcGIS数据处理、ENVI遥感解译与CLUE模型情景模拟等

&#x1f50d; 土地利用/土地覆盖数据是生态、环境和气象等诸多领域模型的关键输入参数。通过遥感影像解译技术&#xff0c;可以精准获取历史或当前任何一个区域的土地利用/土地覆盖情况。这些数据不仅能够用于评估区域生态环境的变化趋势&#xff0c;还能有效评价重大生态工程…...

RNN避坑指南:从数学推导到LSTM/GRU工业级部署实战流程

本文较长&#xff0c;建议点赞收藏&#xff0c;以免遗失。更多AI大模型应用开发学习视频及资料&#xff0c;尽在聚客AI学院。 本文全面剖析RNN核心原理&#xff0c;深入讲解梯度消失/爆炸问题&#xff0c;并通过LSTM/GRU结构实现解决方案&#xff0c;提供时间序列预测和文本生成…...

AspectJ 在 Android 中的完整使用指南

一、环境配置&#xff08;Gradle 7.0 适配&#xff09; 1. 项目级 build.gradle // 注意&#xff1a;沪江插件已停更&#xff0c;推荐官方兼容方案 buildscript {dependencies {classpath org.aspectj:aspectjtools:1.9.9.1 // AspectJ 工具} } 2. 模块级 build.gradle plu…...

Maven 概述、安装、配置、仓库、私服详解

目录 1、Maven 概述 1.1 Maven 的定义 1.2 Maven 解决的问题 1.3 Maven 的核心特性与优势 2、Maven 安装 2.1 下载 Maven 2.2 安装配置 Maven 2.3 测试安装 2.4 修改 Maven 本地仓库的默认路径 3、Maven 配置 3.1 配置本地仓库 3.2 配置 JDK 3.3 IDEA 配置本地 Ma…...

Webpack性能优化:构建速度与体积优化策略

一、构建速度优化 1、​​升级Webpack和Node.js​​ ​​优化效果​​&#xff1a;Webpack 4比Webpack 3构建时间降低60%-98%。​​原因​​&#xff1a; V8引擎优化&#xff08;for of替代forEach、Map/Set替代Object&#xff09;。默认使用更快的md4哈希算法。AST直接从Loa…...

【Android】Android 开发 ADB 常用指令

查看当前连接的设备 adb devices 连接设备 adb connect 设备IP 断开已连接的设备 adb disconnect 设备IP 安装应用 adb install 安装包的路径 卸载应用 adb uninstall 应用包名 查看已安装的应用包名 adb shell pm list packages 查看已安装的第三方应用包名 adb shell pm list…...