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

HTML5+CSS3面试题:(第一天)

目录

1.HTML5有哪些新特性,移除了那些元素?如何处理HTML5新标签的浏览器兼容问题?如何区分HTML和HTML5?

2.谈谈iframe标签的优缺点?

iframe的优点:

iframe的缺点:

3.CSS3有哪些新特性?

4.让chrome支持小于12px的文字


1.HTML5有哪些新特性,移除了那些元素?如何处理HTML5新标签的浏览器兼容问题?如何区分HTML和HTML5

新增元素:

  1. 增加语意化的元素,比如 article footer header nav section
  2. 增加常用的属性:placeholder,multiple,autofocus,data-*(自定义属性),autocomplete...等
  3. 增加表单控件, date time email url search tel
  4. 用于媒介回放的audio和video元素
  5. 用于绘画的 canvas 元素
  6. 新增API:Location,Navigator,History,FileReader等对象
  7. 本地离线存储。localStorage长期存储数据,浏览器关闭后数据不丢失;sessionStorage的数据在浏览器关闭后自动删除

移除的元素:

  1. 纯表现的元素:basefont big center font s strike tt u
  2. 性能较差元素:frame frameset noframes

兼容性问题:

  1. 比如音频视频的兼容性,设定source标签来设置多个多媒体格式,适配不同的浏览器
  2. 使用条件注释,比如:`<!--[if lt IE 9]><script> src="http://XXXhtml5.js"</script><![endif]-->`

区分:

  1. DOCTYPE声明的方式是区分重要因素
  2. 根据新增加的结构、功能来区分

2.谈谈iframe标签的优缺点?

iframe:是一个内联框架(行内框架),可以包含另外一个文档的内容。

iframe的优点:

1.iframe能够原封不动的把嵌入的网页展现出来。

2.如果有多个网页引用iframe,那么你只需要修改iframe的内容,就可以实现调用的每一个页面内容的更改,方便快捷。

3.如果遇到加载缓慢的第三方内容如图标和广告,这些问题可以由iframe来解决。

iframe的缺点:

1.会产生很多页面,不容易管理。

2.代码复杂,无法被一些搜索引擎索引到,这一点很关键,现在的搜索引擎爬虫还不能很好的处理iframe中的内容,所以使用iframe会不利于搜索引擎优化。

3.很多的移动设备(PDA 手机)无法完全显示框架,设备兼容性差。

4.iframe框架页面会增加服务器的http请求,对于大型网站是不可取的。

3.CSS3有哪些新特性?

  1. 新增选择器:属性选择器、伪类选择器。
  2. 伪元素 :::before,::after
  3. 颜色:新增RGBA,HSLA模式
  4. 文字阴影:(text-shadow)
  5. 边框: 圆角(border-radius)边框阴影: box-shadow
  6. 盒子模型:box-sizing
  7. 背景:background-size 设置背景图片的尺寸 background-origin 设置背景图片的原点等
  8. 渐变:linear-gradient、radial-gradient
  9. 过渡:transition,可实现动画
  10. 2D转换:transform:translate(x,y) rotate(x,y) skew(x,y) scale(x,y)
  11. 3D转换
  12. 自定义动画animation
  13. 媒体查询,弹性盒子布局

4.让chrome支持小于12px的文字

使用缩放来解决:例如transform:scale(0.8)

 

相关文章:

HTML5+CSS3面试题:(第一天)

目录 1.HTML5有哪些新特性,移除了那些元素&#xff1f;如何处理HTML5新标签的浏览器兼容问题&#xff1f;如何区分HTML和HTML5&#xff1f; 2.谈谈iframe标签的优缺点? iframe的优点&#xff1a; iframe的缺点&#xff1a; 3.CSS3有哪些新特性? 4.让chrome支持小于12px的…...

微信小程序中的模块化、组件化开发:完整指南

文章目录 前言一、模块化与组件化开发的优势1.1模块化开发的优势1.2 组件化开发的优势 二、组件的抽离标准及规范2.1 抽离组件的标准2.2 组件化开发规范 三、模块化规范的种类及优劣比较3.1 CommonJS3.2 ES6 Modules3.3 优劣对比 四、组件封装&#xff1a;全局组件、分包组件、…...

9.第二阶段x86游戏实战2-初识易语言

免责声明&#xff1a;内容仅供学习参考&#xff0c;请合法利用知识&#xff0c;禁止进行违法犯罪活动&#xff01; 本次游戏没法给 内容参考于&#xff1a;微尘网络安全 工具下载&#xff1a; 链接&#xff1a;https://pan.baidu.com/s/1rEEJnt85npn7N38Ai0_F2Q?pwd6tw3 提…...

Cortex-A7:__disable_irq和GIC_DisableIRQ、__enable_irq和GIC_EnableIRQ的区别(1)API介绍

0 相关资料 ARM Generic Interrupt Controller Architecture version 2.0.pdf 1 API介绍 1.1 __disable_irq __disable_irq函数的作用是失能IRQ&#xff0c;也就是不响应中断。实现代码如下&#xff1a; /**\brief Disable IRQ Interrupts\details Disables IRQ interrupt…...

