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

前端笔记-html+css测试2

HTML & CSS 能力测试卷

选择题(每题2分,共20分)

  1. 下列哪个HTML5标签用于定义文档的导航链接?
    A) <nav>
    B) <navigate>
    C) <navbar>
    D) <navigation>

  2. CSS中哪个属性用于设置元素的透明度?
    A) visibility
    B) opacity
    C) transparency
    D) alpha

  3. 以下哪个CSS选择器优先级最高?
    A) div p
    B) .container
    C) #main
    D) div

  4. 在Flexbox布局中,哪个属性用于控制项目在主轴上的对齐方式?
    A) align-items
    B) justify-content
    C) flex-direction
    D) flex-wrap

  5. 哪个HTML标签用于创建有序列表?
    A) <ul>
    B) <ol>
    C) <li>
    D) <list>

  6. 在CSS中,position: relative相对于什么定位?
    A) 浏览器窗口
    B) 文档流中的正常位置
    C) 最近的已定位祖先元素
    D) 父元素

  7. 哪个CSS属性用于创建响应式网格布局?
    A) display: flex
    B) display: grid
    C) display: table
    D) display: block

  8. 以下哪个不是CSS盒模型的组成部分?
    A) content
    B) padding
    C) margin
    D) outline

  9. 在HTML中,哪个属性用于指定图像无法显示时的替代文本?
    A) title
    B) alt
    C) src
    D) placeholder

  10. 哪个CSS伪类用于设置鼠标悬停在元素上时的样式?
    A) :active
    B) :hover
    C) :focus
    D) :visited

简答题(每题10分,共50分)

  1. 解释CSS中盒模型的工作原理,并说明box-sizing: border-boxbox-sizing: content-box的区别。

  2. 描述Flexbox布局和Grid布局的主要区别,并各举一个适合使用它们的场景示例。

  3. 什么是CSS选择器优先级?请按照优先级从高到低的顺序列出常见选择器类型。

  4. 解释HTML5语义化标签的意义,并列举5个常用的语义化标签及其用途。

  5. 如何实现一个响应式布局?请描述至少三种不同的技术方法及其适用场景。

答案

选择题答案:

  1. A) <nav>

  2. B) opacity

  3. C) #main

  4. B) justify-content

  5. B) <ol>

  6. B) 文档流中的正常位置

  7. B) display: grid

  8. D) outline

  9. B) alt

  10. B) :hover

简答题参考答案:

  1. 盒模型:CSS盒模型由内容(content)、内边距(padding)、边框(border)和外边距(margin)组成。box-sizing: content-box是默认值,元素的宽度和高度只包含内容;box-sizing: border-box则包含内容、内边距和边框,使布局计算更直观。

  2. Flexbox vs Grid

    • Flexbox是一维布局系统,适合组件内部排列(如导航菜单)

    • Grid是二维布局系统,适合整体页面布局(如杂志式布局)

    • Flexbox示例:导航栏项目排列

    • Grid示例:产品卡片网格展示

  3. 选择器优先级
    从高到低:内联样式 > ID选择器 > 类选择器/属性选择器/伪类 > 元素选择器/伪元素 > 通用选择器

  4. 语义化标签

    • <header>:页眉

    • <nav>:导航

    • <main>:主要内容

    • <article>:独立内容

    • <footer>:页脚
      意义:提高可访问性、SEO友好、代码可读性

  5. 响应式布局实现

    • 媒体查询(@media):根据不同屏幕尺寸应用不同样式

    • 弹性布局(Flexbox):元素自动调整大小和位置

    • 网格布局(Grid):创建灵活的网格系统

    • 相对单位(rem/vw):基于视口大小的缩放

    • 图片响应式(max-width:100%):图片自适应容器

补充学习CSS3 transform 属性 | 菜鸟教程

相关文章:

前端笔记-html+css测试2

HTML & CSS 能力测试卷 选择题&#xff08;每题2分&#xff0c;共20分&#xff09; 下列哪个HTML5标签用于定义文档的导航链接&#xff1f; A) <nav> B) <navigate> C) <navbar> D) <navigation> CSS中哪个属性用于设置元素的透明度&#xff1f;…...

