HTML5、CSS3面试题(一)

1、H5 的新特性有哪些?C3 的新特性有哪些?(必会)

H5 新特性

1、拖拽释放(Drap and drop) API ondrop
拖放是一种常见的特性,即抓取对象以后拖到另一个位置
在 HTML5 中,拖放是标准的一部分,任何元素都能够拖放
2、自定义属性 data-id
3、语义化更好的内容标签(header,nav,footer ,aside, article, section)
  1. <header>:用于定义页面或区域的页眉,通常包含导航链接、站点标志等内容。
  2. <nav>:用于定义导航链接的区域,包含页面的主要导航链接。
  3. <footer>:用于定义页面或区域的页脚,通常包含版权信息、联系方式等内容。
  4. <aside>:用于定义页面内容之外的内容,通常是侧边栏、广告、相关链接等。
  5. <article>:用于定义独立的、完整的内容块,如一篇博客文章、新闻报道等。
  6. <section>:用于定义文档中的一个区块或节,通常用于组织相关内容

4.多媒体支持:原生支持音频和视频,不再需要使用第三方插件。

    音频 ,视频(audio, video) 如果浏览器不支持自动播放怎么办?在属性中添加 autoplay

5、画布 Canvas

      其中使用可视化模型的Echarts 使用它和svg实现的

6、 地理(Geolocation) API

7、 本地离线存储 localStorage 长期存储数据 浏览器关闭后数据不丢失

8、 sessionStorage 的数据在浏览器关闭后自动删除

9、 表单控件 calendar , date , time , email , url , search , tel , file , number

CSS3 新特性

1、颜色: 新增 RGBA , HSLA 模式
2、文字阴影(text-shadow)
3、边框: 圆角(border-radius) 边框阴影 : box-shadow
4、盒子模型: box-sizing
5、背景:background-size background-origin background-clip
6、渐变: linear-gradient , radial-gradient
7、过渡 : transition 可实现动画
8、自定义动画 animate @keyfrom
9、媒体查询 多栏布局 @media screen and (width:800px) {…}
10、border-image
11、2D 转换;transform: translate(x,y) rotate(x,y) skew(x,y) scale(x,y)
12、3D 转换
13、字体图标 font-face
14、弹性布局

Localstorage、sessionStorage、cookie 的区别(必会)

共同点: 都是保存在浏览器端、且同源的
区别:
1、cookie 数据始终在同源的 http 请求中携带(即使不需要),即 cookie 在浏览器和服务器
间来回传递,而 sessionStorage 和 localStorage 不会自动把数据发送给服务器,仅在本地保存。
cookie 数据还有路径(path)的概念,可以限制 cookie 只属于某个路径下
2、存储大小限制也不同,cookie 数据不能超过 4K,同时因为每次 http 请求都会携带 cookie、
所以 cookie 只适合保存很小的数据,如会话标识。sessionStorage 和 localStorage 虽然也有存
储大小的限制,但比 cookie 大得多,可以达到 5M 或更大
3、数据有效期不同,sessionStorage:仅在当前浏览器窗口关闭之前有效;localStorage:始
终有效,窗口或浏览器关闭也一直保存,因此用作持久数据;cookie:只在设置的 cookie 过
期时间之前有效,即使窗口关闭或浏览器关闭
4、作用域不同,
sessionStorage 不在不同的浏览器窗口中共享,即使是同一个页面;
localstorage
在所有同源窗口中都是共享的;cookie 也是在所有同源窗口中都是共享的
5、web Storage 支持事件通知机制,可以将数据更新的通知发送给监听者
6、web Storage 的 api 接口使用更方便

H5 的浏览器存储有哪些?(必会)

1、cookie
这个存储用了很久了,而且也是以前大多网站十分喜欢的存储站点。但是也很容易被
清除。同时 cookie 会在每一次通信过程中传向服务端。同时 cookie 有一个很好的地
方就是,它本身有一个过期时间属性,可以用来标注一个变量的有效期。而 cookie 一
旦过期就会被自动删除掉
2、localStorage、sessionStorage
- localStorage: 持久存储,只要用户不主动删除就会一直存在。
- sessionStorage:面向 session 的浏览器存储,因此只存在于一个页面的生命周期
内,关闭即清除两者均采用键值对的形式存储数据
3、indexedDB
内嵌在浏览器端的非关系型数据库,数据以键值对的形式存储,兼容性良好
indexDB 直接操作的存储对象是 ObjectStore,这有点类似其他数据库中 table 概念
4、websql
内嵌在浏览器的关系型数据库,前端可以像在使用 mysql、Oracle 一样的写 sql 语句,
并存储信息。兼容性良好。存储后可在浏览器 resource 中查看
5、window 变量
生命周期有限,一般大家也不会去使用。但是对于全局变量的临时存储来说,还是一
个不可多得的好地方
6、flash cookie
flash cookie 现在用的地方比较多