MATLAB在嵌入式系统设计中的最佳实践

嵌入式系统设计是一个复杂的过程&#xff0c;涉及硬件和软件的紧密集成。MATLAB提供了一套全面的解决方案&#xff0c;从算法开发到代码生成&#xff0c;再到硬件验证&#xff0c;极大地简化了这一过程。本文将探讨使用MATLAB进行嵌入式系统设计的最佳实践&#xff0c;包括模型…...

wpf 使用Oxyplot 库制作图表示例

方法&#xff1a; InitTable 方法&#xff1a;负责初始化图表模型&#xff0c;包括设置图表的样式、坐标轴、系列和注释。这个方法包括多个 Init 方法的调用&#xff0c;表示图表的初始化过程可以分步骤进行。 InitGoalPoint 方法&#xff1a;当前未实现&#xff0c;但预留了子…...

CSS3中的@media查询

CSS3的media查询是一种强大的功能&#xff0c;允许我们根据不同的媒体类型和设备特性来应用不同的样式规则。这使得我们能够创建响应式设计&#xff0c;确保网站或应用在各种设备和屏幕尺寸上都能提供良好的用户体验。本文将详细探讨media查询的定义、语法、使用场景及常见问题…...

fly专享

要逐步熟悉实验中的各个步骤&#xff0c;下面是详细的说明&#xff0c;包括如何下载软件以及相关操作步骤。 1. 熟悉VMware 15虚拟机的使用 步骤说明&#xff1a; 下载VMware Workstation 15&#xff1a; 打开浏览器&#xff0c;访问VMware官方网站&#xff1a;VMware Workst…...

初识Linux · 进程(3)

目录 前言&#xff1a; 进程的创建 前言&#xff1a; 继上文介绍了着重介绍了进程的内部属性&#xff0c;以及在操作系统层面进程如何被组织起来的&#xff0c;如何调用系统接口&#xff0c;有关task_struct&#xff0c;进程的部分理解等&#xff0c;今天&#xff0c;我们就…...

【spring】spring bean对象生命周期,spring容器如何管理bean,spring容器的名称是叫什么

【spring】spring bean对象生命周期&#xff0c;spring容器如何管理bean&#xff0c;spring容器的名称是叫什么 DefaultListableBeanFactory开始 spring 容器 DefaultListableBeanFactory DefaultListableBeanFactory是Spring的核心BeanFactory实现&#xff0c;它负责Bean的创…...

基于51单片机的电饭锅控制系统proteus仿真

地址&#xff1a; https://pan.baidu.com/s/1CGyg6uPhFI0MeaBWwe_HAg 提取码&#xff1a;1234 仿真图&#xff1a; 芯片/模块的特点&#xff1a; AT89C52/AT89C51简介&#xff1a; AT89C52/AT89C51是一款经典的8位单片机&#xff0c;是意法半导体&#xff08;STMicroelectro…...

创建dataSource错误

说明&#xff1a;记录一次启动项目时的异常&#xff0c;如下&#xff1a; Error starting ApplicationContext. To display the conditions report re-run your application with debug enabled. 2024-09-14 23:27:27.338 ERROR 42260 --- [ main] o.s.boot.SpringA…...

为解决bypy大文件上传报错—获取百度云文件直链并使用Aria2上传文件至服务器

问题描述 一方面组内的服务器的带宽比较小&#xff0c;另一方面使用bypy方式进行大文件(大于15G)上传时会报错&#xff08;虽然有时可以成功上传&#xff0c;但是不稳定&#xff09;&#xff1a; 解决方式 总体思路: 获得云盘需要下载文件的直链复制直链到服务器中使用自带…...

53.9k star 提升命令行效率的模糊搜索神器--fzf

fzf简介 作为Linux/Unix命令行的重度用户,你是否还在使用繁琐的管道命令与复杂选项组合来过滤文件和数据?其实我们有一个更简单高效的选择 - fzf。 fzf是一个开源的通用模糊搜索工具,可以大幅度提升命令行的使用体验。它的查询运行速度极快,支持预览选中的文件内容,还能与各…...

项目需求 | MySQL增量备份与恢复的完整操作指南

目录 一、MySql数据库增量备份的工作原理 1、全量备份与增量备份 2、增量备份原理 二、进行增量备份 步骤1&#xff1a;启用二进制日志 使用 SHOW VARIABLES 命令查看二进制日志状态 步骤2&#xff1a;执行增量备份脚本 三、使用增量备份恢复损坏的数据库 步骤1&#…...

判断当前环境是否为docker容器下

判断当前环境是否为docker容器下 webshell后或登录到系统后台&#xff0c;判断是否为docker容器可使用如下方法&#xff1a; 方式一&#xff1a;使用ls -alh命令查看是否存在.dockerenv来判断是否在docker容器环境内 ls -alh /.dockerenv如下图无.dockerenv文件&#xff0c;所…...

深入理解FastAPI中的root_path:提升API部署灵活性的关键配置