Visual Studio C++ 常用配置变量表

前言 visual studio中常用配置变量表 帮助你快速查阅&#xff0c;复制粘贴嘎嘎方便! 附上美图&#xff01;&#xff01; 一、解决方案 & 项目路径 变量含义示例&#xff08;典型用法&#xff09;$(SolutionDir)解决方案文件所在目录&#xff08;末尾带\&#xff09;$(S…...

论文阅读VACE: All-in-One Video Creation and Editing

code&#xff1a;https://github.com/ali-vilab/VACE 核心 单个模型同时处理多种视频生成和视频编辑任务通过VCU&#xff08;视频条件单元&#xff09;进行实现 方法 视频任务 所有的视频相关任务可以分为4类 文本生视频 参考图片生视频 视频生视频 视频mask生视频 VCU …...

【Python Cookbook】迭代器与生成器(一)

迭代器与生成器&#xff08;一&#xff09; 1.手动遍历迭代器2.代理迭代3.使用生成器创建新的迭代模式4.实现迭代器协议 1.手动遍历迭代器 你想遍历一个可迭代对象中的所有元素&#xff0c;但是却不想使用 for 循环。 为了手动的遍历可迭代对象&#xff0c;使用 next() 函数并…...

Qwen2.5-VL视觉大语言模型复现过程,没碰到什么坑

视频讲解&#xff1a;Qwen2.5-VL视觉大语言模型复现过程&#xff0c;没碰到什么坑_哔哩哔哩_bilibili Qwen2.5-VL视觉大语言模型复现过程&#xff0c;没碰到什么坑 今天复现下Qwen2.5-VL玩玩 https://github.com/QwenLM/Qwen2.5-VL 创建conda环境&#xff0c;实测22.04&#x…...

LVGL填充函数

lvgl填充函数的位置&#xff1a; static void disp_flush(lv_disp_drv_t * disp_drv, const lv_area_t * area, lv_color_t * color_p) {LCD_Color_Fill(area->x1,area->y1,area->x2,area->y2,(u16*)color_p);lv_disp_flush_ready(disp_drv); }填充函数的具体内容…...

关于 传感器 的详细解析,涵盖定义、分类、工作原理、常见类型、应用领域、技术挑战及未来趋势,结合实例帮助理解其核心概念

以下是关于 传感器 的详细解析&#xff0c;涵盖定义、分类、工作原理、常见类型、应用领域、技术挑战及未来趋势&#xff0c;结合实例帮助理解其核心概念&#xff1a; 一、传感器的定义与核心功能 1. 定义 传感器&#xff08;Sensor&#xff09;是一种能够将物理量&#xff…...

回归,git 分支开发操作命令

核心分支说明 主分支&#xff08;master/production&#xff09;存放随时可部署到生产环境的稳定代码&#xff0c;仅接受通过测试的合并请求。 开发分支&#xff08;develop&#xff09;集成所有功能开发的稳定版本&#xff0c;日常开发的基础分支&#xff0c;从该分支创建特性…...

指形铣刀的结构

指形铣刀&#xff0c;作为机械加工领域中一种至关重要的切削工具&#xff0c;其主要结构类型多样且各具特色&#xff0c;深入学习这些类型对于提升加工效率与精度至关重要。 首先&#xff0c;我们来看看最基本的直柄指形铣刀。这种铣刀的设计简洁明了&#xff0c;其柄部为直线…...

【verilog】always @(*) 是Verilog 中写组合逻辑

always (*) 是 Verilog 中写组合逻辑&#xff08;combinational logic&#xff09; 的标准写法&#xff0c;下面讲解含义、作用、以及为什么这么写。 &#x1f31f; 什么是 always (*)&#xff1f; always (*) begin// 组合逻辑 end它的意思是&#xff1a; “只要块中用到的任…...

【IC】STA计算