简述 transform,transition,animation 的作用?(必会)

1、transform:描述了元素的静态样式,本身不会呈现动画效果,可以对元素进行 旋转
rotate、扭曲 skew、缩放 scale 和移动 translate 以及矩阵变形 matrix。
transition 和 animation 两者都能实现动画效果
transform 常常配合 transition 和 animation 使用
2、transition 样式过渡,从一种效果逐渐改变为另一种效果
transition 是一个合写属性
Transition:transition-property transition-duration transition-timing-function
transition-delay
从左到右分别是: css 属性、过渡效果花费时间、速度曲线、过渡开始的延迟时间
transition 通常和 hover 等事件配合使用,需要由事件来触发过渡
3、animation 动画 由@keyframes 来描述每一帧的样式
区别:
3.1)transform 仅描述元素的静态样式,常常配合 transition 和 animation 使用
3.2)transition 通常和 hover 等事件配合使用,animation 是自发的,立即播放
3.3)animation 可设置循环次数
3.4)animation 可设置每一帧的样式和时间,transition 只能设置头尾
3.5)transition 可与 js 配合使用, js 设定要变化的样式,transition 负责动画效果。

下一章:HTML5、CSS3面试题(二)

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/745599.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

uniapp移动端 IOS系统下无法与webview通信

不知道有没有人遇到过这个问题 我的页面嵌套了一个webview&#xff08;文件位于项目的hybrif/html&#xff09;目录下 使用evalJS与webview进行通信 代码如下 在安卓里运行是没问题的&#xff0c;但在苹果手机上一直无法通信 连接真机&#xff0c;打印evalJS是个方法&#xf…

GEE:关于遥感生态指数(RSEI)的若干疑问

作者:CSDN @ _养乐多_ 本文记录了若干关于在 Google Earth Engine (GEE)平台上,计算基于主成分分析(PCA)的遥感生态指数(RSEI)的问题。并记录了解决这些问题的一些答案。问题包括,主成分分析的特征值的正负,主成分的占比,去云后空值像素的处理方法,异常值处理方法…

C语言中内存函数的使用

memcpy函数的使用和模拟实现 memcpy的使用 函数使用说明&#xff1a; • 函数memcpy从source的位置开始向后复制num个字节的数据到destination指向的内存位置。 • 这个函数在遇到 \0 的时候并不会停下来。 • 如果source和destination有任何的重叠&#xff0c;复制的结…

【python】centos 8新装python3.10.0

1.python源码包准备 2.gcc环境安装 如果系统已具备&#xff0c;可以略过。 有的已经自带了gcc&#xff0c;但是如果编译时启动优化的话&#xff0c;如果gcc版本过老就必须要升级。 3.make环境安装 如果系统已具备&#xff0c;可以略过。 4.更新openssl版本&#xff08;很重…

【ES6】let与const

目录 let命令 作用域 无变量提升 不允许重复声明 暂时性死区 块级作用域 函数能否在块级作用域中声明 const命令 let命令 作用域 ES6 新增了let命令&#xff0c;用来声明变量。它的用法类似于var&#xff0c;但是作用域不同&#xff0c;let命令只在所在的代码块内…

C# 根据两点名称,寻找两短路程的最优解,【有数据库设计,完整代码】

前言 如果我们遇到路径问题&#xff0c;可以使用点点连线&#xff0c;给定一个点&#xff0c;可以到达另外几个点&#xff0c;寻找最优解 例&#xff1a;如下图所示&#xff0c;如果要从A1-C1,可以有三条路 1.A1-B1-C1 2.A1-B2-C1 3.A1-B3-C1 最优解肯定是A1-B1-C1&#xff0c…

Java代码审计安全篇-XXE(XML外部实体注入)漏洞

前言&#xff1a; 堕落了三个月&#xff0c;现在因为被找实习而困扰&#xff0c;着实自己能力不足&#xff0c;从今天开始 每天沉淀一点点 &#xff0c;准备秋招 加油 注意&#xff1a; 本文章参考qax的网络安全java代码审计&#xff0c;记录自己的学习过程&#xff0c;还希望各…

软考77-上午题-【面向对象技术3-设计模式】-创建型设计模式02

一、生成器模式 1-1、意图 将一个复杂对象的构建与它的表示分离&#xff0c;使得同样的构建过程可以创建不同的表示。 1-2、结构图 Builder 为创建一个 Product 对象的各个部件指定抽象接口。ConcreteBuilder 实现 Builder 的接口以构造和装配该产品的各个部件&#xff0c;定…

3.14word直播知识点