在Web开发领域&#xff0c;FastAPI因其高性能、易于使用和类型提示功能而备受开发者喜爱。然而&#xff0c;当涉及到在生产环境中部署FastAPI应用程序时&#xff0c;我们常常需要面对一些挑战&#xff0c;比如如何正确处理代理服务器添加的路径前缀。这时&#xff0c;root_path…...

QLORA:高效微调量化大型语言模型

人工智能咨询培训老师叶梓 转载标明出处 传统的16位精度微调需要超过780GB的GPU内存&#xff0c;对于参数量极大的模型&#xff0c;如65B&#xff08;即650亿参数&#xff09;的模型&#xff0c;在资源有限的情况下大模型的微调几乎是不可能的。华盛顿大学的研究者团队提出了一…...

CesiumJS+SuperMap3D.js混用实现可视域分析 S3M图层加载 裁剪区域绘制

版本简介&#xff1a; cesium&#xff1a;1.99&#xff1b;Supermap3D&#xff1a;SuperMap iClient JavaScript 11i(2023)&#xff1b; 官方下载文档链家&#xff1a;SuperMap技术资源中心|为您提供全面的在线技术服务 示例参考&#xff1a;support.supermap.com.cn:8090/w…...

Fish-Speech 部署安装指南

Fish Speech 是由 Fish Audio 团队开发的一款开源文本转语音&#xff08;TTS&#xff09;模型&#xff0c;它在多语言支持和性能方面取得了显著的突破。根据证据显示&#xff0c;Fish Speech 最新版本为 1.4 版本&#xff0c;该版本不仅提升了对多种语言的支持&#xff0c;还大…...

IDEA运行Tomcat出现乱码问题解决汇总

最近正值期末周&#xff0c;有很多同学在写期末Java web作业时&#xff0c;运行tomcat出现乱码问题&#xff0c;经过多次解决与研究&#xff0c;我做了如下整理&#xff1a; 原因&#xff1a; IDEA本身编码与tomcat的编码与Windows编码不同导致&#xff0c;Windows 系统控制台…...

谷歌浏览器插件

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

Vue3 + Element Plus + TypeScript中el-transfer穿梭框组件使用详解及示例

使用详解 Element Plus 的 el-transfer 组件是一个强大的穿梭框组件&#xff0c;常用于在两个集合之间进行数据转移&#xff0c;如权限分配、数据选择等场景。下面我将详细介绍其用法并提供一个完整示例。 核心特性与用法 基本属性 v-model&#xff1a;绑定右侧列表的值&…...

【Linux】C语言执行shell指令

在C语言中执行Shell指令 在C语言中&#xff0c;有几种方法可以执行Shell指令&#xff1a; 1. 使用system()函数 这是最简单的方法&#xff0c;包含在stdlib.h头文件中&#xff1a; #include <stdlib.h>int main() {system("ls -l"); // 执行ls -l命令retu…...

el-switch文字内置

el-switch文字内置 效果 vue <div style"color:#ffffff;font-size:14px;float:left;margin-bottom:5px;margin-right:5px;">自动加载</div> <el-switch v-model"value" active-color"#3E99FB" inactive-color"#DCDFE6"…...

如何在最短时间内提升打ctf(web)的水平?

刚刚刷完2遍 bugku 的 web 题&#xff0c;前来答题。 每个人对刷题理解是不同&#xff0c;有的人是看了writeup就等于刷了&#xff0c;有的人是收藏了writeup就等于刷了&#xff0c;有的人是跟着writeup做了一遍就等于刷了&#xff0c;还有的人是独立思考做了一遍就等于刷了。…...

GC1808高性能24位立体声音频ADC芯片解析

1. 芯片概述 GC1808是一款24位立体声音频模数转换器&#xff08;ADC&#xff09;&#xff0c;支持8kHz~96kHz采样率&#xff0c;集成Δ-Σ调制器、数字抗混叠滤波器和高通滤波器&#xff0c;适用于高保真音频采集场景。 2. 核心特性 高精度&#xff1a;24位分辨率&#xff0c…...

Springboot社区养老保险系统小程序

一、前言 随着我国经济迅速发展&#xff0c;人们对手机的需求越来越大&#xff0c;各种手机软件也都在被广泛应用&#xff0c;但是对于手机进行数据信息管理&#xff0c;对于手机的各种软件也是备受用户的喜爱&#xff0c;社区养老保险系统小程序被用户普遍使用&#xff0c;为方…...

视觉slam十四讲实践部分记录——ch2、ch3

ch2 一、使用g++编译.cpp为可执行文件并运行(P30) g++ helloSLAM.cpp ./a.out运行 二、使用cmake编译 mkdir build cd build cmake .. makeCMakeCache.txt 文件仍然指向旧的目录。这表明在源代码目录中可能还存在旧的 CMakeCache.txt 文件,或者在构建过程中仍然引用了旧的路…...

GitFlow 工作模式(详解)

今天再学项目的过程中遇到使用gitflow模式管理代码&#xff0c;因此进行学习并且发布关于gitflow的一些思考 Git与GitFlow模式 我们在写代码的时候通常会进行网上保存&#xff0c;无论是github还是gittee&#xff0c;都是一种基于git去保存代码的形式&#xff0c;这样保存代码…...