这张图很好&#xff0c;把STA的方法展示的很清楚&#xff01; 时序分析在每个设计阶段都是必不可少的&#xff0c;以便在现代 IC 设计中实现时序收敛。除了准确性之外&#xff0c;全芯片分析的效率和可扩展性也尤为重要。因此&#xff0c;门级静态时序分析 &#xff08;STA&am…...

Linux 常用命令总结

Linux 常用命令总结&#xff08;全面版&#xff09; Linux 命令行是系统管理和开发的核心工具&#xff0c;掌握常用命令可以极大提升效率。本文全面总结 Linux 常用命令&#xff0c;涵盖文件操作、进程管理、网络管理、系统监控、用户管理、软件安装等多个方面&#xff0c;适合…...

Muduo网络库实现 [十四] - HttpResponse模块

目录 设计思路 类的设计 模块的实现 公有接口 疑问点 设计思路 这个模块和HttpRequest一样&#xff0c;主要就是存储http响应的要素&#xff0c;但是其实真正需要设置存储的要素会比http请求少&#xff0c;首先&#xff0c;要存储http的版本号&#xff0c;我们最终使用的是…...

2025年CNG 汽车加气站操作工考试真题练习

CNG 汽车加气站操作工考试真题练习&#xff1a; 一、单选题 1、CNG 加气站的核心设备是&#xff08; &#xff09;。 A. 压缩机 B. 储气瓶组 C. 加气机 D. 脱水装置 答案&#xff1a;A 解析&#xff1a;压缩机是 CNG 加气站的核心设备&#xff0c;其作用是将天然气压缩…...

B端网站建设,怎样平衡功能与美观,满足企业多元需求?

在当今数字化时代&#xff0c;B端网站不仅是企业展示自身形象和产品的重要窗口&#xff0c;更是实现业务转化和客户关系维护的关键平台。然而&#xff0c;B端网站建设面临着功能需求复杂与美观设计之间的平衡问题。如何在满足企业多元需求的同时&#xff0c;打造一个既实用又美…...

PTA:模拟EXCEL排序

Excel可以对一组纪录按任意指定列排序。现请编写程序实现类似功能。 输入格式: 输入的第一行包含两个正整数 n (≤105) 和 c&#xff0c;其中 n 是纪录的条数&#xff0c;c 是指定排序的列号。之后有 n 行&#xff0c;每行包含一条学生纪录。每条学生纪录由学号&#xff08;6…...

Edge浏览器安卓版流畅度与广告拦截功能评测【不卡还净】

安卓设备上使用浏览器的体验&#xff0c;很大程度取决于两个方面。一个是滑动和页面切换时的反应速度&#xff0c;另一个是广告干扰的多少。Edge浏览器的安卓版本在这两方面的表现比较稳定&#xff0c;适合日常使用和内容浏览。 先看流畅度。Edge在中端和高端机型上启动速度快&…...

Qt 核心库总结

Qt 核心库&#xff08;QtCore&#xff09; QtCore 是 Qt 框架的基础模块&#xff0c;提供非图形界面的核心功能&#xff0c;是所有 Qt 应用程序的基石。它包含事件循环、信号与槽、线程管理、文件操作、字符串处理等功能&#xff0c;适用于 GUI 和非 GUI 应用程序。本文将从入…...

四大wordpress模板站

WP汉主题 WP汉主题是一个专注于提供高质量WordPress中文主题的平台。它为中文用户提供了丰富的WordPress主题选择&#xff0c;包括但不限于企业网站模板、外贸建站模板等。WP汉主题致力于帮助用户轻松搭建专业的中文网站&#xff0c;无论是企业官网还是个人博客&#xff0c;都…...

Linux之 grep、find、ls、wc 命令

Linux之 grep、find、ls、wc 命令 “ 在 Linux 世界中&#xff0c;命令行是不可或缺的一部分&#xff0c;而掌握一些常用的命令可以帮助你更有效率地管理文件和系统。本文将为你介绍四個基礎而强大的 Linux 命令&#xff1a;grep、find、ls 和 wc&#xff0c;带你开启高效文件…...

SFC的含义