word图表&#xff1a; 找到数据源→插入→图表→组合→带数据标签的折线图&#xff08;次要坐标轴&#xff09;→设计选项卡→切换行列&#xff08;excel不能关&#xff09;→&#xff08;单击右键&#xff0c;设置数据系列格式&#xff09;设置最大最小值→刻度单位→标签为无…

docker部署mysql5

1. 进入面板 2. 新建挂载文件夹 新建三个文件夹: mkdir -p /docker/mysql5/config && mkdir -p /docker/mysql5/data && mkdir -p /docker/mysql5/logsconfig&#xff1a;存放mysql配置data&#xff1a;存放mysql数据logs&#xff1a;存放mysql记录日志 3.…

css设置选中文字和选中图片字的颜色

要改变页面中选中文字的颜色&#xff0c;可以使用 CSS 的 ::selection 伪元素来实现 *::selection {/* 改变选中文字的背景色 */background-color: #c42121;/* 改变选中文字的文本颜色 */color: #fff; } 用通配符选择器给所有元素都加上了 ::selection伪元素&#xff0c;用于…

GPT实战系列-如何让LangChain的Agent选择工具

GPT实战系列-如何让LangChain的Agent选择工具 LangChain GPT实战系列-LangChain如何构建基通义千问的多工具链 GPT实战系列-构建多参数的自定义LangChain工具 GPT实战系列-通过Basetool构建自定义LangChain工具方法 GPT实战系列-一种构建LangChain自定义Tool工具的简单方法…

这个不需要吗 HttpServletRequest req

这个不需要吗 HttpServletRequest req 在这个特定场景下&#xff0c;您在OnlineStudentFeignService接口中确实不需要直接使用HttpServletRequest对象。因为Feign是一个声明式的HTTP客户端&#xff0c;它的设计目标是简化服务间的远程调用&#xff0c;它并不直接处理原始的HTT…

先验分布、后验分布、极大似然的一点思考

今天和组里同事聊天的时候&#xff0c;无意中提到了贝叶斯统计里先验分布、后验分布、以及极大似然估计这三个概念。同事专门研究如何利用条件概率做系统辨识的&#xff0c;给我画了一幅图印象非常深刻&#xff1a; 其中k表示时序关系。上面这个图表示后验分布是由先验分布与似…

SparkSQL读取本地文件写入MySQL

unit1&#xff1a;LoggerLevel 思路在main代码中&#xff0c;读取的文件要注意格式。 package com.unitsimport org.apache.log4j.{Level, Logger}trait LoggerLevel {Logger.getLogger("org").setLevel(Level.ERROR) }unit2&#xff1a;getLocalSparkSession pac…

2024年云服务器ECS价格表出炉——阿里云

2024年阿里云服务器租用费用&#xff0c;云服务器ECS经济型e实例2核2G、3M固定带宽99元一年&#xff0c;轻量应用服务器2核2G3M带宽轻量服务器一年61元&#xff0c;ECS u1服务器2核4G5M固定带宽199元一年&#xff0c;2核4G4M带宽轻量服务器一年165元12个月&#xff0c;2核4G服务…

深入理解TCP的四次分手过程

文章目录 深入理解TCP的四次分手过程四次分手的意义四次分手的工作原理四次分手的重要性实际应用中的考虑结论补充:TIME_WAIT在哪一步?TIME_WAIT状态的目的TIME_WAIT状态的影响 深入理解TCP的四次分手过程 在网络通信中&#xff0c;TCP&#xff08;传输控制协议&#xff09;确…

在Linux/Ubuntu/Debian中使用7z压缩和解压文件

要在 Ubuntu 上使用 7-Zip 创建 7z 存档文件&#xff0c;你可以使用“7z”命令行工具。 操作方法如下&#xff1a; 安装 p7zip&#xff1a; 如果你尚未在 Ubuntu 系统上安装 p7zip&#xff08;7-Zip 的命令行版本&#xff09;&#xff0c;你可以使用以下命令安装它&#xff1a;…

Gitlab光速发起Merge Request

前言 在我们日常开发过程中需要经常使用到Merge Request&#xff0c;在使用过程中我们需要来回在开发工具和UI界面之前来回切换&#xff0c;十分麻烦。那有没有一种办法可以时间直接开发开工具中直接发起Merge Request呢&#xff1f; 答案是有的。 使用 Git 命令方式创建 Me…

第八节:Vben Admin登录界面自定义和注销

系列文章目录 第一节:Vben Admin介绍和初次运行 第二节:Vben Admin 登录逻辑梳理和对接后端准备 第三节:Vben Admin登录对接后端login接口 第四节:Vben Admin登录对接后端getUserInfo接口 第五节:Vben Admin权限-前端控制方式 第六节:Vben Admin权限-后端控制方式 第七节…