SFC 即 Single File Component&#xff0c;也就是单文件组件&#xff0c;在现代前端开发尤其是 Vue.js 框架中被广泛应用。下面将从概念、结构、优势、工作原理和应用场景几个方面详细介绍 SFC。 概念 单文件组件是一种将一个组件的模板&#xff08;HTML&#xff09;、逻辑&a…...

Qt 性能优化总结

Qt 性能优化总结 本文简单解析 Qt 应用程序的性能优化策略&#xff0c;涵盖 GUI 渲染、内存管理、信号与槽、QML 性能等核心领域&#xff0c;并通过具体示例展示优化效果。 1. Qt 性能优化简介 性能优化目标是减少资源消耗&#xff08;如 CPU、内存、GPU&#xff09;、提高响…...

亚马逊关键字搜索数据通过 Product Advertising API 来获取

亚马逊关键字搜索数据主要通过 Product Advertising API 来获取。 以下是使用该接口进行关键字搜索的一般步骤&#xff1a; &#xff08;测试示例&#xff09; 注册开发者账号&#xff1a;访问亚马逊开发者中心&#xff0c;完成三方供应商注册并同意相关开发者协议&#xff0…...

现代C++的范式演进与工程实践深度解析(本文序号不知道怎么整的,有点问题)

引言:C++的复兴时代 在经历了"已死语言"的质疑后,现代C++正迎来前所未有的复兴。据2024年TIOBE指数显示,C++以8.33%的占比稳居第三,较2020年上升2.1个百分点。这种复兴并非偶然——随着C++20标准的全面落地和C++23特性的逐步实现,这门已有40年历史的语言正在系…...

第二十五天 - Web安全防护 - WAF原理与实现 - 练习:请求过滤中间件

一、Celery核心机制解析 1.1 分布式架构四要素 # celery_config.py BROKER_URL redis://:passwordlocalhost:6379/0 # 消息中间件 RESULT_BACKEND redis://:passwordlocalhost:6379/1 # 结果存储 TASK_SERIALIZER json ACCEPT_CONTENT [json] TIMEZONE Asia/Shanghai核…...

springboot自定义starter(避坑教学)

在实际开发中&#xff0c;经常会定义一些公共组件&#xff0c;提供给各个项目团队使用。而在springboot的项目中&#xff0c;一般会将这些公共组件封装为springboot的starter。 1.命名规范 Spring官方Starter通常命名为 spring-boot-starter-{name} 如&#xff1a;spr…...

Python 实现日志备份守护进程

实训背景 假设你是一名运维工程师&#xff0c;需要为公司的监控系统开发一个简单的日志备份守护进程。该进程需满足以下需求&#xff1a; 后台运行&#xff1a;脱离终端&#xff0c;长期监控指定目录&#xff08;如 /var/log/app/&#xff09;中的日志文件。自动备份&#xf…...

详解JVM的底层原理

目录 1.JVM的内存区域划分 1&#xff09;程序计数器&#xff08;Program Counter Register&#xff09; 2&#xff09;元数据区&#xff08;Metaspace&#xff09; 3&#xff09;虚拟机栈&#xff08;Java Virtual Machine Stacks&#xff09; 4&#xff09;堆&#xff08…...

制表符是什么?与.txt文件的关系?

李升伟 整理 制表符&#xff08;Tab&#xff09;是一种控制字符&#xff08;ASCII码为9&#xff0c;Unicode为\u0009&#xff09;&#xff0c;用于在文本中创建水平间距。它的作用类似于键盘上的 Tab 键&#xff0c;通常表现为光标跳转到下一个预设的“制表位”&#xff08;一…...

【专题刷题】双指针(三):两数之和,三数之和,四数之和

&#x1f4dd;前言说明&#xff1a; 本专栏主要记录本人的基础算法学习以及LeetCode刷题记录&#xff0c;按专题划分每题主要记录&#xff1a;&#xff08;1&#xff09;本人解法 本人屎山代码&#xff1b;&#xff08;2&#xff09;优质解法 优质代码&#xff1b;&#xff…...

Java八种常见的设计模式

一、单例模式 单例模式是&#xff08;Singleton Pattern&#xff09;Java中最常用的设计模式之一&#xff0c;它保证一个类仅有一个实例&#xff0c;并提供一个全局访问点。 实现单例模式的核心是将类的构造方法私有化&#xff0c;以防止外部直接通过构造函数创建实例。同时&am…...

用Prompt 技术【提示词】打造自己的大语言智能体

机器如何按照人类的指令执行任务的探索 机器需具备理解任务叙述的能力&#xff0c;以便能够按照人类的指令执行任务&#xff0c;为机器提供一些范例作为参考&#xff0c;使其能够理解该执行的任务类型。这样的学习方式称为“Instruction learning”&#xff0c;透过精心设计的…...

灵鉴 AI五大核心能力洞穿 “数据黑箱”云取证深度支持8大核心应用

本文关键词&#xff1a;灵鉴AI 、电子数据取证分析AI助手、云取证、DeepSeek大模型 1.灵鉴AI &#xff0c;V1.0深度融合DeepSeek大模型技术&#xff0c;破解行业痛点&#xff0c;5大核心能力&#xff0c;让大模型真正“懂”电子数据分析。 2.LX-A216云取证系统&#xff0c;V2.…...

了解高速设计的信号完整性仿真

高速设计需要精确的信号传输&#xff0c;以确保最佳性能。信号完整性差会导致关键应用中的误码、数据损坏甚至系统故障等问题。介电常数、损耗角正切和插入损耗等因素会显著影响信号质量。通过使用信号完整性仿真&#xff0c;您可以及早发现并解决这些挑战。这种主动方法有助于…...

用 Deepseek 写的html油耗计算器

在油价高企的今天&#xff0c;了解自己爱车的真实油耗情况对每位车主来说都至关重要。本文将介绍一个简单实用的油耗计算方法&#xff0c;并提供一个可以直接使用的HTML油耗计算器。 为什么要计算油耗&#xff1f; 计算油耗不仅能帮助我们&#xff1a; 了解车辆的真实燃油经济…...

SAP系统青果糖无法报工

问题:班长说工单号4100000101青果糖工单 无法报工 原因排查:工单4100000101的工艺路线版本错误,选了版本1的,版本1是委外的工艺,本厂生产应该选版本2. 解决&#xff1a; 1&#xff1a;重读主数据,更改工单4100000101的工艺路线版本. 2&#xff1a;工单成品已交库,不能直接更改工…...

GPU 招投标全流程分析与总结

GPU 招投标全流程分析与总结 招投标流程概述 以下是通过代理商采购Nvidia H20-GPU 141G的招投标全流程分析: #mermaid-svg-hMPPfkCpGj8GKXfV {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-hMPPfkCpGj8GKXfV .er…...

Centos7.6安装JDK 1.8教程

前提&#xff1a;先把jdk1.8文件上传到usr/local目录下&#xff0c;文件名如&#xff1a;jdk-8u151-linux-x64.tar.gz 1. 解压 JDK 压缩包 假设 jdk-8u151-linux-x64.tar.gz 文件位于 /usr/local 目录下。 进入 /usr/local 目录&#xff1a; cd /usr/local 解压文件&#…...

Golang errors 包快速上手

文章目录 1.变量2.类型3.函数3.1 New3.2 Is简介函数签名核心功能示例代码使用场景注意事项小结 3.3 As简介函数签名核心功能示例代码使用场景注意事项小结 3.4 Unwrap简介函数签名核心功能使用示例使用场景注意事项小结 3.5 Join简介函数签名核心功能使用场景注意事项小结 4.小…...

新型多机器人协作运输系统,轻松应对复杂路面

受到鱼类、鸟类和蚂蚁等微小生物体协作操纵的启发&#xff0c;研究人员开发了多机器人协作运输系统&#xff08;Multirobot Cooperative Transportation Systems&#xff0c;MRCTS&#xff09;运输单个机器人无法处理的重型超大物体&#xff0c;可用于搜救行动、灾难响应、军事…...

易境通国际货代系统:如何解决货代物流行业的棘手难题

国际货代行业作为全球贸易的重要纽带&#xff0c;面临着日益复杂的市场环境和客户需求。然而&#xff0c;随着业务规模的扩张和多变的市场需求&#xff0c;传统的粗放式管理模式逐渐暴露出效率低下、成本失控、风险难控等问题。尤其在跨境电商高速发展的背景下&#xff0c;货代…...

基于springboot医药连锁店管理系统(源码+lw+部署文档+讲解),源码可白嫖!

摘要 当今社会已经步入了科学技术进步和经济社会快速发展的新时期&#xff0c;国际信息和学术交流也不断加强&#xff0c;计算机技术对经济社会发展和人民生活改善的影响也日益突出&#xff0c;人类的生存和思考方式也产生了变化。传统医药连锁店管理采取了人工的管理方法&…...

Vue 3 reactive 和 ref 区别及 失去响应性问题

在 Vue 3 中&#xff0c;reactive 和 ref 是实现响应式数据的两个核心 API&#xff0c;它们的设计目标和使用场景有所不同。以下是两者的详细对比&#xff1a; 1. 基本定义与核心功能 特性reactiveref作用创建对象类型的响应式代理&#xff08;对象、数组、Map 等&#xff09…...

d3.js绘制单/多面板组合箱线图

用d3.js研发了个可以单面板、多面板展示的组合箱线图&#xff1b; 组合箱线图中包括普通散点、蜂群散点、小提琴图、小提琴箱线图、柱状图、误差棒、离群点等等&#xff0c;其中大部分你能想到的配置都是自行传参调整的&#xff0c;你想不到的也能稍作修改然后自行调整&#x…...

第二十四天 - 分布式任务队列 - Celery高级应用 - 练习:分布式监控任务系统

一、Celery核心机制解析 1.1 分布式架构四要素 # celery_config.py BROKER_URL redis://:passwordlocalhost:6379/0 # 消息中间件 RESULT_BACKEND redis://:passwordlocalhost:6379/1 # 结果存储 TASK_SERIALIZER json ACCEPT_CONTENT [json] TIMEZONE Asia/Shanghai核…...

IDEA使用jclasslib Bytecode Viewer查看jvm字节码

学习jvm的时候&#xff0c;想查看字节码和局部变量表&#xff0c;可以使用idea安装jclasslib Bytecode View插件查看。 &#xff08;1&#xff09;安装工具&#xff1a; 安装完成后需要重启idea. &#xff08;2&#xff09;准备一段代码&#xff0c;编译运行 package com.te…...

list.

列表类型是用来存储多个有序的字符串&#xff0c;列表中的每个字符串称为元素&#xff08;element&#xff09;&#xff0c;⼀个列表最多可以存储个元素 在 Redis 中&#xff0c;可以对列表两端插入&#xff08;push&#xff09;和弹出&#xff08;pop&#xff09;&#xff0c;…...

202520读书笔记|《我要按自己喜欢的方式去生活》——面对可能到来的裁员,那就等正式通知吧

《我要按自己喜欢的方式去生活》作者宝夏夏&#xff0c;很赞的一本书&#xff0c;通透真实&#xff0c;不矫揉造作&#xff0c;直击内心。 因为第一个故事&#xff0c;裁员而进来的。早晨睡眼惺忪醒来&#xff0c;闺蜜半夜发来一大段话&#xff0c;大意是公司在缩减成本裁员&am…...

Linux 文件传输:系统数据交互的动脉

前言&#xff1a;sshd 在Linux系统中&#xff0c;文件传输常依赖于SSH协议&#xff08;Secure Shell&#xff09;&#xff0c;而sshd&#xff08;OpenSSH Daemon&#xff09;是负责处理SSH连接的后台服务程序。通过sshd&#xff0c;用户可以在加密的通道中进行安全的远程登录、…...

Rust + WebAssembly 生产部署指南

1 最小可行部署&#xff08;MVP&#xff09; 前端打包wasm-pack build --target web --release # 生成 .wasm JS 包装器 npm run build / vite build / webpack … # 打包 HTML/CSS/JS 资源拷贝产物 到生产服务器的站点目录dist/ ├── index.html ├── pkg…...